Showing posts with label XSL. Show all posts
Showing posts with label XSL. Show all posts

Thursday, May 17, 2012

SharePoint 2010 : Call server side function from XSL.

Goal

To use a server side function from a XSL used in a web part.

Solution

It is simple to use a server side function. Just need to make sure the dll should be deployed in GAC. In this example I created a class with name "ClassName", the project name is "SampleApplication". Deployed the dll in GAC. Modify the XSL head and add xmlns:helper="SampleApplication.ClassName" on the head. "helper" is like an tag which will point to the class.

XSL
<xsl:stylesheet 
  version="1.0" 
  exclude-result-prefixes="x d xsl msxsl cmswrt helper"
  xmlns:x="http://www.w3.org/2001/XMLSchema" 
  xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
  xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
  xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  xmlns:helper="SampleApplication.ClassName">


SampleApplication.ClassName
#region System
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
#endregion

namespace SampleApplication
{
    public class ClassName
    {
        #region Properties
        
        /// <summary>
        /// Name 
        /// </summary>
        private static string Name = "Maulik Dhorajia";
        
        /// <summary>
        /// Today Date
        /// </summary>
        private static string TodayDate = System.DateTime.Now.ToString();

        #endregion

        /// <summary>
        /// Gets the property
        /// </summary>
        /// <param name="propertyKey"></param>
        /// <returns></returns>
        public static string GetProperty(string propertyKey)
        {
            if (propertyKey == "Name")
            {
                return Name;
            }
            else if (propertyKey == "TodayDate")
            {
                return TodayDate;
            }
            else 
            {
                return "";
            }
        }
    }
}


Calling the function from XSL
<xsl:value-of select="helper:GetLabel('Name')"/>
<xsl:value-of select="helper:GetLabel('TodayDate')"/>


This should be all to show the stuff on the page. Let me know if this helped.

Tuesday, November 1, 2011

SharePoint 2010 - Use custom ItemStyle settings in Content Query Web Part.

Friends, I know many might find it easy to use the Custom Item Style for a Content Query Web Part. But, still I will try and explain a small process in a simplified way. Let's see if this is helpful for the starters.

Goal

The main goal is to use a Custom List name "Sample" and use a Content Query Web Part to show it with custom design style.

Process

  1. Create a custom list with name "Sample". The should just have 3 fields.
    1. Title - This is the main text to be shown for the picture.
    2. Picture - This is the hyperlink column for the picture of the item.
    3. Skills - This is a simple multiple line comment for the item.
  2. Go to any page. Add a web part. Drop a Content Query Web Part(CQWP) on the page from "Content Rollup".
  3. Click "Open tool pane".
  4. Content Query Tool Part > Query > Source > Show items from the following list: > Select "SAMPLE"
  5. Content Query Tool Part > Query > Presentation > Please see the picture as a default setting. I am going to leave it as it is.
  6. Click "Save" and the view of the web part will be a default text one which is going to look like picture below.
  7. On Clicking the picture it goes to the display record screen.

But now moving back to our goal. We need to show the data in a custom design layout. So follow the below given steps.
  1. Open a SharePoint 2010 designer.
  2. All Files > Style Library > XSL Style Sheets > ItemStyle.xsl(Edit it in advance mode)
  3. Find this element, copy it and paste it at the bottom of the XSL.
    <xsl:template name="Default" match="*" mode="itemstyle">...</xsl:template>
  4. Change the name and match to Sample.
    <xsl:template name="Sample" match="Row[@Style='Sample']" mode="itemstyle">...</xsl:template>
  5. Also if you edit the web part you can now see the item in the ItemStyle list. Make changes to map the correct fields too.

  6. Make the changes to the xsl(As you want the view of the list) or can copy the whole block and paste it at the bottom of the ItemStyle.xsl.
    <xsl:template name="Sample" match="Row[@Style='Sample']" mode="itemstyle">
            <xsl:variable name="SafeLinkUrl">
                <xsl:call-template name="OuterTemplate.GetSafeLink">
                    <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
                </xsl:call-template>
            </xsl:variable>
            <xsl:variable name="SafeImageUrl">
                <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                    <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
                </xsl:call-template>
            </xsl:variable>
            <xsl:variable name="DisplayTitle">
                <xsl:call-template name="OuterTemplate.GetTitle">
                    <xsl:with-param name="Title" select="@Title"/>
                    <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
                </xsl:call-template>
            </xsl:variable>
            <table cellpadding="0" cellspacing="5" border="0" style="border:1px Solid #efefef;width:400px;">
                <tr>
                    <td style="width:100px" align="center">
                        <a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
                            <img class="image" src="{$SafeImageUrl}" title="{@ImageUrlAltText}" />
                        </a>
                    </td>
                    <td valign="top" align="left"><a href="{$SafeLinkUrl}" title="{@LinkToolTip}">
                      <xsl:if test="$ItemsHaveStreams = 'True'">
                        <xsl:attribute name="onclick">
                          <xsl:value-of select="@OnClickForWebRendering"/>
                        </xsl:attribute>
                      </xsl:if>
                      <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
                        <xsl:attribute name="onclick">
                          <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
                        </xsl:attribute>
                      </xsl:if>
                      <xsl:value-of select="$DisplayTitle"/>
                    </a><br /><xsl:value-of select="@Description" disable-output-escaping="yes" /></td>
                </tr>
            </table> 
        </xsl:template>
    
  7. Once you are done with that you can see the below given view on the screen.
  8. Thats it.


