SharePoint: Extending the DVWP – Part 2: Layout Enhancement – Rearranging Columns – Insert Template

Author: Jim Bob Howard

In my last article, I showed you how to move the edit/delete links in the DVWP from the left side of the page, to the right.

Rinse, Repeat…
Of course, if we added the insert link, we need to do the same thing with the Insert Template.

1. Switch Views
   Switch to the Insert Template, by clicking on the arrow (or chevron) that appears when you hover over the webpart in the Design pane.

Choose the Insert Template to preview


Sure enough, it’s out of line like the Edit Template was:


Links on the left again!

2. Find the template
   This time, we’re looking for the template named dvt_1.rowinsert. Click on a field (not the actual save/cancel links) in the Display pane to go directly to the template in the Code pane:

<xsl:template name="dvt_1.rowinsert">
    <xsl:param name="IsInsertMode" />
    <xsl:variable name="Pos">_new</xsl:variable>
    <tr>
        <xsl:choose>
            <xsl:when test="$IsInsertMode = '1'">
                <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
                    <td class="ms-vb" width="1%" nowrap="nowrap">
                        <xsl:call-template name="dvt_1.automode">
                            …
                      </xsl:call-template>
                    </td>
                </xsl:if>
                <td class="ms-vb">
                    <SharePoint:formfield … FieldName="Title" … />
                    <SharePoint:fielddescription … />
                </td>
                <td class="ms-vb">
                    <xsl:value-of select="@ContentType" />
                </td>
                . . .
                <td class="ms-vb">
                    <SharePoint:formfield … FieldName="Expires" … />
                    <SharePoint:fielddescription … />
                </td>
            </xsl:when>
            <xsl:otherwise>
                <td class="ms-vb" colspan="99">
                    <a href="javascript: {…code…}">insert</a>
                </td>
            </xsl:otherwise>
        </xsl:choose>
    </tr>
</xsl:template>

3. Edit the Template
   Again, we’ll move the template call to the bottom of the list, which will put it rightmost on our table:

<xsl:template name="dvt_1.rowinsert">
    <xsl:param name="IsInsertMode" />
    <xsl:variable name="Pos">_new</xsl:variable>
    <tr>
        <xsl:choose>
            <xsl:when test="$IsInsertMode = '1'">
                <td class="ms-vb">
                    <SharePoint:formfield … FieldName="Title" … />
                    <SharePoint:fielddescription … />
                </td>
                <td class="ms-vb">
                    <xsl:value-of select="@ContentType" />
                </td>
                . . .
                <td class="ms-vb">
                    <SharePoint:formfield … FieldName="Expires" … />
                    <SharePoint:fielddescription … />
                </td>
                <xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
                    <td class="ms-vb" width="1%" nowrap="nowrap">
                        <xsl:call-template name="dvt_1.automode">
                            …
                      </xsl:call-template>
                    </td>
                </xsl:if>
            </xsl:when>
            <xsl:otherwise>
                <td class="ms-vb" colspan="99">
                    <a href="javascript: {…code…}">insert</a>
                </td>
            </xsl:otherwise>
        </xsl:choose>
    </tr>
</xsl:template>

4. Check the Display
   Since we edited the code, when we click on the Display pane, it goes back to the Default template. When we switch back to the Insert Template, it now looks like this:

Save and Cancel are now on the right

And there you have it: Action links on the right-hand side of a DVWP for insert.

The final page layout for the Insert Template now looks like this:

Insert Template:

…which, for those of you keeping score, looks very similar to the Default and Edit Templates we edited last time.

Default Template:

Edit Template:

For more information on XSLT Templates, see Marc Anderson’s excellent series, Unlocking the Mysteries of Data View Web Part XSL Tags.

And keep an eye out for the next installment of Extending the DVWP, where we’ll talk about Turning DVWP Action Links into Buttons.

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