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>