Navigation Buttons

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

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

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.

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);

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.

Common Components Program