CTS – Your Technology Partner

Me + DVWP = BFFs: Part 1

Written by Craig Butler on April 2, 2013

Alicia%20O'Neal_jpg

By Alicia O’Neal

As a consultant with multiple clients, I am constantly creating different layouts for SharePoint data. Because I need this flexibility, the SharePoint Data View Web Part (DVWP) has become my best friend. The DVWP provides the ability to pull data from multiple SharePoint sources and to format the data on the page any way that HTML will allow. When I began using DVWP’s I primarily took advantage of the Design view in SharePoint Designer. I was able to move components around within the web part visually without having to know the code. However, as I received more complex requests that could not be rendered with the OOTB designs I began doing most of my work in the Code view and just used the Design view to review my work. So then I heard the rumor…”SharePoint 2013 will not have a Design view”. Then the rumor was confirmed (thanks, Google!).

Now that SharePoint 2013 is out, I thought I would share the awesomeness of the DVWP:

1. For those that are DVWP newbies

2. For DVWP enthusiasts that are panicking about the absence of the Design view.

In this post, I will simply walk through the steps to get a DVWP on the page, assigning a data source, and adding elements from a list to the web part. The next post in the series I will walk through each bit of the code inserted on the page with a DVWP. Finally, I will demonstrate how to design and code custom layouts using the DVWP.

For those familiar with working with DVWPs, there are only minor changes in getting the DVWP onto the page. (In other words… this will be boring for you.) But I wanted to include novice set in this series so I will be very detailed. Ok… warning issued… here you go…

SharePoint 2013 & SharePoint Designer 2013: Add a Data View Web Part to a page.

· Create or open a Web Part Page in SharePoint Designer 2013.

clip_image002

· Edit the page

clip_image004

· Find the Web Part Zone where you would like to add the Data View Web Part. If you have multiple web part zones on the page, a simple way to find the correct web part zone is to open the page in your browser…

clip_image006

· Then edit the page…

clip_image008

· Note the title of the web part zone…

clip_image010

· Then back in SPD, find the Web Part Zone with the noted title. Look for the tag: ‘<WebPartPages:WebPartZone’>

clip_image012

· Inside the Web Part Zone, place your cursor inside the open and close Zone Template tags:

clip_image014

· From the SPD ribbon, click the ‘INSERT’ tab then within the ‘Data Views and Forms’ group select the ‘Data View’ icon and choose the ‘Empty Data View’ option.

clip_image016

· You will now need to add one or more data sources to the DVWP.

o Place your cursor inside the <DataSources> </DataSources> tags.

o Click ‘INSERT’ (SPD ribbon) and select ‘Data Source’ within the ‘Controls’ group.

clip_image018

· In the Data Source Details task pane, select fields to appear in DVWP and choose ‘Insert Selected Fields as… Multiple Item View’. This will insert the XSL for a TABLE layout item view.

· This is the code from the xsl stylesheet that is inserted:

