Changing image on condition in mashup

[mboguta]

Hello,

I would like to do a red/green light alert based on a boolean condition in my mashup.

How can I do that? Do I need to make a service?

I would like it to be responsive as well.

If you have any clues, thanks for helping me out.

[ttielebein]

I think you could do this using the Expression widget or the Validator widget ​. Hope this helps!

[jkaczynski]

Hello,

As Tori mentioned, you can use expression, connected with e.g. image. Within the expression's widget configuration panel you can add a property of the necessary type. Then, based on this property change / value, you can add an expression. The expression could have a different output, it can also be e.g. a string - name of media entity to be shown as an image (red/ green "light" image).

In case of any additional questions, don't hesitate to ask.

Regards,

J.

[Thetowen]

HI J,

Was wondering if you could help me out. newbie to Mashups. Can't get this to work. I can get to as far as having a input to the expression and an output value. Can't figure out how you configure the output to select an image based on it's value and how to change it on the Mashup. Any help would be greatly appreciate. 

[Thetowen]

Got it working with the Validator that the image is visible/invisible. Can't determine how to choose a different image. Any ideas?

[CarlesColl]

Actually maybe better if you go with a ValueDisplay which can accept an image as input, and you can set it with the desired changing image.

Also with the ValueDisplay widget you cat set it with true/false and with a ValueFormat State-Based Formatting you can set images for true and false values ( or other three or n-state condition)

[Thetowen]

Carles,

Thanks for that but I'm still stuck on how to get the image to change. I can't figure out how to change the image that is sent to the ValueDisplay? I can sent a static image. Is there a way you can have n-number of images that you select depending on an integer or can I set a url for the image location which I can change depending on the required image?

Thanks for your help

[zyuan1]

If you are using more complex image than the Shape widget could cover (Circle, Rectangular), you could use Infotable (Retrieved from Datatable or Stream) to store the regular data and Image (in Image or ImageLink datatype) you want under same datashape.

In this way, you can start with using Grid to present the infotable, and bind the image property in the SelectedRows field to the ValueDisplay widget. So when you select different rows in Grid, the Images will also change based on your choices. After this test, you can use other widgets (Such as List or Tree) to interact with ValueDisplay widget other than the Grid

[posipova]

Here is some more information on the Expression widget (requires support login): https://support.ptc.com/appserver/cs/view/solution.jsp?n=CS233996&lang=en_US

and the Validator widget https://support.ptc.com/appserver/cs/view/solution.jsp?n=CS250781&lang=en_US

[zyuan1]

I'll vote for @CarlesColl 's solution in using the value display widget in showing different images, since that's what I usually do as well.

But in your condition, since you only need a Red/Green Light in Boolean status, you can have a more direct way to do this.

1. Look for a default widget called Shape (and it's responsive)

2. Put it in your mashup, and choose a ShapeType you need 

3. Bind your Boolean data to the widget

3. Add a State Formatting for it, For true, give it a Green style, for False, give it a Red style.

[Thaveshni]

What I did was put my image on a panel and then another image that I wanted it to change to if my property changed to a specific value.

• I then made sure that the "Visible" setting was checked for the default image. I put the image that I wanted it to change to over my default image and then made the "Visible" setting to unchecked. 
• Next I inserted a validator widget. Mouse over the widget to select the configure widget option from the drop down.
• Add parameter = property_name. base type = number (in my case). 
• Then I dragged the output option over to my image that needs to be visible when property_name = 1 (in my case). and then chose the visible option for the binding.
• I dragged my "property_name" value from my GetImplementingThingsWithData to my validator widget and selected "property_name"
• I then went back to the validator widget and set the settings to AutoEvaluate checked and output checked.
• I then added this expression to the expression field : 

if(property_name==1){Visible="true"} else{Visible="false"}

And it worked.