Description:
This widget helps navigate between multi-page Forms.
Inputs
- FormID - Name of widget generated by FlowWright (read-only field)
- nextFormDefID - Select the following form definition to navigate
- previousFormDefID - Select the previous form definition to navigate
- Hide - Select the checkbox to Hide (tick mark)
- Save - Save the input values
- Delete - Remove this form widget from the designer page
- Close - Close the input popup window
Design:
Example:
Let’s build and execute the “PageNavigationDef” example.
- Create a new Form Definition called “PageNavigationDef.”
- Drag the “BootstrapGrid, FullName, Address, PageNavigation, and Submit" controls onto the canvas and arrange them as shown below.
- Double-click the “PageNavigation” control to configure its “Settings” properties. A pop-up window will appear for configuration. Select the Form definition from the drop-down list. Then, choose the previous Form definition from the list. Check the “Hide” checkbox to hide this widget at runtime. Click the Save button.
- Double-click the “PageNavigation” control to set the “Styling” properties. Enter the RGB values for the background color. Specify the minimum dimensions in pixels. Click the Save button.
- Save the Form definition. Choose Actions > Create Form Instance. Generate a new form instance, then check the box to edit it.
- The Form appears to the user as shown below. Enter your input and click the “Next” button to proceed.
- The following Form is displayed below. Click the “Previous” button to navigate as indicated.
Note:
- Repeat this page navigation setup on both the first and last pages of the Form Definitions. When there are no previous or next pages for navigation, the 'prior' and 'last' page inputs can refer to the same definition.
- Go to the UI menu and preview the form. The displayed widget offers navigation controls to switch between multiple-page forms.
- During runtime, page navigation automatically saves form data to the form instance, enabling users to switch between pages without losing their data.
- The process step “GetFormFieldValues” should capture the Form Instance IDs when navigating from one form to the next.
- The previous button navigates when Form fields are set as “required.” This feature is built in by design.
Definition Sample:
You may download and extract the sample definition(s) from the link provided and later import them (drag-and-drop) into your FlowWright Process Definition (XML file) or Form Definition (HTML file) page.
Note: Please verify and complete the process steps for any missing configurations, such as file path references and database connections, after the import. Then, save the definition to confirm the changes.