Dialog Select

Overview

This control is a selection control which allows the user to select one or more values using two lists:


Usage

You use the control like an <xforms:select> control. The basic syntax is as follows:

<fr:dialog-select ref="value1" separator=", ">
    <xforms:label>Selection 1:</xforms:label>
    <xforms:itemset nodeset="instance('items')/item">
        <xforms:label ref="@label"/>
        <xforms:value ref="@value"/>
    </xforms:itemset>
</fr:dialog-select>

As with the <xxforms:dialog>, set the close="false" attribute if you don't want the dialog to have a "X" on the toolbar, allowing users to close the dialog.

Selected values

Labels associated with the selected values appear in two ways:
  • if a separator attribute is set, then the values appear as a single string with the labels separated by the given separator
  • otherwise, as a list of <ul> / <li> elements containing the output values as if with <xforms:output>, which you can style with CSS:

<ul>
    <li>
        <span class="xforms-control xforms-output">One</span>
    </li>
    <li>
        <span class="xforms-control xforms-output">Two</span>
    </li>
    <li>
        <span class="xforms-control xforms-output">Four</span>
    </li>
    <li>
        <span class="xforms-control xforms-output">Eight</span>
    </li>
</ul>


Limitations

  • When using the component, you cannot change the label of the button, as well as a number of strings in the dialog.
  • The label of the button and an number of strings in the dialog are always shown in English, irrelevant of the language preferred by the end-user.
Comments