Datatables in Adaptive Forms

Displaying large data sets in an Adaptive Form can be a challenge. One of the typical ways of displaying data is to create repeating panels. While this works for smaller data sets it does not work as a reporting mechanism where we may need to display hundreds or thousands of records in a timely manor.

In this example, we find an element on the form and then replace that element with an html table, and then, turn that html table into a DataTable.

Step 1: Define the new table

The id should be equal to the div created for a placeholder textbox on your form. It can be found by simply inspecting the rendered form and looking for the container of the textbox.

 var tableDefinition = "<div id='#guideContainer-rootPanel-panel-guidetextbox___guide-item' class='datatableContentContainer'><table id='jsonDataTable' class='display' width='100%'></table></div>";

view raw

gistfile1.txt

hosted with ❤ by GitHub

Step 2: Replace the textbox

Replace the textbox with the new table using jQuery. Note that this table won’t be bound to the data of the form itself. If you wish to bind data, use another field not the form as the datasource for the table (as demonstrated by the first button in the example).

	try {
	var dtph = $("#guideContainer-rootPanel-panel-guidetextbox___guide-item");
	dtph.replaceWith(tableDefinition);
	} catch (e) {
	console.log("Error updating element: " + e);
	}

view raw

gistfile2.txt

hosted with ❤ by GitHub

Step 3: Activate the datatable

Activate the datatable with any parameters you need to support in your table. I this case the titles are being defined. Note that the destroy option is set so that the table can be continuously replaced.

	var table = $('#jsonDataTable').DataTable({
	data: JSON.parse(jsonData.value),
	destroy: true,
	columns: [
	{title: "Name"},
	{title: "Position"},
	{title: "Office"},
	{title: "Extn."},
	{title: "Start date"},
	{title: "Salary"}
	]
	});

view raw

gistfile3.txt

hosted with ❤ by GitHub

What’s needed

jQuery is already present in the Adaptive Form so all we need to add is the DataTables JS and CSS as a Client Library. The example provided does include the library you require under /etc/clientlibs/DataTables_1.10.19. This will need to be included in any of your deployments.

Datatables_In_AEM_Adaptive_Form