data view web part – Riyaz's Innovative Solutions Blog

Problem Scenario:

Final mark up should resemble the following HTML output:

<div id="myCarousel" class="carousel slide">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            
            <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="item active">
                    <div class="fill" style="background-image:url('http://lorempixel.com/740/340/business/5/');"></div>
                    <div class="carousel-caption">
                        <h5>Sleek Responsive SharePoint 2013 Theme</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="fill" style="background-image:url('http://lorempixel.com/740/340/business/8');"></div>
                    <div class="carousel-caption">
                        <h5>Elegant Multipurpose SharePoint 2013 Theme</h5>
                    </div>
                </div>
                <div class="item">
                    <div class="fill" style="background-image:url('http://lorempixel.com/740/340/business/4');"></div>
                    <div class="carousel-caption">
                        <h5>Modern and Usable SharePoint 2013 Theme</h5>
                    </div>
                </div>
            </div>
            
            <!-- Slide Controls -->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
        </div>

Few things to note in the dataview webpart markup:

1. Printing row numbers

2. if, else clause

3. custom template method

<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="false" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="DataView 1" PageType="PAGE_NORMALVIEW" __markuptype="vsattributemarkup" partorder="2" __WebPartId="{EDF43C51-560F-44A2-8DAF-C1AA9912FBE6}" id="g_edf43c51_560f_44a2_8daf_c1aa9912fbe6" listname="{BB357271-2227-4AB4-8C7A-DEF4E1FDCCD7}" pagesize="10" chrometype="None" chromestate="Normal">
 <DataSources><SharePointWebControls:SPDataSource runat="server" DataSourceMode="List" UseInternalName="true" UseServerDataFormat="true" selectcommand="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&quot;SortOrder&quot; Ascending=&quot;TRUE&quot;/&gt;&lt;/OrderBy&gt;&lt;Where&gt;&lt;Eq&gt;&lt;FieldRef Name=&quot;DisplayTemplateJSTemplateHidden&quot;/&gt;&lt;Value Type=&quot;Boolean&quot;&gt;0&lt;/Value&gt;&lt;/Eq&gt;&lt;/Where&gt;&lt;/Query&gt;&lt;/View&gt;" id="spdatasource2"><SelectParameters><WebPartPages:DataFormParameter Name="ListID" ParameterKey="ListID" PropertyName="ParameterValues" DefaultValue="BB357271-2227-4AB4-8C7A-DEF4E1FDCCD7"/><WebPartPages:DataFormParameter Name="WebURL" ParameterKey="WebURL" PropertyName="ParameterValues" DefaultValue="{sitecollectionroot}"/><asp:Parameter Name="StartRowIndex" DefaultValue="0"/><asp:Parameter Name="nextpagedata" DefaultValue="0"/><asp:Parameter Name="MaximumRows" DefaultValue="10"/></SelectParameters></SharePointWebControls:SPDataSource></DataSources>
 
 <datafields>@Title,Title;@URL,Picture;@DisplayTemplateJSTemplateHidden,Hidden;@SortOrder,Sort Order;@ID,ID;@ContentType,Content Type;@Modified,Modified;@Created,Created;@Author,Created By;@Editor,Modified By;@_UIVersionString,Version;@Attachments,Attachments;@File_x0020_Type,File Type;@FileLeafRef,Name (for use in forms);@FileDirRef,Path;@FSObjType,Item Type;@_HasCopyDestinations,Has Copy Destinations;@_CopySource,Copy Source;@ContentTypeId,Content Type ID;@_ModerationStatus,Approval Status;@_UIVersion,UI Version;@Created_x0020_Date,Created;@FileRef,URL Path;@ItemChildCount,Item Child Count;@FolderChildCount,Folder Child Count;@AppAuthor,App Created By;@AppEditor,App Modified By;</datafields>
 <XSL><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">
 <xsl:output method="html" indent="no"/>
 <xsl:decimal-format NaN=""/>
    <xsl:param name="dvt_apos">'</xsl:param>
    <xsl:param name="ManualRefresh"></xsl:param><xsl:variable name="dvt_1_automode">0</xsl:variable>
    <xsl:template match="/">
     <xsl:choose>
      <xsl:when test="($ManualRefresh = 'True')">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
     <tr>
      <td valign="top">
       <xsl:call-template name="dvt_1"/>
      </td>
      <td width="1%" class="ms-vb" valign="top">
       <img src="/_layouts/15/images/staticrefresh.gif" id="ManualRefresh" border="0" onclick="javascript: {ddwrt:GenFireServerEvent('__cancel')}" alt="Click here to refresh the dataview."/>
      </td>
     </tr>
    </table>
   </xsl:when>
      <xsl:otherwise>
       <xsl:call-template name="dvt_1"/>
   </xsl:otherwise>
     </xsl:choose>
 </xsl:template>
    <xsl:template name="dvt_1.empty">
     <xsl:variable name="dvt_ViewEmptyText">There are no items to show in this view.</xsl:variable>
  <table border="0" width="100%">
   <tr>
    <td class="ms-vb">
     <xsl:value-of select="$dvt_ViewEmptyText"/>
    </td>
   </tr>
  </table>
 </xsl:template>
    <xsl:template name="dvt_1">
     <xsl:variable name="dvt_StyleName">PlnTitl</xsl:variable>
     <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row" />
     <xsl:variable name="dvt_RowCount" select="count($Rows)" />
     <xsl:variable name="dvt_IsEmpty" select="$dvt_RowCount = 0" />
     <xsl:choose>
      <xsl:when test="$dvt_IsEmpty">
       <xsl:call-template name="dvt_1.empty" />
     </xsl:when>
      <xsl:otherwise>
    <div id="myCarousel" class="carousel slide">
     <xsl:call-template name="dvt_1.body">
      <xsl:with-param name="Rows" select="$Rows" />
     </xsl:call-template>
     <!-- Slide Controls -->
              <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="icon-prev"></span></a>
              <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="icon-next"></span></a>
    </div>
   </xsl:otherwise>
     </xsl:choose>
   </xsl:template>
    <xsl:template name="dvt_1.body">
     <xsl:param name="Rows" />
     <!-- Indicators -->
     <ol class="carousel-indicators">
      <xsl:for-each select="$Rows">
       <xsl:call-template name="dvt_1.indicators" />
      </xsl:for-each>
     </ol>
     <!-- Wrapper for slides -->
     <div class="carousel-inner">
      <xsl:for-each select="$Rows">
       <xsl:call-template name="dvt_1.rowview" />
      </xsl:for-each>
     </div>
   </xsl:template>
    <xsl:template name="dvt_1.indicators">
     <xsl:if test="position() != 1" ddwrt:cf_ignore="1">
     </xsl:if>
     <xsl:choose>
         <xsl:when test="position() = 1">
       <li data-target="#myCarousel" data-slide-to="{position()}" class="active"></li>
         </xsl:when>
         <xsl:otherwise>
       <li data-target="#myCarousel" data-slide-to="{position()}"></li>
         </xsl:otherwise>
     </xsl:choose>        
     <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
   <br /><span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view" />
  </xsl:if>
   </xsl:template>   
    <xsl:template name="dvt_1.rowview">
     <xsl:if test="position() != 1" ddwrt:cf_ignore="1">
     </xsl:if>    
     <xsl:choose>
         <xsl:when test="position() = 1">
      <div class="item active">
       <div class="fill" style="background-image:url('{@URL}');">
       </div>
       <div class="carousel-caption">
                          <h5><xsl:value-of select="@Title" /></h5>
                      </div>      
      </div>  
         </xsl:when>
         <xsl:otherwise>
      <div class="item">
       <div class="fill" style="background-image:url('{@URL}');">
       </div>
       <div class="carousel-caption">
                          <h5><xsl:value-of select="@Title" /></h5>
                      </div>      
      </div>  
         </xsl:otherwise>
     </xsl:choose>    
     <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
   <br /><span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view" />
  </xsl:if>
   </xsl:template>
  </xsl:stylesheet></XSL>
