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

Chirag is an Independent Consultant at Patel Consulting, Chartered IT Professional, TOGAF9 Certified Architect and Microsoft Certified Solution Expert (Productivity, Data Platform) based in London, UK with more than 15 years of industry experience. He works with a wide variety of clients in many sectors, designing and implementing business collaboration, data and information management solutions and services based on SharePoint and Office 365 technologies to create business value for both themselves and their customers, including UK Microsoft Gold Partners with deployment, upgrade and migration services delivery. Chirag is an active SharePoint community participant, frequent speaker at local and international events including SharePoint Saturdays and Collab365. He is also one of the co-organisers of the SharePoint User Group UK (London) region. In 2011, for his valuable contributions to Microsoft TechNet forums he received a Microsoft Community Contributor Award. In his little spare time he enjoys cycling, cricket and every year participating in Charity bike rides and Duathlons. You can find him online at www.techchirag.com and follow Chirag on Twitter at @techChirag.

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

SharePoint Community

Categories
%d bloggers like this: