Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Auto-resizing a dynamic table

Avatar

Level 3

Hello,

I have been working on a form in Licecycle Designer ES2 that requires the user to be able to insert a table. I have managed to work out a code that will do that by having a button with the following script in the click  event where I have a single-cell table and "Cell1" is a repeatable subform that acts as a cloumn:

// default rows and columns

var nRowCount = 3;

var nColCount = 4;

// ask user for row and column count

var sNumRows = xfa.host.response("How many rows?       (max 15)", "New Table", nRowCount.toString());

var sNumCols = xfa.host.response("How many columns?       (max X)", "New Table", nColCount.toString());

// get the user's response handling any invalid input

if (sNumRows != null && sNumRows.length > 0 && !isNaN(sNumRows))

    nRowCount = Number(sNumRows);

if (sNumCols != null && sNumCols.length > 0 && !isNaN(sNumCols))

    nColCount = Number(sNumCols);

   

   

xfa.resolveNode("Table2.Row1").instanceManager.count = sNumRows;

xfa.resolveNode("Table2.Row1.Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[1].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[2].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[3].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[4].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[5].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[6].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[7].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[8].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[9].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[10].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[11].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[12].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[13].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[14].Cell1").instanceManager.count = sNumCols;

xfa.resolveNode("Table2.Row1[15].Cell1").instanceManager.count = sNumCols;

My question is a two parter. First, is there a better way to specify the duplication of columns in all rows? If I don't anticipate the rows as "Table2.Row1[x].Cell1" then only the first row will gain columns. Second, is there a way to automatically resize the width of the columns when the button is clicked? For instance, if the user chooses to have two rows, then I would like to have each column be about 3" wide. But if the user wants 3 columns, then they should each be about 2", and 4 columns would be about 1.5" each.

I have tried adding the following code (and as many variations as I can think of affecting the text field, the cell subform, the table, etc.) to the button's click action but it doesn't work:

if (sNumCols = "2") {

  this.resolveNode("Table2.Row1.Cell1").w = "3in";

  this.resolveNode("Table2.Row1.Cell1[1]").w = "3in";

}

3 Replies

Avatar

Level 10

it might be possible that you need to specify each cell of the column the width you want to apply to get your column be that large..

for each rows at cell1 width = 3in.. you can input this instruction in the loop below

instead of writting every rows to apply your width, like you said the Table2.Row1[x].Cell1 would work that way

for (var i =0 ; i < xfa.resolveNode("Table2.Row1[0]").instanceManager.count; i++){

     xfa.resolveNode("Table2.Row1[" + i.toString() + "].Cell1").instanceManager.count = sNumCols;

}

Avatar

Level 3

Hi Magus069,

Your code helped me to specify that columns are added to every instance of Row1, but I still haven't been able to figure out how to dynamically resize the columns to fit the page so that the width of each column is equal to the total number of columns divided by 7.5 (the width of my form). Any ideas on how to do this?

Avatar

Level 10

To change your column widths you need to write something like » Table2.columnWidths = "50mm 50mm 50mm 50mm" or "in"

so say you want it to be divided by the number of columns

var intWidth = parseInt(Page1.w) / colSpan;

Table1.columnWidths = intWidth.toString() + "pt " + intWidth.toString() + "pt " + intWidth.toString() + "pt " + intWidth.toString() + "pt";

Look at your Page1 properties in XML View, if the width is set as "pt" use "pt" for you table columns