<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">&apos;</xsl:param>
        <xsl:param name="ManualRefresh"></xsl:param>
        <xsl:param name="dvt_firstrow">1</xsl:param>
        <xsl:param name="dvt_nextpagedata" />
        <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">
                <xsl:variable name="dvt_StyleName">Table</xsl:variable>
                <xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
                <xsl:variable name="dvt_RowCount" select="count($Rows)"/>
                <xsl:variable name="RowLimit" select="10" />
                <xsl:variable name="FirstRow" select="$dvt_firstrow" />
                <xsl:variable name="LastRow" select="$FirstRow + $dvt_RowCount - 1" />
                <xsl:variable name="IsEmpty" select="$dvt_RowCount = 0" />
                <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>
                                <table border="0" width="100%" cellpadding="2" cellspacing="0">
                                        <tr valign="top">
                                                <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
                                                        <th class="ms-vh" width="1%" nowrap="nowrap"></th>
                                                </xsl:if>
                                                <th class="ms-vh" nowrap="nowrap">Title</th>
                                                <th class="ms-vh" nowrap="nowrap">Number</th>
                                                <th class="ms-vh" nowrap="nowrap">Date</th>
                                                <th class="ms-vh" nowrap="nowrap">Person</th>
                                                <th class="ms-vh" nowrap="nowrap">Hyperlink</th>
                                        </tr>
                                        <xsl:call-template name="dvt_1.body">
                                                <xsl:with-param name="Rows" select="$Rows"/>
                                                <xsl:with-param name="FirstRow" select="1" />
                                                <xsl:with-param name="LastRow" select="$LastRow - $FirstRow + 1" />
                                        </xsl:call-template>
                                </table>
                        </xsl:otherwise>
                </xsl:choose>
                <xsl:call-template name="dvt_1.commandfooter">
                        <xsl:with-param name="FirstRow" select="$FirstRow" />
                        <xsl:with-param name="LastRow" select="$LastRow" />
                        <xsl:with-param name="RowLimit" select="$RowLimit" />
                        <xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
                        <xsl:with-param name="RealLastRow" select="number(ddwrt:NameChanged('',-100))" />
                </xsl:call-template>
        </xsl:template>
        <xsl:template name="dvt_1.body">
                <xsl:param name="Rows"/>
                <xsl:param name="FirstRow" />
                <xsl:param name="LastRow" />
                <xsl:for-each select="$Rows">
                        <xsl:variable name="dvt_KeepItemsTogether" select="false()" />
                        <xsl:variable name="dvt_HideGroupDetail" select="false()" />
                        <xsl:if test="(position() &gt;= $FirstRow and position() &lt;= $LastRow) or $dvt_KeepItemsTogether">
                                <xsl:if test="not($dvt_HideGroupDetail)" ddwrt:cf_ignore="1">
                                        <xsl:call-template name="dvt_1.rowview" />
                                </xsl:if>
                        </xsl:if>
                </xsl:for-each>
        </xsl:template>
        <xsl:template name="dvt_1.rowview">
                <tr>
                        <xsl:if test="position() mod 2 = 1">
                                <xsl:attribute name="class">ms-alternating</xsl:attribute>
                        </xsl:if>
                        <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
                                <td class="ms-vb" width="1%" nowrap="nowrap">
                                        <span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
                                </td>
                        </xsl:if>
                        <td class="ms-vb">
                                <xsl:value-of select="@Title"/>
                        </td>
                        <td class="ms-vb">
                                <xsl:value-of select="@bkkz"/>
                        </td>
                        <td class="ms-vb">
                                <xsl:value-of select="@ov9l"/>
                        </td>
                        <td class="ms-vb">
                                <xsl:value-of select="@_x006b_sg9" disable-output-escaping="yes"/>
                        </td>
                        <td class="ms-vb">
                                <a href="{@Hyperlink}">
                                        <xsl:value-of select="@Hyperlink.desc"/>
                                </a>
                        </td>
                </tr>
        </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.commandfooter">
                <xsl:param name="FirstRow" />
                <xsl:param name="LastRow" />
                <xsl:param name="RowLimit" />
                <xsl:param name="dvt_RowCount" />
                <xsl:param name="RealLastRow" />
                <table cellspacing="0" cellpadding="4" border="0" width="100%">
                        <tr>
                                <xsl:if test="$FirstRow &gt; 1 or $dvt_nextpagedata">
                                        <xsl:call-template name="dvt_1.navigation">
                                                <xsl:with-param name="FirstRow" select="$FirstRow" />
                                                <xsl:with-param name="LastRow" select="$LastRow" />
                                                <xsl:with-param name="RowLimit" select="$RowLimit" />
                                                <xsl:with-param name="dvt_RowCount" select="$dvt_RowCount" />
                                                <xsl:with-param name="RealLastRow" select="$RealLastRow" />
                                        </xsl:call-template>
                                </xsl:if>
                        </tr>
                </table>
        </xsl:template>
        <xsl:template name="dvt_1.navigation">
                <xsl:param name="FirstRow" />
                <xsl:param name="LastRow" />
                <xsl:param name="RowLimit" />
                <xsl:param name="dvt_RowCount" />
                <xsl:param name="RealLastRow" />
                <xsl:variable name="PrevRow">
                        <xsl:choose>
                                <xsl:when test="$FirstRow - $RowLimit &lt; 1">1</xsl:when>
                                <xsl:otherwise>
                                        <xsl:value-of select="$FirstRow - $RowLimit" />
                                </xsl:otherwise>
                        </xsl:choose>
                </xsl:variable>
                <xsl:variable name="LastRowValue">
                        <xsl:choose>
                                <xsl:when test="$LastRow &gt; $RealLastRow">
                                        <xsl:value-of select="$LastRow"></xsl:value-of>
                                </xsl:when>
                                <xsl:otherwise>
                                        <xsl:value-of select="$RealLastRow"></xsl:value-of>
                                </xsl:otherwise>
                        </xsl:choose>
                </xsl:variable>
                <xsl:variable name="NextRow">
                        <xsl:value-of select="$LastRowValue + 1"></xsl:value-of>
                </xsl:variable>
                <td nowrap="nowrap" class="ms-paging" align="right">
                        <xsl:if test="$dvt_firstrow &gt; 1" ddwrt:cf_ignore="1">
                                <a>
                                        <xsl:attribute name="href">javascript: <xsl:value-of select="ddwrt:GenFireServerEvent('dvt_firstrow={1};dvt_startposition={}')" />;</xsl:attribute>
                                        Start
                                </a>
                                <xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes">&amp;nbsp;</xsl:text>
                                <a>
                                        <xsl:attribute name="href">javascript: history.back();</xsl:attribute>
                                        <img src="/_layouts/15/images/prev.gif" border="0" alt="Previous" />
                                </a>
                                <xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes">&amp;nbsp;</xsl:text>
                        </xsl:if>
                        <xsl:value-of select="$FirstRow" />
                        - <xsl:value-of select="$LastRowValue" />
                        <xsl:text disable-output-escaping="yes" ddwrt:nbsp-preserve="yes">&amp;nbsp;</xsl:text>
                        <xsl:if test="$LastRowValue &lt; $dvt_RowCount or string-length($dvt_nextpagedata)!=0" ddwrt:cf_ignore="1">
                                <a>
                                        <xsl:attribute name="href">javascript: <xsl:value-of
                                        select="ddwrt:GenFireServerEvent(concat('dvt_firstrow={',$NextRow,'};dvt_startposition={',$dvt_nextpagedata,'}'))" />;</xsl:attribute>
                                        <img src="/_layouts/15/images/next.gif" border="0" alt="Next" />
                                </a>
                        </xsl:if>
                </td>
        </xsl:template>
</xsl:stylesheet>

Stay tuned for part 2 when we will step through the code. Once we know how DVWP templates work, we can write the code to design custom-formatted data view web parts!

Comments

comments