Saturday, June 4, 2011

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>

19 comments:

  1. Hi

    This is really good. Firstly, can I change any view and this view selected via the web part properties after I have dragged a list XLSview Wp onto the page. By default SharePoint seems to remove any formatting when you change the view in the wp properites

    Secondly, I had attempted to customise the acres of xslt that is generated by SharePoint to handle
    <xsl:for-each select="$Fields"

    As this will automatically display fields that appear in the view. However, this is proving really hard to customise to I am going for your approach.

    ReplyDelete
  2. Can you, please, give an example with paging trough large numer of items?

    ReplyDelete
    Replies
    1. Its really simple, visit the url Its showing the same thing you want. http://maulikdhorajia.blogspot.in/2011/06/sharepoint-2010-customize-paging-in.html

      Delete
  3. Hi Maulik,
    Nice Article...
    Im new to xslt and Linq.. i had a requirement that getting the search data from 4 list using Linq and displayed in xslt webpart..
    getting values from 4 list is over.. but that result displayed in xslt webpart.. is pending.. how can i achive.. this.. any suggestion or links..

    NS

    ReplyDelete
    Replies
    1. Navaz,

      Till now I have done in SharePoint never came across any kind of challange like this. Most of the time i get custom data i show them in either SPGridView or Repeater controls.

      I havn't done it before but DataFormWebPart is the controls which you should go for. You should be able to extend the webpart apply the datasource you have and apply the xsl.

      I dont have any example of it but the below given links should help you show how to extend an OOTB webpart.

      http://www.sharepointworld.in/2011/06/creating-custom-web-part-by-inheriting.html(Example)

      http://maulikdhorajia.blogspot.in/2011/09/override-content-query-webpart-to-do-on.html(How to extend a web part?)

      Thanks,
      Maulik Dhorajia

      Delete
    2. https://codeplayandlearn.wordpress.com/2015/07/02/manipulation-with-sharepoint-list-with-flavored-of-angularjs-and-ng-grid/

      Delete
  4. Hi,
    I need "Add new Item" Link at the bottom of XSLT list view webpart. can you suggest me some way

    ReplyDelete
    Replies
    1. Its actually very simple. Navigate through the process which I mentioned in "http://maulikdhorajia.blogspot.com/2011/06/sharepoint-2010-customizing.html". Follow till step 10, copy the OOTB <XSLTStyleSheet> from the Designer. Take a look at the XSLT and you will find a template which will add the "Add New" option to the View. Carefully pick the whole XML and modify and use it as you styled in your current site.

      Delete
  5. Hi Maulik, I am trying to implement this in Sharepoint Designer, however I am not able to see the Design tab as seen in the screenshot you posted. Why is this? What is the type of sharepoint site you are running? Custom code? Please do share thanks.

    ReplyDelete
    Replies
    1. I think you have not selected the XSLT webpart. Once you select the webpart from the UI, the design tab shows up in ribbon. Thats the only case I know off.

      Thanks,
      Maulik Dhorajia

      Delete
  6. nice post, but what if we need ECB menu with any of this column.

    any suggestion ?

    ReplyDelete
    Replies
    1. This example was just to show how simple you can keep your xsl, if ECB is required include that as well in xsl.

      Delete
  7. nice post, but what if we need to have ECB menu with any of this column.

    any suggestion, please discribe.

    ReplyDelete
    Replies
    1. @Bhupesh Karankar,

      The blog above shows the full way of customizing the grid. But if you want ECB menu u don't remove the ECB settings which are in the deftault XSLT.

      For beginners I have tried and kept it simple so they can see the rows which are going to get rendered.

      Hope this helped.

      Thanks,
      Maulik Dhorajia

      Delete
  8. Hi Maulik,

    I'm a newbie to content query webpart. I'm currently working on one and I have a list named news and it has news item with Title, image and description. I want to disply the news list using content query webpart and it should be displayed in manner first image icon, then news title and then description (some text)and a link at bottom to display the news item in new tab. Can you help me with the modification of ItemXSL style sheet ?

    ReplyDelete
    Replies
    1. @Jazz Singh,

      Sorry for the very late reply caught up with some work.

      Anyways for help just go to the
      1) View All Site Content > Style Library > XSL > ItemStyle.xsl.
      2) Edit it, Copy and paste a style block. Change the name and title.
      3) Apply the style and you publish the file. On content Query blog update the item style setting to point to you custom settings.

      Thanks,
      Maulik Dhorajia

      Delete
  9. Very helpful to start working with linked XSL files, thank you for sharing!

    ReplyDelete