    
|
 | | |
Create a multi column layout with the content query tool web partSeptember 17, 2007 17:55In your Office Sharepoint Server 2007 site you can display a dynamic view of content on a page by using the Content Query Web Part. This post from Tyler Butler and this one from Heather Solomon helped me on my way. With the help of these blogs it is not very hard to create a single column presentation of your content. Every single item gets processed by the ItemStyle.xsl found in the Style library / XSL Style sheets section. But if you would like to order your content dynamically in 2 columns you will need to build some extra coding in the ItemStyle.xsl and in the ContentQueryMain.xsl, which is also found in the XSL Style sheets section. The default templates present our data in a single column: But for some sites we might want to show our data inside 2 columns:
If we want to be able to render 2 columns, the ItemStyle.xsl must know the item number which is currently being processed. To generate valid html we must also know when we are processing the last item, otherwise we might finish our table with an incorrect number of <td> tags. To provide our style in the ItemStyle.xsl with the 2 required parameters open up the ContentQueryMain.xsl file in your favorite text editor. Search for the tag “<xsl:call-template name=”OuterTemplate.CallItemTemplate”>” and modify it in the following way:
<xsl:call-template name=”OuterTemplate.CallItemTemplate”>
<xsl:with-param name=”CurPosition” select=”$CurPosition” /> <xsl:with-param name=”LastRow” select=”$LastRow” /> </xsl:call-template> This will pass the CurPosition and LastRow parameter to the OuterTemplate.CallItemTemplate which we must alter to accept the LastRow parameter. Search for the “<xsl:template name=”OuterTemplate.CallItemTemplate”>” template section and make sure you have the CurPostion and LastRow parameters in the top section of the template:
<xsl:template name=”OuterTemplate.CallItemTemplate”>
<xsl:param name=”CurPosition” /> <xsl:param name=”LastRow” /> <xsl:choose> <xsl:when test=”@Style=’Multicolumn_example’”> <xsl:apply-templates select=”.” mode=”itemstyle”> <xsl:with-param name=”CurPos” select=”$CurPosition” /> <xsl:with-param name=”Last” select=”$LastRow” /> </xsl:apply-templates> </xsl:when> <xsl:otherwise> <xsl:apply-templates select=”.” mode=”itemstyle”> </xsl:apply-templates> </xsl:otherwise> </xsl:choose> </xsl:template> Inside the same template section add a <xsl:when> node for every template that should access the new parameters. Take a look at the <xsl:when test=”@Style=’Multicolumn_example’”> section to see how the parameters are provided. Now we are finished with the changes in the ContentQueryMain.xsl file and it’s time to open up our ItemStyle.xsl file to add the Multicolumn_example style. In the example below I created a tableStart variable which will only render when our CurPos equals 1. This variable will add a table tag. The tableEnd variable will render the closing tags when our CurPos equals the Last item number. Inside the tableRowItem variable we place the html content that is used for the single item. The content of this item is the same for the left and for our right column. The logic that renders the right and left column is put into the tableRow variable.
<xsl:template name=”Multicolumn_example” match=”Row[@Style='Multicolumn_example']” mode=”itemstyle”>
<xsl:param name=”CurPos” /> <xsl:param name=”Last” /> <xsl:variable name=”tableStart“> <xsl:if test=”$CurPos = 1″> <![CDATA[<table width="100%" border="0">]]> </xsl:if> </xsl:variable> <xsl:variable name=”tableEnd“> <xsl:if test=”$CurPos = $Last”> <![CDATA[</table>]]> </xsl:if> </xsl:variable> <xsl:variable name=”tableRowItem“> <![CDATA[<td>]]><xsl:value-of select=”@Title”/><![CDATA[</td>]]> </xsl:variable> <xsl:variable name=”tableRow“> <xsl:choose> <xsl:when test=”$CurPos mod 2 = 1″> <![CDATA[<tr>]]> <xsl:value-of select=”$tableRowItem” disable-output-escaping=”yes”/> <xsl:if test=”$CurPos = $Last”> <![CDATA[<td></td></tr>]]> </xsl:if> </xsl:when> <xsl:otherwise> <xsl:value-of select=”$tableRowItem” disable-output-escaping=”yes”/> <![CDATA[</tr>]]> </xsl:otherwise> </xsl:choose> </xsl:variable> <xsl:value-of select=”$tableStart” disable-output-escaping=”yes”/> <xsl:value-of select=”$tableRow” disable-output-escaping=”yes”/> <xsl:value-of select=”$tableEnd” disable-output-escaping=”yes”/> </xsl:template> Inside the tableRow variable I made use of the mod calculation “$CurPos mod 2 = 1″ to decide in which column the content should be processed. It returns false if the current position can be divided by 2 and true if it can’t. We add an extra “$CurPos = $Last” check in the left column to render an empty right column when it is the last item. On the bottom of our template we combine all logic by calling the defined variables. That’s it! Now select the “Multicolumn_example” style in your content query tool webpart and you should see your content divided over 2 columns. Click here to download the modified xsl files in this example. [update 15-11-2007]
14 Comments »RSS feed for comments on this post. TrackBack URL Leave a comment |
 |