I have tried my best to keep this as simple as possible for freshers who are learning SharePoint.

Monday, June 13, 2011

Sharepoint 2010 Customize Paging in XSLTListViewWebPart

The blog explains to add paging to our XSLTListViewWebPart in Sharepoint 2010.

  1. Create a customized html by going through one of my last blog. Click here to read my last blog.
  2. Once you have the html. There are few small things you need to keep in mind.
    1. Control your page size from the tag given below.
      <RowLimit Paged="TRUE">2</RowLimit>
    2. There are 3 major templates which you need to take care of for the paging. There will be an attribute "ddwrt:ghost="hide"" in all 3 of them. Remove them from it as it wont allow your template to get into shape.
      <xsl:template name="pagingButtons">
      <xsl:template name="CommandFooter">
      <xsl:template name="Navigation">
      
    3. In the template name Naviagtion, You can delete everything for customization, but not "id="bottomPagingCell{$WPQ}"". You will have to assign that to any element.
  3. Call the template from main row.
    <xsl:call-template name="pagingButtons" />
  4. Here are the images with myself customizing the paging.
  5. Have a look at the view what i have created for the custom paging. Below given xsl style is the complete working example for the screenshots above.
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
    version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
    xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal"
    xmlns:o="urn:schemas-microsoft-com:office:office" ddwrt:ghost="show_all">
  <xsl:include href="/_layouts/xsl/main.xsl" />
  <xsl:include href="/_layouts/xsl/internal.xsl" />
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes" />
  <xsl:output method='html' indent='yes' />
  <xsl:template match="/" xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"
       xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer"
       xmlns:sharepoint="Microsoft.SharePoint.WebControls" xmlns:o="urn:schemas-microsoft-com:office:office"
       ddwrt:ghost="" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
    <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow)]" />
    <table cellpadding="10" cellspacing="0" border="1" style="padding:25px;">
      <tr>
        <td colspan='2'>
          <b style="font-size:25px;">Friend's List</b>
        </td>
      </tr>
      <xsl:for-each select="$Rows">
        <xsl:call-template name="RowView">
        </xsl:call-template>
      </xsl:for-each>
      <tr>
          <td colspan="2"><xsl:call-template name="pagingButtons" /></td>
      </tr>
    </table>    
  </xsl:template>

  <xsl:template name="RowView">
   <xsl:variable name="thisNode" select="." />
    <tr>
      <td align="center">
        <img style="height:100px;border:5px solid #888;">
          <xsl:attribute name="src">
            <xsl:value-of select="@Picture"></xsl:value-of>
          </xsl:attribute>
          
          <xsl:attribute name="alt">
            <xsl:value-of select="@Title"></xsl:value-of>
          </xsl:attribute>
        
        </img>
      </td>
      <td valign="top">
        <b>Name : </b>
        <xsl:value-of select="@Title"></xsl:value-of>
        <br></br>
        <b>Email : </b>
        <xsl:value-of select="@Email" disable-output-escaping="yes"></xsl:value-of>
        <br></br>
        <b>Address :</b>
        <br></br>
        <blockquote>
          <xsl:value-of select="@Address" disable-output-escaping="yes"></xsl:value-of>
        </blockquote>
      </td>
    </tr>
  </xsl:template>
  
  <xsl:template name="pagingButtons">
    <xsl:choose>
          <xsl:when test="$XmlDefinition/List/@TemplateType = 106 and $XmlDefinition/@RecurrenceRowset='TRUE'">
            <xsl:if test="$dvt_nextpagedata or $dvt_prevpagedata">
                  <xsl:call-template name="CalendarExpandedRecurrenceFooter"/>
        </xsl:if>
      </xsl:when>
          <xsl:otherwise>
              <xsl:if test="$XmlDefinition/RowLimit[@Paged='TRUE']">
                <xsl:call-template name="CommandFooter">
                      <xsl:with-param name="FirstRow" select="$FirstRow" />
                      <xsl:with-param name="LastRow" select="$LastRow" />
                      <xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
                </xsl:call-template>
      </xsl:if>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
  <xsl:template name="CommandFooter">
    <xsl:param name="FirstRow" select="1"/>
    <xsl:param name="LastRow" select="1"/>
    <xsl:param name="dvt_RowCount" select="1"/>
    <xsl:if test="$FirstRow &gt; 1 or $dvt_nextpagedata">
          <xsl:call-template name="Navigation">
            <xsl:with-param name="FirstRow" select="$FirstRow" />
            <xsl:with-param name="LastRow" select="$LastRow" />
            <xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
          </xsl:call-template>
    </xsl:if>
  </xsl:template><xsl:template name="Navigation">
    <xsl:param name="FirstRow" select="1"/>
    <xsl:param name="LastRow" select="1"/>
    <xsl:param name="dvt_RowCount" select="1"/>
    <xsl:variable name="LastRowValue">
        <xsl:choose>
            <xsl:when test="$EntityName = '' or $LastRow &lt; $RowTotalCount">
              <xsl:value-of select="$LastRow"/>    
            </xsl:when>
            <xsl:otherwise>
              <xsl:value-of select="$RowTotalCount"/>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:variable>
    <xsl:variable name="NextRow">
      <xsl:value-of select="$LastRowValue + 1"/>
    </xsl:variable>
        <table id="bottomPagingCell{$WPQ}" style="font-size:25px;width:100%;padding:5px;" border="0">
            <tr>
                            <td style="width:50%">
                <xsl:if test="$dvt_firstrow &gt; 1">
                  <a>
                    <xsl:choose>
                          <xsl:when test="$dvt_RowCount = 0 and not($NoAJAX)">
                            <xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$ShowWebPart"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
                            <xsl:attribute name="href">javascript:</xsl:attribute>
                        <img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idRewind}" />
                        <img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idRewind}" />
                      </xsl:when>
                          <xsl:otherwise>
                            <xsl:variable name="RealRowLimit">
                                  <xsl:choose>
                                    <xsl:when test="$XmlDefinition/Query/GroupBy[@Collapse='TRUE']/@GroupLimit">
                              <xsl:value-of select ="$XmlDefinition/Query/GroupBy[@Collapse='TRUE']/@GroupLimit"/>
                            </xsl:when>
                                    <xsl:otherwise>
                              <xsl:value-of select = "$XmlDefinition/RowLimit"/>
                            </xsl:otherwise>
                                  </xsl:choose>
                        </xsl:variable>
                            <xsl:choose>
                                  <xsl:when test="not($NoAJAX)">
                                    <xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$dvt_prevpagedata"/><xsl:value-of select="$ShowWebPart"/>\u0026PageFirstRow=<xsl:value-of select="$FirstRow - $RealRowLimit"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
                                    <xsl:attribute name="href">javascript:</xsl:attribute>
                          </xsl:when>
                                  <xsl:otherwise>
                                    <xsl:attribute name="href">
                              javascript: <xsl:call-template name="GenFireServerEvent">
                                            <xsl:with-param name="param" select="concat('dvt_firstrow={',$FirstRow - $XmlDefinition/RowLimit,'};dvt_startposition={',$dvt_prevpagedata,'}')"/>
                                          </xsl:call-template>
                            </xsl:attribute>
                          </xsl:otherwise>
                            </xsl:choose>
                        <img src="/_layouts/{$LCID}/images/prev.gif" border="0" alt="{$Rows/@idPrevious}" />Pre
                      </xsl:otherwise>
                    </xsl:choose>
                  </a>
              </xsl:if>
            </td>
            
                 <td style="width:50%" align="right">
                  <xsl:if test="$LastRowValue &lt; $dvt_RowCount or string-length($dvt_nextpagedata)!=0">

                  <a>
                    <xsl:choose>
                          <xsl:when test="not($NoAJAX)">
                            <xsl:attribute name="onclick">javascript:RefreshPageTo(event, "<xsl:value-of select="$PagePath"/>?<xsl:value-of select="$dvt_nextpagedata"/><xsl:value-of select="$ShowWebPart"/>\u0026PageFirstRow=<xsl:value-of select="$NextRow"/>\u0026<xsl:value-of select='$FieldSortParam'/><xsl:value-of select='$SortQueryString'/>\u0026View=<xsl:value-of select="$View"/>");javascript:return false;</xsl:attribute>
                            <xsl:attribute name="href">javascript:</xsl:attribute>
                      </xsl:when>
                          <xsl:otherwise>
                            <xsl:attribute name="href">javascript: <xsl:call-template name="GenFireServerEvent">
                                <xsl:with-param name="param" select="concat('dvt_firstrow={',$NextRow,'};dvt_startposition={',$dvt_nextpagedata,'}')"/>
                                  </xsl:call-template>
                        </xsl:attribute>
                      </xsl:otherwise>
                    </xsl:choose>
                    Next<img src="/_layouts/{$LCID}/images/next.gif" border="0" alt="{$Rows/@tb_nextpage}" />
                  </a>
              </xsl:if>
              </td>
            </tr>            
        </table>
    
    <xsl:if test="not($GroupingRender)">
    <script>
      var topPagingCell = document.getElementById(&quot;topPagingCell<xsl:value-of select="$WPQ" />&quot;);
      var bottomPagingCell = document.getElementById(&quot;bottomPagingCell<xsl:value-of select="$WPQ" />&quot;);
      if (topPagingCell != null &amp;&amp; bottomPagingCell != null)
      {
      topPagingCell.innerHTML = bottomPagingCell.innerHTML;
      }
    </script>
    </xsl:if>
  </xsl:template>
  </xsl:stylesheet>

