# Clickable url with dynamic payload

**URL:** <https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [12 December 2022 15:05 UTC](https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083 "2022-12-12T15:05:39Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ch4oz4ngel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ch4oz4ngel/32/72464_2.png) [@ch4oz4ngel](https://discourse.nodered.org/u/ch4oz4ngel)\
**Post date:** [12 December 2022 15:05 UTC](https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083/1 "2022-12-12T15:05:39Z")

</div>

Is there a way to create a dashboard button with a url that is updated by payload.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80fb6862f964bad42e126b466109af01e09007bd.png)

It is recognized in the debug but by pressing the button nothing happens in the browser.

```auto
[
    {
        "id": "7db57965.76d468",
        "type": "ui_button",
        "z": "4e5b96c6a3d18ad9",
        "name": "",
        "group": "ca2272c3.e8396",
        "order": 1,
        "width": "4",
        "height": "1",
        "passthru": false,
        "label": "Play",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "Play",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 190,
        "y": 1420,
        "wires": [
            [
                "6fcde5eb3496bdf2"
            ]
        ]
    },
    {
        "id": "5e1f0081.6dc3c",
        "type": "ui_template",
        "z": "4e5b96c6a3d18ad9",
        "group": "ca2272c3.e8396",
        "name": "window redirect",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<script>\n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n if (data == \"Play\") {\n window.location.href = 'msg.payload';\n } \n });\n})(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 760,
        "y": 1480,
        "wires": [
            [
                "8582289.2d757d8"
            ]
        ]
    },
    {
        "id": "ece06122.7e762",
        "type": "trigger",
        "z": "4e5b96c6a3d18ad9",
        "name": "reset msg",
        "op1": "",
        "op2": "",
        "op1type": "pay",
        "op2type": "nul",
        "duration": "250",
        "extend": false,
        "overrideDelay": false,
        "units": "ms",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 500,
        "y": 1400,
        "wires": [
            [
                "5e1f0081.6dc3c"
            ]
        ]
    },
    {
        "id": "8582289.2d757d8",
        "type": "debug",
        "z": "4e5b96c6a3d18ad9",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 970,
        "y": 1440,
        "wires": []
    },
    {
        "id": "431699ddb8ee80dd",
        "type": "function",
        "z": "4e5b96c6a3d18ad9",
        "name": "",
        "func": "var x = msg.payload;\nmsg.payload = (\"steam://connect/\") + x + (\":7777\");\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 460,
        "y": 1500,
        "wires": [
            [
                "ece06122.7e762"
            ]
        ]
    },
    {
        "id": "6fcde5eb3496bdf2",
        "type": "exec",
        "z": "4e5b96c6a3d18ad9",
        "command": "curl ifconfig.me",
        "addpay": "",
        "append": "",
        "useSpawn": "false",
        "timer": "",
        "winHide": false,
        "oldrc": false,
        "name": "",
        "x": 280,
        "y": 1480,
        "wires": [
            [
                "431699ddb8ee80dd"
            ],
            [],
            []
        ]
    },
    {
        "id": "ca2272c3.e8396",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "d9bf7560.df5e58",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "d9bf7560.df5e58",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 9,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [12 December 2022 22:12 UTC](https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083/2 "2022-12-12T22:12:24Z")

</div>

You watch `msg.payload` and then proof it for the value `Play`. But this value has been exchanged before by the url. What you can do is to watch the whole message and then proof the topic for `Play`. This way you can also use the payload:

```auto
[
    {
        "id": "c2f5ec181151ecf7",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "7db57965.76d468",
        "type": "ui_button",
        "z": "c2f5ec181151ecf7",
        "name": "",
        "group": "ca2272c3.e8396",
        "order": 1,
        "width": "4",
        "height": "1",
        "passthru": false,
        "label": "Play",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "Play",
        "topicType": "str",
        "x": 230,
        "y": 300,
        "wires": [
            [
                "6fcde5eb3496bdf2"
            ]
        ]
    },
    {
        "id": "5e1f0081.6dc3c",
        "type": "ui_template",
        "z": "c2f5ec181151ecf7",
        "group": "ca2272c3.e8396",
        "name": "window redirect",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<script>\n (function(scope) {\n scope.$watch('msg', function(msg) {\n if(msg!==undefined && msg!==null){\n if (msg.topic == \"Play\") {\n //window.location.href = msg.payload;\n window.location.assign(msg.payload);\n }\n }\n });\n})(scope);\n</script>",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1240,
        "y": 300,
        "wires": [
            [
                "8582289.2d757d8"
            ]
        ]
    },
    {
        "id": "ece06122.7e762",
        "type": "trigger",
        "z": "c2f5ec181151ecf7",
        "name": "reset msg",
        "op1": "",
        "op2": "",
        "op1type": "pay",
        "op2type": "nul",
        "duration": "250",
        "extend": false,
        "overrideDelay": false,
        "units": "ms",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 1040,
        "y": 300,
        "wires": [
            [
                "5e1f0081.6dc3c"
            ]
        ]
    },
    {
        "id": "8582289.2d757d8",
        "type": "debug",
        "z": "c2f5ec181151ecf7",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1430,
        "y": 300,
        "wires": []
    },
    {
        "id": "431699ddb8ee80dd",
        "type": "function",
        "z": "c2f5ec181151ecf7",
        "name": "",
        "func": "var x = msg.payload;\nmsg.payload = (\"steam://connect/\") + x + (\":7777\");\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 800,
        "y": 300,
        "wires": [
            [
                "ece06122.7e762"
            ]
        ]
    },
    {
        "id": "6fcde5eb3496bdf2",
        "type": "exec",
        "z": "c2f5ec181151ecf7",
        "command": "curl ifconfig.me",
        "addpay": "",
        "append": "",
        "useSpawn": "false",
        "timer": "",
        "winHide": false,
        "oldrc": false,
        "name": "",
        "x": 500,
        "y": 300,
        "wires": [
            [
                "431699ddb8ee80dd"
            ],
            [],
            []
        ]
    },
    {
        "id": "ca2272c3.e8396",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "d9bf7560.df5e58",
        "order": 1,
        "disp": true,
        "width": 6
    },
    {
        "id": "d9bf7560.df5e58",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 9,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 December 2022 22:17 UTC](https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083/3 "2022-12-12T22:17:24Z")

</div>

> [@ch4oz4ngel](#):
>
> `ifconfig.me`

You don't need to run an exec to find your own external IP address. You can use an http-request node.

You should also get your front-end script to output the full URL to the console, then you can see whether it is being triggered and what URL you have generated.

---

<div class="post-metadata">

**Author:** ![ch4oz4ngel](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ch4oz4ngel/32/72464_2.png) [@ch4oz4ngel](https://discourse.nodered.org/u/ch4oz4ngel)\
**Post date:** [13 December 2022 16:25 UTC](https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083/4 "2022-12-13T16:25:18Z")

</div>

I'm too stupid for that. Have now used a fixed one with [noip.net](http://noip.net) instead of dynamic url adjustment.  
Problem solved:)  
But thank you for your help

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [11 February 2023 16:25 UTC](https://discourse.nodered.org/t/clickable-url-with-dynamic-payload/72083/5 "2023-02-11T16:25:38Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.