SharePoint XSL web part with custom xsl for contacts list

In my previous post
I explained how you can create a new interface for a specific list by using the XLV webpart.

This post demonstrates how you can extend the the list view webpart of a list based on the out-of-the-boc contact list template.

Copy paste the following code in an xsl file and upload it in the style library.Tthe final step is to link the listview webpart with the xsl in the style in the style library and your done!

Download the xsl file here:
contacts.xsl



  
  
    
      
        .employee{
          display:block;
          height:60px;
          padding-left: 30px;
          background:  transparent url('http://cdn2.iconfinder.com/data/icons/sem_labs_icon_pack/icons/user_male_olive_blue_black.png') no-repeat 0 0;
        }

        .employee ul{
          list-style-type: none;
        }

        .employeebg:hover{
          border:1px solid silver;
          cursor:pointer;
          color: #fff;
          /* fallback (Opera) */
          background: #008800;
          /* Mozilla: */
          background: -moz-linear-gradient(top, #A2C5DE, #387BAB);
          /* Chrome, Safari:*/
          background: -webkit-gradient(linear,
                      left top, left bottom, from(#A2C5DE), to(#387BAB));
          /* MSIE */
          filter: progid:DXImageTransform.Microsoft.Gradient(
                      StartColorStr='#A2C5DE', EndColorStr='#387BAB', GradientType=0);
        }
      
      ]]>
    
    

Hope it helps,
Tom

VN:F [1.9.22_1171]
Rating: 5.0/10 (7 votes cast)
VN:F [1.9.22_1171]
Rating: +1 (from 3 votes)

SharePoint XSL web part with custom xsl

The new XSLT List View Web Part (XLV Web Part) in SharePoint 2010 allows a new level of SharePoint customization and allows us to create custom webparts in an easier way. I hope this post guides you if you would like to create a custom xsl definition for a specific list.

1) Add the following xsl file in the TEMPLATE/LAYOUTS/XSL folder and name it xml.xsl.
This will make the xsl available on each sharepoint site by using /_layouts/xsl/xml.xsl

Download the xsl file here:
xml.xsl


  
  
    
      <xsl:copy-of select="*"/>
    
  

2) Add a new list view webpart and open the webpart properties screen. Under the category miscellaneous there is a textbox where you can provide a new xsl file reference. Provide the link to /_layouts/xsl/xml/xsl

3) The transformation will (html) encode the source xml and display the result in the browser, copy the xml and store it in your solution as listdata.xml. We will use this xml file to debug our custom xsl definition.

4) Add a new xsl file into the visual studio solution. Copy Paste the following example in the xsl file, it will visualize a collection of divs where each div contains the title value of each row.

 

5) Open the XML menu in visual studio and click on Start XSLT Debugging/b> of use ALT+F5.

6) Visual studio will ask you where it can find the source xml, this is the raison why we created the listdata.xml in our current solution and create a new xml file where the result will be stored in. This result file will contain the html code that will be displayed in the list view webpart.

Hope it helps,
Tom

VN:F [1.9.22_1171]
Rating: 7.3/10 (21 votes cast)
VN:F [1.9.22_1171]
Rating: -1 (from 7 votes)