Saturday, June 4, 2011

Removing HTML tags using XSLT.

We have faced issues many times in XSLT when we require just to show text and no html content. So here is the solution. Call the template "remove-html" with passing the content and this will do it.




<!-- Calling the template that removes tag -->
<xsl:call-template name="remove-html">
<xsl:with-param name="text" select="{HtmlBody}"/>
</xsl:call-template>
<!-- This will remove the tag -->
<xsl:template name="remove-html">
<xsl:param name="text"/>
<xsl:choose>
<xsl:when test="contains($text, '&lt;')">
<xsl:value-of select="substring-before($text, '&lt;')"/>
<xsl:call-template name="remove-html">
<xsl:with-param name="text" select="substring-after($text, '&gt;')"/>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$text"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>

Sharepoint 2010 XSLTListViewWebPart using xsllink path.

In my last post i explained how to customize html for XSLTListViewWebPart. Click Here to read the post. In the current blog i will take the same example and show you how to use the same template for multiple XSLTListViewWebParts. Throughout the application.



  1. Create a list with name "Sample". Add the fields

    • Name

    • Address

    • Email

    • Picture



  2. Go back to screen and add some data.

  3. Adding the data will give you the default look. As I mentioned above that the default look is a XSLTListViewWebPart.

  4. I will propose below given template design for viewing.

  5. Create a file with title "Sample.xsl". Copy the content and paste it in file.

    <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    exclude-result-prefixes="msxsl" xmlns:ddwrt2="urn:frontpage:internal">

    <xsl:output method='html' indent='yes'/>

    <xsl:template match='dsQueryResponse'>
    <table cellpadding="10" cellspacing="0" border="1" style="padding:25px;">
    <tr>
    <td colspan='2'>
    <b style="font-size:25px;">Friend's List</b>
    </td>
    </tr>
    <xsl:apply-templates select='Rows/Row'/>
    </table>
    </xsl:template>

    <xsl:template match='Row'>
    <tr>
    <td align="center">
    <img style="height:100px;border:5px solid #888;">
    <xsl:attribute name="src">
    <xsl:value-of select="@Picture"></xsl:value-of>
    </xsl:attribute>
    <xsl:attribute name="alt">
    <xsl:value-of select="@Title"></xsl:value-of>
    </xsl:attribute>
    </img>
    </td>
    <td valign="top">
    <b>Name : </b><xsl:value-of select="@Title"></xsl:value-of><br></br>
    <b>Email : </b><xsl:value-of select="@Email" disable-output-escaping="yes"></xsl:value-of><br></br>
    <b>Address :</b><br></br>
    <blockquote><xsl:value-of select="@Address" disable-output-escaping="yes"></xsl:value-of></blockquote>
    </td>
    </tr>
    </xsl:template>
    </xsl:stylesheet>


  6. Upload the XSL file on any of the "Document Library" or "Style Library" and copy the http path of that file. In my case it's "/Style%20Library/Sample.xsl".

  7. Open the current website in "Sharepoint Designer 2010".

  8. Goto "Links and Libraries".

  9. Find the list and click it. On the right hand side in the views you will find the default view with title "All Pages".

  10. Once you open the screen you will only see view on that screen with tag.
    <WebPartPages:XsltListViewWebPart></WebPartPages:XsltListViewWebPart>

  11. Split the screen and select the webpart from UI. Will automatically select the whole list view.

  12. On the top ribbon bar select "Design" and under the sub options, on right hand side click "Customize Entire View"

  13. Once you click it. A big bunch of XSLT is added to the html.
    <xsl><xsl:stylesheet></xsl:stylesheet></xsl>

  14. Select and remove the whole block of
    <xsl><xsl:stylesheet></xsl:stylesheet></xsl>

  15. Paste the below given path over there.
    <XslLink>/Style%20Library/Sample.xsl</XslLink>

