Form fragments links in XDIME 2

You can use theme properties on the XDIME 2 xforms:group and widget:wizard elements to control where fragmentation occurs, and to define or override the link texts on form fragments at runtime.

You can use theme properties on the XDIME 2 xforms:group and widget:wizard elements to control where fragmentation occurs, and to define or override the link texts on form fragments at runtime.

Note:

The override methods are different for XDIME. See Overriding fragment links for information on using the layout and formfragment elements.

Controlling fragmentation

Fragmentation is managed separately for each xforms:model, so if there is more than one model on a page you will need to apply distinct sets of style rules.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
  xmlns:xforms="http://www.w3.org/2002/xforms">
  <head>
    <title>xforms:group</title>
    <style type="text/css">
      .fragment { mcs-break-after: always;}
      .fragment::before::mcs-previous {content:"--&gt;"}
      .fragment::after::mcs-next {content:"&lt;--"}
      .fragment::after::mcs-reset {content:"Reset"}
    </style>
    <xforms:model id="login">
      <xforms:instance>
        <si:instance>
          <si:item name="firstName"/>
          <si:item name="lastName"/>
        </si:instance>
      </xforms:instance>
      <xforms:submission action="test.jsp" id="submit"/>
    </xforms:model>
  </head>
  <body>
    <h4>Form Fragmentation</h4>
    <xforms:group class="fragment">
      <xforms:input model="login" ref="firstName">
        <xforms:label>Enter Your Name:</xforms:label>
      </xforms:input>
    </xforms:group>
    <xforms:group class="fragment">
      <xforms:input model="login" ref="lastName">
        <xforms:label>Enter Your Surname:</xforms:label>
      </xforms:input>
      <xforms:submit submission="submit">
        <xforms:label>Send</xforms:label>
      </xforms:submit>
    </xforms:group>
  </body>
</html>

You use the mcs-break-after style property to control whether fragmentation occurs or not, and where it occurs. This property can be set to 'always', or 'never' and applies only to the xforms:group and widget:wizard elements. The default value of 'never' means that the group does not end a form fragment. If set to 'always' then the group ends a form fragment, and another fragment begins immediately.

Applying theme properties

In a theme, you specify navigation buttons to the previous and next fragments and an optional reset control, using the pseudo-element selectors ::mcs-previous, ::mcs-next and ::mcs-reset. Any of these can appear before, after or both before and after the main content of the fragment.

To position of the buttons you use the ::before and ::after pseudo element. For example, the following rules would cause the previous button to be displayed before the other controls in the fragment, while the next and reset buttons appear afterwards. The rule order is significant.

xforms|group::before::mcs-previous {content:normal}
xforms|group::after::mcs-next {content:normal}
xforms|group::after::mcs-reset {content:"Reset"}

To label the buttons you use the content property in the theme editor.

The next and previous buttons are required if the fragment is to be useful. If there are no rules for them, MCS generates the buttons by default at the end of the fragment with next before previous. If the content property contains text it will be used as a label. If it is empty or 'none', the button will be displayed with the default text. In any case, the buttons are only rendered if there is a fragment to link to.

The optional reset button will not be displayed unless you specify a label.

Related topics