Author: Jim Bob Howard

Editing a list item often involves more fields than when you are simply viewing the item. The default view of a list doesn’t always show all of the fields for the item. But, if you’re going to edit it, you need access to all of the fields… or, at least, all of the ones you want the user to edit.

In our Full-time Employee (FTE) example, we’re going to filter employees by Location on individual location pages. So, it won’t be necessary to display the Location again in the list item. On each page, we’ll also group by a field named "Group," so again, we won’t need to display Group on the row.

Default DVWP Multi-item View with Edit/Delete functions turned on (and moved to the right)

But, when it’s time to edit, we need to be able to edit the employee’s Location and Group. You could create an "edit" view which includes everything and require that the user switch to that if they want to edit (non-intuitive training issue). Or you could add the fields to the default view so they’ll show up on the edit template, too. But when they’re not being edited, you’ve wasted a bunch of real estate that ends up being redundant or irrelevant.

Besides, when you start working with form fields, you’ll quickly run out of real estate and/or force a left/right scroll (which is NEVER good).

Edit template with all fields in default location. Even stretched out, not everything fits on the screen

Let’s look at one option for fitting all the extra fields onto the page.

Modified Edit Template for DVWP Multi-item View

Notice that we’re taking up two rows here, when the default keeps everything on one row, like this:

<xsl:template name="dvt_1.rowedit">
    <xsl:param name="Pos" />
    <tr>
        <td class="ms-vb">
            <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" {code} />
            <SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="Title" ControlMode="Edit" />
        </td>
        <td class="ms-vb">
            <SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="Edit" FieldName="Positions" ItemId="{@ID}" {code} />
            <SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="Positions" ControlMode="Edit" />
        </td>
        <td class="ms-vb">
            <SharePoint:FormField runat="server" id="ff5{$Pos}" ControlMode="Edit" FieldName="WorkShift" ItemId="{@ID}" {code} />
            <SharePoint:FieldDescription runat="server" id="ff5description{$Pos}" FieldName="WorkShift" ControlMode="Edit" />
        </td>
        <td class="ms-vb">
            <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="Edit" FieldName="FTE" ItemId="{@ID}" {code} />
            <SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="FTE" ControlMode="Edit" />
        </td>
        <td class="ms-vb">
            <SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="Edit" FieldName="EffDate" ItemId="{@ID}" {code} />
            <SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="EffDate" ControlMode="Edit" />
        </td>
        <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
            <td class="ms-vb" width="1%" nowrap="">
                <xsl:call-template name="dvt_1.automode">
                    <xsl:with-param name="KeyField">ID</xsl:with-param>
                    <xsl:with-param name="KeyValue" select="ddwrt:EscapeDelims(string(@ID))" />
                    <xsl:with-param name="Mode">edit</xsl:with-param>
                    <xsl:with-param name="Pos" select="$Pos"/>
                </xsl:call-template>
            </td>
        </xsl:if>
    </tr>
</xsl:template>

Sample XSLT of default Edit Template: "dvt_1.rowedit"

In the modified view, we need to add the Site/Department, and the Group.

Since this template is a complete row (TR), we can break it into to two rows very easily by "breaking" it into two rows. This is a very simple process which consists of closing one row and opening another, by inserting </tr><tr> between the TD’s where we want the split to occur:

Before


After

If we refresh the Design pane, it’ll look pretty nasty because we have four columns on the top row and two on the bottom. But before we do that, let’s clean up the table and make room for the additional columns we want to show. While we’re still in the code pain, let’s add two more TDs to the bottom row.

    <tr>
        <td class="ms-vb"></td>
        <td class="ms-vb"></td>
        <td class="ms-vb">
            <SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="Edit" FieldName="EffDate" ItemId="{@ID}" {code} />
            <SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="EffDate" ControlMode="Edit" />        </td>

Of course, since we’re working with the edit template, when the Design pane refreshes it goes back to the default template and we have to switch back to edit.

Even with the data split over two rows, the textbox in my example takes up a ridiculous amount of space:

Textbox taking up a lot more space than it needs to

That’s easily fixed by adding the DisplaySize attribute to the FormField tag:

            <SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="Edit" FieldName="Title" ItemId="{@ID}" {code} DisplaySize="35" />

Now, just add the columns you want:

1. Click in the table cell where the column should go
2. Find the column in the Data Source Details pane
3. Right click the column and click Insert as List Form Field

Of course, the column headings won’t match up for the bottom row, so you’ll need to add labels to make those obvious to the user.

You can copy the main header row and insert it between the rows you created when you split the default…

<tr>
    <th class="ms-vh" nowrap="" style="height: 22px">Location</th>
    <th class="ms-vh" nowrap="" style="height: 22px">Group</th>
    <th class="ms-vh" nowrap="" style="height: 22px">Effective Date</th>
    <th class="ms-vh">&#160;</th>
</tr>

Edit Template with two rows

Or you can simply add some labels, which looks a little cleaner…

<strong>Site/Department: </strong> . . .

From a visual standpoint, it’s still a bit confusing on the page:

Edit Template in the middle of a list of view records

What am I doing here? Am I inserting, editing, deleting? Which row am I working on? From a UI perspective, this layout no workie, so we’re going to put a colored box around the record to make it stand out and let the user know where they’re actually working.

Now, we’re going to run into similar issues with the insert and delete templates, so let’s make each one a different color to give another visual clue to what action we’re taking. To me, green makes sense for insert, and red for delete. So, I’ll take the last part of RGB and make update blue.

Using CSS, create classes for the border decorations to help differentiate the templates:

.ed-l {border-left:medium #0099FF ridge;}
.ed-r {border-right:medium #0099FF ridge;}
.ed-t {border-top:medium #0099FF ridge;}
.ed-b {border-bottom:medium #0099FF ridge;}

.in-l {border-left:medium lime ridge;}
.in-r {border-right:medium lime ridge;}
.in-t {border-top:medium lime ridge;}
.in-b {border-bottom:medium lime ridge;}

.dl-l {border-left:medium red ridge;}
.dl-r {border-right:medium red ridge;}
.dl-t {border-top:medium red ridge;}
.dl-b {border-bottom:medium red ridge;}

Then, for each TD add the appropriate classes:

<xsl:template name="dvt_1.rowedit">
    <xsl:param name="Pos" />
    <tr>
        <td class="ms-vb ed-l ed-t">
            . . .
        </td>
        <td class="ms-vb ed-t">
            . . .
        </td>
        <td class="ms-vb ed-t">
            . . .
        </td>
        <td class="ms-vb ed-r ed-t">
            . . .
        </td>
    </tr>
    <tr>
        <td class="ms-vb ed-b ed-l">
            . . .
        </td>
        <td class="ms-vb ed-b">
            . . .
        </td>
        <td class="ms-vb ed-b">
            . . .
        </td>
        <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
            <td class="ms-vb ed-b ed-r" width="1%" nowrap="">
                <xsl:call-template name="dvt_1.automode">
            . . .
                </xsl:call-template>
            </td>
        </xsl:if>
    </tr>
</xsl:template>

Now the edit template looks like this:

Now it’s obvious what we’re doing: Editing Marcia Walsh’s information

Repeat this process with the insert template.

Next Time, we’ll continue Extending the DVWP by adding an alternate edit template for the remove form action.

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]).