PageNavigation Widget

Use this widget to create user-friendly page navigation for a multiple page forms.

Last published at: June 3rd, 2024


Forms that span multiple pages/forms can use this control to navigate between them.


  • 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





Let’s build and execute the PagenavigationDef example.  

  • Create a new form definition called “PageNavigationDef.” 
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a “PageNavigation” widget to the canvas
  • Focus the mouse pointer in between the two buttons and double-click to edit


  • Configure the inputs as shown in the graphic below. When the form is rendered, select the form definitions from the dropdown list to navigate to the previous and next. 


  • Click on Select a previous-form definition field and choose the form definition to navigate the previous 
  • Click on Select a next-form definition field and choose the form definition to navigate next
  • Click on the Save button and Close the popup window
  • Repeat this page navigation configuration on the first and last page form definitions. When no previous or last pages are available for navigation, the previous and last page inputs can be referred to the same definitions.   
  • Navigate to the UI menu and Preview the form. The rendered widget provides the control to navigate between forms that span multiple pages/forms.
  • During runtime, the page navigation saves the form data automatically in the form instance so that users can easily navigate between pages without losing their data.
  • The GetFormFieldValues process step may capture the Form Instance IDs when the form is navigated between Previous and Next.
  • In this example workflow, the multipart form is routed to a user, and the getFormFieldValues step collects the previous and next form instance IDs during run time.  


  • The getFormFieldValues step configuration is shown in the image below. 


  • The getFormFieldValues step configuration is shown in the image below.  


  • Note: The previous button navigates even with form fields marked as required. This is a feature provided by design.