Personal Web & Sample Site
Skip Navigation Links
HOME |
About Me |
Articles
| Contact Us
Branding XSLT Style
Rating: 8141 user(s) have rated this article Average rating: 5.0
Posted by: joet, on 3/21/2010, in category "XML"
Views: this article has been read 16268 times
Location: Houston, Tx, United States
Abstract: I want to pass this along and avoid the headache of having to figure out the way to provide a news rollup on the landing page. I had mentioned before that you could make a copy of the article page layout and start with that but I did it another way. I did it with SharePoint Designer and then customized the page with the page fields and content type fields I wanted. First create the custom content type at the root based on the article layout. Then create the custom news page from SharePoint Publishing - Page Layout - "Options" under the group you selected to put it in and name the URL and Title.

I want to pass this along and avoid the headache of having to figure out the way to provide a news rollup on the landing page. I had mentioned before that you could make a copy of the article page layout and start with that but I did it another way. I did it with SharePoint Designer and then customized the page with the page fields and content type fields I wanted. First create the custom content type at the root based on the article layout. Then create the custom news page from SharePoint Publishing - Page Layout - "Options" under the group you selected to put it in and name the URL and Title.

I had written a lengthy step by step instructions on how to accomplish getting the news rollup on your home page with the “read more….” link on the end. Way to long and you should already know how to get that far because there's to many posts on the web that explain how to get it done. I just want to share this XSLT markup and save others the hassle and time of having to write it themselves.

Remember, I used the description page field, but you can also add another field of your choice to your custom page layout so long as you remember to add the editor control. You can also add a custom style to the div tag or a function to the value that can limit the amount of characters that show up on the news rollup. All-in-all very flexible.

<div class="link-item">
             <div style="color: black; font-size: small; font-family: Arial, Helvetica, sans-serif; line-height: -2%">
                    <xsl:value-of select="substring(@Description, 0)" disable-output-escaping="yes" />
                    <a href="{$SafeLinkUrl}" target="{$LinkTarget}" title="Read More"> .....Read More</a>
                  </div>
  
            </div>
        </div>
    </xsl:template>

 If you want to know the internal column names of those fields the CQWP is pulling create the following style in the Item Style sheet and give it you own custom name:

<xsl:for-each select="@*"> P:<xsl:value-of select="name()" /> </xsl:for-each>

There is another issue when applying a presentation style within your content query web part and you're using a link based content type. Any of the available styles out-of-the-box will render your lnks as (Blank) hyperlinks and if you click the link it navigates to, guess where? Back to the link item. Ok, so that's not going to work, so you need to export the web part to your local drive, open it in notepad, and change the commonfields property and identify the URL. It should looks like this:

<property name="CommonViewFields" type="string">URL,text</property>

Next, you need to modify the item style sheet. So take the xsl template style from the items style sheet like the "Title Description" template, and copy and paste at the bottom of the item styles sheet. Ok, now you need to dress up your link and have it use the URL you have listed. Change the name first to something like "Link Lists" or any name you prefer and change the code accordingly like so:

<xsl:template name="LinkLists" match="Row[@Style='LinkLists]" mode="itemstyle">
 <xsl:variable name="DisplayTitle">
        <xsl:call-template name="OuterTemplate.GetTitle">
            <xsl:with-param name="Title" select="@URL"/>
            <xsl:with-param name="UrlColumnName" select="'URL'"/>
        </xsl:call-template>
    </xsl:variable>
 <xsl:variable name="LinkTarget">
        <xsl:if test="@OpenInNewWindow = 'True'" >_blank</xsl:if>
    </xsl:variable>
 <div id="linkitem" class="item" >
  <div class="bullet link-item">
   <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
   <a>
    <xsl:attribute name="href">
     <xsl:value-of select="substring-before($DisplayTitle,', ')">
     </xsl:value-of>
    </xsl:attribute>
    <xsl:attribute name="title">
     <xsl:value-of select="@Description">
     </xsl:value-of>
    </xsl:attribute>
    <xsl:value-of select="substring-after($DisplayTitle,', ')">
    </xsl:value-of>
   </a>
  </div>
 </div>
</xsl:template>

\\

What makes up an XSLT sytlesheet are a set of rules?

  • The first one is the <xsl:template> and it's used for matching a pattern of characters. In this case it's the "Row[@Style="LinkLists]" mode="Itemstyle". You could assign the "/" which implies matching the root element, which means matching the entire source document, but we want to match the "Row[@Style='LinkLists'] and select the specific style named "LinkLists".
  • Notice the variables? The first variable is called DisplayTitle and it's made up of the two elements that are matched using the <xsl:call-template name="OuterTemplate.GetTitle">. the two elements <xsl: with-param name="" select="@"/>, match and extract the Title URL and the UrlColumnName URL. The link list title column will replace "BLANK", and the second param name will call the URL from the UrlColumnName.
  • The third variable is the "LinkTarget" and it uses the <xsl:if> element by using conditional logic with the test attribute to specify if an action should be taken. In this case if "@OpenInNewWindow = "True" then the URL attribute target is equal to, you guessed it "_blank" which will target the browser to open in a new window.  By the way, that's why it says BLANK because that part of xslt code was not changed and was like that from the beginning.
  • You will also notice the CSS div tags that dress up the list with bullets. Here you can use a different bullet style e.g. whatever your heart desires. The <xsl:value of> element is the XPath.
  • It locates and extracts the title, in this case the variable ($DisplayTitle,',), and uses the attribute name "href" to place the href attribute before the displaytitle variable using "substring-before". 
  • In the next <xsl:attribute name="title"> element this locates and extracts the description <xsl: value-of select="@Description">. If you remember the description is the URL title name but will be used as the ALT attribute of the href tag which will go after the DisplayTitle variable.
  • If I missed something please let me know but so far this is my understanding of XSL transformation and how it works and it has worked for me. Remember that XSLT is to XML what CSS is to HTML or XHTML if you prefer.

 

That's it,

One last important mention, the XML must conform, if any of the code is mispelled or incorrect you run the risk of breaking all of your web parts.You hope it's only the one you've imported but it can break all of your webparts within your entire site collection. That's bad news if you don't have a development environment and you're doing this in a live production environment.

Open the XSL Style Sheets library and open the itemStyle.xsl file. Choose the style you want to use and copy and rename it and paste down at the bottom of the page. Then take this markup and replace the description value or whatever value you chose.

 


How would you rate this article?

User Feedback

Post your comment
Name:
E-mail:
Comment:
Insert Cancel

Copyright © 2013 Jose M. Tamez
Last Updated August 18th 2013