How To - Create an HTML Table from Data Items

 

Requirement: you need to include a table in an HTML e-mail, where the contents of the table are dynamically determined within your BPM 5 Process.  For example, you want to initiate a Process on the first of every month, which will find all Contracts that expire in the next 45 days, so you can send Contract information in a message to your Sales information mailbox.  Your Sales department is then expected to follow-up with each Customer in the table to discuss a new Contract.

 

Tools: First, you must be familiar with writing HTML and creating Tables in HTML.  Then, you should familiarize yourself with using Data Models, Collections, Calculation Data Items and the custom function BluespringExt.Concatenate, which creates a delimited list based upon the values in a Collection.

 

Solution: in order to create an HTML table, create a Data Model with (N + 1) elements, where N is the number of Columns in your table.  The first N elements of the Data Model correspond to your Table Columns.  The additional element is a Calculation, which concatenates the other N elements together.  Because this Calculation occurs within the Data Model, it is performed on any single part of a collection.  The calculation creates the HTML for each column value, surrounded by the appropriate <td/> tags for HTML.

 

In our example, we want to create an HTML table / Data Model consisting of Customer Name, Contract Name, Expiration Date and Total Price.  The Calculation within the Data Model is:

Notice how we surround each element of our Data Model with the HTML tag <td> for table data, i.e. for a single cell.  So, this calculation creates the individual cell data for our table, for each member of the collection: Data Model, in the order: Customer Name, Contract Name, Expiration Date, Total Price.

 

The next step is to create a Data Item which uses the Data Model and is marked as a Collection.  This Data Item will then consist of several "rows" of the collection, where each row contains an element detailing the table data for our HTML table.

 

Next, we need to create the HTML table itself as a Calculation Data Item which concatenates the HTML to create the table and define its properties such as a border and column headers with the HTML to define each row in the table.

 

To create the HTML for each row of the table, let's look at some sample html for 2 rows: <tr><td>Bluespring</td><td>Annual Maintenance</td><td>12/31/2012</td><td>$10,000.00</td></tr><tr><td>Acme</td><td>Anvil Maintenance</td><td>11/30/2012</td><td>$200.00</td></tr>, which is a list of our calculation element from the Data Model separated by the end tag of one row and the beginning tag for another row.  In other words, the HTML itself is a delimited list, where the element is the value of our calculation Data Model element and the delimter is: </tr><tr>.  So, we can use BluespringExt.Concatenate to create most of the HTML as BluespringExt.Concatenate("[Collection Data Item]","[Calculation Data Model Element]","</tr><tr>").

 

The remainder of the HTML is just a string value of your <table> tag, column headers and introductory <tr> tag before your delimited list and a closing </tr> and </table> tag after your delimited list.  In other words: Concat("<table border=""1""><tr><th>Customer Name</th><th>Contract Name</th><th>Expiration Date</th><th>Price</th></tr><tr>",BluespringExt.Concatenate("Contracts","TableRow","</tr><tr>"),"</tr></table>").

 

Notice the use of double quotes in <table border=""1""> to define a single quote within the Concat function.  Each column header is defined within the <th>...</th> (table header) tags and we conclude the concatenation with closing </tr> and </table> tags.

 

At runtime, then, this concatenation / Calculation Data Item becomes:

 

<table border="1"><tr><th>Customer Name</th><th>Contract Name</th><th>Expiration Date</th><th>Price</th></tr><tr><td>Bluespring</td><td>Annual Maintenance</td><td>12/31/2012</td><td>$10,000.00</td></tr><tr><td>Acme</td><td>Anvil Maintenance</td><td>11/30/2012</td><td>$200.00</td></tr><tr></tr></table>

 

When this Calculation Data Item is included in an e-mail configured to use HTML, it appears as:

 

Customer Name	Contract Name	Expiration Date	Price
Bluespring	Annual Maintenance	12/31/2012	$10,000.00
Acme	Anvil Maintenance	11/30/2012	$200.00

 

You can then update the Table HTML within the Calculation Data Item, to control the font or size or any other HTML property.