Configure income panel

Transcript

In this video, we will add a table component to our income panel, which allows the user to list the various sources of income. So to do that, I have selected the income panel on the left-hand side, and from here, I am going to insert a table component. So that’s the table component. So the moment you add a table component in your panel, you will get a header row with two columns and two rows, row 1 and row 2. The first thing we need to change is add some column headings to our header row. So for that, you select the first item in your header row and click on the edit button here and add a meaningful column name. So the first one is going to be source of income. And the second column heading is going to be income amount. Income amount. Next, we need to do is to change the default field types of our row 1. So by default, the field types are of type text box, but in our case, we need to change the column 1 under row 1 to a field of type drop-down list. So to do that, select the text box here and click on the replace button to replace it with a component of type drop-down list. And in the income amount, we want the field type to be of numeric box. So that’s numeric box. So now in the drop-down list, we need to add some values to the drop-down list. So click on the button and open the configuration property sheet. Select the title to source of income here and add some items. The first item we’re going to add is salary. The second item is going to be rental income. And the third one is going to be alimony. So you can add whatever values you want here. So to make it simple, I’ve just added three types of income here and then save your settings. Then going to the income amount field, we need to name it to income amount here. And if you want, you can place a default or a placeholder text here. So placeholder text is, we can say, income in dollars or something like that. The next thing we need to do is to show the grand total of the income entered in this table. So let’s do that in row two. So for that, we’ll select the row two of our table. And the first field in the row two is going to be called as the grand total. And the default value of that is going to be grand total. Grand total. And we need to show the total of the income entered by the user in the table in here. So for that, we need to change this field type to numeric box as well, because if you’re going to add the total of the income entered by the user in the rows, we need to have a similar type of component which will show the sum of its values. So for that, we need to show numeric box and then change the properties of this field here. So here you can call it income grand total. And click on OK. So so far, we have added a table with a header and two rows, one row which allows the user to enter the type of income and the second row which will show the grand total of the income. So there are two more things that we need to do. The first thing we need to do is to make the table dynamic, meaning allowing the users to enter multiple rows in that table. And to do that, we’ll select row one, which is the income which allows the user, which is the row which allows the user to enter various sources of income. So select that row one, open its configuration properties and specify the maximum number of rows that user can enter. So in my case, I’ve selected three. Click OK. And then the next thing we need to do is to create a function or a rule which allows you to calculate the sum total of the income entered by the user. So to do that, you click on this numeric box here, open up its rule editor and click on create to create a new rule. Always make sure you’re seeing the form objects and functions on the left hand side. So here we need to say set value of income grand total to a function output and AEM forms provides you a number of functions out of the box. And one of that function is to calculate the sum of the values entered in a repeating panel like a table. So here we select that function here. And here it allows it asks us the input parameter is select a repeatable panel or a table row. So here we need to select row one here. Sorry, first you need to select the form object here and then select row one. That’s a repeatable panel. So every row in that in a table is a repeatable panel. And inside that panel, we need to select which fields sum you want to calculate. So from row one, we’ll calculate the income amount. So that is our rule which calculates the sum total of the income. So click on done to save and click on close. So this way, our user will now be able to enter multiple sources of income and whatever values the user has entered, the grand total of that will be calculated and displayed in the second row. Let’s do a preview of this form to see how it looks like at runtime. So go to the income panel here. As you can see, there is this drop down list. You can select income and there is a default enter some value here. Click on plus to add another row. And here select rental income and you can add say 300. And when you tab out the grand total changes to 400. So this is how you configure a table for your income panel. In the next video, we will create or configure some components to our assets panel.