Modify List Header Utilizing XSL

Question

I am working with SharePoint 2013 and SharePoint Designer 2010 (and I'm a newbie to SharePoint) striving to modify a list header. Since this is a corporate site there are a lot of limitations, so basically I believe I can only use XSL to do the header modifications needed. Here: https://stackoverflow.com/questions/14031524/how-to-configure-multicolumn-header-in-sharepoint-list Vadim Gremyachev posted a solution. But he is obviously a SharePoint pro and doesn't find necessary to explain things which are obvious to him. To me, unfortunately they are not. I need step by step instructions of how to create a customized header of 3 rows and multiple columns for existing list. Vadim, if you are reading this, I would greatly appreciate your help!

Thanks, Svet

Can you please provide the list and the format of the header you want to achieve. — Sudip Ranjan Sil, Jul 22 '14 at 15:06

score 2 · Answer 1 · answered Jul 22 '14 at 14:18

Svet,

as was pointed in the original answer, there are two options how to customize List View via XSLT:

Inline editing of xsl using SharePoint Designer as described in article Create a custom list view using SharePoint Designer
create a custom xsl template for a List View and apply it via XSL Link property of XLV web part (i usually prefer this method) way

Below is demonstrated a complete solution how to customize List View for a Contacts list by creating a custom xsl template.

Steps:

Let's say we need to customize the view of a Contacts list

Create a custom xsl template for a List View (see the complete code listing below)
Save(upload) it for convenience in the same location where List form pages reside as shown on figure below
Open List view page in edit mode, select List View web part and go to edit web part properties, specify XSL Link property value: ContactsView.xsl as shown on figure below
Save web part changes

That's it.

Fig 1. Original default view for a Contacts view

enter image description here

Fig 2. Customized view for a contacts view after applying custom xsl template
enter image description here

Code listing for a custom xsl template of Contacts list view

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">
  <xsl:include href="/_layouts/xsl/main.xsl"/>
  <xsl:include href="/_layouts/xsl/internal.xsl"/>
    <xsl:template match="View" mode="full">
    <!-- Custom Header starts here -->
    <tr valign="top" class="ms-viewheadertr" style="background-color:#c0c0c0; border: ">
       <th class="ms-vh-icon" scope="col" colspan="8">Contacts info</th>
    </tr>
    <tr valign="top" class="ms-viewheadertr" style="background-color:#c0c0c0;">
       <th class="ms-vh-icon" scope="col" colspan="2"></th>
       <th class="ms-vh-icon" scope="col" colspan="2">Name</th>
       <th class="ms-vh-icon" scope="col" colspan="1"></th>
       <th class="ms-vh-icon" scope="col" colspan="2">Phone</th>
       <th class="ms-vh-icon" scope="col" colspan="1"></th>
    </tr>
    <tr valign="top" class="ms-viewheadertr" style="background-color:#c0c0c0;">
       <th class="ms-vh-icon" scope="col" rowspan="2"><input type="checkbox" title="{$select_deselect_all}" onclick="ToggleAllItems(event,this,{$ViewCounter})" onfocus="EnsureSelectionHandlerOnFocus(event,this,{$ViewCounter})" /></th>
       <xsl:call-template name="FieldRef_Attachments_header"></xsl:call-template> <!-- Render attachments header -->
       <th class="ms-vh-icon" nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">
         Last Name
       </th>
       <th class="ms-vh-icon" nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">
         First Name
       </th>
       <th class="ms-vh-icon" nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">
         Company
       </th>
       <th class="ms-vh-icon" nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">
         Business Phone
       </th>
       <th class="ms-vh-icon" nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">
         Home Phone
       </th>
       <th class="ms-vh-icon" nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">
         E-mail Address
       </th>
    </tr>
    <!-- Custom Header ends here -->
    <xsl:apply-templates select="." mode="RenderView" />  <!-- Render default view items -->
    <xsl:apply-templates mode="footer" select="." /> <!-- Render default view footer -->
   </xsl:template>
</xsl:stylesheet>

Thank you Vadim. Your code works like a charm. My problem was that I missed to replace the ID used to refer the view in your original posting with the ID of my view.
Your help is much appreciated. Thank you! — Svet, Jul 28 '14 at 08:20

Modify List Header Utilizing XSL

1 Answers1

Linked