Implementation Image in Table

Ignition
1

Hello Everyone,
I'm still learning about Ignition and need some guidance.
Currently, I have a table and want to implement an image in one of the rows. Here is the detailed data, data generated from a database (SQL), and I want to make logic.

Table :
No | Detail Issue | Level |

  1. | Issue_1 | Level_1 |
  2. | Issue_2 | Level_4 |
  3. | Issue_3 | Level_3 |

How can I implementation in Ignition for Row "Level". If data in Level was "Level 1" then display image_1 from Image Management, if data in Level was "Level 2" then display image_2, etc.

2

I think you mean that you want to implement an image in one of the columns.

I'm assuming that you will upload all the images to a dedicated folder using the Image Management tool.

The basic steps are:

  1. Create a new view with a custom property imageFileName.
  2. Drop an image component onto the view. Bind the source property to view.params.imageFileName. Since you're probably just going to supply the image file name I suggest that you use an expression binding like
    "system/images/myFolderName/" + {view.params.imageFileName}
    or
    "system/images/myFolderName/" + {view.params.imageFileName} + ".png"

You should be able to figure out the rest of the steps from the manual.

https://docs.inductiveautomation.com/display/DOC81/Table+Column+Configurations#TableColumnConfigurations-EmbeddingaViewinaTableCell

3

Yeah correct in Column, but I still struggling with binding data and making logic.

I already create View with binding to params

image
image1073×845 49.7 KB

when I implemented in Table, I just confused how make logic and binding. When the column "Level" was level 1, then display Image_1 from source Image Management.

image
image360×845 35.4 KB

So, did I must create script on table or on view ? Or do you have any suggestion?

4

On your view where the image would be displayed, create a view param called value, write a binding that reads this value, and changes the view.params.imageFileName as @Transistor has written.
When you use the view as a subview on a table, the value will be filled with the value of the cell in the table, passed as a view param.

5

I was try like @Transistor says and still get error,
Can you guide me? maybe my step was wrong.

Here the detail data
binding data I create same like source Image management.

image
image1526×740 60 KB

Then for image name, I convert like this on named query
image
r

6

Update, my fault binding in property (should binding using Expression)

Not found error but Image still can't display

image

7

What does the source read when given a rank value?

8

Before that, maybe I was wrong for understand the statement and I will revise my explanation.

Where this statement must be binding? on Image component or column table?
"system/images/myFolderName/" + {view.params.imageFileName}

Then, currently I have table like this.
No | Detail Issue | Level |

  1. | Issue_1 | Level_1 |
  2. | Issue_2 | Level_4 |
  3. | Issue_3 | Level_3 |

So I initiate for create condition to be named of image what should be source.
image

But, I still don't know how source can change picture adjust level on the table

9

At this stage I would suggest you complete the entire Inductive University training.

This question is very base level knowledge for this platform, so you would be best to be learning the platform, perhaps then you will understand how the answers you have been given help you solve the problem.

10

You need to debug. Here you can use the Image component Tooltip.

  • On the subview, click on the Image component. Set,
    META.tooltip.enabled : true
    and create a property binding on META.tooltip.text. Set the binding to,
    this.props.source.
    Save the project. Press F10 to launch it in the browser.
    Now hover over the table view to see what image path the view is getting.

Fixing the problem:
First, read Summary of Subviews. Read it twice!

So, your subview will (on the first row) automatically receive,

value
  + No : 1.
  + Detail Issue : Issue_1
  + Level : Level_1

Now on your subview the Image component should have a property binding,
view.params.value.level

Try that and if it doesn't work use the Tooltip trick to debug it.

11

Thank you for your advice. I finally applied the path icon and it worked.