# Dynamicaly change the content of ui-template and start the modal iFrame with multiple buttons

**URL:** https://discourse.nodered.org/t/dynamicaly-change-the-content-of-ui-template-and-start-the-modal-iframe-with-multiple-buttons/83706
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [14 December 2023 07:23 UTC](https://discourse.nodered.org/t/dynamicaly-change-the-content-of-ui-template-and-start-the-modal-iframe-with-multiple-buttons/83706 "2023-12-14T07:23:29Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Robert\_N](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@Robert\_N](https://discourse.nodered.org/u/Robert_N)
#### Post date: [14 December 2023 07:23 UTC](https://discourse.nodered.org/t/dynamicaly-change-the-content-of-ui-template-and-start-the-modal-iframe-with-multiple-buttons/83706/1 "2023-12-14T07:23:30Z")

</div>

Hi guys,

I trying to solve this problem. What is this goal - I need to have one ui-template node which will start the modal iFrame and multiple ui-nodes (buttons) with different url which will dynamicaly change the url and send a message to start the iFrame. It's there some way how to do it ?

Thank you

```auto
[
    {
        "id": "ca93e550b8308b01",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "d7f38aad226aaf1b",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "574fe1fcfd062060",
        "name": "URL 1",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">URL 1</md-button>\n\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 260,
        "wires": [
            [
                "f1528390d89c8c1c"
            ]
        ]
    },
    {
        "id": "480cdde0dbb8d364",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "574fe1fcfd062060",
        "name": "URL 2",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">URL 2</md-button>\n\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 320,
        "wires": [
            [
                "f1528390d89c8c1c"
            ]
        ]
    },
    {
        "id": "a4b85429ddbd0169",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "574fe1fcfd062060",
        "name": "URL 3",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">URL 3</md-button>\n\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 380,
        "wires": [
            [
                "f1528390d89c8c1c"
            ]
        ]
    },
    {
        "id": "addf6a1153b78be5",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "574fe1fcfd062060",
        "name": "URL 4",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">URL 4</md-button>\n\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 440,
        "wires": [
            [
                "f1528390d89c8c1c"
            ]
        ]
    },
    {
        "id": "7458360a88ee3304",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "574fe1fcfd062060",
        "name": "URL 5",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">URL 5</md-button>\n\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 500,
        "wires": [
            [
                "f1528390d89c8c1c"
            ]
        ]
    },
    {
        "id": "533ad2d92ad06d10",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "574fe1fcfd062060",
        "name": "URL 6",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">URL 6</md-button>\n\n\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 560,
        "wires": [
            [
                "f1528390d89c8c1c"
            ]
        ]
    },
    {
        "id": "f1528390d89c8c1c",
        "type": "ui_template",
        "z": "ca93e550b8308b01",
        "group": "46531855980b6304",
        "name": "Dynamic Modal Window",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<!-- This button will be deleted, it's only for testing -->\n<md-button class=\"md-raised md-primary\" ng-click=\"openModal()\" style=\"background-color: #449fe9 !important\">Test\n</md-button>\n\n<!-- Modal iframe -->\n<div ng-if=\"modalVisible\" class=\"modal-container\">\n <div class=\"modal-overlay\" ng-click=\"closeModal()\"></div>\n <div class=\"modal-content\" ng-class=\"{ 'enlarged': isEnlarged }\">\n <span class=\"modal-close\" ng-click=\"closeModal()\">&times;</span>\n <iframe ng-src=\"https://wwww.example.com/\"></iframe>\n </div>\n</div>\n\n<script>\n (function(scope) {\n scope.modalVisible = false;\n scope.isEnlarged = false;\n\n scope.openModal = function() {\n scope.modalVisible = true;\n scope.isEnlarged = false;\n };\n\n scope.closeModal = function() {\n scope.modalVisible = false;\n scope.isEnlarged = false;\n };\n})(scope);\n\n</script>\n\n<style>\n .modal-container {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n }\n\n .modal-content {\n position: relative;\n background-color: #fff;\n padding: 1px;\n width: 60%;\n height: 85%;\n transition: all 0.3s ease-in-out;\n }\n\n .modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n }\n\n .modal-close {\n position: absolute;\n //top: 0px;\n right: 5px;\n font-size: 30px;\n font-weight: bold;\n cursor: pointer;\n\n }\n\n iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 610,
        "y": 400,
        "wires": [
            []
        ]
    },
    {
        "id": "574fe1fcfd062060",
        "type": "ui_group",
        "name": "URL selector",
        "tab": "d37d2ec6.422dc",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "46531855980b6304",
        "type": "ui_group",
        "name": "iFrame",
        "tab": "d37d2ec6.422dc",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "d37d2ec6.422dc",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "order": 1
    }
]

```

---

<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: [13 January 2024 07:24 UTC](https://discourse.nodered.org/t/dynamicaly-change-the-content-of-ui-template-and-start-the-modal-iframe-with-multiple-buttons/83706/2 "2024-01-13T07:24:22Z")

</div>

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