I had no idea how those news-like web parts were created until recently when I decided to try it out. I didn’t invent this myself, of course, thanks to Google, and lots of SharePoint gurus who care to share. Also, I have to say, this is a really plain and simple web part I managed to create. After all, I am only a beginner in this journey. OK, let’s get started.
Add a custom field to a Content Query Web Part
In a standard CQWP, the fields available are Link, Image, Title and Description. I wanted to add the Article Date so it’s more like a News summary web part. This is done through modifying the XSL style sheet, the file name is ItemStyle. Instead of change the default one, I’m going to create a custom XSL file.
- Site contents > Style Library > XSL Style Sheets
- Download the ItemStyle file, save as ‘CustomItemStyle’ and use an Editor to open the file.
- Copy the lines of the Default Style and copy it right after the lines.
- Edit the new style name by replacing the first line with
Note: This will be the Item style name your users can select.
- Go to the bottom of this style, just above < div class=”description”>, insert
< div class="article-date"> < xsl:value-of select="ddwrt:FormatDate(@DisplayDate, 2057, 3)"/> < /div>
1. DisplayDate will be the field name for displaying the article date of an item.
2. By default, the date will be formatted to YYYY-MM-DD hh:mm:ss. The format bit I added in makes the dates look like this 23 June 2016.
3. For this FormatDate function to work, you will need this line at the beginning of the file.
4. Remove the space after < in each line for the code to work
- Save the XSL file and upload it to the XSL Style Sheets library.
- Check in and publish as a major version
Create a custom Content Query Web Part
Now, we need to point the Content Query Web Part to the custom style file we just created.
- On a page, add a Content Query Web Part
- Edit the Web Part properties and change anything that you wanted to include it into the custom web part. For example, I change the Web Part title to be News.
- Click the down arrow and click Export
- Edit the exported file in a text editor
- Edit the node with the name “ItemXslLink” to be /sites/[sitecollection]/Style%20Library/XSL%20Style Sheets/CustomItemStyle.xsl
- Save the file.
Upload the custom web part
The last thing we do here is to upload the web part file into the site collection.
- Site Settings, Click Web parts under Web Designer Galleries
- From the Files tab, select upload
- Rename the web part if you want to, and select/create a Web Part group for it.
Add the custom web part to a page
You will find the web part in the group you selected in the previous step. As you edit the properties of the web part, note the style “WithArticleDate” is available with an additional line for DisplayDate.
Here is my end product
Thanks to the authors of the following articles: