Orbeon Forms
Search
K
Comment on page

Output

Basic Usage

<xf:output ref="text"/>
or:
<xf:output value="current-dateTime()"/>

Using a media type

<xf:output> supports a mediatype attribute on that element allowing display of other media types.

Image mediatypes

For the <xf:output> control to display an image, you need to:
  • Have a mediatype attribute on the <xf:output>. That attribute must refer to an image mediatype, such as image/* or image/jpeg.
  • Use the value attribute on <xf:output> or bind to the control to a node without type, with an xs:anyURI type or with an xs:base64Binary type.
The resulting value from the instance is interpreted either as a URI pointing to an image, or as a base64-encoded binary representation of the image. The image will display in place of the <xf:output>. It is possible to dynamically change the image pointed to. For example:
<xf:output
mediatype="image/*"
value="'/images/moon.jpg'"/>
or:
<xf:model>
<xf:instance>
<image-uri/>
</xf:instance>
<xf:bind ref="image-uri" type="xs:anyURI"/>
</xf:model>
...
<xf:output mediatype="image/*" ref="image-uri"/>
The image URI may or may not be reachable from the client browser. Orbeon Forms hides this from the developer. For example, to upload and show an image:
<!-- Hide xf:output when there is no URI available -->
<xf:group ref="image[normalize-space() != '']">
<!-- Image output -->
<xf:output ref="." mediatype="image/*">
<xf:label/>
</xf:output>
</xf:group>
<!-- File chooser -->
<xf:upload ref="image">
<xf:label/>
<xf:filename ref="@filename"/>
<xf:mediatype ref="@mediatype"/>
<xxf:size ref="@size"/>
</xf:upload>
In that example, the upload control stores a temporary URI pointing to a local file: resource. While this URI is not visible from the client web browser, the output control automatically proxies it so that the end user can see the image.

HTML mediatype

When an <xf:output> control has a mediatype attribute with value text/html, the value of the node to which the control is bound is interpreted as HTML content. Consider the following XForms instance:
<xf:instance id="my-instance">
<form>
<html-content> This is in &lt;b&gt;bold&lt;/b&gt;! </html-content>
</form>
</xf:instance>
You bind an <xf:output> control to the html-content node as follows:
<xf:output ref="instance('my-instance')/html-content" mediatype="text/html"/>
This will display the result as HTML, as expected: "This is in bold!". If the mediatype is not specified, the result would be instead: "This is in bold!". In the XForms instance, the HTML content must be escaped as text. On the other hand, the following content will not work as expected:
<xf:instance>
<form>
<html-content> This is in in <b>bold</b>! </html-content>
</form>
</xf:instance>
NOTE: When using a mediatype="text/html", an HTML <div> element will be generated by the XForms engine to hold the HTML data. As in HTML a <div> cannot be embedded into a <p>, if you have a <xf:output mediatype="text/html"> control, you should not put that control into a <xh:p>.

xxf:download appearance

<xf:output> supports the xxf:download appearance, which causes the the resource identified by the single-node binding to be downloadable through a link.
Like <xf:upload>, when using this appearance, <xf:mediatype> and <xf:filename> children elements are allowed (but not the <xxf:size> element). When serving the file, if these elements are present, they are passed to the resulting HTTP response to provide mediatype and file name hints to the browser. Example:
<xf:instance id="my-instance">
<instance>
<file mediatype="" filename="" size=""/>
</instance>
</xf:instance>
...
<xf:upload ref="file">
<xf:label>Upload</xf:label>
<xf:mediatype ref="@mediatype"/>
<xf:filename ref="@filename"/>
<xxf:size ref="@size"/>
</xf:upload>
<xf:output ref="file" appearance="xxf:download">
<xf:label>Download</xf:label>
<xf:mediatype ref="@mediatype"/>
<xf:filename ref="@filename"/>
</xf:output>
The data type for the resource must be xs:anyURI or xs:base64Binary.

HTTP headers

When the output control performs an HTTP request as a result of dereferencing a URL, for example, as the result of using an image mediatype, the nested <xf:header> child element allows specifying custom headers to set on the HTTP request.
The syntax for <xf:header> is the same as the <xf:header> child element of <xf:submission>.
<xf:output ref="instance()" mediatype="image/*">
<xf:header ref="instance('headers')/header">
<xf:name value="@name"/>
<xf:value value="@value"/>
</xf:header>
</xf:output>