How to Display Custom Fields in Content Query WebPart in Sharepoint 2013

  • For displaying custom fields in a Content QueryWebpart:

    • You need to customize the two files Content Query.webpart and Content Query Main .xsl.
     
  • First we create one Blank Webpart Page in SharePoint 2013 and add a Content QueryWebpart to the page.

    Blank WebPartPage
     
  • After adding CQWP, click on Edit Webpart.

    Edit WebPart
     
  • And click on the Browse button for selecting the datasource (Custom List) .

    Select DataSource
     
  • After selecting the datasource you can select List Type, Content Type and click on the Apply then OK buttons.
     
  • After pressing the Ok button, your data will show-to-display-custom-fields-in-content-query-webpart-in-sharepoint with only one field (Title) and if you want to display other fields data also then you need to export the webpart.

    Export WebPart
     
  • Save that webpart file with whatever name you want with the extension .webpart. (Suggestion: please rename the file, don't use the default file name of that webpart.)
     
  • Next Step: Go to Site Contents-> Style Library -> XSL Style Sheets -> Content Query Main .xsl.

    XSL Style Sheet
     
  • Download the Content Query Main .xsl and rename it.
     
  • After downloading these two files (Content Query.webpart and Content Query Main .xsl), you need to modify both of the files to display custom fields data.

Content Query.webpart

In this file, you will modify the following properties:

  • <property name="Xsl"

    Xsl Property

    Map the path of your Content Query Main .xsl file (in the above example: the name of the file is DummyContentQueryMain.xsl).
     
  • <property name="MainXslLink"

    Main XSLILink
     
  • <property name="XslLink"

    XslLink
     
  • <property name="CommonViewFields"

    Common ViewFields

Content Query Main .xsl

  • In this file, you will modify the for-each loop as in the following:

    Code View
     
  • In this for-each loop block, you will provide only those fields available in the CommonViewFields properties in the .webpart file.
     
  • After doing this, upload both of the files.
  • The XSL file will upload to the XSL Style Sheets folder under Site contents -> Style Library.
     
  • And the .webpart file will upload to the Web part Gallery: Site Settings-> Web Designer Gallery ->Web parts.
     
  • Now, you can add your customized Content Query Webpart (CQWP) to a page.