Sharepoint 2010 Customizing XSLTListViewWebPart

In sharepoint 2010 each and every list is XSLTListViewWebPart. The blog will explain steps to modify and show the XSLListViewWebPart to Show in a custom design.



  1. Create a list with name "Sample". Add the fields

    • Name

    • Address

    • Email

    • Picture



  2. Go back to screen and add some data.

  3. Adding the data will give you the default look. As I mentioned above that the default look is a XSLTListViewWebPart.

  4. Open the current website in "Sharepoint Designer 2010".

  5. Goto "Links and Libraries".

  6. Find the list and click it. On the right hand side in the views you will find the default view with title "All Pages".

  7. Once you open the screen you will only see view on that screen with tag.
    <WebPartPages:XsltListViewWebPart></WebPartPages:XsltListViewWebPart>

  8. Split the screen and select the webpart from UI. Will automatically select the whole list view.

  9. On the top ribbon bar select "Design" and under the sub options, on right hand side click "Customize Entire View"

  10. Once you click it. A big bunch of XSLT is added to the html.
    <xsl><xsl:stylesheet></xsl:stylesheet></xsl>

  11. Select and remove the whole block of
    <xsl:stylesheet></xsl:stylesheet>

  12. In my case i have updated it with.

    <xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt"
    exclude-result-prefixes="msxsl" xmlns:ddwrt2="urn:frontpage:internal">

    <xsl:output method='html' indent='yes'/>

    <xsl:template match='dsQueryResponse'>
    <table cellpadding="10" cellspacing="0" border="1" style="padding:25px;">
    <tr>
    <td colspan='2'>
    <b style="font-size:25px;">Friend's List</b>
    </td>
    </tr>
    <xsl:apply-templates select='Rows/Row'/>
    </table>
    </xsl:template>

    <xsl:template match='Row'>
    <tr>
    <td align="center">
    <img style="height:100px;border:5px solid #888;">
    <xsl:attribute name="src">
    <xsl:value-of select="@Picture"></xsl:value-of>
    </xsl:attribute>
    <xsl:attribute name="alt">
    <xsl:value-of select="@Title"></xsl:value-of>
    </xsl:attribute>
    </img>
    </td>
    <td valign="top">
    <b>Name : </b><xsl:value-of select="@Title"></xsl:value-of><br></br>
    <b>Email : </b><xsl:value-of select="@Email" disable-output-escaping="yes"></xsl:value-of><br></br>
    <b>Address :</b><br></br>
    <blockquote><xsl:value-of select="@Address" disable-output-escaping="yes"></xsl:value-of></blockquote>
    </td>
    </tr>
    </xsl:template>
    </xsl:stylesheet>


  13. The output is the screen is below given screen.


Click here to read my post for using the xsl stylesheet with xsllink.