Switching Tabs With Button Click

When you configure multiple tabs, you can add a Button component, that switches to the next tab. This tutorial demonstrates how to create a Button component that switches to the next tab.

Tutorial

To create the customized Button component:

1. Drag and drop a Button component into your form.
2. In the Display tab of the Button component, set the Action property to Click.
3. Check Use for Local Update.
4. Configure the Button component to switch to the second tab in the Update Data Logic section.
5. Configure the tab control to display the second tab. In this example, we want the Q2 tab to display when clicking the button.

   When setting the second tab, reference it as Tab(1), because we are dealing with 0-based indexes.

   For this example, copy, and paste the script below, to configure the tab control. [you need to specify where the user has to paste the script]

   var tabs = form.getComponent('tabs');
   tabs.setTab(1);

6. Use the additional script below that enables the Do Block to run when switching to the second tab. This step is optional, created to demonstrate the number of times the Button component is clicked.

   instance.emit('executeDoBlock', instance.component);

7. Save the component and the form.

Sample workflow

To check the complete workflow or to have a future reference, download the XAML example