Customizing XsltListView webpart look and feel

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 with stylesheet information added to the webpart

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.

Controlling the Webpart orientation

Scenario:
While working on my group site I wanted to have a layout for Profile Page Layout where I can add web parts horizontally in the web part zone.

Solution:

Code:

<WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" LayoutOrientation="Horizontal" ID="Left" Title="loc:Left" />

Article:
MSDN

Links List : External Link in New windows

Scenario:
End Users wanted a way to distinguish External Links and also wanted to open them in separate window.

Solution:
DataView webpart and Conditional Formatting.



Download the Code: Webpart and Image ( ZIP )

Note:
-- Image file need to be copied to 12HIVE/Layouts/Images folder

-- This webpart will only work with Link list and List name has to be LINKS. In case you have some other name of the list storing all the links, you need to open the .webpart in Editor and replace LINKS with new name of the list.

-- Webpart Header Url points to /Lists/Links/AllItems.aspx , so if you are using it for any subject , adjust it one time.

CAML query and Sharepoint Groups

Scenario:
Task list is one of the most commonly used list in sharepoint. But I think it is missing a view in which someone can filter what tasks are either directly assigned him or any of the Active Directory Group/SharePoint Group he belongs to.

Solution:
After some digging into CAML , I got the right CAML query for getting me exactly the same thing.



Code:

<Where>
 <Or>
   <Membership Type="CurrentUserGroups">
    <FieldRef Name="AssignedTo"/>
   </Membership>
   <Eq>
    <FieldRef Name="AssignedTo"></FieldRef>
     <Value Type="Integer">
      <UserID/>
     </Value>
   </Eq>
  </Or>
 </Where>
<OrderBy>
   <FieldRef Name="Status"/>
   <FieldRef Name="Priority"/>
</OrderBy>

Line graph for Tasks list

Scenario:
Showing graphical representation of Tasks list.

Solution:


Whats different about this one from so many you already saw on web , is that you dont need to change anything, just import to your webpart gallery and it will connect to your Task list :-)

Tasks list Line-graph webpart <-- Import it and use it , no change required.

Article:
Yaroslav Pentsarskyy’s SharePoint and .NET adventures

Follow me on Twitter

Line graph using XML and XLST Transform

Scenario:
I love XSLT for it flexibility and keep looking for ways to use it. To explain one of my colleague , I used XML Web part which ships with WSS.

Solution:

This example has one Sample XML Data file , you can download it from
XSLT file is given below. After transformation this webpart can show you books cheaper than 5.95 and costlier than this in graphical manner.

Download Files XSLT:
XML
XSLT

Article
XSLT Reference

Follow me on Twitter

Dataview Webpart displaying multiple file icons

Scenario:
Let me try, if I can explain this requirement. We had a document library and users had files in two different format XLS and PDF with same name.

Now they wanted to display one line for each file name with two icons representing these two files ( one XLS and another PDF ). Yes , right client is client.

Solution:
DataView Webpart is one famous weapon for these tough situations and yes SPD also.
We used a DataView webpart and added following extra header and data column.


XSL Column Header:

<!--DocIcon-->
<TH nowrap="" scope="col" class="ms-vh2">
  <xsl:call-template name="dvt.headerfield" ddwrt:atomic="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
      <xsl:with-param name="fieldname">@DocIcon</xsl:with-param>
      <xsl:with-param name="fieldtitle">CSV</xsl:with-param>
      <xsl:with-param name="displayname">CSV</xsl:with-param>
      <xsl:with-param name="sortable">0</xsl:with-param>
      <xsl:with-param name="fieldtype">Text</xsl:with-param>
     </xsl:call-template>
</TH>

XSLT Column Data:

<!--DocIcon-->
   <TD Class="{$IDAG3PVE}">
    <xsl:variable name="PDFPATH" select="concat(substring-before(@FileRef,'xls'),'pdf')"></xsl:variable>
    <xsl:variable name="FieldIDA1QZMH">
     <xsl:choose>
      <xsl:when test="@IsCheckedoutToLocal=''"></xsl:when>
      <xsl:otherwise><A HREF="{ddwrt:URLLookup('', 'IsCheckedoutToLocal', string(@ID))}"><xsl:value-of select="@IsCheckedoutToLocal" /></A></xsl:otherwise>
     </xsl:choose>
    </xsl:variable>
    <xsl:choose>
     <xsl:when test="@FSObjType='1'">
      <xsl:choose>
       <xsl:when test="ddwrt:GetVar('RecursiveView')='1'"><IMG BORDER="0" alt="Folder: {@FileLeafRef}" SRC="/_layouts/images/folder.gif" /></xsl:when>
       <xsl:otherwise>
        <xsl:variable name="SetVarIDAOMZMH"><xsl:value-of select="$PagePath" />?RootFolder=<xsl:value-of select="@FileRef" />&FolderCTID=<xsl:value-of select="@ContentTypeId" /></xsl:variable>
        <xsl:value-of select="ddwrt:SetVar('UnencodedFilterLink', string($SetVarIDAOMZMH))" />
        <A TABINDEX="-1" HREF="{ddwrt:GetVar('UnencodedFilterLink')}" onclick="javascript:EnterFolder('{ddwrt:GetVar('UnencodedFilterLink')}');javascript:return false;"><IMG BORDER="0" alt="Folder: {@FileLeafRef}" title="Folder: {@FileLeafRef}" SRC="/_layouts/images/folder.gif" /></A>
       </xsl:otherwise>
      </xsl:choose>
     </xsl:when>
     <xsl:otherwise><A TABINDEX="-1" HREF="{$PDFPATH}" onclick="return DispEx(this,event,'','','','','{ddwrt:ListProperty("DefaultItemOpen")}','{ddwrt:MapToControl("", string())}','{@HTML_x0020_File_x0020_Type}','','{ddwrt:GetUserID('CheckoutUser')}','{$Userid}','{ddwrt:ListProperty("ForceCheckout")}','{$FieldIDA1QZMH}','{ddwrt:CurrentRights()}')">
      <xsl:choose>
       <xsl:when test="@CheckoutUser=''"><IMG BORDER="0" ALT="{@Title}" title="{@Title}" SRC="/_layouts/images/XLS16.gif" /></xsl:when>
       <xsl:otherwise><IMG BORDER="0" ALT="{@Title}" title="{@Title}" SRC="/_layouts/images/XLS16.gif" /></xsl:otherwise>
      </xsl:choose>
      </A></xsl:otherwise>
    </xsl:choose>
</TD>

Issues:
1. Works only for only Document Library, can be enhanced for Link list also.
2. The way we wrote the XSLT transformation variable PDFFILEPATH. Users need to upload only XLS file and he will get link for PDF. ( Simple file name replacement function ).
3. This solution doesn't really check if that PDF file exist or not.

Edit in Datasheet view error

Error:
The List cannot be displayed in Datasheet view for one or more of the following reasons.
1) Datasheet component compatible with Windows SharePoint Service is not installed
2) Your Web browser does not support ActiveX controls
3) Support for ActiveX controls is disabled

OR

A Windows SharePoint Services compatible application could not be found to edit the document.

Check:
1. You dont have Office 2003 Professional or later installed. The ActiveX control required for this feature is installed only during an Office 2003 Professional or later installation.
2. If this feature was working fine before,but now it doesn't. You might have installed some standard edition software ( i.e. Office Project 2003 Standard ) on top of Office 2003 Professional Edition.

Verify:
1. You should have Office 2003 Pro or later installed
2. Your browser does not block the use of ActiveX controls.
3. Check for different versions of Office Program