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.


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.


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.


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.


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.

Chirag is an Independent Consultant at Patel Consulting, BCS Chartered IT Professional, TOGAF Certified Architect, Microsoft Certified Solution Expert (Productivity, Data Management and Analytics) and Microsoft Service Adoption specialist based in London, UK with more than 20 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 (London, Cambridge, Brussels, Paris, Madrid, Barcelona, UK, EMEA, India) and Collab365. 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 participating in Charity bike rides and Duathlons. You can follow Chirag on Twitter at @techChirag and find him online at

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: Logo

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Speaker at

%d bloggers like this: