Use buttons to navigate tabs in Ultimate Forms

Hi,

In some cases, you want to create a form where the user is guided through the process, step-by-step. Especially in complex forms, it is easier and more user-friendly to logically divide the columns by category into tabs or accordion panels, without overwhelming with the sheer number of columns you might need. Additionally, you might only want to show some columns when specific values were entered in other columns, completely hiding irrelevant columns using dynamic permissions.

Although both Tabs and Accordion control were made available in Modern forms from the very beginning, there wasn't way to navigate between the different tabs using Previous/Next buttons. You could click on the tab header to switch to that tab, but you could not require a particular order of progression, users could jump between tabs as they saw fit. Of course, it's perfectly fine for some cases, but it's also sometimes desirable to enforce more strict order.

We are releasing a new feature, which allows you to add navigation buttons, as well as force navigation only through the buttons in one or more form types. This feature is avaible for both Tabs and Accordion with Collapsible setting activated (meaning only one tab is allowed to be open, opening another tab collapses the currently selected one).

1. Open your form in Form Designer.
2. Click on your existing Tabs control or add a new one.
   
3. In the property pane on the right, enable navigation through buttons.
   
4. You can also choose to force users to only use buttons for navigation in one or more forms.
5. Button Bar will be added below your tabs. By default, it contains Previous, Next and Save button. 
6. You can rename the buttons, control their style, provide translations into additional language. At run-time, the form will automatically display only the buttons relevant for the current tab (for example, Previous button is not displayed on the first tab). For advanced scenarios you can switch Button Bar into Custom mode to add/remove additional buttons. Note that in Custom mode only Previous/Next buttons are conditionally shown based on the current tab.
7. Publish your form.
8. Go to your list and create an item.
   
9. You will see that tab headers are no longer clickable and Next button is displayed on the first tab. Start filling out your form, clicking Next when done with a tab.
10. When you rich the last tab, Save button will be also displayed.
    

As you can see, it is very easy to implement this exciting new feature and we hope it will help you do more with your forms!