My embedded icon are not showing in my table

[Zied_Brahmi]

Hello forum!,
I have a problem embedding an icon in my ignition table.
this is my setup for the fourth column where I want to put my icon on (sadly it's not being shown).

render: view and I m putting the viewPath to my icon view
and here is my icon view

thank you for helping me.
another thing is that after solving this (showing the static icon on the table), I want to do a binding of the data to a dataset memory tag and to put icons dynamically (red or green), how can I do that in the transform script on the tag binding in the table please?
Thank you.

[YF129701]

Are you passing in the viewPath into your Icon view as a parameter? Or did you just statically define the icon path for now, to test?

[flexware]

What does props.data look like? Do any of the rows of the table have an icon property defined? In other words, your props.data should look something like

[
    {
        "city": "",
        "country": "",
        "population": "",
        "icon": ""
    }, ...
]

at the very least. In other words, you need at least one of the objects to have an icon key for the icon view to appear.

[Zied_Brahmi]

for now I m not passing params, I m testing statically yes

[Zied_Brahmi]

Oh! that's true, thank you!. I modified my data to include that icon and now I m seeing the icon, but the naming is ugly no? is there any way to override it?
you seen the screenshot here

and after that for the binding with the dataset (memory tag) how can I do it when transforming the dataset in the transform function ?

Thank you

[flexware]

What do you mean by "the naming is ugly"?

Also, what data does your dataset tag hold? Where does it fit into the picture? Does it hold state information from a device that you want to use in the icon column? Also, are you planning to bind the Table's props.data to the dataset tag?

[Zied_Brahmi]

the naming is ugly I mean in the table that I want to create for example the name will be Status not Icon and I want to show a green/ red icon there.
and for my dataset, yes I will bind it to a memory dataset, this memory dataset will be refreshed by a gateway event script.
After that I will bind the props.data to the dataset tag and do the transform in the following way:

def transform..
dataret = []

for row in range(value.rowCount):
    row_object = {}
    asset_name = value.getValueAt(row, value.columnNames[0])

    for col in value.columnNames:
        col_obj = {}

        col_obj['value'] = value.getValueAt(row, col)
        if col == 'Status':
            #put the icon here in a good way in the dataset

    dataret.append(row_object)

return dataret

I hope that it's clear

[flexware]

If that's all you're wanting to do, you could do without a transform (unless I'm misunderstanding you).

Suppose your dataset tag starts with 3 columns:

city | country | population

The first thing I would do is to add 2 more columns:

city | country | population | iconPath | state

with the iconPath column holding your icon's path, and the state column holding either a text or a numeric state value (in your example, you only have two states - green and red, which probably corresponding to running and error/stopped).

Then, in your Icon view, you would create some view params, namely, one called rowData - this object gets automatically passed into your Icon view when you render a column as a view.

The rowData object will contain this row's data. So for instance, for row 0, the rowData object will be all of the fields in row 0, something like

{
    "city": "",
    "country": "",
    "population": "",
    "iconPath": "material/hello",
    "state": "running"
}

Then, in your Icon view, you can read this rowData.state property and use it in a binding to set your icon's color. Similarly, you can also have a dynamic icon path, using the rowData.iconPath property.

The last few points I want to make is that the iconPath and state columns can be set to visible: false and those values still appear in the rowData. The last thing is that you can change the icon column's header.title property to set the column text to Status.

This would be much easier to show - a bit harder to type out. Let me know if you have any questions about what I said or if I'm way off!

[Zied_Brahmi]

Thank you, yes good idea but I want transform to do some filtering because I also have a dropdown with the table, so in the transform I ll read the dropdown value and filter rows and I ll render the icons like you said.

Just last thing, I m not being able to change the icon header.time as you can see in the screenshot.
Also this is somewhat off topic but I will insert many columns (10 columns) in the table and I tested that it can only show 7 columns after that it's starts to need to scroll right and left, anyway to make it really flex? and to show all columns always? Thank you.

[Zied_Brahmi]

it worked like a charm, thank you.