Embed a Data Form Web Part (DFWP) in a SharePoint Web Part Page

Introduction

SharePoint Data Form Web Parts allow the manipulation of XSLT to provide specifically styled and dynamically altered html markup that can greatly enhance the appearance of your data view web parts, and enhance functionality. 

This post covers the inserting a new data form web part into a web part page to allow access to the xlst markup for look and feel customization.

 

Source List

First, I created a SharePoint  list with the following fields and values:

 

 

Next, I created a new default view that filters by current user, so the current user will only see their own record:

In this scenario, there is only one user per record, so when I filter by the current user, I am assured of one record (one row) being returned.  I also populated the list with one record as shown above to allow testing and rendering of the resulting data.

 

Embed the Data Form Web Part

Within SharePoint Designer create a new web part page:

Place your cursor between the <ZoneTemplage></ZoneTemplate> tags as follows:

<WebPartPages:WebPartZone runat="server" Title="loc:LeftColumn" ID="LeftColumn" FrameType="TitleBarOnly"><ZoneTemplate>CURSOR HERE</ZoneTemplate></WebPartPages:WebPartZone> </td>

Click the “Insert” tab on the top menu, and choose “Data View”.  In my case, the only choice was “Empty Data View”, so I went ahead and selected that.  This resulted in the following markup being inserted:

<ZoneTemplate>
<WebPartPages:DataFormWebPart runat="server" IsIncluded="True" AsyncRefresh="True" FrameType="None" NoDefaultStyle="TRUE" ViewFlag="8" Title="DataView 1" PageType="PAGE_NORMALVIEW" __markuptype="vsattributemarkup" partorder="2" __WebPartId="{B420DA3A-F18D-4A10-88F5-5B3D7C38910B}" id="g_b420da3a_f18d_4a10_88f5_5b3d7c38910b">
<DataSources></DataSources><datafields/><XSL></XSL></WebPartPages:DataFormWebPart>
</ZoneTemplate>

Place your cursor within this markup and choose “Data Source” from the insert menu.  Choose your list:

If not already clicked, click “Data Source Details” and you should see your list fields on the right of the screen:

I want the three values “Opted In”, “Enrolled”, and “Record Count” to be displayed within my DFWP.  Ensure your cursor is within the blank Data Form Web Part you just created.  Select the three columns by clicking them in the current data source.  I then choose “Insert Selected Fields as” from the drop down at the top of the current data source window and choose “Single item view” as I know there will only be one row per user.  If you will have multiple rows in your solution, select multiple item view.  This will result in new markup in your DFWP that displays these fields and controls other actions.  The markup that is specific to the fields in this example looks like:

 <xsl:template name="dvt_1.rowview">
<tr>
 <td>
  <table border="0" cellspacing="0" width="100%">
   <tr>
    <td width="25%" class="ms-vb">
     <b>Enrolled:</b>
    </td>
    <td width="75%" class="ms-vb">
     <xsl:value-of select="@Enrolled"/>
    </td>
   </tr>
   <tr>
    <td width="25%" class="ms-vb">
     <b>Record Count:</b>
    </td>
    <td width="75%" class="ms-vb">
     <xsl:value-of select="@Record_x0020_Count"/>
    </td>
   </tr>
   <tr>
    <td width="25%" class="ms-vb">
     <b>Opted In:</b>
    </td>
    <td width="75%" class="ms-vb">
     <xsl:value-of select="@Opted_x0020_In"/>
    </td>
   </tr>

Save your page, and look at this web page within SharePoint and you will see:

That’s it!  You can now start modifying this xsl markup using a combination of html and xsl (<xsl:value-of select="@Record_x0020_Count"/>) value processing to modify the look and feel of the page, see functions outlined here:

http://blog.claudiobrotto.com/2013/all-ddwrt-functions-by-sharepoint-version/