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>
<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>
<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: