Adding Child Panels to Root Panel

In this video we are going to create some child panels under our root panel of our adaptive form. So, to do that, I’m going to open our form in edit mode.

Whenever you’re adding anything to the root panel of the form container make sure you’re in edit mode so that the edit mode can be accessed from this layer here, so we are in the edit mode. I’m going to add some child panels our root panel. So I selected the root panel and click on add here to add a child panel. We’re going to add four child panels to our form, added a child panel here. So once you add a child panel, the next thing we need to do is to configure them to give an appropriate titles. So for example here, this title of the form is going to be, start panel and save the settings and this panel title is going to be, people panel and save.

So now we have added four child panels to the root panel and we have named them accordingly; start, people, income and assets. As you can see, those child panels are stacked on top of each other. So if you want to change the layout of these child panels, we select the root panel, open up its configuration properties and change the panel layout option. So as you can see, there are a number of panel layout options here. For example, you can do tabs on left to see the tabs appear on the left hand side. or you can select tabs on top to see the panels appear on the top here. But for our course we’re going to select tabs on the left so that the tabs up here on the left hand side. The next thing that we need to do is to add a component to our start panel here. So we select the start panel, go to the asset section here and filter by adapter form fragments. So here we have a few fragments in our system. Getting started is a fragment that was provided as part of this course, we’re going to add this fragment to our start panel here. So, we drag and drop and put it into a stack panel. And now you can see the start panel has this adaptive form fragment. So, let’s do a preview of this particular form as of now. So now it has panels on the left hand side this has a fragment is shown in the start panel, you can navigate to the next panel, next panel but of course it’s not going to show anything because we have not added any components to these panels here. In the next video, we’ll add some components to the people panel -