This is part 2 of a multi-part tutorial. Recommend you to start from here.
Make sure you are in the edit mode. The edit button is located on the top right-hand side of the browser.
Refresh your browser and select the "Root Panel" from the content hierarchy.
The component toolbar appears on the right-hand side. Select the "..." icon and then click on "Add Child Panel".
Specify "Start" as the child panel's name and title.
Similarly, add 3 more child panels to the root panel.Name the child panels as follows:
People, Income, and Assets.
Select the "Root Panel" to bring up the component toolbar.Select the "Wrench" icon to open the properties sheet of the Root Panel.
Select "Tabs on Left" option from the panel layout drop-down list.Save your changes by clicking the blue check mark icon on the top of the properties sheet.
This makes the child panels appear on the left-hand side of the form. Refresh your browser and your form should look like the screen shot below
We will now add Adaptive Form Fragments to the Start panel. AEM Forms provides a convenient mechanism to create a form segment, such as an address block, as use it in
Refresh the browser.
Select the "Assets" icon from the sidebar. Filter the assets by Adaptive Form Fragments. Drag and drop the "Getting Started" form fragment on to the start panel on the right-hand side.
Once the "Getting Started" form fragment is added to the start panel, preview the form.
Click the "Preview" button to preview the form. The preview button is on the top right-hand side of the screen.