XForms/Output and Links

Motivation
You want to display a repeated set of URLs in a section of your form. Each URL is created by concatenating a base URL and a URL parameter.

Method
The equivalent of the HTML anchor tag () in an XForms application is the  element.

If in a web page, you want your output to appear like this:

in an XForms application each anchor will be xf:load.

Your input instance is like the following: 

Discussion
With XForms it is not possible to create dynamic links inside a repeat using a combination of output, value and concat. This would also impact the ability to notify the user that is navigating away from a form.

There are two ways to display a list of links. Both use a trigger with the button appearance turned off. The first uses a load after setting a temporary instance. The second uses a submit/submission combination.

Using load
You can also use the load element as the element.

Link to XForms Application
Load XForms Application

Sample Program
The following program displays a list of links in a horizontal row. Each link has a label and a URL suffix that is extracted from an instance document.

     Displaying Links in an XForms Application         <xf:action ev:event="DOMActivate"> <xf:setvalue ref="instance('URL-container')" value="concat('http://en.wikipedia.org/wiki/', instance('links')/link[index('link-repeat')]/wikipedia-id)" /> <xf:load ref="instance('URL-container')" /> </xf:action> </xf:trigger> </xf:repeat>

Acknowledgment
This solution was posted to the Mozilla XForms development newsgroup by John Clark on February 27th, 2008.

Using Submit and Submission for Links
As an alternative strategy you can replace a form by using the submission statement with a replace="all" attribute. You can then style the submission button using appearance="minimal" and make the button look like a link:

The only disadvantage of this solution over using standard links is that the URL does not display in the status bar. This problem can be mitigated by using the xf:hint element within the label. This text will display when the user hovers over the link.

This method also allows you to interrupt the submission, check for changes in instance data and display warning messages before a form is unloaded.