Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Table with dynamic header and dynamic number of columns

Avatar

Level 2

Hello!

 

I would like to design a static form with a dynamic table.

The table gets the number of columns, the length of each column and the header text from the backend. On every page the table header should appear (as an overflow header).

 

What would be the best approach?

 

The things I tried:

  • Create a table from scratch with subforms -> overflow header is not working, cannot set width on a new page, the header cells (in a flowed subform) just stay on top of each other.
  • Create a normal table (from Object Library) -> cannot hide the columns that I do not need.
  • Create 10 normal tables (from Object Library), because I can have only 1 - 10 columns, hiding the unwanted table by script depending on the input data  -> data cannot flow twice to tables even if all other tables are inactive.

 

Thanks for any help, best regards, David.

6 Replies

Avatar

Level 10

A static form can't have any dynamic elements. To do so you need a dynamic form. There you can add, remove, show or hide columns by placing subforms in the table cells. Those subforms can be controlled as usual. 

Avatar

Level 2

Hi Radzmar!

 

Sorry, I dunno why I wrote Static form I am always creating dynamic forms.

My problem is still the same. I get the number of columns and the header texts from the backend (SAP). ...and I have a requirement to print the header on each page in case the table overflows. Either I use the normal table object or I make it from scratch with subforms, something is always missing.

My last solution was to create as many tables as columns we can have (10 in my case) and hide them except the one we need. The width of the columns can be set and the text as well, and the overflow header is at its place, but it is still a lame solution. Not to talk about the other great feature - I have to pass the same data 10 times in the interface to populate the tables (…why is it good for anyone that the table data gets “consumed”???). I just wondered if anyone has a better solution.

Thanks, and best regards, David.

Avatar

Level 10

Creating a dynamic table with multiple columns is not so complicated. You only need to wrap the the fields in all rows the are in the same column with a subform that ist set to be repeatable, like in this example. 

radzmar_0-1710357024141.png

 

Then you need a script that controls the table. Here it's placed in the exit event of the numeric field named "Field".

if (!this.isNull) {
	var nColumns = this.rawValue, // Number of columns
		oRows = Table1.resolveNodes('#subform[*]'), // Resolve all rows of the table
		nMaxWidth = 150, // maximum width for all repeatable columns
		cColumsWidths = "30mm "; // initial value for table properties 
	// Process each row
	for (var i = 0; i < oRows.length; i += 1) {
		oRows.item(i).Column.instanceManager.setInstances(nColumns); // Set selected number of columns per row
		var oRowColumns = oRows.item(i).resolveNodes('Column[*]'); // Resolve all columns per row
		// Process each column per row
		for (var c = 0; c < nColumns; c += 1) {
			// Add width of repeatable colums to table properties. Do this only for the first row, since it's needed only once
			if (i === 0) {
				cColumsWidths += (nMaxWidth / nColumns) + "mm ";
			}
			// Set width of nested text field in every repeated column
			oRowColumns.item(c).resolveNode('#field').w = (nMaxWidth / nColumns) + "mm";
		}
	}
	// Update columns width in table properties
	Table1.columnWidths = cColumsWidths; 
}

 

The table layout changes as soon you left the field.

radzmar_1-1710357376017.pngradzmar_2-1710357405343.png

 

Avatar

Level 2

Hi Radzmar!

Thx, for the suggestion, but I have similar code myself. The problem still persists - no header in case the table overflows! Either I use fix header (that is not possible in my case - since I get the number of columns, the length of the columns and rawvalue of the header cells) or I use a dynamic header, then the overflow header gets all messed up....do you have any suggestion on that one? Thx, best regards, David.

Avatar

Level 10

I've testet this and was able to create a repeated and also dynamic header for a subsequent page. However it might be tricky to get this work as intended, since the XFA specs recommend static headers in flowing layouts. 

radzmar_0-1710879598613.png

 

If you know the maximum of possible columns, you could build one static header with multiple overlaying subforms. One for each variation of possible columns. Depending on the number you then only show the related subform. 

 

 

Avatar

Administrator

@davids88333804 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni