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
[
{
"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()\">×</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
}
]
