Icon in Perspective Table Column

[bharghavi.balagopal]

Hello,

Is there a way I can show an icon in a column. ?
Like map the values of a column with some icons, how can it be done?

Thanks,
Bharghavi

[jdonohue]

Bump this - I’m also curious to know if there’s a way to add icons to tables in perspective. Uploading a sample.

Is there a way to achieve this?

[jpark]

Make the column render a view that has the icon.

[jdonohue]

thanks @jpark. I’ve done a “subview” in a table but haven’t directly put another view in there. Do you know of any reference material?

[wking]

https://docs.inductiveautomation.com/display/DOC80/Perspective+-+Table
You’ll start there.

You’ll make use of onSubviewExpand and collapse. You’ll point the view at another view and maybe feed it a param.

Then head here

https://docs.inductiveautomation.com/display/DOC80/Displaying+a+SubView+in+a+Table

[jdonohue]

Hi @wking - thanks for the links. What I’m looking to do is embed a view in the table (not a subview). In the table video, it does mention this functionality at 2:49 in the perspective table video https://inductiveuniversity.com/video/perspective-table/8.0/8.0. I believe there’s a key word I need to have in a object. I tried “view” but it didn’t work.

[wking]

Ahh…So like a highlighted link that maybe calls and opens a pop-up or even switches the view or something?

I am trying to figure this functionality out myself as well.

So I’ll follow:

[cmallonee]

No, @wking, that’s not what @jpark is recommending.

@jdonohue:

1. Create a View which has just an icon, and bind the icon path to be dependent on some value supplied as a View param.
2. You should include a new props.column config which has render set to “view”.
3. set the relevant column configuration’s viewPath property to the path of the View which you set up with the Icon.
4. supply columns[x].viewParams with the value which will determine the icon to be used.

[jdonohue]

@cmallonee thank you so much for the help. I think I’m one step away from solving this. I’ve attached some screenshots of the instructions above.

• created iconView with view params binded to the icon.
• created query to populate table.
• created table view with table component in it. Binded to the query.
• added second column to table. selected viewPath to be iconView created and set viewParams.

Still not able to show up, but feel like I’m close!

[cmallonee]

Your data object is one-dimensional, so the column won’t display any data because there is nothing to display.

1. Provide a second column in your dataset.
2. Set columns[1].field to the value of the dataset’s second column.

Table’s will not just display a configured column with manufactured data - they must reference a data object “column”.

[jdonohue]

PERFECT! Thank you @cmallonee @jpark for the help!

[cmallonee]

You’re welcome.

What you might want to do instead of passing the icon path is just pass a simple value (true, false, or a numeric value) and then let the View with the icon determine the icon path from the value.

[dkyerger]

Sorry about digging up an old topic, but I was wondering if there is a way to pass the current value for the column (aka for that row) into the view to have it display different icons based on the value in the table.

[cmallonee]

The subview to be rendered should accept a param of type object with a key of value. This param will receive all of the row values, so you would bind against self.view.params.value.targetParam. See the docs here and look specifically at step number 6.