Expandable output

This page is obsolete and available for historical purposes only.

Availability

This feature is available in:
  • nightly builds starting of 2011-04-04
  • Orbeon Forms 4.0

Rationale

You can use the expandable output component in cases where you could use an <xforms:output>, when the text you want to show can be a bit longer, potentially taking multiple lines. You don't want to clutter the interface by always showing it all, but you'd like to show if it is short enough, and provide a quick way for users to see the rest of the text.




Usage

You use the expandable output very much like an <xforms:output>:

<fr:expandable-output ref="your-node">
    <xforms:label>Your label</xforms:label>
</fr:expandable-output>

Behavior and configuration

Max characters and tolerance

In essence, the component shows the first n characters of your text, and the rest is shown after users click on Show more. You want the text to be cut on a word boundary, so the component looks for the first space after the 60th character. You can change this default by setting the following property:

<property as="xs:integer" name="oxf.xforms.xbl.fr.expandable-output.max-characters" value="60"/>

It would seem ridiculous to have users click on Show more link to just reveal two more words. So the component has a tolerance of 20 characters. If the text doesn't exceed max-character (by default 60) plus tolerance (by default 20), then the whole text is shown inline. You can change the value of the tolerance by setting the following property:

<property as="xs:integer" name="oxf.xforms.xbl.fr.expandable-output.tolerance" value="20"/>

If the text doesn't contain a space character where the cut can be done for many characters (imagine you have a super-long foreign word, or a number there), you wouldn't want too many characters to be displayed inline, as this would defeat your original goal. So if after the 60th character (max-character), none of the following 20 characters is a space (tolerance), the component does a cut at 60 character (max-character), in the middle of a word, not to risking showing too much content, which might damage your layout.

Instead if using the properties for max-characters and/or tolerance, if you wish to override those parameters for a specific instance of the component, you can use attributes on the component; for instance:

<fr:expandable-output max-characters="60" tolerance="20">

If the value for max-characters and/or tolerance needs to be dynamic, you can use a nested element:

<fr:expandable-output>
    <fr:max-characters ref="path/to/max-characters"/>
    <fr:tolerance ref="path/to/tolerance"/>
</fr:expandable-output>

Field width

By default, the width of the block containing the text is 20em. You can override this and set your own width with:

.xforms-form .xbl-fr-expandable-output-output { width: 30em }


Comments