When your form has left navigation tabs and if one of the tabs has multiple panels, you may want to hide the title of the child panels and still be able to navigate between the tabs and the child panels of these tab
Create Adaptive Form
Create an adaptive form with the following structure. The root panel has child panels which are displayed as tabs on the left. Some of these “tabs” have additional child panels. For example the Family tab has two child panels called Spouse and Children.
A toolbar is also added under the FormContainer with the Prev and Next buttons
The default behavior of this form would be to display all the panels on the left and then navigate from one tab to another on clicking the next button.
To change this default behavior we need to do the following
We have created the following form. There’s a root panel and under the root panel, we have these tabs called intro, family, assets, and address. The root panel’s tabs are configured to show the tabs on left-hand side here. The tabs are on the left-hand side. Some of these tabs here, for example, the family tab has some additional panels underneath that, and so has the assets. They have additional panels called stocks and bonds. The family tab is configured to show tabs on left here. So if you open up the family tab, and you will see that it is configured to show the tabs on left-hand side. And these individual panels here are configured to show everything on one page here. So here, everything is on one page without any navigation. And we also have some rule editor to our next and back buttons. So if you open up the rule editor here, there is some code associated with it. This code simply takes you to the next panel within your form here, and this is done using our code editor. One of this, this is done in the code editor on the click of a button here. In a similar manner, we have code configured to take you to the previous panel of the form. So if you open up the back buttons code editor, you will see that it has a previous item deep on the click of a button here. So now that our form is configured, the next step would be to hide these two panels when you navigate from one tab of the form to another tab.
Add the following code the click event of the Next button using the code editor
So far, we have created a form and added some code to the next button of our toolbar to navigate to the child panels of the tab. So if you click on the next button, it takes me to the family tab and inside the family tab, it’s taking me to the Your Spouse Details tab here. And I click next here, it’s taking me to the children tab. But the problem with this is it’s still showing me the spouse and the children tab here and we want to hide those tabs. So if I go to next here, it takes me to the assets tab and it shows me the stocks and the bonds tab here. We want to hide that. So to hide these stocks and bonds label or the tabs here, what we need to do is to open up your form in the style editor mode. So open the form in the style layer, select your root panel here and select your tabs on left and select the level 2 here. And in the level 2, make sure you set the display setting to none. So that will hide the child panels of the tab on the left hand side, save. And then when you preview your form and navigate between one tab to another tab, you will see the behavior that we want. So click here. You are in the family tab, it’s asking you to enter the spouse details. You’re still in the family tab, but now you’re in the children’s panel. And when you click next, it takes you to the asset tab and you’re in the stock holdings panel. Now you’re in the bond holdings panel. So this is how you would hide the child panels of a left navigation tab.
NOTE
The capability described in this article does not work in the last tab. For example if the Address tab had child panels this functionality would not work.
