Saturday, June 4, 2011

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.

35 comments:

  1. Thanks so much for this. Really helps to know I can just replace the entire stylesheet. Guess I didn't realize that!

    ReplyDelete
  2. So with this solution I'm noticing that I am no longer able to edit each entry. Was this intentional? I'd like to have the view and the capability to edit each entry in the list.

    ReplyDelete
    Replies
    1. @omghi2u - Yes it was intentional. This is to show how to show custom design.

      Delete
  3. Dear Maulik,
    Excellent demo.

    I have an "Enhanced Rich TextBox" to store my image. Could you please tell me how to display it?

    Also I am getting an error(highlighted with yellow) stating that Image tag should have alt attribute.

    Please suggest and eagerly waiting for you reply

    Regards,
    Ranga

    ReplyDelete
    Replies
    1. @Ranga - Use this <xsl:value-of disable-output-escaping="yes" select="@htmlColumnName" /> for html to show up.

      If this doesnot work try changing it to $htmlColumnName. For the image tag if you are creating an image in xsl.

      Try this

      <img>
      <xsl:attribute name="src">
      <xsl:value-of select="$imgPath" />
      </xsl:attribute>
      <xsl:attribute name="alt">This is an alt txt</xsl:attribute>
      </img>.

      If the image is from html just add an alt attribute to <img>.
      Let me know if that helped.

      Delete
  4. Thank you for the reply. I have used it in between and DIV tag and it is working.


    I have another query for you. As per your example, the contents of "blockquote" are not rendering in sharepoint. But able to see in designer.

    Could you please help me.

    ReplyDelete
    Replies
    1. I just kept blockquote and it worked. Please check it should be something wrong with your css.

      Delete
  5. Thank you for you support. Yes, got it, What ever the fields are used in XSLT, they have to be select in the view.

    I have stuck with one simple problem. I have to create a link in XSLTListView Webpart as "Send Link to Friend".

    I need complete url of Post list in XSLTListView Webpart.
    such as http:///MyBlog/Lists/Posts

    So that I will use something like:

    javascript:navigateMailToLink('http:///MyBlog/Lists/Posts/Posts.aspx?Id=')

    Could you please help me in this.

    Regards
    Ranga

    ReplyDelete
    Replies
    1. @Ranga,

      I think you are looking for.

      <a onfocus="OnLink(this)" href="{$FORM_DISPLAY}&ID={$ID}" onclick="GoToLink(this);return false;" target="_self">
      <xsl:call-template name="LinkTitleValue.LinkTitle">
      <xsl:with-param name="thisNode" select="$thisNode"/>
      <xsl:with-param name="ShowAccessibleIcon" select="$ShowAccessibleIcon"/>
      </xsl:call-template>
      </a>

      This should render the link as
      http://YourSite/YourBlogSite/_layouts/listform.aspx?PageType=4&ListId={DC850CA6-4B2B-4E86-A7D0-5AB4D8FA4B2F}&ID=209

      Thanks,
      Maulik Dhorajia

      Delete
  6. Great post!...this came very handy. however, i have just a slight challenge. My list has a 5-star rating column that just gets displayed as a number instead of the stars. How do i output the PNG?

    thanks,
    Basil

    ReplyDelete
    Replies
    1. @Basil, I have never done that before. I will try it out and let you know. But there should be a script that should do in OOTB. Try to crack that one.

      Delete
  7. This is really nice. Thank you very much :)

    ReplyDelete
    Replies
    1. Hi Maulik Dhorajia,

      I have issue with calculated column, I have given the formula some thing like this :
      ="Request"

      But it's showing the dynamic ID for Existing list items only ,if I'm trying to add the new item for the list,it was failed. So now I'm looking forward XSLT Listview for the same . can you please help me on this.

      Thnaks
      Madhu Sudhan

      Delete
    2. Madhusudan,

      If you can encode the html and paste it in text it will help.

      http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx

      Thanks,
      Maulik Dhorajia

      Delete
  8. Hi Maulik,
    Is it possible to implement sorting for this customization. For example, I have an anchor tag that will sort by email address and another that will sort by name. Is that even possible in XSLT? If so, how would I go about implementing it.

    Thank you

    ReplyDelete
    Replies
    1. I am afraid becuase the DataSource is passed to the stylesheet and stylesheet manages the data to display. I think you can write a javascript or using a jquery you can show the data in a sortable manner. But this is again a trouble when there is paging.

      Hope this helped.

      Thanks,
      Maulik Dhorajia

      Delete
    2. Hi Maulik,
      Thank you for the reply. Yes, that makes sense to me.

      Also, thanks you again for a great article. This will actually come in handy for another requirement that I have in mind.

      Delete
  9. Hi Maulik,
    Do you have any idea how to add grouping to this approach

    Thank you
    Ranga

    ReplyDelete
    Replies
    1. Take the XSL on group and start modifying it. This article is just for learners.

      Delete
  10. Hi Maulik,
    Do you have any idea how to add rating field in the custom XSLTListViewWebPart that you created?
    I tried with but the ratings is not show in the custom XSLTListViewWebPart.

    Thanks,
    Farikhah

    ReplyDelete
  11. Do you have any idea how to add rating field in the custom XSLTListViewWebPart that you created?
    I tried with but the ratings is not show in the custom XSLTListViewWebPart.

    Thanks,
    Dinesh

    ReplyDelete
  12. Hi Maulik,
    Do you have any idea how to add rating field in the custom XSLTListViewWebPart that you created?
    I tried with but the ratings is not show in the custom XSLTListViewWebPart.

    Thanks,
    Dinesh

    ReplyDelete
  13. Thank you so much.. I have been struggling with creating a customized view.. Was not getting where to start from.. Thank you so much :)

    ReplyDelete
  14. Thanks!!! This is a very good explained post =)
    I spent like 3 or 4 days trying to do something like this.

    ReplyDelete
  15. Hi,
    I am trying to edit the display view of the webpart. I tried this using powershell.

    $webpartmanager=$web.GetLimitedWebPartManager($pageUrl,[System.Web.UI.WebControls.WebParts.PersonalizationScope]::Shared)
    $webpart = New-Object Microsoft.SharePoint.WebPartPages.XsltListViewWebPart
    $webpart.ListId = $list.ID;
    $webpart.ViewGuid = $list.DefaultView.ID.ToString();
    $webpartmanager.AddWebPart($webpart, “Zone 1", 0);

    $wptype = $webpart.GetType()
    $viewProperty = $wptype.GetProperty('ContextView',[Reflection.BindingFlags]'NonPublic,Instance')
    $view = $viewProperty.GetValue($webpart,$null)


    I am getting error at $view = $viewProperty.GetValue($webpart,$null). I am getting valid values in $wptype & $viewProperty.

    The error is Exception calling "Getvalue" with "2" argument(s). "Object reference not set to an instance of an object"--> system.NullReferenceException: Object reference not set to an instance of an object.
    at Microsoft.sharepoint.WebpartPages.Basexsltlistviewwebpart.Ensureview()
    at Microsoft.sharepoint.WebpartPages.Basexsltlistviewwebpart.get_contextview().


    Can you tell me what is wrong with the code.

    ReplyDelete
    Replies
    1. @GMK, Object reference is causing because you are passing 2 arguments and one of them is null. There is no null check in the GetValue() you are calling. If you can just make sure there are 2 values passed and what is the another type which you have to pass. Atleast pass mock value instead of null. Hope this helps out.

      Thanks,
      Maulik Dhorajia

      Delete
  16. Hi,

    Thanks for this it got me out of a real bind. I have amended your example and added a LinkTitleNoMenu field ref instead and within the webpartlistview, thinking this will open the default display view.

    However I cant appear to get this to function correctly. I know I am missing some code somewhere but cannot find out what and where.

    Any advice on what I can add to your example and whereabouts would be greatly appreciated.

    Many Thanks

    ReplyDelete
    Replies
    1. Hi Tim,

      Its great that this helped you.

      When you use LinkTitleNoMenu the template for "LinkTitleNoMenu" should be there. Check if the template is there. Also this same template will call many multiple templates so make sure all the related templates are there in the xsl. Its very tricky.

      To get better results don't delete the complete xsl. Use the current existing xsl and update the xsl to use the settings.

      Hope this helps out.

      Thanks,
      Maulik Dhorajia

      Delete
  17. When I apply this I ofcourse loose the option to click on the name/title column and be able to Edit or View it. Without contextual menu I loose a lot of other options as well like to be able to start workflow, delete item, manage permissions stuff. How can I get it back?
    Thank you

    ReplyDelete
  18. Hi Moulik,

    How can we display the paging as 1 2 3 4 5 6 7 >> for XSLTListView WebPart?

    Thanks in advance,
    Sarwa

    ReplyDelete
    Replies
    1. @Sarwa,

      Well you will have to put a logic to do this custom process..

      Thanks,
      Maulik Dhorajia

      Delete
  19. I am trying to change External List Column name. Currently column name comes from Fieldname but I want to use Display name. Is there place in XSLT where I can override column name and show display name. This is External list and I am trying to show external list using Data view web part.

    ReplyDelete
  20. Maulik, I want to show column name using DsiplayName vs FieldName in External List. Any suggestion? I am pulling External list using Data View Web part as data source and trying to update entire Xslt and customizing it. I am not able to change Column header using Display name.

    ReplyDelete
  21. Maulik, I want to show column name using DsiplayName vs FieldName in External List. Any suggestion? I am pulling External list using Data View Web part as data source and trying to update entire Xslt and customizing it. I am not able to change Column header using Display name.

    ReplyDelete