Tinderbox Template - Dynamically Built HTML Table: Column Heads Children $Name, Row Labels Parent's $Displayed Attributes

File Exchange
1

Tinderbox Template - Dynamically Built HTML Table: Column Heads Children Name, Row Labels Parent’s $Displayed Attributes
Level Advanced
Published Date 5/2/21 Updated: 5/5/21
Type Template
Tags .each, 4CKMEl, 4Cs of Knowledge Management and Exchange, Action Code, Export Code, HTML Table, Tinderbox, aTbRef
Example File See link below.
Revision 2
TBX Version 8.9
Instructor Michael Becker

This Tinderbox template dynamically creates an HTML table from the attributes of a container’s children. The table column heads are the parent’s $DisplayedAttributes, and the table’s row labels are the childrens’ $Name (each of the children needs the same $DisplayedAttribures as the parent). The values of the cells are populated from the value in the attributes associated with each $DisplayedAttributes.

TBX L - Building Table from Attributes.tbx (176.9 KB)

It relies on the following structural elements

  • Attributes
    • $MyString (system attribute)
    • $MyList (system attribute)
    • $AtrTable, a string (user generated attribute)
    • $LookupList, a list (user generated attribute)
    • $vChildAtr, a string (user generated attribute)
    • $MyString 2, a string (user generated attribute)
  • Notes
    • Parent container with list of desired attributes to be used as the column heads of the table
    • Children with same displayed attributes at parent
    • lt-ProdIteration note, in the following path /Configurations/, with the $LookupList attribute displayed and the key value pair ($Attribute:Label) that will be used in the table

Note: 1. Sample file has two templates in it, look at tSolutionIteration2. 2. Currently only works in TBX 8, there is a lookup issue in TBX 9 backstage that is being worked on.

image
image2328×1090 462 KB

3 Likes
2

Thanks! How would one tweak the style so the shading in the header includes the first column too? Also how would one widen that final column so the header doesn’t wrap there? (Realize that must be elementary css but am thinking since you did this so recently you may have the answer readily available.)

3

Yes, this is CSS. You would create css classes and then apply them to the specific tables as a class. See attached.

I added a new template: tSolutionIteration3.

Added CSS style:
.firstcolum {background:green;
width:15%;
color:#ffffff;

Then you’ll see I’ve modified this line to add the class: $vChildAtr = $vChildAtr +’’+vLabel;.

TBX L - Building Table from Attributes.tbx/ (177.1 KB)

Also, I’ve added another new template: tSolutionIteration4.

This one turns the semicolon separates sets and lists into comma separated lists.

4

Broken link :wink:

5

Try it now.

6

The link is there, down below, but the one in the table is still broken (not that it matters).

7

Ya, I know. Have no idea why the link is not working and don’t have time debug discourse.

8

Thanks for the pointers. My question originated from this:

Screen Shot 2021-05-06 at 23.33.46
Screen Shot 2021-05-06 at 23.33.462084×1128 290 KB

I couldn’t figure out why “cell A1” of one table was shaded in one of your tables and not in others. The <style> block looked identical to me.

It turns out (I think) that this is a result of insertion of non-breaking space further down, in the html, which you didn’t have in the table with the shading all the way across.

Screen Shot 2021-05-06 at 23.41.11
Screen Shot 2021-05-06 at 23.41.11938×300 43.9 KB

The table looks good with the different color in the first column. But what if one wanted “A1” to be shaded the same as the rest of the header row?

9

Easy enough…just add a new class to the CSS and style the cell.

image
image1174×1318 148 KB

image
image1000×472 132 KB

I agree.

1 Like