This feature is available in 3.10 nightly builds as of 2011-04-04.
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 }