<parameterbindings>
   <ParameterBinding Name="ListID" Location="None" DefaultValue="BB357271-2227-4AB4-8C7A-DEF4E1FDCCD7"/>
   <ParameterBinding Name="WebURL" Location="None" DefaultValue="{sitecollectionroot}"/>
   <ParameterBinding Name="dvt_apos" Location="Postback;Connection"/>
   <ParameterBinding Name="ManualRefresh" Location="WPProperty[ManualRefresh]"/>
   <ParameterBinding Name="UserID" Location="CAMLVariable" DefaultValue="CurrentUserName"/>
   <ParameterBinding Name="Today" Location="CAMLVariable" DefaultValue="CurrentDate"/>
   <ParameterBinding Name="dvt_startposition" Location="Postback" DefaultValue=""/>
  </parameterbindings></WebPartPages:DataFormWebPart>

Before exporting the data view webpart add an additional parameter using SharePoint designer parameter ribbon option, the final code for the parameter should look like the following: <WebPartPages:DataFormParameter Name="WebURL" ParameterKey="WebURL" PropertyName="ParameterValues" DefaultValue="/sites/toplvlsite/"/>
Once a dataview webpart is created using SharePoint designer, perform an export using [WEB PART]\To File.
Open the exported webpart file content in NotePad++
Search for a line <property name="ListName" type="string" and remove it. E.G: ~~<property name="ListName" type="string">{2AA6099D-238B-4692-8BB4-48EFFB0952B1}</property>~~
Remove the following elements and their content out of the file as we are only using the dataview to display content:

~~<UpdateParameters>[Any Content]</UpdateParameters>~~
~~<InsertParameters>[Any Content]</InsertParameters>~~
~~<DeleteParameters>[Any Content]</DeleteParameters>~~

Before doing the next step, replace the GUID assigned to the ListID parameter with ListName value (Get from List Settings > Name value) – Look for GUID with parenthesis as well { and }.
Replace all occurrence of "ListID" to "ListName" and replace the defaultValue with the Name of the list.
The following entry needs to be adjusted as well for string entry : <property name="ListName" type="System.Guid, mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">Issues</property>

Tag: data view web part

DataView WebPart / XSLT Customer Parameter Bindings and using its data

DataView WebPart – Carousel

Basic Zone Area using SharePoint Designer–2007/2010/2013/O365

Making the DVWP (DataView/XSLT WebPart) reusable in any site collection