SharePoint: Extending the DVWP – Part 12: Adding More Form Fields from the Data

Author: Jim Bob Howard

Before we wipe out old data with new stuff, wouldn’t be nice to know what’s being lost so you can decide if you’d rather keep it, or maybe save a copy somewhere else for nostalgic purposes?

What Changed?

By comparing the data when the page was loaded with what it looks like when the Save button is clicked, we can tell what’s changed and then decide what we want to do based on what’s changed. In the last article, we learned about the asp:label control which, even though it is not editable on the form, is available to form action workflow through Form Fields.

We can add any column from our data source(s) to the form simply by using the same method to add them as a label.

From SharePoint Designer (SPD):

1. Switch to the Edit Template


2. Click in the cell (on any row) where you want the label stored (making sure that you don’t have an existing form field selected or it will be replaced)

Click in the cell (not on the data). We’ll add the label here.

3. Select from the Data Source Details tool pane the column you want to store here


4. Click Insert Selected Fields as … and choose Formatted… -> Label


5. The change is visible in the Design and Code panes


6. Now we just need to hide it, by changing…

<td class="ms-vb">
        <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="Edit" FieldName="Positions" … />
        <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Positions" … />
        <asp:Label runat="server" id="ff11{$Pos}" text="{@Positions}" … />
</td>

…to

<td class="ms-vb">
        <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="Edit" FieldName="Positions" … />
        <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Positions" … />
        <span style="display:none">
                <asp:Label runat="server" id="ff11{$Pos}" text="{@Positions}" … />
        </span>
</td>

A Snapshot in Time

The label is now hidden, but still bound to the database, so it will always show what data looked like when the page was loaded. The user can’t change it.

Hidden labels provide a snapshot of the data from the moment the page loaded.

Repeat the process for every column for which you need a view of pre-edited content. For maintainability, it might be helpful to have each hidden label in the same table cell as the corresponding form field. But since they’ll all be hidden, you could also put them all together inside one span tag.

Next Time: Have you been wondering how to use PreSaveAction() that I mentioned awhile back? In the next installment of Extending the DVWP, we’ll start filling in the "do some stuff" with really useful stuff.

Author: Jim Bob Howard

Jim Bob Howard is a web designer / webmaster in the healthcare industry. He has been working with SharePoint since March 2009 and enjoys sharing what he has learned. He is a moderator and frequent contributor to Stump the Panel, and answers SharePoint questions on Twitter (@jbhoward) and via email ([email protected]).