UIBUILDER: How to create and populate a table

General
1

It's possible I'm missing something somewhere, but I'm having a lot of trouble understanding how to create and populate a table. You'll see a post on your Discord server in getting-started I made a few days ago.

2

Hi, apologies, I don't get to Discord as often as I'd like. If you don't mind, posting your question here and will answer here as well.

Is there any good documentation for creating and populating tables with uibuilder? I might be looking in the wrong place(s). The forum posts I've found contain too much back-and-forth with deprecated methods and the updated methods for me to make any sense of to get a good start. This is the project. I work for a theme park. Each ride has a Raspberry Pi running NR and reads data from a PLC and writes it to the appropriate tables in a MySQL DB. The server (another Pi running NR) reads each table and creates an array of data using specific columns from each table, formatting each based on various conditions.

Image

3

In answer, "good" documentation - well you may be in a better position to answer than me as I tend to be a bit close to things so may make assumptions incorrectly.

The simplest way to create a table is using the uib-element node set to output a table definition. You feed it an array of objects where each property of the object is a table column. Then feed the output to a uibuilder node and it creates the table automatically on any connected client. You use the uib-cache node to handle caching to deal with page reloads and new client connections.

There is an example flow that demonstrates ALL of the available elements including tables and that is probably the best way to get started as it has everything needed including test data.

image
image858×425 33.8 KB

With the output looking like:
image

For your specific case (which is brilliant by the way, love it :slight_smile: ), your input data would look like:

[
  {
    "Ride": "rid001",
    "Mode": "Auto",
    "Status": "Crashed and burned!",
  },
  ...
]

The important thing to note is that the element node simply creates the initial table. What you end up with in the page is a bunch of usable HTML with column/row/cell ids that let you further manipulate things.

image

There is another element type that adds a row to a table but to update a specific cell dynamcially, you can use the uib-update node with the cell identifier you want to change. The example already mentioned shows how:

image
image969×434 21.9 KB

There are other ways but this is probably the simplest even though the CSS Selector looks at first sight to be complex. All it is saying is select the 2nd column of the 2nd row of the table body.

If you are not familiar with CSS Selectors (which UIBUILDER uses extensively), on a web page, open up the dev tools select an element on page and you can copy the selector. Here is what my browser gave me to select that cell:

#eltest-tbl > table > tbody > tr:nth-child(1) > td:nth-child(2)

Which is actually probably a bit easier to read. (I'll update the example in fact. :slight_smile: )

Note: In the dev tools console, you can use UIBUILDER's easy element selector to test out your CSS Selector. It works very similarly to jQuery selectors:

$('#eltest-tbl > table > tbody > tr:nth-child(1) > td:nth-child(2)')

Formatting is currently a little more complex than I'd like. However, the content of a cell can be HTML. If you need to apply standard colouring - lets say for a particular mode or status, you can extend your initial table setup flow with some post-processing.

Hope that is a reasonable intro anyway and will get you started at least.

You've also reminded me that the current documentation is not terribly useful in this area! I'll do something about that for the v7 release.

PS: Will move your post and these followups to a new thread so that we can keep the conversation simpler.

PPS: Expect to see some additional improvements in v7 now you've prompted me. Here are some probable enhancements:

  • Add class names to body cells (r1 c1, etc) & body rows (r1).
  • Add id to table ${divId}-table

PPPS: You can, of course, also use a table enhancing library if you like because uibuilder's eventual output is always standard HTML/CSS. Depending on the library chosen, you could even ditch uib-element and simply send the data to the client browser in whatever form that library wanted.