How to configure and customize Content Query Web Part in SharePoint (2)

Previously, a blog completed the Content Query web part configuration. Using this blog, we can easily retrieve data from the SharePoint list and display the data on the page. The results are as follows:

Although the data is read, how can we customize the layout and style of the item to meet our needs? This blog will take you to complete the custom work. In fact, the way to complete this task is to modify the xslt related to this web part to format the data. First, there are three xslt files related to the Content Query web part, as shown below:

File Name	Directory	Description
ContentQueryMain. xsl	\ Style Library \ XSL Style Sheets \ ContentQueryMain. xsl	This file is used to take charge of the overall structure of the web part. It defines some logic and functions and calls Header. xsl and ItemStyle. xsl when appropriate.
ItemStyle. xsl	\ Style Library \ XSL Style Sheets \ ItemStyle. xsl	This file is used to define the style of each Item. Some styles are pre-defined for our use, and the Item style can be customized.
Header. xsl	\ Style Library \ XSL Style Sheets \ Header. xsl	This file defines how the template displays headers and ensures the consistency of all group headers.

 

In most cases, we only need to care about the ItemStyle. xsl file. Of course, there may be changes to the other two files according to the project's needs. Here we only need to modify ItemStyle. this file is xsl, because these three files are built-in by default. In order not to affect other web parts, we need to create a folder separately, copy a copy to our folder and make custom modifications. The procedure is as follows:

1. Open the site with SPD, create a folder named NewsAndEvents in the/Style Library/XSL Style Sheets/directory, and copy the three files above to the folder:

2. export the web part configured on the page to the local disk, and modify the paths of the three xslt files and the attributes of CommonViewFields, modifying this attribute mainly adds custom fields so that they can be referenced in xslt before being render to the page, because the web part has four fields by default: Title, Description, LinkUrl, and ImageUrl, therefore, we only need to add other custom fields used in xslt in the format of "InternalName, FieldType". Separate multiple fields with semicolons, as shown below:

<property name="MainXslLink" type="string">/Style Library/XSL Style Sheets/NewsAndEvents/ContentQueryMain.xsl</property>

<property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/NewsAndEvents/ItemStyle.xsl</property>

<property name="HeaderXslLink" type="string">/Style Library/XSL Style Sheets/NewsAndEvents/Header.xsl</property>

 

<property name="CommonViewFields" type="string">LearnMoreLink,URL;Summary,Note;</property>

3. Save the modified web part, import it to the page, and change the title of the web part to "News browsing"

4. Modify the ItemStyle. xsl file to add our custom ItemStyle, including the layout and style as follows:

 

5. Expand the Presentation attribute in the web part on the Edit page. In the Item Style drop-down box, select the newly defined NewsItemStyle.

6. Save the web part and check in the page. Then we can see the layout and style we want:

 

Okay. Write it here this time and continue later.