Tuesday, April 18, 2006

Confirmation With XForms

In Web pages using Ajax, when you click on a button or a link, instead of loading another page, that click often starts a background request to the server, and the page then updates based on the response received from the server. If the action is destructive, it might make sense to ask users to confirm their intent. A pop-up is a simple but not very elegant solution. Instead, we can replace the button or link with the confirmation message, as shown in the animation on the right. And you can do this in just a few lines of XForms:

<xforms:switch>
    <xforms:case id="delete">
        <xforms:trigger appearance="xxforms:link">
            <xforms:label>Delete</xforms:label>
            <xforms:toggle case="confirm" ev:event="DOMActivate"/>
        </xforms:trigger>
    </xforms:case>
    <xforms:case id="confirm">
        Are you sure?
        <xforms:trigger appearance="xxforms:link">
            <xforms:label>Delete</xforms:label>
            <xforms:action ev:event="DOMActivate">
                ... Perform actual deletion here ...
                <xforms:toggle case="delete"/>
            </xforms:action>
        </xforms:trigger>
        <xforms:trigger appearance="xxforms:link">
            <xforms:label>Cancel</xforms:label>
            <xforms:toggle case="delete" ev:event="DOMActivate"/>
        </xforms:trigger>
    </xforms:case>
</xforms:switch>

1 comment:

  1. Thanks for the comment. In defense of the XForms 1.0 spec though: I am not sure the purpose of a spec in general is to provide code samples. Blogs, articles and books are probably a better place for that.

    Of course you are free to use good old buttons instead of links :-) That's a good thing about XForms' "intent-driven" user interface: it allows you to very quickly change appearances while keeping the exact same functionality. BTW xxforms:link is non standard, but there is now a suggested way of rendering triggers as links with the use of the "minimal" appearance.

    ReplyDelete