Adding components to People panel adding-components-to-people-panel

Transcript

You will now configure the People section of our Form. So to do that, we have opened the Form in edit mode and selected the People Panel in the content hierarchy. So the first thing we need to do is add a Drop-down list to capture the users County. So we select and insert a new component of type Drop-down List here. We will configure this Drop-down List by setting its Name to County and the Title to be: What county do you live in? We’ll Add a couple of Items in this Drop-down List. The first one would be Alameda County, second one can be, Bexar County and third one can be Contra Costa County, then save your changes. Next, we need to add two sections to this People Panel. And to add a section we typically insert a Panel here, so we add a Panel here and then we add another Panel here.

So let’s see how this looks like in our content hierarchy. So we open the Content hierarchy, so under the People Panel, you have a Drop-down List and we have these two Sections. So let’s go ahead and configure these two Sections appropriately. So the first Section, we’re going to set its Title to be Your Details, and we need this Section to have a three column layout. So we select the Number of Columns and specify three here and save your changes. In a similar manner, we go ahead and specify the second Section. So the Second section is going to be called as the Spouse Details here, and we save the changes. Let’s take a look in the Content hierarchy. So now the Content hierarchy looks much better there’s a People Panel and then there’s a Drop-down List, and then there are these two Sections which are named appropriately so it becomes easy for you to navigate the Content hierarchy. So let’s add some fields to the User Details section here. So click on the User Details here and add a Text Box field here. A Text Box will add another field too called the User’s Age here. So we’ll select the Numeric Box. And then we’ll add a Check Box field to capture the user’s marital status here. So these are the three fields. And notice how the three fields are arranged next to each other. That is because our User Details Panel has a three column layout. So let’s go ahead and configure each of these fields here. So the first one is a Check Box and we’ll call it as a Marital Status here.

Marital status, and we’ll call it Single and, Married. Save those changes here, and then we select the Numeric Box and configure that Title to be Your Age.

And then the third one would be to capture the applicants name here, Your Name.

So next we need to do is add Spouse Details fragment to our Spouse Details Panel here. So select that, and we can click on the Assets section here, and we’ll filter the Assets by type Adaptive Form Fragments. So as part of this exercise, you already have a Spouse Details Fragment available to you. So that’s the Fragment that is shown here, so you simply drag and drop the Spouse Details Panel section into this Spouse Detail section here. -

Transcript

Hi, in this video, we will configure our People Panel by adding some components to it. So, I’ve opened my form in the edit mode, make sure you’re in the edit mode and select the appropriate Panel here. So, click on the People Panel here and add a component. Here I’m going to add a drop-down list as the first component, then I’m going to add two child Panels to the People Panel. So, select a Panel and I’ll add a second Panel here, second Panel. So let’s go ahead and change the titles of these Panels. So select the section Panel, the first Panel here and give a meaningful title here, in this case is going to be your details.

Save the setting, then go back to the second section and change its title to, spouse details, save the title here.

Go back to the People Panel, and in the your details Panel, we’re going to add three more components here. The first one is going to be, a simple text field component.

We’re going to add another component to all your details which is going to be numeric box, and the third one is going to be a radio button.

So, we have configured the various fields that were added to the People Panel for example, the drop-down list, here, was configured by adding some items to it. We set the name and the title. The items in the drop-down list can be populated by making a call to your backend service like a SOAP service or a RESTful call. Or we can use custom functions to populate the values of a drop-down list. In our case, I have hard coded the values and to add a new entry to the drop-down list, you simply click on the add button here and enter some meaningful text here. So this way you can populate the values of a drop-down list.

The next thing we did was, to provide a meaningful title to our text field that was added to the People Panel. So, for example, the text field title has been set to your name. In a similar manner, the numeric boxes title was set to age. We also added some items to our radio button here, the title was set to marital status and we added two items, single and married.

The next thing we need to do is to arrange the layout of these components of our your details Panel. For example, your name, age and marital status are stacked on top of each other. We want to arrange them next to each other. So to do that, we need to take advantage of our layout editor capabilities. So we go into our layout editor, select the appropriate Panel and select the field that you want to re-size. So, in this case, your name is the field that we have selected, and you resize it this way, and in a similar manner, we’re going to resize our age field.

Make it little shorter here, and then the marital status automatically comes here. So this way now you have this three fields next to each other. The next thing we need to do is to add our spouse details fragment to our spouse details section. To do that, we have to go back into our edit mode, select the asset section here, and filter the assets by type adaptive form fragments here.

So this will list all the fragments in your system.

So we are going to use the spouse details fragment that was created in earlier videos. So we need to drag and drop them into the appropriate section of our People Panel here. So, select that and drag it into the spouse details section here. So now our form is looking better, it’s time to do a quick preview of the form. So let’s do a preview, let’s do a refresh here.

So that’s the start Panel, we can go to the next Panel here and it shows you the People Panel. There’s a drop-down list with some values here, and there’s a spouse details fragment. In the next video we have added rules to display the spouse details based on the marital status. And in the subsequent videos we have gone ahead and configured or added components to the income and the assets Panel. -

Transcript

We will now create a rule to display the Spouse Details Fragment. To do that, I’ve logged in to AEM Forms. Open the Form in the Edit mode.

Browse to the appropriate Spouse Details Panel on which you want to create a rule. Select the Hammer icon to open up the Rule Editor. So this is the Rule Editor, you have the Form Objects on the left hand side and you click the Create button to create a new rule. So our rule is going to be, Show Spouse Details, Add Condition. So always make sure whenever you’re creating a new rule, make sure you click on the Form Objects and Functions to display the Form Objects on the left hand side. It makes it easier for you to drag and drop the Form Objects. So our rule is going to be Show Spouse Details when the Marital Status is Equal To, we select an Object from here, Form Object is of type String is equal to Married. And then make sure you save your changes here. So this is how you would create a simple rule to display the Spouse Details Fragment based on a specific value of the Marital Status field. -