Adding components to Assets panel adding-components-to-assets-section

Transcript

We will now configure the Assets Panel of our application form. To do that, I logged in to AEM Forms, open the form in the edit mode.

Navigate to the Assets Panel, under the group Panel here, collapse all the Panels, and select the Assets Panel. The first thing we need to do is set the layout of this particular Assets Panel. So we select Assets Panel, click on the configuration properties to open up the configuration here, So by default, the layout is responsive, everything in a one page, but for our use case, meaning to select the accordion layout. We click that and make sure we saved the changes. Then we click on the Assets Panel here, and add a child Panel to this particular Panel. So, we select and add the child Panel. We name the child Panel as an Asset, set that, the name and title, here, and then save.

So now you see it’s an accordion layout. Now, we need to add some specific fields to this particular Panel. So we select the Asset Panel here, and click on the plus item to, to bring up the insert new component dialog box. In that, we select the drop down list, we add another component to the Asset Panel, and this is going to be of type numeric, numeric box. We then need to configure these two fields here, so click on that dropdown box, and click on the configure here, and set the title to…

Type of Asset, and specify some items here. So, there are three items that will specify Cash, Stocks and Bonds.

Make sure you save your changes, and reconfigure the second field here, in the similar manner. We set its title to Value in Dollars, and make sure you save the changes. So, so far we have added an Asset child Panel to our Asset section, and then we have configured the layout to be of type accordion. So then we need to specify how many instances of Asset the user you can add to their accordion Panels. So to do that, we go back to a content hierarchy, and select the Asset section here, and click on that configure button here.

And the repeats settings here, we can specify a minimum as one, and maximum as three, and make sure you save your changes here. -

Transcript

In this video we will set the summary title of this particular panel. By default the name of the, the summary title of this panel is set to asset. And we need to change that dynamically based on the type of asset and the value in dollars that is entered in this particular field. So to do that, I’ve selected the panel. I’ll open up the rule editor. Click on the create, to create a new rule. So by default the visual rule editor opens up here. But in this case we want to use the code editor to create a rule. So once we open the code editor, click on the edit code and click on the edit here. And select the appropriate event type which is going to be the summary. And we delete this default code that is entered here.

So that this code editor is pretty powerful. It has all the complete capabilities. For example, if you want to select this particular field called type of asset. And the moment I select the title of the field it gets replaced by the name of this field here so the drop-down list, this number is actually the name of this field, which whose title is type of asset. And then we have this auto-complete capabilities which shows you the various properties which are available for this particular type of component. So this is the code editor and the code that we write is like this here. So basically we’re going to test the values of the type of asset and the value in dollars, it is not equal to none. Then we concatenate those two values and put a dollar sign in the middle, and then we save our rule here. And this is how it saves. So now lets take a look at the preview to see how that rule is going to behave at runtime. So I’m going to do a preview. Go to my assets type. So this is the default title and then I want to change it. So if I put in cash, five thousand or five thousand dollars and tab out, you can see here it dynamically changed to the type of asset, with the dollar sign and the value in dollars field here. So, if I want to do it for the second panel here. I can do stocks and then say, four thousand and the type only shows this way. So this makes it easier for you to identify the particular panel here. And this is how you would set the summary title of a panel using the code editor.