We will add a table to the Income panel. Configure the table rows and use the rule editor to calculate the grand total.
Add and Configure Table Component
We will now add an income table to our income panel. So, to do that, we log into AEM forms, open the form in the edit mode.
We select the appropriate panel from the content hierarchy here. So, we select the income panel. Click on the income panel here, to open up the insert component dialog box. We select a table from here, and insert the table. So, when you insert a table in an active form, you get a table with two columns and two rows. So, this is the header row, and this is the row one and row two. So, first we need to change the column heading. You select the first column here, click on the pencil icon. And replace the default heading with our heading.
Source of Income. Save the changes. Similar way, we do Income Amounts.
Income Amounts. And save your changes. The next thing we need to do is replace the default cell types, under row one. So, the default cell types is of type text box. First thing, we need to replace that, with a Drop-down list. We select that cell, click on the ellipsis, and then click on the replace here. And we select a Drop-down list from this insert new competent dialog box. As you can see, now, the text box is replaced with a Drop-down list. We need to configure this particular Drop-down list. We click on the Drop-down list, click on the range icon, to open up the configuration properties. We set the title to Source of Income. And then we need to add three items to this Drop-down list. The first item would be, Money. The second item would be, Rental Income. The third item can be salary. So, this way we have configured a Drop-down list by setting its title and adding three items to the Drop-down list. Save your changes. In a similar manner. We need to change this particular text box. We replace it with the numeric box. So, we’ll replace it with a numeric box. Then we need to configure it by giving it an appropriate title and setting a default value to a placeholder text . The title would be, Income Amount. and the placeholder text would be, Amount in Dollars. Then we save the changes. So, far we have configured our column headings and replace the default text boxes in row one. Now, we need to configure row two. In row two, the first item that we need to configure is a text box. Select that.
And we set the default value of this particular text box to be Grand Total. Grand Total. Right And then we need to configure the second column in row two. Select the appropriate column, click on the ellipsis and click on the replace button here. Replace it with the numeric box.
Replace it with the numeric box. Then configure the title here. So, the title is going to be Grand Total. -
Make sure you are in the edit mode. The edit button is located on the top right-hand side of the browser.
By default when you insert a table into Adaptive Form, the table is not dynamic meaning you cannot add new rows to the table at runtime.
Refresh your browser.
Select Row1 in the content hierarchy.
Click on the wrench icon to open up the properties sheet.
Set Minimum and Maximum count to 1 and 5 under the Repeat Settings and save your changes by clicking the blue check mark icon. This means the table can have a maximum of 5 rows. To have an indefinite number of rows set the maximum count to -1.
We will now create a new rule to calculate the sum of all the incomes entered by the user. So to do that, we open the Form in edit mode and select the appropriate field on which we want to create the rule. So, in this case it’s going to be the Grand Total field. We select the Grand Total field and click on this Hammer icon to bring up the Rule Editor. So, this is the Rule Editor where you can create new rules.
Click on the Create button to create a new rule. So whenever you’re creating a new rule, always make sure you select the Form Objects and Functions so that you see the Form objects on the left-hand side and also some of the Functions which are available to you out of the box. So our rule would be to Set Value Of the Grand Total field to the result often function called. So to do that, we have the Functions tab selected here and we use the Sum Function. The Sum Function returns the sum of values of in the numeric fields of a repeatable Panel or a Table. So we’ll try that Sum Function onto this field here and the moment we track that, it shows you the input parameters that the SUM function expects. So, the first one is select a repeatable Panel or a Table Row. So we click on the Form Objects, we select the Table Row which has the repeatable section. So we select the first Row here and drag and drop it into this one and then inside Row one we need to select the Numeric Field inside the particular Row or the Panel. So, the Numeric Field is going to be the Income Amount. So, we select that and drag and drop it here. So, this is our rule. What it does is it calculates the sum of all the Income Amounts in Row one and puts that value in the Grand Total field. So now the rule is set. We need to Save that rule. -