How to Customize SharePoint List Content Display using Content Query Web Part

 

Editor’s note: Contributor Melick Rajee Baranasooriya is a Senior Software Engineer at IronOne Technologies. Follow him @MelickRajee

I’m going to describe how we can use a Content Query Web Part to Style a SharePoint List. Let’s start with a SharePoint List Called Projects with the following fields.

2012-01-25-CustomizeSPList-01.png

As you probably already know the default look and feel would appear like this:

2012-01-25-CustomizeSPList-02.png

Now I’m going to render this list into a format similar to below:

2012-01-25-CustomizeSPList-03.png

Step One

First you need to define some names for these place holders (I know this may not make much sense to you. But don’t worry about it and please complete these steps). I’m going to define the columns as follows.

  • Title –> MyTitle
  • Logo –> MyLogo
  • Project Summary –> MySummary
  • Project Description –> MyDesc

Step Two

Now you want to define a XSL Style Sheet using these names. Therefore I’m going to use <table> to layout the list item as below.

Here I used XSLT to position the content inside my html tags. There are a few attributes which are mandatory in this section. ;

  • Name and Match should have equal names.
    • name =’X’ match=Row[@style=’X’]
  • mode = ‘itemstyle

Now you have created XSLT which can be given as a list style in SharePoint.

Step Three

Here we are going to put XSLT to SharePoint.

First you need to open SharePoint Designer with the particular site. Then navigate to All Files and Style Library.

2012-01-25-CustomizeSPList-04.png

You can see many Folders inside. Go to the XSL Style Sheet Folder.

2012-01-25-CustomizeSPList-05.png

You’ll see XSL files which are used by SharePoint to render its content. Here we are using ItemStyle.xsl for enabling custom rendering.

2012-01-25-CustomizeSPList-06.png

Open this xsl file and put your xsl (which we created in step two) at the bottom of the xsl as follows.

2012-01-25-CustomizeSPList-07a.png

The hardest part is now over.

Step Four

  • Add a Content Query Web Part
  • 2012-01-25-CustomizeSPList-07.png

  • Go to edit web part and browse your list. (here our list is Our Projects)
  • 2012-01-25-CustomizeSPList-08.png

  • Then go to the presentation section and go a little bit down. You’ll see the style drop down.
  • Wow .. Now you can see your style.
  • 2012-01-25-CustomizeSPList-09.png

  • Select your custom xsl (here MySample).
  • Once selected you’ll see something like below.
  • 2012-01-25-CustomizeSPList-10.png

  • Now you need to add actual list column names to these text boxes as follows.(Title column should use the scope)
  • 2012-01-25-CustomizeSPList-11.png

  • Then Click ok to Save. You can see your new list rendering now.
  • 2012-01-25-CustomizeSPList-12.png

Happy SharePoint :)