Navigation Buttons - sheaphillips/common-hosted-form-service GitHub Wiki

Home > CHEFS Components > Custom Components > 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 buttons (Tutorial)

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 to the form and customize the tabs based on your requirements. Go to the API tabs and change the name of your tab component to tabs If you want name it something else, you can, but in steps 4 and 5 you will need to update the code to reflect what you named your tab group component. e.g. if I name my tab group applicationSteps then the code for the next button would be

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

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.

If the buttons aren't working yet, then you probably have a different value for the name of your tab group. You can either change the code to match what you have named your tab group, or you can change you tab group name to match the code tabs

Back to top