SharePoint: Extending the DVWP – Part 4: Turning DVWP Action Links into Buttons

Author: Jim Bob Howard

Continuing the series, Extending the DVWP, I’d like to make a quick announcement that some of these articles will be very short, and some of them will be a bit longer. That said, today’s tip will be very short, but…

The impact could really be great!

In the first two articles in this series, Extending the DVWP: Layout Enhancement – Rearranging Columns…, we moved the action links from their default left-most column position over to the right-most column. In the last article, I showed you a quick technique for saving vertical real estate on the Default Template (what you see when you first come to the page), by keeping the edit and delete links on the same line. But we didn’t do that with the Edit and Insert Templates.

And with good reason.

Since the Edit and Insert Templates are actually data entry forms, they typically take up more vertical real estate than the Default Template, so the vertical presentation of the links makes more sense.

But they could still use some help. Wouldn’t it be nice to have them stand out and look a little more like buttons?

We can easily do that with CSS.

Turning Links into Buttons

1. Switch to the Edit template by clicking on the arrow (or chevron) button that appears when you hover over the DVWP, and choose Edit template from the Data View Preview dropdown.


2. To find the links in code, click on the save link in the Design pane, which will bring the link HTML into view in the Code pane.


3. We’ll simply change the class and add align="center".

<xsl:when test="$Mode = 'edit'">
    <tr>
        <td class="ms-vb" width="1%" nowrap="nowrap">
            <a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">save</a>
        </td>
    </tr>
    <tr>
        <td class="ms-vb" width="1%" nowrap="nowrap">
            <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">cancel</a>
        </td>
    </tr>
</xsl:when>

to

<xsl:when test="$Mode = 'edit'">
    <tr>
        <td class="ms-buttonactivehover" width="1%" nowrap="nowrap" align="center">
            <a href="javascript: {ddwrt:GenFireServerEvent('__commit')}">Save</a>
        </td>
    </tr>
    <tr>
        <td class="ms-buttonactivehover" width="1%" nowrap="nowrap" align="center">
            <a href="javascript: {ddwrt:GenFireServerEvent('__cancel')}">Cancel</a>
        </td>
    </tr>
</xsl:when>

Personally, I think the text looks better in Title Case when displayed as buttons, I have changed the first letter of each to uppercase.

And now it looks like this…

Modified css to make links look like buttons

Do the same thing for the Insert Template and you now have links that look and act like buttons.

Next: Changing the way the links work with PreSaveAction().

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