Dynamically creating a table with data in LiveCycle form using JavaScript

Stefan Cameron wrote an article on scripting table columns a while back. Taking that idea, how would you dynamically create a table based on some data? Well, there are a couple of ways and this blog post will show you one way of achieving it.

To begin, first you need some data. In my example, I have two sets of strings in JSON format. Your data could be XML or comma delimited strings coming from a web service, ODBC connection, etc. It does not matter what format it is in as long as it is tabular data and your script can handle it property so that you can populate the table cells.

In addition to the data, I have a hidden table with one column and one text cell. The idea is that the script will use this hidden 1×1 table as a template to create multiple row and column instances. The text cell instances will be assigned with values from your data.

The following JavaScript function will take care of the table creation:


/**
*	Create rows and columns based on the number of data items and number of attributes
*/
function createTable(jsonString, table)
{
// Evaluate JSON string into a array of JavaScript objects
// See the StringSO script object for the prototype function
var data = jsonString.evalJSON();

var attributes = new Array();
var attributeCounter = 0;
var row = table.somExpression + ".Row";
var pageWidth = 8; // inches;
var cellWidth;
var columnWidthsString = "";

// Get all attributes
for(var a in data[0])
{
attributes[attributeCounter++] = a;
}

// Calculate the cell width based on number of columns and page width
cellWidth = pageWidth/attributes.length;

// Create first column for all rows
for(i = 0; i < data.length; i++)
{
table._Row.addInstance(0);
}

// creating columns
for(i = 0; i < attributes.length; i++)
{
for(var n = 0; n <= data.length; n++)
{
var column = row + "[" + n + "].Column[" + i + "]";
var cell = column + ".Cell";

// Set the value in the cell
if(n == 0)
{
xfa.resolveNode(cell).rawValue = attributes[i];
}
else
{
xfa.resolveNode(cell).rawValue = data[n-1][attributes[i]] + "";
}

if(i < attributes.length - 1)
{
var t = row + "[" + n + "]";
xfa.resolveNode(t)._Column.addInstance(0);
}

// Set cell width
xfa.resolveNode(cell).w = cellWidth + "in";
}

// Building column widths string
columnWidthsString += cellWidth + "in ";
}

// Set column widths
table.columnWidths = columnWidthsString;

// Make the table visible
table.presence = "visible";
}

What the function does is that it figures out how many columns there will be, calculates the optimum cell and column width. With that information, it loop through the data array to create rows and columns, and finally adjust the column widths accordingly.

Hopefully this is useful for those who are looking for a way to display data returned from a web service without knowing how many columns there are going to be. Feel free to ask any questions and let’s keep the discussion going.

Download sample form

screenshot