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

This documentation is no longer being updated. For the most up to date information please visit our techdocs

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.

nav1

nav2

Step 1: Add a 'Tabs' component to the form and customize the tabs based on your requirements. Go to the API tab and change the name of your Tabs component to tabs. If you want name it something else you can, but in steps 4 and 5 you will need to change the example code to reflect what you named your Tabs component.

nav3

Step 2: Add two 'Button' components that will switch the tabs back and forth. In this case, they are named 'Previous' with an API name of 'previous', and 'Next' with an API name of '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' section for the 'Previous' button.

const tab = form.getComponent('tabs');
const newIndex = tab.currentTab - 1;

tab.setTab(newIndex);
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 newIndex = tab.currentTab + 1;

tab.setTab(newIndex);
window.scrollTo(0, 0);

Step 6: 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: e.g. if I name my tab group applicationSteps then the code for the next button would be

const tab = form.getComponent('applicationSteps');
const newIndex = tab.currentTab + 1;

tab.setTab(newIndex);
window.scrollTo(0, 0);

Or you can change you tab group name to match the code tabs.

Back to top