helloitsliam

So in the last post we looked at some of the basic Content Query Web Part functionality within SharePoint 2010. In this post we will go a little deeper and look at how items are tied together with the new tool pane UI and the XSL renderings. So firstly let's revisit the options. When you add a CQWP you have the ability to set specific fields values that you wish to use.

The fields will change depending on the XSL that is being used. So let me explain how this works together, if I am incorrect or slightly out then please someone feel free to correct me. Firstly the bits that are tied together are:

1. CQWP Tool Pane UI
2. CQWP Data Mappings within the ".webpart" file
3. Select XSL for "ItemStyle"

Now having used the new web part I thought it would be great if we could expose properties that we decide then users would never need to go through the modify web part file every time they needed the right fields to show. Instead what I wanted to do was to make it more generic so I could have 6 properties that are exposed in the UI, with a specific XSL style that would simply look for these values and render them accordingly. So this is how it works.

Firstly you will need to work with XSL, if you are not familiar then you should be by now, and you will really need to know it. So for this I am going to do a couple of things.

1. Create a copy of the "ItemStyle.xsl"
2. Export the CQWP Web Part
3. Make modifications to the Exported CQWP and Upload

If you don't want to do the last step and you are happy to modify the out-of-the-box "ItemStyle.xsl" then you can ignore that step.

So firstly let's export our CQWP and save this somewhere.

I have saved mine to my desktop and renamed it as "LiamContentQueryWebPart.webpart". Now we need to make a copy of the "ItemStyle.xsl" if you are doing this step.

I then renamed this file to "LiamItemStyle.xsl", as you can see in the image above.

So now let's open up the copied XSL file and we need to modify it slightly. I removed all the lines and replaced it with the following:

I want you to take special note to the following in the XSL:

If we go back and check the list I am using for data you will notice that I do not have any metadata columns with that name at all.

So now let me edit the web part file and make the following change to the "ItemXslLink" parameter.

Now we save the web part file and upload the two files then add the web part to the page.

To add the web part simply select the upload option on the web part screen.

When it is upload it will display in the new category called "Uploaded Web Part", add this to the page.

It should then render as shown below:

Notice now if we edit the web part and select the presentation section of the tool part, it should now show us the fields we added to the XSL.

If we now specific some existing fields that we wish to use, as with the existing ones, so an example could be:

The content is then rendered as shown below:

Notice now how it show the title of the document, then the metadata field which is in fact the "DocumentType" field and then the "DocumentAuthor" is shown using the "Created By" internal field. Now this is massive, this means I can create all of my different styles with its accompanying CSS and then let users select the style they want and complete then use any field they wish to display. So my initial idea of issuing clients a batch of custom XSL and CSS styles, which would then surface the fields inside the web part which they can then complete with a single or multiple fields works.

Just for further details if you were to now export the web part file down you have on the page you would see that the "<property name="DataMappings" type="string">" section has those extra properties added and mapped to the fields you selected to show.

I hope this is useful. This makes the CQWP even more flexible than before!! J