Format cell in Table (Perspective Module) according to the content of the cell

I need to create a table in Perspective module, containing 4 rows by 50 columns.

Table_Example

In this table, I would like :
- to associate to each cell a JSON object containing a result for a validation (TRUE/FALSE) and an
image path.
- display nothing in the cell (no text) but change its background according to the result of the
validation (TRUE = GREEN / FALSE = RED)
- On a cell click, I want to display the image (path located in JSON file). Of course, all images will be
copied locally on the server in the “main” folder.

Is it possible to do that ? If yes, How can I do that ?

Thanks

Hi, and welcome to the forum!

Yes, it is indeed possible to do what you’re asking–we have something similar in our projects for coloring the backgrounds of cells, and it’s pretty simple to perform an action whenever a cell is clicked and fire an event when that happens.

First, the method for individually coloring a cell. If the data for your table is in a JSON format, it’s relatively trivial: for each value, whenever your table is populated or updated, you’ll need to convert the value in each column to an object and add a “style” to it. If your data has a binding, the best place to do this is in a script transform on that binding.

You can see an example of what the property looks like when you create a new Table component–the very first entry in that data has a style (which is why that very first cell is orange in the new table).

To render blank cells, all you have to do is set the cell’s value to null–this should be trivial to do in the same transform script where you’ll be setting the backgroundColor style property for each cell.

Lastly, in order to do some action whenever a cell is clicked, you’ll need to configure an event on your table (right-click → Configure Events… on your table). For the event your describing, you’ll probably want to use the onSelectionChange event. You’d want to use a script for that event, and you’ll need to get the selectedColumn and selectedRow properties from your table’s props.selection properties. Assuming you’ve stored the image path associated with a cell within the very same cell, you’ll be able to get the image path and launch a popup view with a parameter for the image path. Within this popup view, you can bind an Image component’s props.source property to that parameter to get the component to display that picture.

If you haven’t already, check out Inductive University to get a good head start on learning the ins and outs of the new Perspective module, and be sure to consult the docs here if you have trouble with components, terms I’ve used here, or getting started scripting. There’s a lot to this, but it shouldn’t be terribly difficult–let me know if you get stuck somewhere or if I need to explain something better.

Good luck!

1 Like

Thank you for your help. Your explanations are very detailed and it’s appreciated.