Use an if statement to change a picture/ image in a chatbot

(0) Share

Report

Posted on by Sajarac

3,271

Hi there,

I have my data from a Sharepoint list. In one of the columns the value could be sometimes a "car" or a truck.

Now in my adaptive card I have an image inserted id = imgTransportMode.

What I need is to change the icon depending on the value in my Share point column if the column shows car: insert the URl....car.png

if the SharePoint column value is truck: show the truck.png.

I don't know if this question should be posted in the PA forum ?

Sorry, very new to PVA.

Thanks

Categories:

General topics

I have the same question (0)

All responses (4)

Answers (1)

Expiscornovus 33,189 Most Valuable Professional on at

Like (1)

Report
Hi @sajarac,

Adaptive cards has it's own expression language. You could try and use that in your adaptive card code.

https://docs.microsoft.com/en-us/azure/bot-service/adaptive-expressions/adaptive-expressions-prebuilt-functions?view=azure-bot-service-4.0

It could be an expression like below:

"${if(equals(SharePointColumn,car), 'car.png', 'truck.png')}"

Can you share the code of your current adaptive card? I might be able to adapt my example to your setup.

Was this reply helpful? Yes No
Sajarac 3,271 on at

Like (0)

Report

Hello @Expiscornovus , and thank you very much. I didn't know about the expression language.

I hope this part give you an idea:

{
"type": "Column",
"spacing": "Small",
"verticalContentAlignment": "Center",
"items": [
{
"type": "Image",
"height": "40px",
"id": "LblIconCarorTruck",
"size": "Medium",
"url": "https://........../Car or Truck .png",
"width": "40px"
}
],
"width": "auto"
},
{

Was this reply helpful? Yes No
Verified answer

Expiscornovus 33,189 Most Valuable Professional on at

Like (1)

Report
Hi @sajarac,

Apologies, I was confused with the expression language in the Bot Framework Composer topics.

For adaptive cards within Power Automate cloud flows you could simply use the Power Automate expression language.

Below is an example of that.

In this example I use a title (which has the car name) column of a the first item of a SharePoint list and the AutoType choice field value (it can be either Car or Truck) of that same item. These are retrieved via a Get Items action.

Within the image control I check if the value equals Car. If that is true I show a Car icon, otherwise a Truck icon.

{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.0", "body": [ { "type": "TextBlock", "text": "@{body('Get_items')['value'][0]['Title']}", "wrap": true }, { "type": "TextBlock", "id": "acAutoType", "text": "@{body('Get_items')['value'][0]['AutoType/Value']}", "wrap": true }, { "type": "Image", "url": "@{if(equals(body('Get_items')['value'][0]['AutoType/Value'], 'Car'), 'https://www.iconpacks.net/icons/1/free-car-icon-1057-thumb.png', 'https://www.iconpacks.net/icons/1/free-truck-icon-1058-thumb.png')}" } ], "spacing": "None" }

Was this reply helpful? Yes No
Sajarac 3,271 on at

Like (0)

Report
Thank you very much for your help.

Yes. This part solve the issue:

"url": "@{if(equals(body('Get_items')['value'][0]['AutoType/Value'], 'Car'), 'https://www.iconpacks.net/icons/1/free-car-icon-1057-thumb.png', 'https://www.iconpacks.net/icons/1/free-truck-icon-1058-thumb.png')}"

Many thanks

🙂

Was this reply helpful? Yes No