Navigation Buttons

Examples

Try a working example
View example

Download this example file and import it into your design

example_navigation_buttons_schema.json

Navigation ability can be added to your forms using the ‘Tabs’ component and programming ‘Button’ components to switch those tabs.

nav1

nav2

Step 1: Add a ‘Tabs’ component to the form and customize the tabs based on your requirements.

nav3

Step 2: Add two ‘Button’ components that will switch the tabs back and forth. In this case, they are named ‘Previous’ and ‘Next’

Step 3: Click on the Settings (gear) icon for each button, and select the ‘Custom’ option from the ‘Action’ dropdown in the ‘Display' tab.

nav4

Step 4: Add the following code in the ‘Button Custom Logic’ field

const tab = form.getComponent('tabs');
const index = tab.currentTab;
tab.setTab((index-1));
window.scrollTo(0,0);

nav5

Step 5: Similarly, add the following code to the ‘Button Custom Logic’ section for the ‘Next’ button

const tab = form.getComponent('tabs');
const index = tab.currentTab;
tab.setTab((index+1));
window.scrollTo(0,0);

Save your changes and the buttons are now programmed to switch the tabs within the form.