How to Create a Table for a Chart Component with Touch UI Dialog

In this post, we’re going to explain how to create a table in a Touch Dialog in AEM for a chart component.
This table it´s useful to add/remove data to compare in the chart by four different kinds of view.

Technologies: HTML, CSS, jQuery, JSON, Sightly, AEM 6.0

Dialog Touch preview with the table.
To create a Touch UI dialog, you must to create:

a JCR node with these properties:
sling:resourceType – string – cq/gui/components/authoring/dialog, that represent the component’s dialog when used in the Touch UI view.

The chart.html, that show the charts.

chart.java, that make the component logic to process information entered in the table.

clientLibs folder to add styles and scripts.

The table folder with the render.jsp from table in foundation assets.

sling:resourceSuperType – string – granite/ui/components/foundation/form/field



This render.jsp is going to process logic inside the table, and the info shown in every cell and the scripts to add/delete columns or rows.
Building the dialog for the Touch UI



See “Building the dialog for the Touch UI view”: https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

Table
apps/foundation/form/table/render.jsp

This file import the JAVA classes, show the values saved by the author in the inputs and the scripts to add or remove columns or rows.

To set the table inside the dialog, for testing pursposes we use the value harcoded ./datatable in NAME and refer to the place where is the code(app/mysite/components/chart/foundation/form/table) with attribute sling:resourceType.
Once we´re inside this location (apps/foundation/form/table), the folder must have property sling:resourceSuperType with value: granite/ui/components/foundation/form/field and then we start to work inside render.jsp



/apps/mysite/components/chart/foundation/form/table/render.jsp



The first include and the page session are just imported libraries to use from backend, like node configuration and resources to retrieve info from this nodes.

Then we´ve granite´s nodes attributes that concatenate a string in a variable (htmlTable) with the table values obtained from .get(”./datatable”) to finally show updated table in the dialog with .build() function , that is generated by the inputAttrs.build()



In this part, we have the default html, which shows placeholder values. These values are updated once we enter new values.

Finally, we´ve some methods that were created to modify the table according to data you need to enter.

These methods are:

• Add row
• Delete row
• Add column
• Delete Column

Then we have the javascript code to add data in fields.



addDataInFields function take data and then goes through the fields adding values, elements, and classes to TD's.



collectDataFromFields function once that dialog submits is clicked, the table is selected and inputs are replaced with just text in the TD's, and classes are removed. Values are saved in a hidden field as a string that is used to record JSON.

This is the view with the table with info loaded:


Here we’ve jQuery function for table operations:


This function clones the last column and then append to the table without values.

Here we can see the logic of the method to manage fields in the table:


All these methods (remove/add row/column) works in the same way.

To remove them, the user must have checkered what´s going to remove. On the other side, if the idea is to add, you must have checkered what you need to add (row/column) and when the button is clicked, it´s added at the end.

The same process to apply the remove, is going to delete the row/cel checkered.

The visual view:


And finally, we load all functions when document it´s ready, to be sure that the table was loaded correctly:



Please leave a comment if you have any questions.