Transforming SharePoint Announcement Display Form into News Article Style

When viewing a SharePoint list such as, announcements, the display form presents with two column table format and default colour style (see below). Whilst this looks ok and provides us with the right information but it looks like a record.

image

This post will show and explain how you can transform a default announcement display form into a news article page layout style and look more appealing to end user.
In order to create a new display form and little customisation we will need to work with SharePoint Designer 2010 (free download).
So let’s begin with the task. Open your SharePoint site in the SharePoint Designer and navigate through Site Objects to the Announcement list.

From the ribbon, click List Form. You will be presented with Create New List Form dialog box.
Fill out the File Name (I called it NewsArticle), select Display item form, tick the checkbox to set the default form and make sure the content type to use option selected is Announcement and click OK.

image

We will now open our newly created NewsArticle form and start customising within SharePoint Designer 2010. In particular, we will work within the DataForm webpart and in Split mode window.

image

You will notice that the data items are contained within a table. Select the first column containing labels Title, Body and Expires and delete this column.

Increase the font size of the title text to Large (18 pt).

The Expiry date needs to be in en-gb date format. So we replace select=”@Expiry” with  select="ddwrt:FormatDate(string(@Expires), 2057, 1)"

Within each table data (view the code) there is a class associated called ms-formbody which provides the style properties like background colour. So we will delete class=ms-formbody to have a white background.

That’s it! You can of course add picture(s) column to the Announcement list and the ability to display picture.

image

Whilst the page layout templates are available through publishing features to achieve a similar look and feel, the publishing feature is only available in standard edition or higher. So you can see how this important technique can be applied and for that matter to any SharePoint lists on any SharePoint product versions.

Hope you have found this post useful.

Advertisements
Tagged with: , , ,
Posted in SharePoint
One comment on “Transforming SharePoint Announcement Display Form into News Article Style
  1. […] article was originally posted here, on the Chirag Patel blog. .gplus #___plusone_0, .gplus #___plusone_1,.gplus #___plusone_2, […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Speaking Engagements

SharePoint Saturday Cambridge 2017
9 September 2017

SharePoint Saturday Barcelona 2017
28 October 2017

Collab 365 Global Conference 2017
1-2 November 2017

Categories
%d bloggers like this: