Add and configure toolbar

Transcript

Now that our form is complete, we need to add a toolbar to our form which would allow you to navigate between the panels of your form. So to add a toolbar, you select the form container here and select the option here called add toolbar which will insert a toolbar under the form container node here. So if you were to see here, so there is this root panel and then there’s a toolbar. So under the form container, you have a root panel and then there’s a toolbar under the form container. Next thing we need to do is to add some buttons to our toolbar. So to add a button, select the toolbar and click on the plus to add the buttons that you want to appear on your toolbar. So let’s go ahead and add a next button which will allow you to navigate to the next panel of your form. Then we’ll add a previous button which will allow you to navigate to the previous panel of your form and then we can add another button called submit which will allow you to submit the form to the submit action that the form is configured to. So now that our buttons are added, let’s preview our form. So I’m going to preview my form here and you can see the toolbar by clicking on the next button, I take me to the next panel here and if I click on the back button, it takes me to the previous panel of my form. If you have configured the form to submit to the appropriate action, the submit button will be used to invoke the submit action of the form. So this concludes our video on creating your first adaptive form.