Creating or configuring forms > Configuring the <pages> element > Configuring a dynamic page layout

6.2.4 Configuring a dynamic page layout

A dynamic layout is useful when dealing with complex tasks or when it is helpful to guide users through an unfamiliar process. With a dynamic layout, it is possible to use navigation branching, which means what appears on, and the ability to proceed to, the next page depends on input to previous pages and the values in the current page.

To configure a dynamic page layout

  1. Open the desired xml file located in the Viewpoint home directory. Locate the <pages> element.
  2. Set the ui-type attribute to "dynamic".
    3. <pages ui-type="dynamic">
  3. Verify that each <page> element has a unique id.
    4. <page id="myPage">
  4. Specify which page comes first in the sequence by setting the attribute first="true".
    5. <page id="myPage" first="true">
  5. If the interface contains more than one page, insert the <navigation> element within <page>.

    6. <navigation> is only valid for dynamic layouts.

    Specify which page comes next in the sequence by adding the <next-page> child element to <navigation> . Set the set-next attribute to the ID of the next page.

    <pages ui-type="dynamic">
  <page id="page1" first="true">
    <description>First page. Shows the environment options.</description>
    <navigation>
      <next-page set-next="page2" />
    </navigation>
    ...
  </page>
  <page id="page2">...</page>
  <page id="page3">...</page>
</pages>

    When the user clicks Next, the flow goes from "page1" to "page2".

  6. (Optional) If you wish to verify that the inputs on the page are valid, set the <validation> element as a child of each <page> element (for more information, see Configuring validation in dynamic forms).

    7. The <validation> element is configured differently for static and dynamic layouts. See Configuring a static page layout.

  7. (Optional) Set up conditional branching by inserting the <rule> child element within <next-page>. The rule is a Boolean value decider that, if evaluated to true, directs users to the specified page. See Setting a Boolean decider.

    8. If no rule is specified, the default next page is what is specified by the set-next attribute. If there are multiple <next-page> elements with rules, the user is directed to the first one that is evaluated to true.

    <page id="firstPage">
  <description>First Page asks if they are new or not</description>
  <sections>...</sections>
  <navigation>
    <next-page set-next="newUserPage">
      <rule comparison="equals">
        <first>
          <component id="newOrExistingUser" />
        </first>
        <second>
          <value>New user</value>
        </second>
      </rule>
    </next-page>
    <next-page set-next="existingUserPage" />
    <next-page set-next="newUserPage" />
  </navigation>
</page>

    The component asks if the user has an account or if the user is new. If the user selects the 'New user' value for the "newOrExistingUser" component, they are directed to the "newUserPage". If the user indicates that they have an existing account, the requirement operation evaluates to false and the following <next-page> element ("existingUserPage") is evaluated to true. The default value is "newUserPage" and is placed only as a safeguard to verify the next page is specified.

Related topics 

 

© 2012 Adaptive Computing