Creating a Step-by-Step NavigationBar

A step-by-step navigationBar is usually placed within the pageButtonBar component.

To create a step-by-step navigation bar:

In the Design Structure Window of the desired file, expand the pageLayout node to locate the pageButtons node.
If the pageLayout node is not visible, expand page | content | dataScope | document | body | form. The pageButtons node is under pageLayout Named Children in pageLayout.
In the Component Palette, select Navigation Components from the dropdown list, and then drag and drop the pageButtonBar component from the list to the pageButtons node.
The pageButtonBar node is inserted under the expanded pageButtons node.
In the Component Palette, select Navigation Components from the dropdown list, and then drag and drop the navigationBar component from the list to the pageButtonBar node.
The navigationBar node is inserted and highlighted under the expanded pageButtonBar node. The Property Inspector displays the properties of the new navigation bar.
In the Property Inspector, set the following attributes for the step-by-step navigation bar:
- name - Enter a name for the navigation bar. The name is used in conjunction with the destination attribute to generate the URL links for the Back and Next buttons.
- destination - Enter a base URL for the navigator links. The destination is used in conjunction with the name attribute to generate the URL links for the Back and Next buttons. This attribute is ignored if formSubmitted is set to true or if the formName attribute is set.
- typeText - Enter the text description to display in the generated string; the default is "Step", e.g., Step 1 of 3.
- minValue - Enter the value for the first step.
- maxValue - Enter the value for the last step.
- value - Enter the value for the current step.
- maxVisited - Enter the index of the highest visited node. You should set the maxVisited attribute only if a user has already visited a step but then moved backwards to an earlier step. Use this attribute with a choice list only.
- formSubmitted - If using Javascript form submission, set this to true. If no formName is specified, the parent form is used.
- formName - Enter the name of the form to which events are submitted. Setting this attribute without setting formSubmitted also enables Javascript form submission.
- unvalidated - By default, validation is used if form submission is enabled. Set this attribute to true if you don't want the form values to be validated when the form is submitted.
To insert a choice list for the step-by-step navigator, do the following:
1. In the Design Structure Window, right-click the navigationBar component and select Insert inside | link .
2. Set the link attributes in the Property Inspector.
3. Repeat steps 5a and 5b to insert the desired number of link components.

Notes:

You must set a "goto" event handler for the links to function properly because the navigationBar sends a "goto" event when a user clicks a link.
To use data binding, see Data Binding a Component Attribute.

Example (UIX XML)


...
<pageLayout>
  
  <!-- Step-by-Step Navigator in pageButtons -->
  
  <pageButtons>
    <pageButtonBar>
      <contents>
        <button text="Cancel"/>
        <navigationBar name="checkout" maxValue="5" value="2"/>
        <button text="Submit"/>
      </contents>
    </pageButtonBar>
  </pageButtons>
  
  <!-- REST OF PAGE LAYOUT-->
  
</pageLayout>
...