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.