|
Maybe it’s just the way i’ve done this, but don’t you loose the hyperlink to the content when implementing this?
Comment by Richard — October 5, 2007 @ 1:05 pm
@Richard. Yes but that’s only to keep the demo as simple as possible.
Just look at the other templates in the ItemStyle.xsl. For example copy the SafeLinkUrl, LinkTarget and DisplayTitle variables from the “TitleOnly” template and then paste
<xsl:value-of select=”$DisplayTitle” />
</a>
inside my tableRowItem variable to make it work with the hyperlinks.
Comment by Edwin Vriethoff — October 5, 2007 @ 2:01 pm
hey is there anyway to create more than 2 columns. I want to create 5 column for an image gallery. Any help would be much appreciated.
Comment by chia weng yan — October 31, 2007 @ 2:27 am
I am using your tutorial and for some reason the CQWP is not displaying the data in columns correctly. It is like the xsl is not finding the first link in my list, therefore never creates the opening tag when $CurPos = 1
because of that the displayed data does not look good.
any ideas?
Comment by jeff — November 1, 2007 @ 2:39 pm
oh also, is it possible to have the data displayed in the two columns with Record 1-10 on the left columb and Records 11-20 on the right column?? not like
1 2
3 4
5 6
7 8
9 10
but like
1 6
2 7
3 8
4 9
5 10
thanks!
Comment by jeff — November 1, 2007 @ 2:43 pm
@chia weng yan. Yes it is possible. You have to play around a bit with the mod function. Click here for a 5 column example file. The table closing is not completely right yet, but it should be rendered correctly.
Comment by Edwin Vriethoff — November 1, 2007 @ 9:03 pm
@jeff. I can only check what goes wrong when i can see your xsl file. Just e-mail it to me if you want to.
If you would like the items to be displayed in that order, you have to generate it into 2 tables. You start the second table when you reached 50% of the items. Click here to download a full working example.
Comment by Edwin Vriethoff — November 1, 2007 @ 9:36 pm
Can’t you achieve this whole thing by simply using the presentation properties from the CQWP?
- you group by Title
- set the number of columns to 2
- set the Group Style to Whitespace so the Group Title is not displayed
Comment by thomek — November 13, 2007 @ 4:33 pm
@Thomek. Thanks for your suggestion. I tried it and for a lot of situations it works fine. I added your tips to the post.
Comment by Edwin Vriethoff — November 15, 2007 @ 9:07 am
I thought I knew SharePoint MOSS 2007, but it looks like I’m a total n00b.
Today I installed SharePoint Designer 2007 for the first time.
I looked for ContentQueryMain.xsl and ItemStyle.xsl but I couldn’t find those files. In fact, I couldn’t find any .xsl file at all!
Could you please give me a gentle nudge in a good direction?
Comment by Amedee — September 3, 2008 @ 4:11 pm
@Amedee: Hi Amedee,
If you have a publishing site you can visit the “View all site content” page and then open the “Style Library” list. In there you will see a “XSL Style Sheets” folder which contains the xsl files.
You can also use Sharepoint designer to open the site. There you will find the “Style Library” folder inside the root of the site. I believe your site has to be a Publishing Site to have these folders.
Comment by Edwin Vriethoff — September 4, 2008 @ 1:00 pm
Ok, my site probably isn’t a Publishing Site. Thank you.
I think I found some other way to do what I want, with SharePoint Designer. I feel a bit like that Frenchman who deciphered the ancient Egyptian hieroglyphs using only a stone tablet. I’m learning an entirely new and (for me) alien language…
Comment by Amedee — September 5, 2008 @ 9:18 am
Thanks a lot. Made some things clear to me.
Comment by Michiel — September 22, 2008 @ 10:40 am
I am using the the grouping in Content query webpart in MOSS. The webpart shows only 5 groups, but there is more than 5 groups. The rest of the groups are displayed at the top of the webpart. The grouping is not working properly. How can I make the Content query web part shows more then 5 groups? Thanks
Comment by Ibrahim — December 11, 2008 @ 6:49 am