Micro-Frontends with iFrame
Credit
This flow is an adaption of the great work developed by HabardiT
[{"id":"dbdc5e91ef58ab32","type":"tab","label":"Micro Frontends Are Easy","disabled":false,"info":"","env":[]},{"id":"58390fc15ac34f33","type":"group","z":"dbdc5e91ef58ab32","name":"Parent","style":{"fill":"#0070c0","label":true},"nodes":["dd3aec023ac7a1c5","b96d4fe0e342bcb5","44982da37fbb6b3c","0cdfb0189145e7d8","9ea5a1aabc4de8ca","69ae927dc0143406","ae582eb4023e6d01","99567523fc67d392","23c4b2809de63285","721dad141f962474","9585d2d3bf61bbf3","30591e45e0437ca8","7419bd4d8428481b","85b3c670a328f50b","8542b8d8d70f4f5a","e6f5634343d615fe"],"x":28,"y":39,"w":1164,"h":488},{"id":"dd3aec023ac7a1c5","type":"group","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"Nodes","style":{"fill":"#ffff7f","label":true,"fill-opacity":"1"},"nodes":["32155b1d283ea1af","381e5251cb4e2f51","8e288953a663fe05","29fbd69a74ab6770","dd4fc3b873969e5d","4a3a30e0934efeed","0cc06eadcb8bb180","a15a955d3de29d9c","71055baf40902180","1f25b28cbe0fa00a","7e84c0b3d4edb33c","bd5c6a307c868fae","0b069255ed6bcdbc","062a7c287ce028cc","70ea20fed1506dde","977f3d10c616ec88","b1b7b7dfbeea1873","c631d8ba6ef66937","c09c1835469f3676","7c5815f724a3dce0"],"x":54,"y":239,"w":1112,"h":262},{"id":"32155b1d283ea1af","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Employee Details</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\">\n <!-- Optional theme -->\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\" >\n <style>{{{payload.style}}}</style>\n </head>\n <body>\n <div class=\"card\">\n <div class=\"card-header\">Employee Details</div>\n <div class=\"card-body\">\n <dl class=\"row\">\n <dt class=\"col-3\">Name</dt>\n <dd class=\"col-9\" id=\"name\"></dd>\n <dt class=\"col-3\">ID</dt>\n <dd class=\"col-9\" id=\"id\"></dd>\n <dt class=\"col-3\">Description</dt>\n <dd class=\"col-9\" id=\"description\"></dd>\n </dl>\n </div>\n </div>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\" ></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script}}}</script>\n </body>\n</html>\n\n","x":830,"y":340,"wires":[["8e288953a663fe05"]]},{"id":"381e5251cb4e2f51","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"","x":650,"y":340,"wires":[["32155b1d283ea1af"]]},{"id":"8e288953a663fe05","type":"http response","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","x":1090,"y":340,"wires":[]},{"id":"29fbd69a74ab6770","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"// @ts-nocheck\nconst receive_message = (e) => {\n console.log(\"received message from \" + e.origin + \": \" + JSON.stringify(e.data));\n delete e.data.target;\n setDetails(e.data);\n};\nwindow.addEventListener(\"message\", receive_message, false);\n\nconst setDetails = (obj) => {\n $(\"#name\").text(obj.name);\n $(\"#id\").text(obj.id);\n $(\"#description\").text(obj.description);\n};\n","x":450,"y":340,"wires":[["381e5251cb4e2f51"]]},{"id":"dd4fc3b873969e5d","type":"http in","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","url":"/EmpDetails","method":"get","upload":false,"swaggerDoc":"","x":160,"y":340,"wires":[["29fbd69a74ab6770"]]},{"id":"4a3a30e0934efeed","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"// @ts-nocheck\nfunction submit() {\n var name = $(\"#name\").val();\n var id = $(\"#id\").val();\n var description = $(\"#description\").val();\n\n var obj = {\n name: name,\n id: id,\n description: description,\n target: \"list\",\n };\n window.parent.postMessage(obj, \"*\");\n}\n","x":450,"y":280,"wires":[["a15a955d3de29d9c"]]},{"id":"0cc06eadcb8bb180","type":"http in","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","url":"/EmpForm","method":"get","upload":false,"swaggerDoc":"","x":160,"y":280,"wires":[["4a3a30e0934efeed"]]},{"id":"a15a955d3de29d9c","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"","x":650,"y":280,"wires":[["71055baf40902180"]]},{"id":"71055baf40902180","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Employee Form</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\" >\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\" >\n <style>{{{payload.style}}}</style>\n </head>\n <body>\n <div class=\"card\">\n <div class=\"card-header\">Employee Form</div>\n <div class=\"card-body\">\n <div class=\"row\">\n <div class=\"form-group col-6\">\n <label for=\"name\">Name</label>\n <input type=\"text\" class=\"form-control\" id=\"name\" autocomplete=\"off\" />\n </div>\n <div class=\"form-group col-6\">\n <label for=\"id\">ID</label>\n <input type=\"text\" class=\"form-control\" id=\"id\" autocomplete=\"off\" />\n </div>\n </div>\n <div class=\"form-group\">\n <label for=\"description\">Description</label>\n <textarea class=\"form-control\" id=\"description\" rows=\"2\" autocomplete=\"off\"> </textarea>\n </div>\n <button type=\"button\" class=\"btn btn-primary\" onclick=\"submit()\">Submit</button>\n </div>\n </div>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\" ></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script}}}</script>\n </body>\n</html>\n","x":830,"y":280,"wires":[["1f25b28cbe0fa00a"]]},{"id":"1f25b28cbe0fa00a","type":"http response","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","x":1090,"y":280,"wires":[]},{"id":"7e84c0b3d4edb33c","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Employee List</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\" >\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\" >\n <style>{{{payload.style}}}</style>\n </head>\n <body>\n <div class=\"card\">\n <div class=\"card-header\">Employee List</div>\n <div class=\"card-body p-0\">\n <div class=\"list-group\">\n <a href=\"#\" class=\"list-group-item list-group-item-action\">Cras justo odio</a>\n <a href=\"#\" class=\"list-group-item list-group-item-action\">Dapibus ac facilisis in</a>\n <a href=\"#\" class=\"list-group-item list-group-item-action\">Morbi leo risus</a>\n <a href=\"#\" class=\"list-group-item list-group-item-action\">Porta ac consectetur ac</a>\n <a href=\"#\" class=\"list-group-item list-group-item-action\">Vestibulum at eros</a>\n </div>\n </div>\n </div>\n <a id=\"listItem\" href=\"#\" class=\"list-group-item list-group-item-action d-none\">Name</a>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\" ></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script}}}</script>\n </body>\n</html>\n\n\n","x":830,"y":400,"wires":[["0b069255ed6bcdbc"]]},{"id":"bd5c6a307c868fae","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"","x":650,"y":400,"wires":[["7e84c0b3d4edb33c"]]},{"id":"0b069255ed6bcdbc","type":"http response","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","x":1090,"y":400,"wires":[]},{"id":"062a7c287ce028cc","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"// @ts-nocheck\nvar empList = [\n { name: \"Ahmed\", id: \"1\", description: \"Ahmed is a Software Engineer\" },\n { name: \"Ali\", id: \"2\", description: \"Ali is a Business Analyst\" },\n { name: \"Abdulaziz\", id: \"3\", description: \"Abdulaziz is a Technical Lead\" },\n];\n// var empList = [{},]\n\nconst receive_message = (e) => {\n console.log(\"received message from \" + e.origin + \": \" + JSON.stringify(e.data));\n delete e.data.target;\n empList.push(e.data);\n refreshList();\n};\nwindow.addEventListener(\"message\", receive_message, false);\n\nconst refreshList = () => {\n $(\".list-group\").empty();\n $.each(empList, (i, el) => {\n var clone = $(\"#listItem\").clone(true);\n clone.text(el.name);\n clone.attr(\"index\", i);\n clone.removeClass(\"d-none\");\n $(\".list-group\").append(clone);\n });\n $(\".list-group-item\").first().trigger(\"click\");\n};\n\n$(() => {\n $(\"#listItem\").on(\"click\", (el) => {\n var elObj = el.target;\n if ($(elObj).hasClass(\"active\")) return;\n $(\".list-group-item\").each((i, el) => {\n $(el).removeClass(\"active\");\n });\n $(elObj).addClass(\"active\");\n var obj = empList[$(elObj).attr(\"index\")];\n obj.target = \"details\";\n window.parent.postMessage(obj, \"*\");\n });\n refreshList();\n});\n","x":450,"y":400,"wires":[["bd5c6a307c868fae"]]},{"id":"70ea20fed1506dde","type":"http in","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","url":"/EmpList","method":"get","upload":false,"swaggerDoc":"","x":150,"y":400,"wires":[["062a7c287ce028cc"]]},{"id":"977f3d10c616ec88","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Footer</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\" >\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\" >\n <style>{{{payload.style}}}</style>\n </head>\n <body>\n <nav class=\"navbar navbar-expand-lg fixed-bottom navbar-light bg-light\">\n <span class=\"mx-auto\">Footer Microfrontend - 2020</span>\n </nav>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\" ></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script}}}</script>\n </body>\n</html>\n\n\n","x":830,"y":460,"wires":[["c631d8ba6ef66937"]]},{"id":"b1b7b7dfbeea1873","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"html {\n height: 3000px; \n}","x":650,"y":460,"wires":[["977f3d10c616ec88"]]},{"id":"c631d8ba6ef66937","type":"http response","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","x":1090,"y":460,"wires":[]},{"id":"c09c1835469f3676","type":"template","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"","x":450,"y":460,"wires":[["b1b7b7dfbeea1873"]]},{"id":"7c5815f724a3dce0","type":"http in","z":"dbdc5e91ef58ab32","g":"dd3aec023ac7a1c5","name":"","url":"/Footer","method":"get","upload":false,"swaggerDoc":"","x":150,"y":460,"wires":[["c09c1835469f3676"]]},{"id":"44982da37fbb6b3c","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"const receive_message = (e) => {\n console.log(\"received message from \" + e.origin + \": \" + JSON.stringify(e.data));\n var targetIframe = document.getElementById(e.data.target);\n targetIframe.contentWindow.postMessage(e.data, \"*\");\n};\n\nwindow.addEventListener(\"message\", receive_message, false);\n","x":450,"y":80,"wires":[["0cdfb0189145e7d8"]]},{"id":"b96d4fe0e342bcb5","type":"http in","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"","url":"/index","method":"get","upload":false,"swaggerDoc":"","x":160,"y":80,"wires":[["44982da37fbb6b3c"]]},{"id":"0cdfb0189145e7d8","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"html {\nheight: 100vh;\n}\n#header {\nposition: relative;\ntop: 0;\n}\n#footer {\nposition: fixed;\nbottom: 0;\n}\n\niframe {\nwidth: 100%;\nz-index: 1;\n}\n\nnav{\nz-index: 2\n}\n\n","x":670,"y":80,"wires":[["9ea5a1aabc4de8ca"]]},{"id":"9ea5a1aabc4de8ca","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Parent</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\">\n <style>{{{payload.style}}}</style>\n</head>\n\n<body>\n <nav class=\"navbar navbar-expand-lg fixed-top navbar-dark bg-dark\" style=\"position: relative; z-index: 2;\">\n <a class=\"navbar-brand\" href=\"/index\">🌐</a>\n <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent\"\n aria-controls=\"navbarSupportedContent\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon\"></span>\n </button>\n\n <div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\">\n <ul class=\"navbar-nav mr-auto\">\n <li class=\"nav-item active\">\n <a class=\"nav-link\" href=\"index\">Home <span class=\"sr-only\">(current)</span></a>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link\" href=\"employeeList\" target=\"aux\">Employee List</a>\n </li>\n <li class=\"nav-item dropdown\">\n <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\"\n aria-haspopup=\"true\" aria-expanded=\"false\">\n Employee\n </a>\n <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">\n <a class=\"dropdown-item disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>\n <a class=\"dropdown-item\" href=\"employeeForm\" target=\"aux\">Employee Form</a>\n <div class=\"dropdown-divider\"></div>\n <a class=\"dropdown-item\" href=\"employeeList\" target=\"aux\">Employee List</a>\n </div>\n </li>\n <li class=\"nav-item\">\n <a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>\n </li>\n </ul>\n <form class=\"form-inline my-2 my-lg-0\">\n <input class=\"form-control mr-sm-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\" />\n <button class=\"btn btn-primary my-2 my-sm-0\" type=\"submit\">Search</button>\n </form>\n </div>\n </nav>\n\n <div class=\"row-container\">\n <div class=\"first-row\">\n <p> </p>\n <p> </p>\n </div>\n <div class=\"second-row\">\n <iframe id=\"aux\" name=\"aux\" frameborder=\"0\" height=\"800px\"></iframe>\n </div>\n </div>\n <iframe id=\"footer\" src=\"Footer\" frameborder=\"0\" height=\"50px\"></iframe>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script }}}</script>\n</body>\n\n</html>","x":850,"y":80,"wires":[["69ae927dc0143406"]]},{"id":"69ae927dc0143406","type":"http response","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"","statusCode":"","headers":{},"x":1110,"y":80,"wires":[]},{"id":"23c4b2809de63285","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"html {\nheight: 100vh;\n}\n#header {\nposition: relative;\ntop: 0;\n}\n#footer {\nposition: fixed;\nbottom: 0;\n}\n\niframe {\nwidth: 100%;\nz-index: 1;\n}\n\nnav{\nz-index: 2\n}\n\n","x":670,"y":120,"wires":[["721dad141f962474"]]},{"id":"99567523fc67d392","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"const receive_message = (e) => {\n console.log(\"received message from \" + e.origin + \": \" + JSON.stringify(e.data));\n var targetIframe = document.getElementById(e.data.target);\n targetIframe.contentWindow.postMessage(e.data, \"*\");\n};\n\nwindow.addEventListener(\"message\", receive_message, false);\n","x":450,"y":120,"wires":[["23c4b2809de63285"]]},{"id":"721dad141f962474","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Parent</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\">\n <style>{{{payload.style}}}</style>\n</head>\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-12\">\n <iframe id=\"form\" src=\"EmpForm\" frameborder=\"0\" height=\"340px\"></iframe>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-6\">\n <iframe id=\"list\" src=\"EmpList\" frameborder=\"0\" height=\"340px\"></iframe>\n </div>\n <div class=\"col-6\">\n <iframe id=\"details\" src=\"EmpDetails\" frameborder=\"0\" height=\"340px\"></iframe>\n </div>\n </div>\n </div>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script}}}</script>\n</body>\n\n</html>","x":850,"y":120,"wires":[["9585d2d3bf61bbf3"]]},{"id":"ae582eb4023e6d01","type":"http in","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"","url":"/employeeForm","method":"get","upload":false,"swaggerDoc":"","x":190,"y":120,"wires":[["99567523fc67d392"]]},{"id":"9585d2d3bf61bbf3","type":"http response","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"","statusCode":"","headers":{},"x":1110,"y":120,"wires":[]},{"id":"8542b8d8d70f4f5a","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"HTML","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n <title>Parent</title>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css\">\n <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css\">\n <style>{{{payload.style}}}</style>\n</head>\n\n<body>\n <div class=\"container\">\n <div class=\"row\">\n <div class=\"col-6\">\n <iframe id=\"list\" src=\"EmpList\" frameborder=\"0\" height=\"340px\"></iframe>\n </div>\n <div class=\"col-6\">\n <iframe id=\"details\" src=\"EmpDetails\" frameborder=\"0\" height=\"340px\"></iframe>\n </div>\n </div>\n </div>\n <script src=\"https://code.jquery.com/jquery-3.5.1.min.js\"></script>\n <script src=\"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js\"></script>\n <script>{{{payload.script}}}</script>\n</body>\n\n</html>","x":850,"y":160,"wires":[["e6f5634343d615fe"]]},{"id":"85b3c670a328f50b","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"CSS","field":"payload.style","fieldType":"msg","format":"html","syntax":"mustache","template":"html {\nheight: 100vh;\n}\n#header {\nposition: relative;\ntop: 0;\n}\n#footer {\nposition: fixed;\nbottom: 0;\n}\n\niframe {\nwidth: 100%;\nz-index: 1;\n}\n\nnav{\nz-index: 2\n}\n\n","x":670,"y":160,"wires":[["8542b8d8d70f4f5a"]]},{"id":"e6f5634343d615fe","type":"http response","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"","statusCode":"","headers":{},"x":1110,"y":160,"wires":[]},{"id":"7419bd4d8428481b","type":"template","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"JavaScript","field":"payload.script","fieldType":"msg","format":"javascript","syntax":"plain","template":"const receive_message = (e) => {\n console.log(\"received message from \" + e.origin + \": \" + JSON.stringify(e.data));\n var targetIframe = document.getElementById(e.data.target);\n targetIframe.contentWindow.postMessage(e.data, \"*\");\n};\n\nwindow.addEventListener(\"message\", receive_message, false);\n","x":450,"y":160,"wires":[["85b3c670a328f50b"]]},{"id":"30591e45e0437ca8","type":"http in","z":"dbdc5e91ef58ab32","g":"58390fc15ac34f33","name":"","url":"/employeeList","method":"get","upload":false,"swaggerDoc":"","x":190,"y":160,"wires":[["7419bd4d8428481b"]]}]
