Changing the pictures as per the buttons click on

Dashboard
,
1

Hello,

Ibuilt two buttons and one template inDashboard. When I pressed button 1, button is sending path of the picture 1. However I could not run the image change by pressing the button in dashboard 2.JSON code is below. Can you explain why it didn't work? Thank you.

[
{
"id": "8414ba447a2dbaf8",
"type": "tab",
"label": "ui flow",
"disabled": false,
"info": "",
"env":
},
{
"id": "d2a0f910f42926c4",
"type": "ui-template",
"z": "8414ba447a2dbaf8",
"group": "9f5d1a47bb7f4dc4",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": "6",
"height": "6",
"head": "",
"format": "<div style="text-align: center;">\n <img id="img" src="" style="width:500px; height:281px; display:block; margin:auto;">\n\n\n\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 920,
"y": 160,
"wires": [

]
},
{
"id": "983accca62164a4f",
"type": "ui-button",
"z": "8414ba447a2dbaf8",
"group": "9f5d1a47bb7f4dc4",
"name": "",
"label": "Image 1",
"order": 2,
"width": "2",
"height": "1",
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-picture-o",
"iconPosition": "left",
"payload": "/sie.png",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"enableClick": true,
"enablePointerdown": false,
"pointerdownPayload": "",
"pointerdownPayloadType": "str",
"enablePointerup": false,
"pointerupPayload": "",
"pointerupPayloadType": "str",
"x": 620,
"y": 160,
"wires": [
[
"d2a0f910f42926c4",
"9e994912cda4bdc5"
]
]
},
{
"id": "21474f2a291ab887",
"type": "ui-button",
"z": "8414ba447a2dbaf8",
"group": "9f5d1a47bb7f4dc4",
"name": "",
"label": "Image 2",
"order": 3,
"width": "2",
"height": "1",
"emulateClick": false,
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-picture-o",
"iconPosition": "left",
"payload": "/sfc.png",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"buttonColor": "",
"textColor": "",
"iconColor": "",
"enableClick": true,
"enablePointerdown": false,
"pointerdownPayload": "",
"pointerdownPayloadType": "str",
"enablePointerup": false,
"pointerupPayload": "",
"pointerupPayloadType": "str",
"x": 620,
"y": 240,
"wires": [
[
"d2a0f910f42926c4",
"9e994912cda4bdc5"
]
]
},
{
"id": "8fc61d0e3bf6e35d",
"type": "ui-template",
"z": "8414ba447a2dbaf8",
"group": "8c59c7cdf7b5abd5",
"page": "",
"ui": "",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"head": "",
"format": "\n

\n <img src="/sie.png" width="400" style="display: block; margin: auto;">\n
\n\n\n\n\n",
"storeOutMessages": true,
"passthru": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 200,
"y": 200,
"wires": [

]
},
{
"id": "9e994912cda4bdc5",
"type": "debug",
"z": "8414ba447a2dbaf8",
"name": "debug 7",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 880,
"y": 320,
"wires":
},
{
"id": "34f86af2cfa2227c",
"type": "comment",
"z": "8414ba447a2dbaf8",
"name": "Image Dynamic",
"info": "",
"x": 140,
"y": 600,
"wires":
},
{
"id": "fc5ad03aaf82ca1b",
"type": "inject",
"z": "8414ba447a2dbaf8",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "/giphy3.gif",
"payloadType": "str",
"x": 160,
"y": 640,
"wires": [
[
"ced2801f3f933d59"
]
]
},
{
"id": "ced2801f3f933d59",
"type": "ui_template",
"z": "8414ba447a2dbaf8",
"group": "2e4c68c427bee1fb",
"name": "Logo from local",
"order": 1,
"width": "10",
"height": "6",
"format": "<img src={{msg.payload}} style="width:500px; height:281px; margin-left:auto; margin-right:auto" alt="Gif">",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 640,
"y": 620,
"wires": [

]
},
{
"id": "1fa96f4f4364c071",
"type": "ui_button",
"z": "8414ba447a2dbaf8",
"name": "",
"group": "2e4c68c427bee1fb",
"order": 2,
"width": "5",
"height": "1",
"passthru": false,
"label": "Image 1",
"tooltip": "",
"color": "black",
"bgcolor": "",
"className": "",
"icon": "fa-picture-o",
"payload": "/sie.png",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 320,
"y": 600,
"wires": [
[
"ced2801f3f933d59",
"df494a696c910caf"
]
]
},
{
"id": "6e0505a73450ceb7",
"type": "ui_button",
"z": "8414ba447a2dbaf8",
"name": "",
"group": "2e4c68c427bee1fb",
"order": 3,
"width": "5",
"height": "1",
"passthru": false,
"label": "Image 2",
"tooltip": "",
"color": "black",
"bgcolor": "",
"className": "",
"icon": "fa-picture-o",
"payload": "/sfc.png",
"payloadType": "str",
"topic": "topic",
"topicType": "msg",
"x": 320,
"y": 700,
"wires": [
[
"ced2801f3f933d59"
]
]
},
{
"id": "df494a696c910caf",
"type": "debug",
"z": "8414ba447a2dbaf8",
"name": "debug 8",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 560,
"y": 840,
"wires":
},
{
"id": "9f5d1a47bb7f4dc4",
"type": "ui-group",
"name": "Group 16",
"page": "c9cceec993890c0e",
"width": 6,
"height": 1,
"order": 2,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "8c59c7cdf7b5abd5",
"type": "ui-group",
"name": " ",
"page": "c9cceec993890c0e",
"width": "8",
"height": 1,
"order": 1,
"showTitle": true,
"className": "",
"visible": "true",
"disabled": "false",
"groupType": "default"
},
{
"id": "2e4c68c427bee1fb",
"type": "ui_group",
"name": "Dynamic UI",
"tab": "d08aa9c6b57536db",
"order": 2,
"disp": true,
"width": "10",
"collapse": false,
"className": ""
},
{
"id": "c9cceec993890c0e",
"type": "ui-page",
"name": "UI and Dynamic Images",
"ui": "c556c36118354602",
"path": "/page6",
"icon": "home",
"layout": "grid",
"theme": "f12e0319896b7982",
"breakpoints": [
{
"name": "Default",
"px": "0",
"cols": "3"
},
{
"name": "Tablet",
"px": "576",
"cols": "6"
},
{
"name": "Small Desktop",
"px": "768",
"cols": "9"
},
{
"name": "Desktop",
"px": "1024",
"cols": "12"
}
],
"order": 6,
"className": "",
"visible": "true",
"disabled": "false"
},
{
"id": "d08aa9c6b57536db",
"type": "ui_tab",
"name": "User Interface",
"icon": "dashboard",
"disabled": false,
"hidden": false
},
{
"id": "c556c36118354602",
"type": "ui-base",
"name": "Main UI",
"path": "/dashboard",
"appIcon": "",
"includeClientData": true,
"acceptsClientConfig": [
"ui-notification",
"ui-control"
],
"showPathInSidebar": false,
"headerContent": "page",
"navigationStyle": "default",
"titleBarStyle": "fixed",
"showReconnectNotification": true,
"notificationDisplayTime": 1,
"showDisconnectNotification": true
},
{
"id": "f12e0319896b7982",
"type": "ui-theme",
"name": "Default Theme",
"colors": {
"surface": "#ffffff",
"primary": "#0094ce",
"bgPage": "#eeeeee",
"groupBg": "#ffffff",
"groupOutline": "#cccccc"
},
"sizes": {
"density": "default",
"pagePadding": "12px",
"groupGap": "12px",
"groupBorderRadius": "4px",
"widgetGap": "12px"
}
}
]

2

Hi welcome to the forum.

Firstly, your flow cannot be imported as it is corrupt...

In order to make code readable and usable it is necessary to surround your code with three backticks (also known as a left quote or backquote ```)

``` 
   code goes here 
```

You can edit and correct your post by clicking the pencil :pencil: icon.

See this post for more details - How to share code or flow json

Secondly, have you seen the demo in the docs? (Hit the Try Demo button)

Screenshot_20250425-200810
Screenshot_20250425-200810930×2266 159 KB