Scenario:
SharePoint 2010 introduces a new webpart XsltListView webpart. It is suppose to me new and enhanced version of DataView webpart with the convience of ListView Webpart.
Unfortunatly it is not.. Customizing Xslt is a pain. After spending good amount of hours, I was able to make it work the way I wanted.
I FEEL the OOTB XSLT for this webpart IS A BIG DESIGN MISTAKE made by Microsoft SharePoint team. Not at all scalable.
Steps:
1. Create a new webpart page
2. Add webpart for the existing list/library you want to customize look and feel.
3. Exit Editing
4. Edit Webpart to add more columns to the view specially the one's you need in your final output.
5. Open the page in design mode now using SPD 2010
6. Click on webpart , you will see new Ribbon Tabs 'Design'
7. Click on 'Customize Xslt' > 'Customize Entire View'. Once you do that and switch to code view, you will see a new node
8. Search for 'mode="Item"' keyword , this is the main template which will drive rendering of each row
9. With in this template , search for <xsl:for-each select="$Fields" > tag. This is the loop which will make call to other templates to render each field.
10. Delete or Hide the loop statement fully and add your own HTML before this to render the view. I will recommend using SPD to fields/value.
11. Remember to check the changes/output in browser when you make the change.
12. As we have already deleted the Xslt For-each loop. We can delete all the field templates generated automatically. But sometime this is tricky, so no harm in keeping them also.
13. Once you are satisfied with the output, copy the stylesheet into a new file, mylistview.xslt and save it some plac, like a document library.
14. Now you can create a new page and add the List/Library webpart as we did in step 2.
15. Edit webpart and in Miscellaneous section XSL Link textbox , link the XSLT file and save settings.
Advantages:
1. Customization just like we had in DataView
2. Much smaller ( in size ) XSLT file
3. Ribbon Context Tabs will work with the webpart.
8 comments:
Man this is great I spent hours trying to do this.
I agree with you that ListView in SPD 2007 was much more better then this
Thank you ,I agree with you about Microsoft Team :)
Have you tried this lately? I'm having major problems with an xslt error that pops up about "xsl:choose must have at least one xsl:when child." It seems to me that SPD is causing this. Also, I need to remove all the 'selected item' and checkbox chrome from the page, which appears to be in templates above the for-each fields section where you suggest putting content. Any updates or advice is greatly appreciated! -email jregistAtGmail
Hi jregist,
I tried it just now and make 1-2 small changes to the post but it works for me.
sandeep
Hi Sandeep,
This is really a good work!. It helped me to understand a lot better.
I am getting errors while adding up the xsl. Butin the design time in SPD 2010 it looks good.
Important thing I need to show the "add new announcement" along with customization of the data render area similar to single item view,instead of multiple item view.
Can you please clarify how to add the add new annoucement to xsl style sheet
I really appreciate your time.
vijay ,I will look into it soon.
There are various ways you can do ( for idea )
1. Check in XSLT if the row you are rendering is equal to last row and Render the link
2. Within XSLT find the call to the body template. At the end of the call you can render it
3. You can drop a CEWP at the bottom with the link.
Thanks .It really helped me.
Thanks.It really helped me.
Post a Comment