[{"data":1,"prerenderedAt":166},["ShallowReactive",2],{"integration-node-red-contrib-uibuilder\u002F":3},{"_id":4,"categories":5,"author":8,"description":11,"npmOwners":12,"npmScope":14,"name":4,"ffCertified":15,"downloads":16,"version":18,"updatedAt":19,"maintainers":20,"homepage":23,"bugs":24,"repository":26,"time":29,"lastUpdated":19,"created":30,"license":127,"githubOwner":10,"githubRepo":4,"examples":128,"readme":165},"node-red-contrib-uibuilder",[6,7],"catalogue_ui","catalogue",{"name":9,"url":10},"Julian Knight","TotallyInformation","Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code\u002Flow-code features.",[13],"totallyinformation",null,false,{"week":17},6973,"7.7.4","2026-06-12T15:48:29.445Z",[21],{"name":13,"email":22},"jk.npm@totallyinformation.com","https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002F",{"url":25},"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues",{"type":27,"url":28},"git","git+https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder.git",{"created":30,"modified":19,"0.0.1":30,"0.1.0":31,"0.1.2":32,"0.1.4":33,"0.2.0":34,"0.3.0":35,"0.3.1":36,"0.3.8":37,"0.4.5":38,"0.4.6":39,"0.4.7":40,"1.0.0":41,"1.0.1":42,"1.0.2":43,"1.0.3":44,"1.0.4":45,"1.0.5":46,"1.0.6":47,"1.0.8":48,"1.0.10":49,"1.0.11":50,"1.0.12":51,"1.1.0":52,"1.2.0":53,"1.2.1":54,"1.2.2":55,"1.2.3":56,"1.2.5":57,"1.2.6":58,"2.0.0-beta3":59,"2.0.0-beta3.1":60,"2.0.0-beta3.2":61,"2.0.0-beta3.3":62,"2.0.0-beta3.4":63,"2.0.0":64,"2.0.1":65,"2.0.2":66,"2.0.3":67,"2.0.4":68,"2.0.5":69,"2.0.6":70,"2.0.7":71,"2.0.8":72,"3.0.0":73,"3.0.1":74,"3.1.0":75,"3.1.1":76,"3.1.3":77,"3.2.0":78,"3.2.1":79,"3.3.0":80,"3.3.1":81,"4.0.0":82,"4.0.1":83,"4.1.0":84,"4.1.1":85,"4.1.3":86,"4.1.4":87,"5.0.0":88,"5.0.1":89,"5.0.2":90,"5.1.0":91,"5.1.1":92,"6.0.0":93,"6.1.0":94,"6.1.1":95,"6.2.0":96,"6.3.0":97,"6.3.1":98,"6.4.0":99,"6.4.1":100,"6.5.0":101,"6.6.0":102,"6.7.0":103,"6.8.0":104,"6.8.1":105,"6.8.2":106,"7.0.0":107,"7.0.1":108,"7.0.2":109,"7.0.3":110,"7.0.4":111,"7.1.0":112,"7.2.0":113,"7.3.0":114,"7.4.1":115,"7.4.2":116,"7.4.3":117,"7.5.0":118,"7.6.0":119,"7.6.1":120,"7.6.2":121,"7.7.0":122,"7.7.1":123,"7.7.2":124,"7.7.3":125,"7.7.4":126},"2017-04-22T19:47:10.467Z","2017-04-22T19:53:56.547Z","2017-04-23T20:32:43.115Z","2017-05-01T20:56:46.297Z","2017-05-05T19:59:45.631Z","2017-08-06T18:34:51.602Z","2017-08-17T21:24:02.193Z","2017-09-22T09:32:14.093Z","2017-10-15T12:12:39.490Z","2017-10-15T21:24:04.015Z","2017-10-21T17:14:54.970Z","2017-11-05T16:52:31.727Z","2017-11-11T10:15:15.636Z","2017-12-10T16:13:54.867Z","2017-12-15T16:43:21.827Z","2017-12-16T16:44:51.657Z","2018-01-06T17:53:45.012Z","2018-01-06T17:57:27.416Z","2018-10-03T15:22:49.501Z","2018-12-28T22:16:02.907Z","2019-01-02T21:23:14.288Z","2019-01-02T22:33:56.025Z","2019-02-15T18:26:30.800Z","2019-02-23T21:57:34.986Z","2019-02-23T23:39:33.960Z","2019-03-23T17:16:03.425Z","2019-04-12T20:31:21.791Z","2019-04-12T20:33:46.638Z","2019-04-19T20:14:06.380Z","2019-08-04T16:42:00.421Z","2019-08-04T20:51:52.203Z","2019-08-04T23:41:02.151Z","2019-08-05T21:47:44.706Z","2019-08-06T23:14:34.751Z","2019-08-10T16:39:04.816Z","2019-08-11T15:55:13.081Z","2019-09-02T14:51:18.512Z","2019-09-14T13:24:58.323Z","2019-09-28T22:31:11.979Z","2019-10-04T18:56:15.210Z","2019-11-21T20:48:40.639Z","2020-01-26T20:41:36.242Z","2020-06-14T15:10:48.190Z","2020-12-11T17:48:09.096Z","2021-01-03T17:31:46.731Z","2021-01-17T17:19:51.056Z","2021-01-17T20:41:13.248Z","2021-01-19T21:06:49.856Z","2021-02-19T15:51:26.016Z","2021-03-07T16:19:40.937Z","2021-05-14T12:48:13.569Z","2021-05-14T21:02:12.567Z","2021-07-18T13:44:31.960Z","2021-07-18T15:29:40.935Z","2021-07-22T19:14:26.494Z","2021-08-08T13:40:43.689Z","2021-10-27T15:29:03.084Z","2021-10-29T00:09:55.921Z","2022-04-02T18:23:44.943Z","2022-04-05T00:21:34.409Z","2022-04-09T18:55:56.542Z","2022-06-28T20:16:18.230Z","2022-06-29T08:37:35.052Z","2022-12-18T17:29:19.632Z","2023-03-06T11:53:33.098Z","2023-03-12T09:38:57.901Z","2023-03-25T20:36:55.573Z","2023-03-26T16:47:31.139Z","2023-04-05T17:32:17.320Z","2023-04-11T17:58:41.268Z","2023-04-16T13:25:10.418Z","2023-08-21T21:00:10.020Z","2023-10-21T15:37:09.953Z","2023-11-22T18:19:29.170Z","2024-01-01T16:32:52.212Z","2024-01-02T12:36:34.843Z","2024-01-04T11:14:35.420Z","2024-09-01T15:34:05.973Z","2024-09-01T15:54:43.474Z","2024-09-01T17:02:49.558Z","2024-09-02T16:07:39.446Z","2024-09-06T12:24:51.814Z","2025-01-03T18:18:55.888Z","2025-03-30T14:52:20.666Z","2025-05-27T19:22:27.181Z","2025-06-13T16:25:07.758Z","2025-07-10T10:32:45.241Z","2025-07-22T14:20:44.838Z","2025-09-24T17:10:44.291Z","2026-04-20T20:46:38.784Z","2026-04-22T11:04:22.753Z","2026-04-29T18:59:04.132Z","2026-05-31T16:47:22.047Z","2026-06-01T16:08:06.271Z","2026-06-05T19:56:45.094Z","2026-06-06T16:55:44.019Z","2026-06-12T15:48:29.340Z","Apache-2.0",[129,135,141,147,153,159],{"name":130,"path":131,"url":132,"downloadUrl":133,"flow":134},"Control UI from Node-RED","examples\u002FControl UI from Node-RED.json","https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmain\u002Fexamples\u002FControl%20UI%20from%20Node-RED.json","https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmain\u002Fexamples\u002FControl%20UI%20from%20Node-RED.json","[{\"id\":\"56443195ea782ac2\",\"type\":\"tab\",\"label\":\"Client Cmd Tests\",\"disabled\":false,\"info\":\"Demonstrates and tests uibuilder client\\r\\ncommands sent from Node-RED.\",\"env\":[]},{\"id\":\"5d9e25e34533c465\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Control a web page - issues to all connected pages \\\\n \",\"style\":{\"stroke\":\"#777777\",\"label\":true,\"color\":\"#000000\",\"fill\":\"#ffefbf\",\"fill-opacity\":\"0.2\"},\"nodes\":[\"b34ceaa60b79bc3a\",\"00de39fae10f15e6\",\"4a13f941904a122b\",\"0f067d8c7209ff9c\",\"1c068daa3a77bdb4\",\"16010315c365626a\",\"3e8b444312601e34\",\"4ef549da49d18e40\"],\"x\":14,\"y\":523,\"w\":632,\"h\":338},{\"id\":\"e25baed2b1efe9a7\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Test Data - Inject to see the effect of some of the commands \\\\n \",\"style\":{\"fill\":\"#bfdbef\",\"fill-opacity\":\"0.21\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"1d1f5b0d55f6a646\",\"463baba887b1ba54\",\"3bacf340a18a123b\",\"f21cb178c880c38c\",\"d342da6a1fd7fe1c\",\"dd0f91438befda74\",\"3765cd6597296c35\",\"3a2598858575dc41\",\"5d8f7e2a251f57b2\",\"bc2b5cbcae309807\"],\"x\":814,\"y\":83,\"w\":552,\"h\":258},{\"id\":\"5f79bf4a4f4f3f36\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"uibuilder client Test Page \\\\n \",\"style\":{\"fill\":\"#dbcbe7\",\"fill-opacity\":\"0.2\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"7c8adbf5b52fc611\",\"501e49abf6e5a607\",\"618c5774773d9086\",\"6f4dfd051ff2cf83\",\"dea4924479704c6e\",\"75e04dbce19bc0e1\",\"fd14560e7aa0f275\",\"472ff48730d1b698\",\"32f6056e316798bf\",\"363f0c47148e997e\",\"3b043396fab746f0\",\"65dffaaedb01010f\"],\"x\":14,\"y\":83,\"w\":782,\"h\":238},{\"id\":\"e0a48c7ef200ea29\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Dynamically load external files of different types \\\\n Place files in the same folder as your index.html file or use any URL \\\\n \",\"style\":{\"label\":true,\"color\":\"#000000\",\"fill\":\"#bfc7d7\",\"fill-opacity\":\"0.26\"},\"nodes\":[\"2ff102b3f7bbbad6\",\"4ce1fc8c40ccbf7d\",\"fa7f8d5ddcbdd7ac\",\"82e8db6decd2dd1b\",\"57905e02bd2658d4\",\"88db38578e24a526\",\"ef5602ddf9f7422d\",\"f83742762fb77e58\",\"810b9dd6a392018c\"],\"x\":14,\"y\":887,\"w\":427,\"h\":394},{\"id\":\"a788bb7b3bb7e959\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"This initialises the page \\u0026 cache on startup \\\\n \",\"style\":{\"fill\":\"#e3f3d3\",\"fill-opacity\":\"0.18\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"4b29103fb972307d\",\"16cdac4094403b45\",\"f078cbb95b319197\",\"911214c9aa6fdbb0\",\"6416796b98c7bc07\"],\"x\":14,\"y\":363,\"w\":622,\"h\":98},{\"id\":\"764d90fd92d61c40\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Front-end library tests and commands \\\\n \",\"style\":{\"fill\":\"#ffffff\",\"fill-opacity\":\"0.26\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"d1375f241f2b70b2\",\"948afbc2b3902c35\",\"dc40edf09b701c8e\",\"03809295cdb2edab\",\"89e0f8d7969256e8\",\"acfbefa843a501a8\",\"67af5d84c2f15e53\"],\"x\":774,\"y\":1223,\"w\":552,\"h\":318},{\"id\":\"8c03d470df5348dc\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Get information about a page or elements on it, return to Node-RED as an output msg\",\"style\":{\"fill\":\"#dbcbe7\",\"fill-opacity\":\"0.13\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"b57b1b7083a669af\",\"139bca811a1753ae\",\"1db4309a628d785c\",\"abc43c01d88f7a05\",\"8eef4c98c396d83a\",\"39132410683f03a1\"],\"x\":694,\"y\":519,\"w\":692,\"h\":242},{\"id\":\"9425d8d31cc7d467\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Get or change uibuilder managed variables\",\"style\":{\"fill\":\"#ffffbf\",\"fill-opacity\":\"0.17\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"11c72d21bf13c7f4\",\"19946054083359d7\",\"dee94a5d9723bec9\",\"6c494e54473698fc\",\"791fd9d8c3e056a4\"],\"x\":694,\"y\":779,\"w\":692,\"h\":214},{\"id\":\"d3f7bb9709cb92d2\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Insert Markdown using template (which supports Mustache variables) and uib-element \\\\n OR Directly using the `set` command \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffff\",\"fill-opacity\":\"0.25\",\"color\":\"#000000\"},\"nodes\":[\"ab72b1d0039a5cb3\",\"e33a29855f036e79\",\"7c499ac47dc01640\",\"a466cf8403fad13c\",\"2d07723a33514785\",\"552437fe0298e347\",\"1f7bb2e124b5633c\"],\"x\":474,\"y\":1027,\"w\":852,\"h\":174},{\"id\":\"6259c8dcec04e9d6\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"style\":{\"stroke\":\"#999999\",\"stroke-opacity\":\"1\",\"fill\":\"none\",\"fill-opacity\":\"1\",\"label\":true,\"label-position\":\"nw\",\"color\":\"#a4a4a4\"},\"nodes\":[\"910674e234808e66\",\"c0a48b02ace7faea\",\"a4392440eeda4c51\",\"756993c325791499\"],\"x\":814,\"y\":359,\"w\":472,\"h\":122},{\"id\":\"8e10750486ced78f\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"g\":\"eb4bfc28276db7ac\",\"name\":\"Toaster tests\",\"style\":{\"label\":true},\"nodes\":[\"139eec1153ab5698\",\"360b68dca85320c6\",\"5cc27ea9e77b90f0\",\"d2fca7d667d788e4\",\"9828cdd065942743\",\"733164a073f04226\",\"eb252eb404331121\",\"b5f0636af57e1b7e\",\"0d4433021f8616b2\"],\"x\":74,\"y\":1639,\"w\":322,\"h\":362},{\"id\":\"63da4c0b011c8cd2\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"g\":\"eb4bfc28276db7ac\",\"name\":\"Notification tests\",\"style\":{\"label\":true},\"nodes\":[\"a5acf75926689905\",\"4ad35a026de96c25\",\"8573de8217f94cac\"],\"x\":74,\"y\":1499,\"w\":524.8000030517578,\"h\":122},{\"id\":\"1421e572180af89d\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"g\":\"aa61b31fbba31085\",\"name\":\"Information Overlay Test - this is the preferred method. since v7.5.0\",\"style\":{\"label\":true,\"fill\":\"#e3f3d3\",\"fill-opacity\":\"0.48\",\"color\":\"#000000\"},\"nodes\":[\"af8f393604698bb5\",\"3f77b1f859c01f20\",\"1917fc6a3a1d7970\"],\"x\":54,\"y\":1359,\"w\":425,\"h\":82},{\"id\":\"aa61b31fbba31085\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"name\":\"Show messages to users on a uibuilder web page \\\\n \",\"style\":{\"label\":true,\"fill\":\"#bfdbef\",\"fill-opacity\":\"0.27\",\"color\":\"#000000\"},\"nodes\":[\"1421e572180af89d\",\"eb4bfc28276db7ac\"],\"x\":22,\"y\":1317,\"w\":628.8000030517578,\"h\":736},{\"id\":\"eb4bfc28276db7ac\",\"type\":\"group\",\"z\":\"56443195ea782ac2\",\"g\":\"aa61b31fbba31085\",\"name\":\"These methods are no longer recommended since v7.5.0 and may not work as expected. \\\\n If this is a problem, please reach out.\",\"style\":{\"fill\":\"#ff0000\",\"fill-opacity\":\"0.06\",\"label\":true,\"color\":\"#BB0000\"},\"nodes\":[\"8e10750486ced78f\",\"63da4c0b011c8cd2\"],\"x\":48,\"y\":1457,\"w\":576.8000030517578,\"h\":570},{\"id\":\"75e04dbce19bc0e1\",\"type\":\"junction\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"x\":340,\"y\":180,\"wires\":[[\"7c8adbf5b52fc611\"]]},{\"id\":\"363f0c47148e997e\",\"type\":\"junction\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"x\":700,\"y\":220,\"wires\":[[\"618c5774773d9086\"]]},{\"id\":\"1f7bb2e124b5633c\",\"type\":\"junction\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"x\":1180,\"y\":1160,\"wires\":[[\"a466cf8403fad13c\"]]},{\"id\":\"7c8adbf5b52fc611\",\"type\":\"uibuilder\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"\",\"topic\":\"\",\"url\":\"iife-client-tests\",\"okToGo\":true,\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"blank\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"title\":\"\",\"descr\":\"\",\"editurl\":\"vscode:\u002F\u002Ffile\u002Fsrc\u002FuibRoot\u002Fiife-client-tests\u002F\",\"x\":510,\"y\":200,\"wires\":[[\"501e49abf6e5a607\"],[\"32f6056e316798bf\",\"363f0c47148e997e\"]],\"info\":\"This example uses a blank template with\\r\\nthe IIFE build of the front-end client.\\r\\n\\r\\nIt does not use any front-end framework, just\\r\\npure HTML, CSS and JavaScript.\\r\\n\\r\\nThe IIFE build should be included using a link\\r\\ntag in your HTML.\"},{\"id\":\"501e49abf6e5a607\",\"type\":\"debug\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":675,\"y\":160,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"618c5774773d9086\",\"type\":\"debug\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":735,\"y\":240,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"6f4dfd051ff2cf83\",\"type\":\"comment\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":460,\"y\":140,\"wires\":[]},{\"id\":\"dea4924479704c6e\",\"type\":\"link in\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"uib-client-tests-uncached\",\"links\":[\"16010315c365626a\",\"1d1f5b0d55f6a646\",\"4ce1fc8c40ccbf7d\",\"81158a3cb7a12342\",\"756993c325791499\",\"948afbc2b3902c35\",\"19946054083359d7\",\"a466cf8403fad13c\",\"139bca811a1753ae\",\"791fd9d8c3e056a4\",\"2a2c1f70c3239c2c\",\"380c808ba64e7133\",\"af8f393604698bb5\",\"df9724d83d8ae9f4\",\"8573de8217f94cac\",\"b5f0636af57e1b7e\"],\"x\":185,\"y\":180,\"wires\":[[\"75e04dbce19bc0e1\"]]},{\"id\":\"1d1f5b0d55f6a646\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"link out 13\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1325,\"y\":140,\"wires\":[]},{\"id\":\"b34ceaa60b79bc3a\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"showMsg: Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"toggle-visible-msgs\",\"x\":180,\"y\":580,\"wires\":[[\"16010315c365626a\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"00de39fae10f15e6\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"showStatus: Toggle Visible Status\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showStatus\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"toggle-visible-status\",\"x\":190,\"y\":620,\"wires\":[[\"16010315c365626a\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"4a13f941904a122b\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"set: Client Log Level 5\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"logLevel\\\",\\\"value\\\":5}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"set-log-level-5\",\"x\":160,\"y\":660,\"wires\":[[\"16010315c365626a\"]]},{\"id\":\"0f067d8c7209ff9c\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"set: Client Log Level 0\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"logLevel\\\",\\\"value\\\":0}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"set-log-level-0\",\"x\":160,\"y\":700,\"wires\":[[\"16010315c365626a\"]]},{\"id\":\"1c068daa3a77bdb4\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"get: client version var\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"get\\\",\\\"prop\\\":\\\"version\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"get-client-version\",\"x\":160,\"y\":740,\"wires\":[[\"16010315c365626a\"]]},{\"id\":\"463baba887b1ba54\",\"type\":\"uib-update\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"topic\":\"\",\"mode\":\"update\",\"modeSourceType\":\"update\",\"cssSelector\":\"#more\",\"cssSelectorType\":\"str\",\"slotSourceProp\":\"\\\"Chunga! \\\" \\u0026 \\t$formatInteger($random() * 100, \\\"0\\\")\\t\",\"slotSourcePropType\":\"jsonata\",\"attribsSource\":\"{\\t  \\\"style\\\": \\\"background-color: rgb(\\\" \\u0026 $random() * 200 \\u0026 \\\",\\\" \\u0026 $random() * 200 \\u0026 \\\",\\\" \\u0026 $random() * 200 \\u0026 \\\");\\\"\\t}\",\"attribsSourceType\":\"jsonata\",\"slotPropMarkdown\":false,\"x\":1140,\"y\":140,\"wires\":[[\"1d1f5b0d55f6a646\"]]},{\"id\":\"3bacf340a18a123b\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":995,\"y\":140,\"wires\":[[\"463baba887b1ba54\"]],\"l\":false},{\"id\":\"f21cb178c880c38c\",\"type\":\"uib-element\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"topic\":\"\",\"elementtype\":\"ul\",\"parent\":\"#more\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementid\":\"more-ol\",\"elementId\":\"\",\"elementIdSourceType\":\"str\",\"heading\":\"\",\"headingSourceType\":\"str\",\"headingLevel\":\"h2\",\"position\":\"last\",\"positionSourceType\":\"str\",\"confData\":{},\"x\":1130,\"y\":180,\"wires\":[[\"1d1f5b0d55f6a646\"]]},{\"id\":\"d342da6a1fd7fe1c\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"wrapper\",\"v\":\"b-scene\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"[\\\"one\\\",\\\"two\\\",\\\"three\\\"]\",\"payloadType\":\"json\",\"x\":985,\"y\":180,\"wires\":[[\"f21cb178c880c38c\"]],\"l\":false},{\"id\":\"dd0f91438befda74\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"LI with random: \\\" \\u0026 $formatInteger($random() * 255, \\\"0\\\")\\t\",\"payloadType\":\"jsonata\",\"x\":945,\"y\":220,\"wires\":[[\"3765cd6597296c35\"]],\"l\":false},{\"id\":\"3765cd6597296c35\",\"type\":\"uib-element\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"topic\":\"\",\"elementtype\":\"li\",\"parent\":\"#more-ol\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementid\":\"\",\"elementId\":\"\",\"elementIdSourceType\":\"str\",\"heading\":\"\",\"headingSourceType\":\"str\",\"headingLevel\":\"h2\",\"position\":\"2\",\"positionSourceType\":\"str\",\"confData\":{},\"x\":1110,\"y\":220,\"wires\":[[\"1d1f5b0d55f6a646\"]]},{\"id\":\"3a2598858575dc41\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"sform1\",\"payload\":\"[{\\\"id\\\":\\\"r1\\\",\\\"type\\\":\\\"text\\\",\\\"required\\\":false,\\\"label\\\":\\\"Text Input:\\\",\\\"value\\\":\\\"Foo\\\"},{\\\"id\\\":\\\"r2\\\",\\\"type\\\":\\\"color\\\",\\\"required\\\":false,\\\"label\\\":\\\"Colour:\\\",\\\"value\\\":\\\"#427798\\\"},{\\\"id\\\":\\\"r3\\\",\\\"type\\\":\\\"date\\\",\\\"required\\\":true,\\\"label\\\":\\\"Date:\\\"},{\\\"id\\\":\\\"r4\\\",\\\"type\\\":\\\"range\\\",\\\"required\\\":false,\\\"label\\\":\\\"Range (0-100):\\\",\\\"value\\\":\\\"20\\\",\\\"min\\\":0,\\\"max\\\":100},{\\\"id\\\":\\\"r5\\\",\\\"type\\\":\\\"button\\\",\\\"label\\\":\\\"Send to Node-RED\\\",\\\"value\\\":\\\"Buttons can have values as well\\\"}]\",\"payloadType\":\"json\",\"x\":930,\"y\":260,\"wires\":[[\"5d8f7e2a251f57b2\"]]},{\"id\":\"5d8f7e2a251f57b2\",\"type\":\"uib-element\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"\",\"topic\":\"\",\"elementtype\":\"sform\",\"parent\":\"#more\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementid\":\"sform1\",\"elementId\":\"\",\"elementIdSourceType\":\"str\",\"heading\":\"\",\"headingSourceType\":\"str\",\"headingLevel\":\"h2\",\"position\":\"last\",\"positionSourceType\":\"str\",\"confData\":{},\"x\":1120,\"y\":260,\"wires\":[[\"1d1f5b0d55f6a646\"]]},{\"id\":\"bc2b5cbcae309807\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e25baed2b1efe9a7\",\"name\":\"Remove\",\"props\":[{\"p\":\"mode\",\"v\":\"remove\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":920,\"y\":300,\"wires\":[[\"5d8f7e2a251f57b2\"]]},{\"id\":\"16010315c365626a\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"link out 32\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":605,\"y\":580,\"wires\":[]},{\"id\":\"2ff102b3f7bbbad6\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002Ftest.html\\\",\\\"value\\\":{\\\"id\\\":\\\"incHtm\\\",\\\"parent\\\":\\\"#more\\\",\\\"attributes\\\":{\\\"style\\\":\\\"width:50%;\\\"}}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-HMTL-file\",\"x\":150,\"y\":960,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"4ce1fc8c40ccbf7d\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"link out 37\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":315,\"y\":1100,\"wires\":[]},{\"id\":\"fa7f8d5ddcbdd7ac\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002Ftest.txt\\\",\\\"value\\\":{\\\"id\\\":\\\"incTxt\\\",\\\"parent\\\":\\\"#more\\\", \\\"position\\\": 1}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-text-file\",\"x\":160,\"y\":1160,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"82e8db6decd2dd1b\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002FSmallCat.jpg\\\",\\\"value\\\":{\\\"id\\\":\\\"incImg\\\",\\\"parent\\\":\\\"#more\\\",\\\"attributes\\\":{\\\"style\\\":\\\"width:10em;\\\"}}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-jpg-file\",\"x\":160,\"y\":1040,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"57905e02bd2658d4\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002Fflower.mp4\\\",\\\"value\\\":{\\\"id\\\":\\\"incVid\\\",\\\"parent\\\":\\\"#more\\\",\\\"attributes\\\":{\\\"style\\\":\\\"width:50%;\\\"}}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-vid-file\",\"x\":160,\"y\":1120,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"88db38578e24a526\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002Fapple.svg\\\",\\\"value\\\":{\\\"id\\\":\\\"incImg\\\",\\\"parent\\\":\\\"#more\\\",\\\"attributes\\\":{\\\"style\\\":\\\"width:10em;\\\"}}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-svg-file\",\"x\":160,\"y\":1080,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"ef5602ddf9f7422d\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002Fsc_task.pdf\\\",\\\"value\\\":{\\\"id\\\":\\\"incPdf\\\",\\\"parent\\\":\\\"#more\\\",\\\"attributes\\\":{\\\"style\\\":\\\"width:99%;\\\"}}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-pdf-file\",\"x\":160,\"y\":1000,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"f83742762fb77e58\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"remove\\\",\\\"components\\\":[\\\"#incTxt\\\"]}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"remove-text-file\",\"x\":160,\"y\":1200,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"810b9dd6a392018c\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"e0a48c7ef200ea29\",\"name\":\"\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"include\\\",\\\"prop\\\":\\\".\u002Ftest.json\\\",\\\"value\\\":{\\\"id\\\":\\\"incJson\\\",\\\"parent\\\":\\\"#more\\\",\\\"position\\\":\\\"first\\\",\\\"attributes\\\":{\\\"style\\\":\\\"width:50%;\\\"}}}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"include-json-file\",\"x\":160,\"y\":1240,\"wires\":[[\"4ce1fc8c40ccbf7d\"]]},{\"id\":\"fd14560e7aa0f275\",\"type\":\"uib-cache\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"cacheall\":false,\"cacheKey\":\"topic\",\"newcache\":true,\"num\":1,\"storeName\":\"default\",\"name\":\"Cache\",\"storeContext\":\"context\",\"varName\":\"uib_cache\",\"x\":290,\"y\":260,\"wires\":[[\"7c8adbf5b52fc611\"]],\"info\":\"Cache inputs based on the msg.topic.\\r\\n\\r\\nJust the last msg is kept for each\\r\\ntopic.\\r\\n\\r\\nDefault context store is used in this\\r\\nexample since not everyone will have\\r\\ndefined a file-based store.\\r\\n\\r\\nThat means that if you want an initial\\r\\nzero-code layout, you need to trigger\\r\\nits sending from a trigger node that\\r\\nfires when Node-RED (re)starts.\"},{\"id\":\"472ff48730d1b698\",\"type\":\"link in\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"uib-client-tests-cached\",\"links\":[\"32f6056e316798bf\",\"16cdac4094403b45\"],\"x\":185,\"y\":280,\"wires\":[[\"fd14560e7aa0f275\"]]},{\"id\":\"32f6056e316798bf\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"client-tests-control-outputs\",\"mode\":\"link\",\"links\":[\"472ff48730d1b698\"],\"x\":675,\"y\":240,\"wires\":[],\"info\":\"Sends control messages back to the cache input\\r\\n\\r\\nThis ensures that when new clients (browser\\r\\ntabs) connect or if a page is reloaded, \\r\\nthe browser gets the cached data automatically.\\r\\n\\r\\nYou could filter this output to only include\\r\\n\\\"client connect\\\" messages if you wanted to \\r\\nimprove efficiency when you expect lots of \\r\\nclients to connect.\"},{\"id\":\"3b043396fab746f0\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"Clear Cache\",\"props\":[{\"p\":\"uibuilderCtrl\",\"v\":\"clear cache\",\"vt\":\"str\"},{\"p\":\"cacheControl\",\"v\":\"CLEAR\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":130,\"y\":240,\"wires\":[[\"fd14560e7aa0f275\"]]},{\"id\":\"4b29103fb972307d\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"a788bb7b3bb7e959\",\"name\":\"On Start (Heading)\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":true,\"onceDelay\":0.1,\"topic\":\"on-start\",\"payload\":\"[\\\"uibuilder Client Tests\\\",\\\"Using the IIFE Library\\\"]\",\"payloadType\":\"json\",\"x\":150,\"y\":420,\"wires\":[[\"f078cbb95b319197\"]],\"info\":\"Runs on Node-RED startup so that the cache is always\\r\\npopulated even if you do not have a Node-RED persistent\\r\\ncontext store defined.\\r\\n\\r\\nSets the payload for the page title, heading and\\r\\nsub-heading.\\r\\n\\r\\nAlso sets a distinct msg.topic which is used by the\\r\\n`uib-cache` node.\"},{\"id\":\"16cdac4094403b45\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"a788bb7b3bb7e959\",\"name\":\"initial setup to cache\",\"mode\":\"link\",\"links\":[\"472ff48730d1b698\"],\"x\":595,\"y\":420,\"wires\":[]},{\"id\":\"f078cbb95b319197\",\"type\":\"uib-element\",\"z\":\"56443195ea782ac2\",\"g\":\"a788bb7b3bb7e959\",\"name\":\"Pg Title\",\"topic\":\"\",\"elementtype\":\"title\",\"parent\":\"body\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementid\":\"\",\"elementId\":\"\",\"elementIdSourceType\":\"str\",\"heading\":\"\",\"headingSourceType\":\"str\",\"headingLevel\":\"h2\",\"position\":\"last\",\"positionSourceType\":\"str\",\"confData\":{},\"x\":320,\"y\":420,\"wires\":[[\"6416796b98c7bc07\"]],\"info\":\"Sets the page title and heading along with a\\r\\nsub-heading.\"},{\"id\":\"911214c9aa6fdbb0\",\"type\":\"uib-element\",\"z\":\"56443195ea782ac2\",\"g\":\"a788bb7b3bb7e959\",\"name\":\"descr\",\"topic\":\"\",\"elementtype\":\"article\",\"parent\":\"body\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementid\":\"description\",\"elementId\":\"\",\"elementIdSourceType\":\"str\",\"heading\":\"head\",\"headingSourceType\":\"msg\",\"headingLevel\":\"h2\",\"position\":\"2\",\"positionSourceType\":\"str\",\"passthrough\":false,\"confData\":{},\"x\":510,\"y\":420,\"wires\":[[\"16cdac4094403b45\"]],\"info\":\"Adds a descriptive text box with a heading\\r\\nNote that the position is set to 2 so that\\r\\nit appears after the page sub-heading even\\r\\nif you have inserted other elements onto the\\r\\npage.\"},{\"id\":\"6416796b98c7bc07\",\"type\":\"change\",\"z\":\"56443195ea782ac2\",\"g\":\"a788bb7b3bb7e959\",\"name\":\"descr\",\"rules\":[{\"t\":\"set\",\"p\":\"payload\",\"pt\":\"msg\",\"to\":\"This page is an example of a zero-code web page driven by uibuilder and Node-RED. No code was harmed in the making of this page. 😁\\u003cp\\u003eTry out the various remote commands that the uibuilder client allows\\u003c\u002Fp\\u003e\",\"tot\":\"str\"},{\"t\":\"set\",\"p\":\"head\",\"pt\":\"msg\",\"to\":\"uibuilder tests\",\"tot\":\"str\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":425,\"y\":420,\"wires\":[[\"911214c9aa6fdbb0\"]],\"l\":false,\"info\":\"Set the descriptive text for the page.\\r\\nAlso sets a heading for the text box.\\r\\n\\r\\nFor uibuilder v6.1, we have to reset the\\r\\n`msg.payload` for this. I aim to make this\\r\\nmore flexible in the future.\"},{\"id\":\"65dffaaedb01010f\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5f79bf4a4f4f3f36\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":150,\"y\":140,\"wires\":[[\"75e04dbce19bc0e1\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"910674e234808e66\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"6259c8dcec04e9d6\",\"name\":\"Light\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"mark-light\",\"payload\":\"{\\\"class\\\":\\\"light\\\"}\",\"payloadType\":\"json\",\"x\":910,\"y\":400,\"wires\":[[\"c0a48b02ace7faea\"]]},{\"id\":\"c0a48b02ace7faea\",\"type\":\"uib-update\",\"z\":\"56443195ea782ac2\",\"g\":\"6259c8dcec04e9d6\",\"name\":\"Set Light\u002FDark mode\",\"topic\":\"\",\"mode\":\"update\",\"modeSourceType\":\"modeType\",\"cssSelector\":\"html\",\"cssSelectorType\":\"str\",\"slotSourceProp\":\"\",\"slotSourcePropType\":\"msg\",\"attribsSource\":\"payload\",\"attribsSourceType\":\"msg\",\"slotPropMarkdown\":false,\"x\":1100,\"y\":400,\"wires\":[[\"756993c325791499\"]]},{\"id\":\"a4392440eeda4c51\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"6259c8dcec04e9d6\",\"name\":\"Dark\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"mark-dark\",\"payload\":\"{\\\"class\\\":\\\"dark\\\"}\",\"payloadType\":\"json\",\"x\":910,\"y\":440,\"wires\":[[\"c0a48b02ace7faea\"]]},{\"id\":\"756993c325791499\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"6259c8dcec04e9d6\",\"name\":\"link out 40\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1245,\"y\":400,\"wires\":[]},{\"id\":\"d1375f241f2b70b2\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"get: Vue version\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"get\\\",\\\"prop\\\":\\\"vueVersion\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"get-vue-version\",\"x\":1100,\"y\":1360,\"wires\":[[\"948afbc2b3902c35\"]]},{\"id\":\"948afbc2b3902c35\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"link out 47\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1285,\"y\":1380,\"wires\":[]},{\"id\":\"dc40edf09b701c8e\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"get: Is VueJS framework loaded?\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"get\\\",\\\"prop\\\":\\\"isVue\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"is-vue-loaded\",\"x\":1050,\"y\":1320,\"wires\":[[\"948afbc2b3902c35\"]]},{\"id\":\"03809295cdb2edab\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"get: Is DOMPurify FE library loaded?\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"get\\\",\\\"prop\\\":\\\"purify\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"get-is-dompurify-loaded\",\"x\":1040,\"y\":1280,\"wires\":[[\"948afbc2b3902c35\"]]},{\"id\":\"89e0f8d7969256e8\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"get: Is Markdown-IT FE library loaded?\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"get\\\",\\\"prop\\\":\\\"markdown\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"is-markdown-library-loaded\",\"x\":1030,\"y\":1400,\"wires\":[[\"948afbc2b3902c35\"]]},{\"id\":\"acfbefa843a501a8\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"Use _ui low-code to send some Markdown\",\"props\":[{\"p\":\"_ui\",\"v\":\"[{\\\"method\\\":\\\"replace\\\",\\\"components\\\":[{\\\"type\\\":\\\"div\\\",\\\"id\\\":\\\"md\\\",\\\"parent\\\":\\\"#more\\\",\\\"attributes\\\":{},\\\"slotMarkdown\\\":\\\"## H2 - Markdown input\\\\n\\\\nSome text in a para\\\\n\\\\n* List #1\\\\n* List #2\\\\n\\\"}]}]\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"send-markdown\",\"x\":1020,\"y\":1500,\"wires\":[[\"948afbc2b3902c35\"]]},{\"id\":\"b57b1b7083a669af\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8c03d470df5348dc\",\"name\":\"elementExists: #more - does an element with ID=more exist on the page?\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"elementExists\\\",\\\"prop\\\":\\\"#more\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"does-element-exist-more-div\",\"x\":1000,\"y\":720,\"wires\":[[\"139bca811a1753ae\"]]},{\"id\":\"19946054083359d7\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"9425d8d31cc7d467\",\"name\":\"link out 57\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1345,\"y\":820,\"wires\":[]},{\"id\":\"ab72b1d0039a5cb3\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":660,\"y\":1100,\"wires\":[[\"7c499ac47dc01640\"]]},{\"id\":\"e33a29855f036e79\",\"type\":\"uib-element\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"name\":\"\",\"topic\":\"\",\"elementtype\":\"markdown\",\"parent\":\"body\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementid\":\"md001\",\"elementId\":\"\",\"elementIdSourceType\":\"str\",\"heading\":\"\",\"headingSourceType\":\"str\",\"headingLevel\":\"h2\",\"data\":\"payload\",\"dataSourceType\":\"msg\",\"position\":\"2\",\"positionSourceType\":\"str\",\"passthrough\":false,\"confData\":{},\"x\":1070,\"y\":1100,\"wires\":[[\"a466cf8403fad13c\"]]},{\"id\":\"7c499ac47dc01640\",\"type\":\"template\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"name\":\"Template Markdown\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"markdown\",\"syntax\":\"mustache\",\"template\":\"\\n### TESTING `uib-var`\\n\\nUIBUILDER client library version:\\n\\\"\\\"\\n\\nLast Message from Node-RED: \\n\\n### My Dynamic Markdown\\n\\n\",\"output\":\"str\",\"x\":840,\"y\":1100,\"wires\":[[\"e33a29855f036e79\"]]},{\"id\":\"a466cf8403fad13c\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"name\":\"link out 60\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1285,\"y\":1100,\"wires\":[]},{\"id\":\"2d07723a33514785\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"name\":\"set: myMarkdown var\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"myMarkdown\\\",\\\"value\\\":\\\"\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":620,\"y\":1160,\"wires\":[[\"552437fe0298e347\"]]},{\"id\":\"552437fe0298e347\",\"type\":\"template\",\"z\":\"56443195ea782ac2\",\"g\":\"d3f7bb9709cb92d2\",\"name\":\"Template Markdown\",\"field\":\"_uib.value\",\"fieldType\":\"msg\",\"format\":\"markdown\",\"syntax\":\"mustache\",\"template\":\"\\n## A Markdown Heading (H2)\\n\\nThis is dynamically inserted markdown\\n\\n* This is\\n* a markdown\\n* list\\n\",\"output\":\"str\",\"x\":840,\"y\":1160,\"wires\":[[\"1f7bb2e124b5633c\"]]},{\"id\":\"11c72d21bf13c7f4\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"9425d8d31cc7d467\",\"name\":\"getManagedVarList: List all client managed variables\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"getManagedVarList\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"list-managed-vars-summary\",\"x\":930,\"y\":820,\"wires\":[[\"19946054083359d7\"]]},{\"id\":\"dee94a5d9723bec9\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"9425d8d31cc7d467\",\"name\":\"getWatchedVars: List client managed variables having a watcher\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"getWatchedVars\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"list-watched-vars\",\"x\":970,\"y\":860,\"wires\":[[\"19946054083359d7\"]]},{\"id\":\"6c494e54473698fc\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"9425d8d31cc7d467\",\"name\":\"set: myvarstore (browser local storage, autoload) \\\\n - save data to browser local storage with auto-load\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\t    \\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"myvarstore\\\",\\t    \\\"value\\\":{\\\"a\\\": $number($formatInteger($random() * 100, \\\"0\\\")), \\\"b\\\": \\\"hello\\\", \\\"c\\\": true},\\t    \\\"options\\\":{\\\"store\\\": true, \\\"autoload\\\": true}\\t}\",\"vt\":\"jsonata\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"set-myvarstore-store-autoload\",\"x\":930,\"y\":940,\"wires\":[[\"791fd9d8c3e056a4\"]],\"info\":\"Sets a client managed variable `myvarstore` to an object \\r\\nAND writes it to localStorage if possible.\\r\\n\\r\\nIt also sets the autoload flag so that if the page is\\r\\nreloaded by the user, the variable is restored (if possible).\\r\\n\\r\\nWARNING: localStorage is shared between all pages\u002Ftabs \\r\\non the same (sub)domain and port (origin).\\r\\n\\r\\nNOTE that localStorage only survives until the browser is closed.\\r\\n\\r\\nSee [Controling from Node-RED](.\u002Fuibuilder\u002Fdocs\u002F#\u002Fclient-docs\u002Fcontrol-from-node-red#set-variable)\\r\\nin the docs for details.\"},{\"id\":\"ea8462256d481dcb\",\"type\":\"comment\",\"z\":\"56443195ea782ac2\",\"name\":\"This page contains examples and tests of the uibuilder front-end client commands that can be issued from Node-RED to your web pages\",\"info\":\"\",\"x\":470,\"y\":40,\"wires\":[]},{\"id\":\"139bca811a1753ae\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"8c03d470df5348dc\",\"name\":\"link out 70\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1345,\"y\":560,\"wires\":[]},{\"id\":\"1db4309a628d785c\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8c03d470df5348dc\",\"name\":\"uiGet: #more - Get useful info about an HTML element\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"uiGet\\\",\\\"prop\\\":\\\"#more\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"uiget-more-div\",\"x\":940,\"y\":640,\"wires\":[[\"139bca811a1753ae\"]]},{\"id\":\"abc43c01d88f7a05\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8c03d470df5348dc\",\"name\":\"htmlSend: Get the latest displayed HTML back to Node-RED\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"htmlSend\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"html-send\",\"x\":960,\"y\":560,\"wires\":[[\"139bca811a1753ae\"]]},{\"id\":\"8eef4c98c396d83a\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8c03d470df5348dc\",\"name\":\"uiWatch: #more (toggle) - Watch for changes to the page\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"uiWatch\\\",\\\"prop\\\":\\\"#more\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"ui-watch-more-div\",\"x\":950,\"y\":680,\"wires\":[[\"139bca811a1753ae\"]]},{\"id\":\"791fd9d8c3e056a4\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"9425d8d31cc7d467\",\"name\":\"link out 71\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1345,\"y\":940,\"wires\":[]},{\"id\":\"67af5d84c2f15e53\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"764d90fd92d61c40\",\"name\":\"Dynamically load MarkdownIT library from CDN\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"load\\\",\\\"srcScripts\\\":[\\\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmarkdown-it@13.0.1\u002Fdist\u002Fmarkdown-it.min.js\\\"]}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"load-markdownit-cdn\",\"x\":1000,\"y\":1460,\"wires\":[[\"948afbc2b3902c35\"]]},{\"id\":\"39132410683f03a1\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8c03d470df5348dc\",\"name\":\"uiGet: #more (class) - Get classes\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"uiGet\\\",\\\"prop\\\":\\\"#more\\\", \\\"value\\\":\\\"class\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"uiget-class-more-div\",\"x\":880,\"y\":600,\"wires\":[[\"139bca811a1753ae\"]]},{\"id\":\"ce177435d3d1ac2b\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"name\":\"\",\"props\":[{\"p\":\"_uib.tabId\",\"v\":\"t858284\",\"vt\":\"str\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"Test-clientid-filter\",\"payload\":\"foobar\",\"payloadType\":\"str\",\"x\":1020,\"y\":1900,\"wires\":[[\"380c808ba64e7133\"]]},{\"id\":\"380c808ba64e7133\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"name\":\"link out 74\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":1165,\"y\":1900,\"wires\":[]},{\"id\":\"6a371a0d58cd4e20\",\"type\":\"comment\",\"z\":\"56443195ea782ac2\",\"name\":\"Example updated: 2025-09-06 \\\\n Tested using UIBUILDER v7.5.0\",\"info\":\"\",\"x\":1070,\"y\":40,\"wires\":[]},{\"id\":\"139eec1153ab5698\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Plain Toast\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib.componentRef\",\"v\":\"globalNotification\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toast\",\"payload\":\"This is a plain toast notification from Node-RED!\",\"payloadType\":\"str\",\"x\":240,\"y\":1680,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"360b68dca85320c6\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Buttered Toast\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib\",\"v\":\"{\\\"componentRef\\\":\\\"globalNotification\\\",\\\"options\\\":{\\\"title\\\":\\\"NiceTitle!\\\"}}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toast\",\"payload\":\"This is a buttered toast notification from Node-RED!\",\"payloadType\":\"str\",\"x\":230,\"y\":1720,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"5cc27ea9e77b90f0\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Plain, No Auto\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib\",\"v\":\"{\\\"componentRef\\\":\\\"globalNotification\\\",\\\"options\\\":{\\\"noAutohide\\\":true}}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toastt, No Auto\",\"payload\":\"This is a plain toast notification from Node-RED that doesn't auto-expire\",\"payloadType\":\"str\",\"x\":230,\"y\":1760,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"d2fca7d667d788e4\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Buttered, No Auto\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib\",\"v\":\"{\\\"componentRef\\\":\\\"globalNotification\\\",\\\"options\\\":{\\\"noAutohide\\\":true,\\\"title\\\":\\\"Buttered, Yum!\\\"}}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toastt, No Auto\",\"payload\":\"This is a plain toast notification from Node-RED that doesn't auto-expire\",\"payloadType\":\"str\",\"x\":210,\"y\":1800,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"9828cdd065942743\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Warn, No Auto\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib\",\"v\":\"{\\\"componentRef\\\":\\\"globalNotification\\\",\\\"options\\\":{\\\"noAutohide\\\":true,\\\"title\\\":\\\"Buttered, Yum!\\\",\\\"variant\\\":\\\"warn\\\"}}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toastt, No Auto\",\"payload\":\"This is a plain toast notification from Node-RED that doesn't auto-expire\",\"payloadType\":\"str\",\"x\":230,\"y\":1840,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"733164a073f04226\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Error, No Auto\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib\",\"v\":\"{\\\"componentRef\\\":\\\"globalNotification\\\",\\\"options\\\":{\\\"noAutohide\\\":true,\\\"title\\\":\\\"Buttered, Yum!\\\",\\\"variant\\\":\\\"error\\\"}}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toastt, No Auto\",\"payload\":\"This is a plain toast notification from Node-RED that doesn't auto-expire\",\"payloadType\":\"str\",\"x\":230,\"y\":1880,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"eb252eb404331121\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"Info, No Auto\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"_uib\",\"v\":\"{\\\"componentRef\\\":\\\"globalNotification\\\",\\\"options\\\":{\\\"noAutohide\\\":true,\\\"title\\\":\\\"Buttered, Yum!\\\",\\\"variant\\\":\\\"info\\\"}}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Toastt, No Auto\",\"payload\":\"This is a plain toast notification from Node-RED that doesn't auto-expire\",\"payloadType\":\"str\",\"x\":230,\"y\":1920,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"b5f0636af57e1b7e\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"uib ctrls out\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":355,\"y\":1740,\"wires\":[]},{\"id\":\"0d4433021f8616b2\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"8e10750486ced78f\",\"name\":\"showDialog\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"showDialog\",\"payload\":\"{\\\"title\\\":\\\"Dialogue\\\",\\\"content\\\":\\\"This is a dialogue\\\",\\\"varient\\\":\\\"\\\",\\\"noAutohide\\\":true,\\\"modal\\\":true,\\\"appendToast\\\":false}\",\"payloadType\":\"json\",\"x\":230,\"y\":1960,\"wires\":[[\"b5f0636af57e1b7e\"]]},{\"id\":\"a5acf75926689905\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"63da4c0b011c8cd2\",\"name\":\"Show an on-page notification (method: notify)\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"notify\\\",\\\"variant\\\":\\\"info\\\",\\\"title\\\":\\\"A Manual Title\\\",\\\"content\\\":\\\"A message from low-code\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"show-popup\",\"payload\":\"This is a message from the payload\",\"payloadType\":\"str\",\"x\":290,\"y\":1540,\"wires\":[[\"8573de8217f94cac\"]],\"info\":\"Note that this is different to the `notification` uib command,\\r\\nthat shows an OS toast notification, this shows an on-page\\r\\npop-over.\\r\\n\\r\\nThe difference between this and the \\\"alert\\\" method is that\\r\\nthis does autohides by default and it has no warning icon.\\r\\n\\r\\nOtherwise, it is the same and both use the `showDialog`\\r\\nmethod under the skin.\"},{\"id\":\"4ad35a026de96c25\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"63da4c0b011c8cd2\",\"name\":\"Show an on-page notification (method: alert)\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"alert\\\",\\\"variant\\\":\\\"info\\\",\\\"title\\\":\\\"A Manual Title\\\",\\\"content\\\":\\\"A message from low-code\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"show-popup\",\"payload\":\"This is a message from the payload\",\"payloadType\":\"str\",\"x\":290,\"y\":1580,\"wires\":[[\"8573de8217f94cac\"]],\"info\":\"Note that this is different to the `notification` uib command,\\r\\nthat shows an OS toast notification, this shows an on-page\\r\\npop-over.\\r\\n\\r\\nThe difference between this and the \\\"notify\\\" method is that\\r\\nthis does not autohide and it has a warning icon.\\r\\n\\r\\nOtherwise, it is the same and both use the `showDialog`\\r\\nmethod under the skin.\"},{\"id\":\"8573de8217f94cac\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"63da4c0b011c8cd2\",\"name\":\"link out 1\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":557.8000030517578,\"y\":1551.7999877929688,\"wires\":[]},{\"id\":\"af8f393604698bb5\",\"type\":\"link out\",\"z\":\"56443195ea782ac2\",\"g\":\"1421e572180af89d\",\"name\":\"link out 4\",\"mode\":\"link\",\"links\":[\"dea4924479704c6e\"],\"x\":355,\"y\":1400,\"wires\":[]},{\"id\":\"3f77b1f859c01f20\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"1421e572180af89d\",\"name\":\"\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"Test-show-info-overlay\",\"x\":115,\"y\":1400,\"wires\":[[\"1917fc6a3a1d7970\"]],\"l\":false},{\"id\":\"1917fc6a3a1d7970\",\"type\":\"function\",\"z\":\"56443195ea782ac2\",\"g\":\"1421e572180af89d\",\"name\":\"msg._uib ...\",\"func\":\"\u002F\u002F set x to be a random integer between 0 and 3\\nconst x = Math.floor(Math.random() * 4)\\n\u002F\u002F random null or 5\\nconst auto = Math.random() \\u003c 0.5 ? null : 5\\nconst myIcon = Math.random() \\u003c 0.5 ? undefined : '👍'\\nconst showTime = Math.random() \\u003c 0.5 ? true : false\\n\\nconst types = ['info', 'success', 'warning', 'error']\\n\\nmsg._uib = {\\n    \u002F\u002F The command for the uibuilder client to execute\\n    \\\"command\\\": \\\"showOverlay\\\", \u002F\u002F Show an information overlay panel\\n    \u002F\u002F The options passed to the command (@since v7.5.0)\\n    \\\"options\\\": {\\n        \u002F\u002F Optional. Defaults to type\\n        \\\"title\\\": \\\"Test from Node-RED\\\",\\n        \u002F\u002F Optional. Sets the icon, colour (and heading if not provided)\\n        \u002F\u002F   info, success, warning, error (default: info)\\n        \\\"type\\\": types[x],\\n        \u002F\u002F Optional. Either null for manual close or\\n        \u002F\u002F    number of seconds\\n        \\\"autoClose\\\": auto,\\n\\n        \u002F\u002F Optional. Defaults provided for each type\\n        \\\"icon\\\": myIcon,\\n        \u002F\u002F Optional. Defaults to true\\n        \u002F\u002F \\\"time\\\": true,\\n        \u002F\u002F Optional. Will use msg.payload if not supplied.\\n        \u002F\u002F \\\"content\\\": \\\"This is some content, \\u003cb\\u003ecan be\\u003c\u002Fb\\u003e \\u003ci\\u003eHTML\\u003c\u002Fi\\u003e\\\",\\n    },\\n    \u002F\u002F By default, the client returns a confirmation.\\n    \u002F\u002F Set this to true to prevent that.\\n    \\\"quiet\\\": true,\\n}\\n\\nmsg.payload = `This is some text to display. \\u003cp\\u003e It \\u003cu\\u003ecan\\u003c\u002Fu\\u003e contain \\u003cb style=\\\"color:purple;\\\"\\u003eHTML\\u003c\u002Fb\\u003e as well\\u003c\u002Fp\\u003e\\n  \\u003cdiv\\u003e\\n    Type: ${types[x]}, autoClose: ${auto}, icon override: ${myIcon}\\n  \\u003c\u002Fdiv\\u003e\\n`\\n\\nreturn msg\",\"outputs\":1,\"timeout\":0,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":240,\"y\":1400,\"wires\":[[\"af8f393604698bb5\"]]},{\"id\":\"3e8b444312601e34\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"scrollTo: Scroll to the top of the page if it isn't visible (quiet:true)\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"scrollTo\\\",\\\"prop\\\":\\\"top\\\", \\\"quiet\\\": true}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"scroll-to-top\",\"x\":290,\"y\":820,\"wires\":[[\"16010315c365626a\"]],\"info\":\"The `prop` OR the `value` property can be set with the URL\\r\\nto navigate to.\\r\\n\\r\\nThe URL can be:\\r\\n\\r\\n1. A full URL (e.g. `https:\u002F\u002Fexample.com\u002Fsomewhere`)\\r\\n2. A relative URL (e.g. `.\u002Fanotherpage.html`)\\r\\n3. A routing hash (e.g. `#route02`)\\r\\n\\r\\nOr a combination of (1 OR 2) and 3.\\r\\n\\r\\n#### Relative URLs\\r\\n\\r\\nAre relative to the CURRENT PAGE. So if that is \\r\\n`index.html`, `.\u002Fpage2.html` would be in the same\\r\\nsource folder as would `.\u002Ffolder` (which would move to\\r\\n`.\u002Ffolder\u002Findex.html`).\\r\\n\\r\\nSimilarly, if on the `folder` page, `..\u002F` would move up\\r\\na level to the main index html page.\\r\\n\\r\\n#### Routing Hashes\\r\\n\\r\\nFor pure front-end routing, using `uibrouter` or similar\\r\\nlibrary, simply send `#newroute` to move to the new route\\r\\nwithout reloading the page.\\r\\n\\r\\nPutting a hash on the end of a full or relative URL will\\r\\ntrigger the route on the resulting page load.\"},{\"id\":\"4ef549da49d18e40\",\"type\":\"inject\",\"z\":\"56443195ea782ac2\",\"g\":\"5d9e25e34533c465\",\"name\":\"SPA navigate: Hash change (router)\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"navigate\\\",\\\"prop\\\":\\\"#more\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"navigate\",\"x\":200,\"y\":780,\"wires\":[[\"16010315c365626a\"]],\"info\":\"For pure SPA (Single Page App) front-end routing,\\r\\nusing the `uibrouter` or similar library,\\r\\nsimply send `#newroute` to move to the new route\\r\\nwithout reloading the page.\\r\\n\\r\\nPutting a hash on the end of a full or relative URL will\\r\\ntrigger the route on the resulting page load.\\r\\n\\r\\nHash route changes do not reload the web page.\\r\\n\\r\\nIf the page is not an SPA, nothing will happen.\"},{\"id\":\"5d4eb510485637f5\",\"type\":\"global-config\",\"env\":[],\"modules\":{\"node-red-contrib-uibuilder\":\"7.5.0\"}}]",{"name":136,"path":137,"url":138,"downloadUrl":139,"flow":140},"Quick Start Flow","examples\u002FQuick Start Flow.json","https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmain\u002Fexamples\u002FQuick%20Start%20Flow.json","https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmain\u002Fexamples\u002FQuick%20Start%20Flow.json","[{\"id\":\"60a8489436d0ee43\",\"type\":\"debug\",\"z\":\"30fdd9a9702231b0\",\"name\":\"uib Std Output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":715,\"y\":1020,\"wires\":[],\"l\":false},{\"id\":\"03d761104c3ee12f\",\"type\":\"inject\",\"z\":\"30fdd9a9702231b0\",\"name\":\"uib-quick-start\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"uib-quick-start\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":330,\"y\":1060,\"wires\":[[\"ff050c4347776e67\"]]},{\"id\":\"ff050c4347776e67\",\"type\":\"uibuilder\",\"z\":\"30fdd9a9702231b0\",\"name\":\"\",\"topic\":\"\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"blank\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"showMsgUib\":true,\"title\":\"\",\"descr\":\"\",\"x\":580,\"y\":1060,\"wires\":[[\"60a8489436d0ee43\"],[\"86ffc76eb5838f6c\"]]},{\"id\":\"86ffc76eb5838f6c\",\"type\":\"debug\",\"z\":\"30fdd9a9702231b0\",\"name\":\"uib Control Output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":715,\"y\":1080,\"wires\":[],\"l\":false},{\"id\":\"e044ccbbc70ecc60\",\"type\":\"inject\",\"z\":\"30fdd9a9702231b0\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":310,\"y\":1120,\"wires\":[[\"6a4c985e0fc73c31\"]]},{\"id\":\"ad3e6bf13e2c7f15\",\"type\":\"inject\",\"z\":\"30fdd9a9702231b0\",\"name\":\"Log Lvl 5\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"logLevel\\\",\\\"value\\\":5}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":340,\"y\":1160,\"wires\":[[\"6a4c985e0fc73c31\"]]},{\"id\":\"86f9153ff0dc2d04\",\"type\":\"inject\",\"z\":\"30fdd9a9702231b0\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":350,\"y\":1200,\"wires\":[[\"6a4c985e0fc73c31\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"b9605e7d0a662387\",\"type\":\"link in\",\"z\":\"30fdd9a9702231b0\",\"name\":\"uib in\",\"links\":[\"6a4c985e0fc73c31\"],\"x\":385,\"y\":1020,\"wires\":[[\"ff050c4347776e67\"]]},{\"id\":\"6a4c985e0fc73c31\",\"type\":\"link out\",\"z\":\"30fdd9a9702231b0\",\"name\":\"uib ctrls out\",\"mode\":\"link\",\"links\":[\"b9605e7d0a662387\"],\"x\":475,\"y\":1160,\"wires\":[]}]",{"name":142,"path":143,"url":144,"downloadUrl":145,"flow":146},"Simple Flow","examples\u002FSimple Flow.json","https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmain\u002Fexamples\u002FSimple%20Flow.json","https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmain\u002Fexamples\u002FSimple%20Flow.json","[{\"id\":\"2d368cb9c96bdff7\",\"type\":\"group\",\"z\":\"ff9704678e3a4b61\",\"name\":\"UIBUILDER \\\"simple\\\" example (Updated: 2024-067-01)\",\"style\":{\"fill\":\"#ffffff\",\"fill-opacity\":\"0.21\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"116a78405410289c\",\"fa042ed296e9de80\",\"bb3b15c09b085da2\",\"7845085b17f1686b\",\"054d34fec0aa457b\",\"cef55ea2491d8024\",\"3e4c1bb1d26f20ce\",\"5a5653fbb5559e32\"],\"x\":54,\"y\":339,\"w\":972,\"h\":388},{\"id\":\"116a78405410289c\",\"type\":\"comment\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"Quote of the Day example. (READ ME FIRST!)\",\"info\":\"This flow gets a \\\"quote of the day\\\" from the Internet and passes it\\nto uibuilder. It caches the result so that if you reload the page,\\nyou get the last result back. The quote is updated every 30 minutes\\nduring the day and evening.\\n\\n\\\"Simple\\\" refers to the front-end code. While the flow looks a little\\ncomplex, it really isn't. On the Node-RED server side: A trigger, an Internet request,\\nand uibuilder. On the client browser side: A well-formatted HTML blockquote, a simple\\nfunction that updates the UI and a function that listens to messages from Node-RED,\\nand finally some really simple CSS for formatting.\\n\\n## Configuration\\n\\n1. Give the uibuilder node a url name.\\n2. Deploy.\\n3. Change the selected uibuilder node in the uib-save node.\\n4. Deploy again.\\n5. Update the front-end code files by running the sub-group. This updates index.(html|js|css).\\n6. Deploy again.\\n\\nPress the button on the trigger named \\\"getQuote\\\" to start the flow.\",\"x\":260,\"y\":380,\"wires\":[]},{\"id\":\"fa042ed296e9de80\",\"type\":\"debug\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"simple-debug\",\"active\":false,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"true\",\"targetType\":\"full\",\"x\":900,\"y\":420,\"wires\":[]},{\"id\":\"bb3b15c09b085da2\",\"type\":\"uibuilder\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"Simple Example\",\"topic\":\"\",\"url\":\"uib-simple-example\",\"okToGo\":true,\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"blank\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0-beta\",\"showMsgUib\":true,\"x\":630,\"y\":440,\"wires\":[[\"fa042ed296e9de80\"],[\"054d34fec0aa457b\"]]},{\"id\":\"7845085b17f1686b\",\"type\":\"inject\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"\",\"topic\":\"getQuote\",\"x\":160,\"y\":440,\"wires\":[[\"3e4c1bb1d26f20ce\"]]},{\"id\":\"054d34fec0aa457b\",\"type\":\"debug\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"uib controls\",\"active\":false,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"true\",\"targetType\":\"full\",\"x\":890,\"y\":460,\"wires\":[]},{\"id\":\"cef55ea2491d8024\",\"type\":\"debug\",\"z\":\"ff9704678e3a4b61\",\"d\":true,\"g\":\"2d368cb9c96bdff7\",\"name\":\"qotd-debug\",\"active\":false,\"tosidebar\":true,\"console\":false,\"tostatus\":false,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"auto\",\"x\":550,\"y\":500,\"wires\":[]},{\"id\":\"3e4c1bb1d26f20ce\",\"type\":\"http request\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"Quote of the day\",\"method\":\"GET\",\"ret\":\"obj\",\"paytoqs\":false,\"url\":\"https:\u002F\u002Ffavqs.com\u002Fapi\u002Fqotd\",\"tls\":\"\",\"persist\":false,\"proxy\":\"\",\"authType\":\"\",\"x\":330,\"y\":440,\"wires\":[[\"bb3b15c09b085da2\",\"cef55ea2491d8024\"]]},{\"id\":\"5a5653fbb5559e32\",\"type\":\"group\",\"z\":\"ff9704678e3a4b61\",\"g\":\"2d368cb9c96bdff7\",\"name\":\"Run this to update the front-end code files (after setting the uibuilder url name)\",\"style\":{\"fill\":\"#ffffff\",\"fill-opacity\":\"0.31\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"55abd225ad81d743\",\"490d3439c60c1b7a\",\"c1d742d7201e9392\",\"73dc5646a81ea558\",\"46757650f470b5bd\",\"85c41b050ea3a3de\",\"e26eb52f5db65966\",\"d7be075fdea36b47\"],\"x\":84,\"y\":539,\"w\":652,\"h\":162},{\"id\":\"55abd225ad81d743\",\"type\":\"inject\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":145,\"y\":620,\"wires\":[[\"73dc5646a81ea558\",\"46757650f470b5bd\",\"e26eb52f5db65966\"]],\"l\":false},{\"id\":\"490d3439c60c1b7a\",\"type\":\"template\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"html\",\"syntax\":\"mustache\",\"template\":\"\\n\\n    \\n    \\n\\n    Quote of the day - Node-RED UIBUILDER\\n    \\n    \\n\\n    \\n    \\n\\n    \\n    \\n    \\n    \\n\\n    \\u003ch1\\u003eUIBUILDER example: Get and view a Quote of the Day\\u003c\u002Fh1\\u003e\\n    \\u003cdiv\\u003eUsing the UIBUILDER IIFE library. No framework used.\\u003c\u002Fdiv\\u003e\\n    \\n\\n    \\u003cdiv id=\\\"more\\\"\\u003e\\u003c\u002Fdiv\\u003e\\n\\n    \\u003cblockquote id=\\\"quote\\\"\\u003e\\n        \\n        No quote received yet.\\n        \\n    \\u003c\u002Fblockquote\\u003e\\n\",\"output\":\"str\",\"x\":420,\"y\":580,\"wires\":[[\"c1d742d7201e9392\"]]},{\"id\":\"c1d742d7201e9392\",\"type\":\"uib-save\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"url\":\"uib-simple-example\",\"uibId\":\"bb3b15c09b085da2\",\"folder\":\"src\",\"fname\":\"\",\"createFolder\":false,\"reload\":false,\"usePageName\":false,\"encoding\":\"utf8\",\"mode\":438,\"name\":\"\",\"topic\":\"\",\"x\":620,\"y\":620,\"wires\":[]},{\"id\":\"73dc5646a81ea558\",\"type\":\"change\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"index.html\",\"rules\":[{\"t\":\"set\",\"p\":\"fname\",\"pt\":\"msg\",\"to\":\"index.html\",\"tot\":\"str\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":270,\"y\":580,\"wires\":[[\"490d3439c60c1b7a\"]]},{\"id\":\"46757650f470b5bd\",\"type\":\"change\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"index.js\",\"rules\":[{\"t\":\"set\",\"p\":\"fname\",\"pt\":\"msg\",\"to\":\"index.js\",\"tot\":\"str\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":260,\"y\":620,\"wires\":[[\"85c41b050ea3a3de\"]]},{\"id\":\"85c41b050ea3a3de\",\"type\":\"template\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"mustache\",\"template\":\"\u002F\u002F @ts-nocheck\\n\\n\u002F** Example of using the IIFE build of the uibuilder client library\\n * Note that uibuilder.start() should no longer be needed.\\n * See the documentation if the client doesn't start on its own.\\n *\u002F\\n'use strict'\\n\\n\u002F\u002F Update the quote\\nfunction updQuote(quote) {\\n    \u002F\u002F Update the quote\\n    $('#quoteText').innerText = quote.body\\n    \u002F\u002F and the author\\n    $('#quoteAuthor').innerText = quote.author\\n    \u002F\u002F And the overall quote citation\\n    $('#quote').setAttribute('cite', quote.url)\\n}\\n\\n\u002F\u002F Listen for incoming messages from Node-RED\\nuibuilder.onChange('msg', function (msg) {\\n    \u002F\u002F Make sure we only process quotes and ignore other messages.\\n    \u002F\u002F Generally sensible to filter like this.\\n    if (msg.topic === 'getQuote') updQuote(msg.payload.quote)\\n})\\n\",\"output\":\"str\",\"x\":420,\"y\":620,\"wires\":[[\"c1d742d7201e9392\"]]},{\"id\":\"e26eb52f5db65966\",\"type\":\"change\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"index.css\",\"rules\":[{\"t\":\"set\",\"p\":\"fname\",\"pt\":\"msg\",\"to\":\"index.css\",\"tot\":\"str\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":260,\"y\":660,\"wires\":[[\"d7be075fdea36b47\"]]},{\"id\":\"d7be075fdea36b47\",\"type\":\"template\",\"z\":\"ff9704678e3a4b61\",\"g\":\"5a5653fbb5559e32\",\"name\":\"\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"css\",\"syntax\":\"mustache\",\"template\":\"\u002F* Load defaults from `\u002Fnode_modules\u002Fnode-red-contrib-uibuilder\u002Ffront-end\u002Fuib-brand.css`\\n * This version auto-adjusts for light\u002Fdark browser settings but might not be as complete.\\n *\u002F\\n@import url(\\\".\u002Fuib-brand.css\\\");\\n\\n\u002F* OR, load the defaults from the older `\u002Fnode_modules\u002Fnode-red-contrib-uibuilder\u002Ffront-end\u002Fuib-styles.css` *\u002F\\n\u002F* @import url(\\\".\u002Fuib-styles.css\\\"); *\u002F\\n\\n\u002F* Formate the quote of the day *\u002F\\n#quote {\\n    background-color: beige;\\n    color: black;\\n    padding: 1rem;\\n}\\n\\n#quoteText {\\n    font-style: italic;\\n    font-size: larger;\\n}\\n\\n#quoteAuthor {\\n    display: block;\\n    font-style: normal\\n}\\n\",\"output\":\"str\",\"x\":420,\"y\":660,\"wires\":[[\"c1d742d7201e9392\"]]}]",{"name":148,"path":149,"url":150,"downloadUrl":151,"flow":152},"Simple UI Updates","examples\u002FSimple UI Updates.json","https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmain\u002Fexamples\u002FSimple%20UI%20Updates.json","https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmain\u002Fexamples\u002FSimple%20UI%20Updates.json","[{\"id\":\"36e46a8812418a38\",\"type\":\"tab\",\"label\":\"Simple Updates\",\"disabled\":false,\"info\":\"This tab contains an example uibuilder node\\r\\nalong with several example methods for\\r\\nshowing dynamic on-page text, HTML, JSON,\\r\\ntables or lists.\",\"env\":[]},{\"id\":\"a2a4f9ce8175afa5\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"name\":\"Base Configuration\",\"style\":{\"fill\":\"#ffffbf\",\"fill-opacity\":\"0.12\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"60a8489436d0ee43\",\"ff050c4347776e67\",\"86ffc76eb5838f6c\",\"d5ffe9a264b1c424\",\"73283e35f23ba905\",\"e8b79e0479ad07fb\",\"11c34f35abc00f11\",\"475a22b945acf2c3\",\"59e22173849a0305\"],\"x\":54,\"y\":119,\"w\":812,\"h\":162},{\"id\":\"86fa2a8ae6f5f32e\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"name\":\"Front-end Code - Run after the uibuilder node has been deployed. \\\\n Sets up FE code, reloads connected clients.\",\"style\":{\"label\":true,\"stroke\":\"#a4a4a4\",\"fill-opacity\":\"0.33\",\"color\":\"#000000\",\"fill\":\"#ffffff\"},\"nodes\":[\"36b3dea638283be6\",\"46689bc058b9d4db\",\"a39bd1d7474cf8ec\",\"dc323f1cc56a3d6c\",\"24a49e7875280cc1\",\"d091b7d37c855385\"],\"x\":54,\"y\":303,\"w\":582,\"h\":138},{\"id\":\"47345dbbf5ee7a85\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"name\":\"No-Code Examples. No JavaScript code needed, only some minimal, simple HTML. \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffbf\",\"fill-opacity\":\"0.31\",\"color\":\"#000000\"},\"nodes\":[\"f932f6aa7402f45f\",\"d98538dd8bd00088\",\"42c2560a89f83d7f\"],\"x\":62,\"y\":481,\"w\":876,\"h\":686},{\"id\":\"f932f6aa7402f45f\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"g\":\"47345dbbf5ee7a85\",\"name\":\"Example (2) using the no-code uib-update node to any identifiable HTML tag \\\\n \",\"style\":{\"fill\":\"#ffffff\",\"fill-opacity\":\"0.21\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"d3b66a1c8aafb1f4\",\"a1c5793fee1d129e\",\"230b14e3f0320ec0\"],\"x\":94,\"y\":891,\"w\":772,\"h\":122},{\"id\":\"d98538dd8bd00088\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"g\":\"47345dbbf5ee7a85\",\"name\":\"Example (1) Using the uib-topic attribute on ANY HTML tag. Updates automatically from the given topic. \\\\n \",\"style\":{\"fill\":\"#ffffff\",\"fill-opacity\":\"0.21\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"5c9697e02dccd2b3\",\"d1d43c7a01c0bc8d\",\"d14353b5112a3569\",\"1baa31baa12b852d\"],\"x\":88,\"y\":523,\"w\":824,\"h\":344},{\"id\":\"42c2560a89f83d7f\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"g\":\"47345dbbf5ee7a85\",\"name\":\"Example (3) Using the \\u003cuib-var\\u003e custom HTML component \\\\n \",\"style\":{\"fill\":\"#ffffff\",\"fill-opacity\":\"0.2\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"532ec0e5a5152d88\",\"1118681bef5c126b\",\"b69aa587eb50ae6f\",\"45c30769766809e0\"],\"x\":94,\"y\":1043,\"w\":772,\"h\":98},{\"id\":\"1baa31baa12b852d\",\"type\":\"group\",\"z\":\"36e46a8812418a38\",\"g\":\"d98538dd8bd00088\",\"style\":{\"stroke\":\"#999999\",\"stroke-opacity\":\"1\",\"fill\":\"none\",\"fill-opacity\":\"1\",\"label\":true,\"label-position\":\"nw\",\"color\":\"#a4a4a4\"},\"nodes\":[\"d9fdec7fcc85cd33\",\"27f9456ac541a25b\",\"5ec63813e8c5ec20\",\"c93989c7c84fc30f\",\"18a0973ccd8d33e6\"],\"x\":114,\"y\":607,\"w\":772,\"h\":234},{\"id\":\"59e22173849a0305\",\"type\":\"junction\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"x\":440,\"y\":160,\"wires\":[[\"ff050c4347776e67\"]]},{\"id\":\"60a8489436d0ee43\",\"type\":\"debug\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"name\":\"uib Std Output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":745,\"y\":160,\"wires\":[],\"l\":false},{\"id\":\"ff050c4347776e67\",\"type\":\"uibuilder\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"name\":\"\",\"topic\":\"\",\"url\":\"text-update-egs\",\"okToGo\":true,\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"blank\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.6.0\",\"showMsgUib\":true,\"title\":\"\",\"descr\":\"\",\"editurl\":\"vscode:\u002F\u002Ffile\u002Fsrc\u002FuibRoot\u002Ftext-update-egs\u002F?windowId=_blank\",\"x\":600,\"y\":200,\"wires\":[[\"60a8489436d0ee43\"],[\"86ffc76eb5838f6c\",\"11c34f35abc00f11\"]]},{\"id\":\"86ffc76eb5838f6c\",\"type\":\"debug\",\"z\":\"36e46a8812418a38\",\"d\":true,\"g\":\"a2a4f9ce8175afa5\",\"name\":\"uib Control Output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":805,\"y\":220,\"wires\":[],\"l\":false},{\"id\":\"e044ccbbc70ecc60\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":1010,\"y\":160,\"wires\":[[\"6a4c985e0fc73c31\"]]},{\"id\":\"ad3e6bf13e2c7f15\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Log Lvl 5\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"logLevel\\\",\\\"value\\\":5}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":1040,\"y\":200,\"wires\":[[\"6a4c985e0fc73c31\"]]},{\"id\":\"86f9153ff0dc2d04\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":1050,\"y\":240,\"wires\":[[\"6a4c985e0fc73c31\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"6a4c985e0fc73c31\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"uib ctrls out\",\"mode\":\"link\",\"links\":[\"d5ffe9a264b1c424\"],\"x\":1175,\"y\":200,\"wires\":[]},{\"id\":\"d5ffe9a264b1c424\",\"type\":\"link in\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"name\":\"uib-upd-egs - no cache\",\"links\":[\"6a4c985e0fc73c31\",\"7cf15cdc25847e38\",\"5c4452e742079f53\",\"046d41ddfade6f54\",\"f531dc510171631e\",\"d74fc7af492d7a5c\"],\"x\":305,\"y\":160,\"wires\":[[\"59e22173849a0305\"]]},{\"id\":\"73283e35f23ba905\",\"type\":\"link in\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"name\":\"uib-upd-egs - cached\",\"links\":[\"11c34f35abc00f11\",\"230b14e3f0320ec0\",\"d5772ba475aa309a\",\"5c9697e02dccd2b3\",\"45c30769766809e0\",\"5ec63813e8c5ec20\"],\"x\":225,\"y\":240,\"wires\":[[\"e8b79e0479ad07fb\"]]},{\"id\":\"e8b79e0479ad07fb\",\"type\":\"uib-cache\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"cacheall\":false,\"cacheKey\":\"topic\",\"newcache\":true,\"num\":1,\"storeName\":\"default\",\"name\":\"Cache (by topic)\",\"storeContext\":\"context\",\"varName\":\"uib_cache\",\"x\":370,\"y\":200,\"wires\":[[\"ff050c4347776e67\"]]},{\"id\":\"11c34f35abc00f11\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"name\":\"link out 64\",\"mode\":\"link\",\"links\":[\"73283e35f23ba905\"],\"x\":745,\"y\":240,\"wires\":[]},{\"id\":\"475a22b945acf2c3\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"a2a4f9ce8175afa5\",\"name\":\"Clear Cache\",\"props\":[{\"p\":\"uibuilderCtrl\",\"v\":\"clear cache\",\"vt\":\"str\"},{\"p\":\"cacheControl\",\"v\":\"CLEAR\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":170,\"y\":200,\"wires\":[[\"e8b79e0479ad07fb\"]]},{\"id\":\"d3b66a1c8aafb1f4\",\"type\":\"uib-update\",\"z\":\"36e46a8812418a38\",\"g\":\"f932f6aa7402f45f\",\"name\":\"Update myage span content \\\\n (#myage css selector)\",\"topic\":\"\",\"mode\":\"update\",\"modeSourceType\":\"update\",\"cssSelector\":\"#myage\",\"cssSelectorType\":\"str\",\"slotSourceProp\":\"payload\",\"slotSourcePropType\":\"msg\",\"attribsSource\":\"(\\t    \u002F* Set the class based on incoming value *\u002F\\t    $lu := ($number(payload) \\u003e 60 ? \\\"warning\\\" : \\\"info\\\") \\u0026 \\\" border\\\";\\t\\t    {\\\"class\\\": $lu}\\t)\",\"attribsSourceType\":\"jsonata\",\"slotPropMarkdown\":false,\"x\":540,\"y\":960,\"wires\":[[\"230b14e3f0320ec0\"]]},{\"id\":\"a1c5793fee1d129e\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"f932f6aa7402f45f\",\"name\":\"Random myage (note need for \\\\n topic so that cached correctly)\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"*\u002F1 8-23 * * *\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"update-myage\",\"payload\":\"$formatInteger($random() * 100, \\\"0\\\")\\t\",\"payloadType\":\"jsonata\",\"x\":270,\"y\":960,\"wires\":[[\"d3b66a1c8aafb1f4\"]]},{\"id\":\"230b14e3f0320ec0\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"g\":\"f932f6aa7402f45f\",\"name\":\"link out 65\",\"mode\":\"link\",\"links\":[\"73283e35f23ba905\"],\"x\":825,\"y\":960,\"wires\":[]},{\"id\":\"3aae18802d1de054\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example (4) Add this manually to index.js (see inside) - it does updates from the front-end instead\",\"info\":\"```javascript\\nuibuilder.onChange('msg', (msg) =\\u003e {\\n    If (msg.topic === 'todaytemp') {\\n        \u002F\u002F Use innerHTML if needed\\n        $('#todaytemp').innerText = msg.payload\\n    }\\n})\\n```\",\"x\":390,\"y\":1360,\"wires\":[]},{\"id\":\"d5772ba475aa309a\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"link out 66\",\"mode\":\"link\",\"links\":[\"73283e35f23ba905\"],\"x\":745,\"y\":1420,\"wires\":[]},{\"id\":\"07cd2f6a6d08658c\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Random todaytemp (note need for \\\\n topic so that front-end code handles correctly)\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"*\u002F1 8-23 * * *\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"todaytemp\",\"payload\":\"$formatInteger($random() * 100 - 50, \\\"0\\\")\\t\",\"payloadType\":\"jsonata\",\"x\":240,\"y\":1420,\"wires\":[[\"d5772ba475aa309a\"]]},{\"id\":\"532ec0e5a5152d88\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"42c2560a89f83d7f\",\"name\":\"Set command\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"myquote\\\",\\\"value\\\":\\\"\\\",\\\"quiet\\\":true}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"0 8-23 * * *\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"\",\"x\":220,\"y\":1100,\"wires\":[[\"1118681bef5c126b\"]]},{\"id\":\"1118681bef5c126b\",\"type\":\"http request\",\"z\":\"36e46a8812418a38\",\"g\":\"42c2560a89f83d7f\",\"name\":\"\",\"method\":\"GET\",\"ret\":\"obj\",\"paytoqs\":\"ignore\",\"url\":\"https:\u002F\u002Fzenquotes.io\u002Fapi\u002Frandom\",\"tls\":\"\",\"persist\":false,\"proxy\":\"\",\"insecureHTTPParser\":false,\"authType\":\"\",\"senderr\":false,\"headers\":[],\"x\":390,\"y\":1100,\"wires\":[[\"b69aa587eb50ae6f\"]]},{\"id\":\"b69aa587eb50ae6f\",\"type\":\"change\",\"z\":\"36e46a8812418a38\",\"g\":\"42c2560a89f83d7f\",\"name\":\"Upd set value from web response\",\"rules\":[{\"t\":\"set\",\"p\":\"_uib.value\",\"pt\":\"msg\",\"to\":\"payload[0].h\",\"tot\":\"msg\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":620,\"y\":1100,\"wires\":[[\"45c30769766809e0\"]]},{\"id\":\"45c30769766809e0\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"g\":\"42c2560a89f83d7f\",\"name\":\"link out 67\",\"mode\":\"link\",\"links\":[\"73283e35f23ba905\"],\"x\":825,\"y\":1100,\"wires\":[]},{\"id\":\"85b05013bc65a8ef\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"The uibuilder set command is used to change the variable in the front-end. \\\\n In this case, we will tell the component to use HTML - see the first comment contents above.\",\"info\":\"\",\"x\":1280,\"y\":1100,\"wires\":[]},{\"id\":\"f8bdfabd783cab21\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Set command\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\t   \\\"command\\\":\\\"set\\\",\\t   \\\"prop\\\":\\\"egfilter\\\",\\t   \\\"value\\\":$random()*100,\\t    \\\"quiet\\\": true\\t}\",\"vt\":\"jsonata\"}],\"repeat\":\"\",\"crontab\":\"*\u002F1 8-23 * * *\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"\",\"x\":140,\"y\":1580,\"wires\":[[\"7cf15cdc25847e38\"]]},{\"id\":\"7cf15cdc25847e38\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"link out 75\",\"mode\":\"link\",\"links\":[\"d5ffe9a264b1c424\"],\"x\":745,\"y\":1580,\"wires\":[]},{\"id\":\"a61cbcfc65c601b3\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example (5) Use the \\u003cuib-var\\u003e front-end component to apply a JavaScript `filter` function before display. (We won't cache this one) \\\\n The uibuilder set command is used to change the variable in the front-end. \\\\n Example filter sets # Decimal Places. Default is 0.\",\"info\":\"\",\"x\":490,\"y\":1520,\"wires\":[]},{\"id\":\"36b3dea638283be6\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"86fa2a8ae6f5f32e\",\"name\":\"\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"setup all FE files\",\"x\":115,\"y\":360,\"wires\":[[\"24a49e7875280cc1\",\"d091b7d37c855385\"]],\"l\":false},{\"id\":\"46689bc058b9d4db\",\"type\":\"template\",\"z\":\"36e46a8812418a38\",\"g\":\"86fa2a8ae6f5f32e\",\"name\":\"index.html\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"html\",\"syntax\":\"plain\",\"template\":\"\\n\\n\\n    \\n    \\n    \\n\\n    Updating text examples - Node-RED uibuilder\\n    \\n\\n    \\n    \\n\\n    \\n    \\n    \\n    \\n    \\n\\n\\n\\n    \\n        \\u003ch1 class=\\\"with-subtitle\\\"\\u003eDifferent ways of updating UI text\\u003c\u002Fh1\\u003e\\n        \\u003cdiv\\u003eUsing the UIBUILDER IIFE library.\\u003c\u002Fdiv\\u003e\\n\\n        \\u003cdiv id=\\\"more\\\"\\u003e\\n            \\n        \\u003c\u002Fdiv\\u003e\\n\\n        \\u003cp\\u003e\\n            These are all different ways in which you can easily update on-page information from Node-RED data.\\n            See the HTML code and matching commented flows on the example flow tab for more details.\\n        \\u003c\u002Fp\\u003e\\n\\n        \\u003cdiv\\u003e\\n            \\u003ch2\\u003eNo-Code\\u003c\u002Fh2\\u003e\\n            \\u003cp\\u003e\\n                These do not require any JavaScript code. They can all be driven fully from Node-RED flows.\\n            \\u003c\u002Fp\\u003e\\n\\n            \\n                \\u003ch3\\u003eExample (1) via \\u003ccode\\u003euib-topic\\u003c\u002Fcode\\u003e attribute on ANY HTML tag\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    Below this para is another that has a special attribute. The value of which matches a Node-RED\\n                    topic.\\n                    Send a msg with that topic to the uibuilder node and the \\u003ccode\\u003emsg.payload\\u003c\u002Fcode\\u003e will be treated as\\n                    HTML and applied\\n                    to the para contents. Any \\u003ccode\\u003emsg.attributes\\u003c\u002Fcode\\u003e will be applied to the attributes of the para.\\n                \\u003c\u002Fp\\u003e\\n                \\n                \\u003cp\\u003e[Default text - waiting for a msg.topic = \\\"example1\\\"]\\u003c\u002Fp\\u003e\\n\\n                \\u003ch3\\u003eExample (1a) \\u0026amp; (1b) Form elements using \\u003ccode\\u003euib-topic\\u003c\u002Fcode\\u003e attributes\\u003c\u002Fh3\\u003e\\n                 \\u003cbr \u002F\\u003e\\n                 \\u003cbr \u002F\\u003e\\n                \\n            \\n\\n            \\n                \\u003ch3\\u003eExample (2) via no-code uib-update node to any identifiable HTML tag\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    The age below will be updated direct from Node-RED\\n                    using a \\u003ccode\\u003euib-update\\u003c\u002Fcode\\u003e node.\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div40\\\"\\u003e\\n                    This is some text and I want to tell you\\n                    that my age is 140.\\n                \\u003c\u002Fp\\u003e\\n            \\n\\n            \\n                \\u003ch3\\u003eExample (3) via \\u003ccode\\u003e\\u0026lt;uib-var\\u0026gt;\\u003c\u002Fcode\\u003e custom web component\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    A remote \\u003ccode\\u003eset\\u003c\u002Fcode\\u003e command is sent from Node-RED to update a uibuilder managed variable.\\n                    Payload contains an HTML formatted a random quote from a web site.\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div42\\\"\\u003e\\n                    \\n                        (waiting for quote)\\n                    \\n                \\u003c\u002Fp\\u003e\\n            \\n        \\u003c\u002Fdiv\\u003e\\n\\n        \\u003cdiv\\u003e\\n            \\u003ch2\\u003eLow-Code - HTML only\\u003c\u002Fh2\\u003e\\n            \\u003cp\\u003e\\n                These use just HTML in index.html.\\n                Either for the main logic (4) or for the filters.\\n                The code in each case is minimal, consider these to be low-code examples.\\n            \\u003c\u002Fp\\u003e\\n\\n            \\n                \\u003ch3\\u003eExample (5) via \\u003ccode\\u003e\\u0026lt;uib-var\\u0026gt;\\u003c\u002Fcode\\u003e custom web component with filter\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    Each of the following is set by the same uibuilder managed variable.\\n                    In this case filter formats the number with a fixed number of decimal places.\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div43\\\"\\u003e\\n                    \\n                        [waiting for egfilter value]\\n                     (no filter, just the value)\\u003cbr \u002F\\u003e\\n                    \\n                        [waiting for egfilter value]\\n                     (\\u003ccode\\u003emyFilter\\u003c\u002Fcode\\u003e fn applied. 0DP)\\u003cbr \u002F\\u003e\\n                    \\n                    \\n                        [waiting for egfilter value]\\n                    \\n                    (\\u003ccode\\u003emyFilter\\u003c\u002Fcode\\u003e fn with extra param (2) applied. 2DP)\\n                \\u003c\u002Fp\\u003e\\n            \\n\\n            \\n                \\u003ch3\\u003eExample (6) via \\u003ccode\\u003e\\u0026lt;uib-var\\u0026gt;\\u003c\u002Fcode\\u003e custom web component using topic monitor\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    Rather like example 1, this watches for a msg from Node-RED with the topic \\u003ccode\\u003emytopic\u002F#1\\u003c\u002Fcode\\u003e,\\n                    The msg payload replaces the slot content with TEXT (since we haven't used the optional\\n                    \\u003ccode\\u003etype=\\\"html\\\"\\u003c\u002Fcode\\u003e attribute).\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div44\\\" class=\\\"border\\\"\\u003e\\n                    \\n                        [waiting for egtopic\u002F#1 value]\\n                    \\n                \\u003c\u002Fp\\u003e\\n            \\n\\n            \\n                \\u003ch3\\u003eExample (7) \\u003ccode\\u003e\\u0026lt;uib-var\\u0026gt;\\u003c\u002Fcode\\u003e using the attribute \\u003ccode\\u003etype=\\\"list\\\"\\u003c\u002Fcode\\u003e\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    Here we listen for a msg from Node-RED with the topic 'mytopic\u002F#7' where the payload contains an\\n                    array of text entries. Each entry becomes a new list entry.\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div7\\\" class=\\\"border\\\"\\u003e\\n                    \\n                        [waiting for egtopic\u002F#7 value]\\n                    \\n                \\u003c\u002Fp\\u003e\\n            \\n\\n            \\n                \\u003ch3\\u003eExample (8) \\u003ccode\\u003e\\u0026lt;uib-var\\u0026gt;\\u003c\u002Fcode\\u003e using the attribute \\u003ccode\\u003etype=\\\"table\\\"\\u003c\u002Fcode\\u003e\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    Here we listen for a msg from Node-RED with the topic 'mytopic\u002F#8' where the payload contains an\\n                    array of object entries. Each entry becomes a new row in a table. Each property of each entry\\n                    becomes a column in the table. The first entry defines the columns.\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div8\\\" class=\\\"border\\\"\\u003e\\n                    \\n                        [waiting for egtopic\u002F#8 value]\\n                    \\n                \\u003c\u002Fp\\u003e\\n            \\n        \\u003c\u002Fdiv\\u003e\\n\\n        \\u003cdiv\\u003e\\n            \\u003ch2\\u003eLow-Code - Front-end JavaScript in index.js\\u003c\u002Fh2\\u003e\\n            \\u003cp\\u003e\\n                These use some front-end JavaScript code in \\u003ccode\\u003eindex.js\\u003c\u002Fcode\\u003e.\\n                The code in each case is minimal, consider these to be low-code examples.\\n            \\u003c\u002Fp\\u003e\\n\\n            \\n                \\u003ch3\\u003eExample (4) via front-end (browser) code\\u003c\u002Fh3\\u003e\\n                \\u003cp\\u003e\\n                    The temperature below will be updated direct from Node-RED\\n                    using local front-end code in \\u003ccode\\u003eindex.js\\u003c\u002Fcode\\u003e\\n                \\u003c\u002Fp\\u003e\\n                \\u003cp id=\\\"div41\\\"\\u003e\\n                    The temperature today is\\n                    -20℃.\\n                \\u003c\u002Fp\\u003e\\n            \\n        \\u003c\u002Fdiv\\u003e\\n\\n        \\u003cdiv\\u003e\\n            \\u003ch2\\u003eOther \\u003ccode\\u003e\\u0026lt;uib-var\\u0026gt;\\u003c\u002Fcode\\u003e tests\\u003c\u002Fh2\\u003e\\n            \\u003cp\\u003e\\n                These are tests to make sure that the component logic is working correctly.\\n                However, they also show alternative ways of working with the component.\\n                See the HTML code for details of what is being displayed.\\n                Only filter attributes are used to control the content in these.\\n                No JavaScript is required for any of these.\\n            \\u003c\u002Fp\\u003e\\n            \\u003cul class=\\\"checklist\\\"\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [[...]]\\n                    Only a filter, no var or topic. UIBUILDER version \\u003ccode\\u003euibuilder.get\\u003c\u002Fcode\\u003e.\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [[...]]\\n                    Only a filter. UIBUILDER version shortcut \\u003ccode\\u003eget\\u003c\u002Fcode\\u003e.\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    Format number \\u003ccode\\u003euibuilder.formatNumber\\u003c\u002Fcode\\u003e and apply locale formatting\\u003cbr \u002F\\u003e\\n                    [...] Apply \\u003ccode\\u003elang\\u003c\u002Fcode\\u003e\\n                    filter using default Locale ([...])\\u003cbr \u002F\\u003e\\n                    [...] Apply German\\n                    locale to formatted number\\u003cbr \u002F\\u003e\\n                    \\n                    [...] Apply the \\u003ccode\\u003eyen\\u003c\u002Fcode\\u003e filter to give a\\n                    formatted currency.\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [...]\\n                    Fn in an object, no function arguments\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [...]\\n                    Fn in an object, with arguments\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [...]\\n                    Fn in an object, with empty arguments\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [...]\\n                    Fn in an object, with global variables as function arguments\\n                \\u003c\u002Fli\\u003e\\n            \\u003c\u002Ful\\u003e\\n            \\u003cp\\u003e\\n                These apply filter functions to a managed variable or topic\\n            \\u003c\u002Fp\\u003e\\n            \\u003cul class=\\\"checklist\\\"\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [...]\\n                    Variable + filter, tag arguments in a different order\\n                \\u003c\u002Fli\\u003e\\n                \\u003cli class=\\\"check\\\"\\u003e\\n                    [...]\\n                    Topic + filter, tag arguments in a different order\\n                \\u003c\u002Fli\\u003e\\n            \\u003c\u002Ful\\u003e\\n        \\u003c\u002Fdiv\\u003e\\n\\n    \\n\\n\",\"output\":\"str\",\"x\":320,\"y\":360,\"wires\":[[\"a39bd1d7474cf8ec\"]]},{\"id\":\"a39bd1d7474cf8ec\",\"type\":\"uib-save\",\"z\":\"36e46a8812418a38\",\"g\":\"86fa2a8ae6f5f32e\",\"url\":\"text-update-egs\",\"uibId\":\"ff050c4347776e67\",\"folder\":\"src\",\"fname\":\"\",\"createFolder\":true,\"reload\":true,\"usePageName\":false,\"encoding\":\"utf8\",\"mode\":438,\"name\":\"\",\"topic\":\"\",\"x\":530,\"y\":360,\"wires\":[]},{\"id\":\"dc323f1cc56a3d6c\",\"type\":\"template\",\"z\":\"36e46a8812418a38\",\"g\":\"86fa2a8ae6f5f32e\",\"name\":\"index.js\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"javascript\",\"syntax\":\"plain\",\"template\":\"\u002F* global $,uibuilder *\u002F\\n\\n\u002F\u002F ! NOTE that defining this here will result in an early\\n\u002F\u002F   NOT FOUND error because it is defined too late for when the \\n\u002F\u002F   component is first loaded. It will work fine after that.\\n\u002F\u002F   Put in a script loaded BEFORE the uibuilder library if you want to avoid\\n\u002F\u002F   this.\\n\u002F** Custom filter function\\n * Called from uib-var with the filter attribute set\\n * Filter functions ALWAYS have the passed value as the first parameter\\n * Other parameters are added after the value as in this case with dp\\n * @param {*} val Current value of the managed variable\\n * @param {number} dp # decimal places to show\\n * @returns {string} Updated value trimmed to the required # of dps before display\\n *\u002F\\nfunction myFilter(val, dp) {\\n    if (!dp) dp = 0\\n    \u002F\u002F console.log('myFilter called', arguments )\\n    return (val).toFixed(dp)\\n}\\n\\n\u002F\u002F uibuilder.onChange('msg', (msg) =\\u0026gt; {\\n\u002F\u002F     if (msg.topic === 'todaytemp') {\\n\u002F\u002F         console.info('👁️ We got a `todaytemp` message from Node-RED')\\n\u002F\u002F         \u002F\u002F Use innerHTML if needed\\n\u002F\u002F         $('#todaytemp').innerText = msg.payload\\n\u002F\u002F     }\\n\u002F\u002F })\\n\\n\u002F\u002F uibuilder.onTopic('mytopic\u002F#1', (msg) =\\u0026gt; {\\n\u002F\u002F     console.log( 'TOPIC \\\"mytopic\u002F#1\\\" recieved')\\n\u002F\u002F })\",\"output\":\"str\",\"x\":330,\"y\":400,\"wires\":[[\"a39bd1d7474cf8ec\"]]},{\"id\":\"24a49e7875280cc1\",\"type\":\"change\",\"z\":\"36e46a8812418a38\",\"g\":\"86fa2a8ae6f5f32e\",\"name\":\"index.html\",\"rules\":[{\"t\":\"set\",\"p\":\"fname\",\"pt\":\"msg\",\"to\":\"index.html\",\"tot\":\"str\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":205,\"y\":360,\"wires\":[[\"46689bc058b9d4db\"]],\"l\":false},{\"id\":\"d091b7d37c855385\",\"type\":\"change\",\"z\":\"36e46a8812418a38\",\"g\":\"86fa2a8ae6f5f32e\",\"name\":\"index.js\",\"rules\":[{\"t\":\"set\",\"p\":\"fname\",\"pt\":\"msg\",\"to\":\"index.js\",\"tot\":\"str\"}],\"action\":\"\",\"property\":\"\",\"from\":\"\",\"to\":\"\",\"reg\":false,\"x\":205,\"y\":400,\"wires\":[[\"dc323f1cc56a3d6c\"]],\"l\":false},{\"id\":\"0b17130da037b085\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Examples of different ways to update text or HTML on your web page. \\\\n Try out the different methods and find out what works best for you.\",\"info\":\"\",\"x\":310,\"y\":60,\"wires\":[]},{\"id\":\"a90103b8776de604\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Send msg with given topic. Payload is value to show\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"13\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"mytopic\u002F#1\",\"payload\":\"$random() * 10000\",\"payloadType\":\"jsonata\",\"x\":260,\"y\":1740,\"wires\":[[\"5c4452e742079f53\"]]},{\"id\":\"5c4452e742079f53\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"link out 76\",\"mode\":\"link\",\"links\":[\"d5ffe9a264b1c424\"],\"x\":745,\"y\":1740,\"wires\":[]},{\"id\":\"1d7eada0bf4714e4\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example (6) Use the \\u003cuib-var\\u003e front-end component to to monitor recieved messages with a given topic. (We won't cache this one) \\\\n Just send the message.\",\"info\":\"\",\"x\":490,\"y\":1680,\"wires\":[]},{\"id\":\"4713e2116ddc6c5f\",\"type\":\"uib-tag\",\"z\":\"36e46a8812418a38\",\"name\":\"\",\"topic\":\"\",\"tag\":\"uib-var\",\"tagSource\":\"\",\"tagSourceType\":\"str\",\"parent\":\"#more\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementId\":\"var05\",\"elementIdSourceType\":\"str\",\"position\":\"last\",\"positionSourceType\":\"str\",\"slotSourceProp\":\"[waiting for data]\",\"slotSourcePropType\":\"str\",\"attribsSource\":\"{\\\"topic\\\": \\\"mytopic\u002F#1\\\"}\",\"attribsSourceType\":\"json\",\"slotPropMarkdown\":false,\"x\":320,\"y\":1840,\"wires\":[[\"046d41ddfade6f54\"]]},{\"id\":\"91baa1ad1ffb54b0\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":75,\"y\":1840,\"wires\":[[\"4713e2116ddc6c5f\",\"e7ba80c9d474c240\"]],\"l\":false},{\"id\":\"046d41ddfade6f54\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"link out 77\",\"mode\":\"link\",\"links\":[\"d5ffe9a264b1c424\"],\"x\":745,\"y\":1840,\"wires\":[]},{\"id\":\"d70baee6d9a7a852\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example of no-code addition of a \\u003cuib-var\\u003e tag to the web page, updates automatically using the same flow as #6 above - see top of output web page\",\"info\":\"\",\"x\":550,\"y\":1800,\"wires\":[]},{\"id\":\"e7ba80c9d474c240\",\"type\":\"uib-tag\",\"z\":\"36e46a8812418a38\",\"name\":\"\",\"topic\":\"\",\"tag\":\"uib-var\",\"tagSource\":\"\",\"tagSourceType\":\"str\",\"parent\":\"#more\",\"parentSource\":\"\",\"parentSourceType\":\"str\",\"elementId\":\"var06\",\"elementIdSourceType\":\"str\",\"position\":\"last\",\"positionSourceType\":\"str\",\"slotSourceProp\":\"[...]\",\"slotSourcePropType\":\"str\",\"attribsSource\":\"{\\\"filter\\\": \\\"lang\\\"}\",\"attribsSourceType\":\"json\",\"slotPropMarkdown\":false,\"x\":320,\"y\":1880,\"wires\":[[\"046d41ddfade6f54\"]]},{\"id\":\"eb8221235230f0a2\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example updated: 2024-07-16 \\\\n Requires UIBUILDER v7.0+\",\"info\":\"\",\"x\":720,\"y\":60,\"wires\":[]},{\"id\":\"5c9697e02dccd2b3\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"g\":\"d98538dd8bd00088\",\"name\":\"link out 93\",\"mode\":\"link\",\"links\":[\"73283e35f23ba905\"],\"x\":845,\"y\":580,\"wires\":[]},{\"id\":\"d1d43c7a01c0bc8d\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"d98538dd8bd00088\",\"name\":\"msg.topic|attributes\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"attributes\",\"v\":\"{\\\"style\\\": \\\"background-color: yellow\\\", \\\"onclick\\\": \\\"uibuilder.eventSend(event)\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"example1\",\"x\":250,\"y\":580,\"wires\":[[\"d14353b5112a3569\"]]},{\"id\":\"d14353b5112a3569\",\"type\":\"template\",\"z\":\"36e46a8812418a38\",\"g\":\"d98538dd8bd00088\",\"name\":\"Send HTML, CSS and a script via the payload as a string\",\"field\":\"payload\",\"fieldType\":\"msg\",\"format\":\"handlebars\",\"syntax\":\"mustache\",\"template\":\"\\n    \\u003ch3\\u003eMy title\\u003c\u002Fh3\\u003e\\n    \\u003cp\\u003e\\n        Any of this could be set dynamically using\\n        \\u003cspan class=\\\"_NR\\\"\\u003eNode-RED\\u003c\u002Fspan\\u003e\\n        \\u003cspan id=\\\"_myspan\\\"\\u003eflows\\u003c\u002Fspan\\u003e.\\n    \\u003c\u002Fp\\u003e\\n    \\u003cp\\u003e\\n        The format of the \\\"Node-RED\\\" text is controlled\\n        from a CSS class defined in this template.\\n        The color of the text \\\"flows\\\" is controlled by a script\\n        also defined in this template.\\n    \\u003c\u002Fp\\u003e\\n    \\u003cp\\u003e\\n        Now some form elements:\\n    \\u003c\u002Fp\\u003e\\n\\n\\n\\n\\n\",\"output\":\"str\",\"x\":570,\"y\":580,\"wires\":[[\"5c9697e02dccd2b3\"]]},{\"id\":\"6b0d4ae9b8bcfd85\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"NOTE: If defining \\u003cuib-var\\u003e filter functions in the front-end, doing so in index.js \\\\n may result in early \\\"not found\\\" errors due to browser load timings. \\\\n Define them in scripts loaded before the uibuilder library. \\\\n See the client docs for more details. \\\\n NB: As always, feel free to PLAY with things first, \\\\n it will help you learn quicker.\",\"info\":\"\",\"x\":1230,\"y\":1240,\"wires\":[]},{\"id\":\"d9fdec7fcc85cd33\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"1baa31baa12b852d\",\"name\":\"(1a) msg.topic|attributes|value\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"attributes\",\"v\":\"{\\\"id\\\":\\\"example1ainput\\\",\\\"style\\\":\\\"background-color: hsl(60deg 50% 50% \u002F 70%)\\\",\\\"onclick\\\":\\\"uibuilder.eventSend(event)\\\"}\",\"vt\":\"json\"},{\"p\":\"value\",\"v\":\"Value from Node-RED\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"example1a\",\"x\":280,\"y\":720,\"wires\":[[\"5ec63813e8c5ec20\"]]},{\"id\":\"27f9456ac541a25b\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"1baa31baa12b852d\",\"name\":\"(1b) msg.topic|attributes|value\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"value\",\"v\":\"42\",\"vt\":\"num\"},{\"p\":\"attributes\",\"v\":\"{\\\"id\\\":\\\"example1binput\\\",\\\"onclick\\\":\\\"uibuilder.eventSend(event)\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"example1b\",\"x\":280,\"y\":760,\"wires\":[[\"5ec63813e8c5ec20\"]]},{\"id\":\"5ec63813e8c5ec20\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"g\":\"1baa31baa12b852d\",\"name\":\"link out 94\",\"mode\":\"link\",\"links\":[\"73283e35f23ba905\"],\"x\":845,\"y\":720,\"wires\":[]},{\"id\":\"c93989c7c84fc30f\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"g\":\"1baa31baa12b852d\",\"name\":\"Example (1a) Numrtic input \\u0026 (1b) Checkbox. Again show how to easily set values and attributes on \\\\n ANY tag via a simple msg and an attribute on the tag.\",\"info\":\"\",\"x\":500,\"y\":660,\"wires\":[]},{\"id\":\"18a0973ccd8d33e6\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"g\":\"1baa31baa12b852d\",\"name\":\"(1b) msg.topic|checked\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"checked\",\"v\":\"true\",\"vt\":\"bool\"},{\"p\":\"attributes\",\"v\":\"{\\\"id\\\":\\\"example1binput\\\",\\\"onclick\\\":\\\"uibuilder.eventSend(event)\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"example1c\",\"x\":260,\"y\":800,\"wires\":[[\"5ec63813e8c5ec20\"]]},{\"id\":\"3bc3fea1d7af5066\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Send msg with given topic. Payload is an array of text\u002Fhtml entries\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"mytopic\u002F#7\",\"payload\":\"[\\\"Entry 1\\\",\\\"Entry 2\\\",\\\"Entry 3 with \\u003cspan style='background-color:red;color:yellow;'\\u003eHTML\\u003c\u002Fspan\\u003e\\\"]\",\"payloadType\":\"json\",\"x\":290,\"y\":2020,\"wires\":[[\"f531dc510171631e\"]]},{\"id\":\"f531dc510171631e\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"link out 136\",\"mode\":\"link\",\"links\":[\"d5ffe9a264b1c424\"],\"x\":745,\"y\":2020,\"wires\":[]},{\"id\":\"46f84c6a765c4b78\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example (7) \\u003cuib-var\\u003e using the attribute type=\\\"list\\\"\",\"info\":\"\",\"x\":250,\"y\":1980,\"wires\":[]},{\"id\":\"131a44e1d908cad3\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"Send msg with given topic. Payload is an array of text\u002Fhtml entries\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"mytopic\u002F#8\",\"payload\":\"[{\\\"id\\\":1,\\\"name\\\":\\\"John Doe\\\",\\\"age\\\":28,\\\"email\\\":\\\"john.doe@example.com\\\",\\\"isActive\\\":true},{\\\"id\\\":2,\\\"name\\\":\\\"Jane Smith\\\",\\\"age\\\":34,\\\"email\\\":\\\"jane.smith@example.com\\\",\\\"isActive\\\":false},{\\\"id\\\":3,\\\"name\\\":\\\"Emily Johnson\\\",\\\"age\\\":45,\\\"email\\\":\\\"emily.johnson@example.com\\\",\\\"isActive\\\":true},{\\\"id\\\":4,\\\"name\\\":\\\"Michael Brown\\\",\\\"age\\\":52,\\\"email\\\":\\\"michael.brown@example.com\\\",\\\"isActive\\\":true},{\\\"id\\\":5,\\\"name\\\":\\\"Sarah Davis\\\",\\\"age\\\":30,\\\"email\\\":\\\"sarah.davis@example.com\\\",\\\"isActive\\\":false}]\",\"payloadType\":\"json\",\"x\":290,\"y\":2140,\"wires\":[[\"d74fc7af492d7a5c\"]]},{\"id\":\"d74fc7af492d7a5c\",\"type\":\"link out\",\"z\":\"36e46a8812418a38\",\"name\":\"link out 137\",\"mode\":\"link\",\"links\":[\"d5ffe9a264b1c424\"],\"x\":745,\"y\":2140,\"wires\":[]},{\"id\":\"419cf1cb94d3508e\",\"type\":\"comment\",\"z\":\"36e46a8812418a38\",\"name\":\"Example (8) \\u003cuib-var\\u003e using the attribute type=\\\"table\\\"\",\"info\":\"\",\"x\":260,\"y\":2100,\"wires\":[]},{\"id\":\"f953435d84bb745f\",\"type\":\"inject\",\"z\":\"36e46a8812418a38\",\"name\":\"As above but using an object instead of an array\",\"props\":[{\"p\":\"topic\",\"vt\":\"str\"},{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":\"15\",\"topic\":\"mytopic\u002F#8\",\"payload\":\"{\\\"one\\\":{\\\"id\\\":1,\\\"name\\\":\\\"John Doe\\\",\\\"age\\\":28,\\\"email\\\":\\\"john.doe@example.com\\\",\\\"isActive\\\":true},\\\"two\\\":{\\\"id\\\":2,\\\"name\\\":\\\"Jane Smith\\\",\\\"age\\\":34,\\\"email\\\":\\\"jane.smith@example.com\\\",\\\"isActive\\\":false},\\\"three\\\":{\\\"id\\\":3,\\\"name\\\":\\\"Emily Johnson\\\",\\\"age\\\":45,\\\"email\\\":\\\"emily.johnson@example.com\\\",\\\"isActive\\\":true},\\\"four\\\":{\\\"id\\\":4,\\\"name\\\":\\\"Michael Brown\\\",\\\"age\\\":52,\\\"email\\\":\\\"michael.brown@example.com\\\",\\\"isActive\\\":true},\\\"five\\\":{\\\"id\\\":5,\\\"name\\\":\\\"Sarah Davis\\\",\\\"age\\\":30,\\\"email\\\":\\\"sarah.davis@example.com\\\",\\\"isActive\\\":false}}\",\"payloadType\":\"json\",\"x\":240,\"y\":2180,\"wires\":[[\"d74fc7af492d7a5c\"]]},{\"id\":\"9d6ea882f98313bf\",\"type\":\"global-config\",\"env\":[],\"modules\":{\"node-red-contrib-uibuilder\":\"7.5.0\"}}]",{"name":154,"path":155,"url":156,"downloadUrl":157,"flow":158},"Template Examples","examples\u002FTemplate Examples.json","https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmain\u002Fexamples\u002FTemplate%20Examples.json","https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmain\u002Fexamples\u002FTemplate%20Examples.json","[{\"id\":\"a29cf0664c167293\",\"type\":\"tab\",\"label\":\"Template Tests\",\"disabled\":false,\"info\":\"\",\"env\":[]},{\"id\":\"fc8f1db4547ef664\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"Vue v3 IIFE client, no build - Check description in each node \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffff\",\"fill-opacity\":\"0.26\",\"color\":\"#000000\"},\"nodes\":[\"c3bd76ce441dc3e3\",\"3439dbee433a88a8\",\"909a45a07adf4caf\",\"6c14431f469b8846\",\"e47195b8eda5d40e\",\"0c9f24ab06ee0405\",\"89ae80c659089985\",\"caf50be69279b624\",\"92f0587559df7590\",\"d48166077d1f76af\",\"3e569dd871349f93\",\"dd004a6a442ee6a8\",\"ce9a12ba5070f920\",\"c969ddb33e099a82\"],\"x\":34,\"y\":1843,\"w\":722,\"h\":258},{\"id\":\"d7ec253e417f16b6\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"uibuilder IIFE client build with Vue v2 and bootstrap-vue (Full example) \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffff\",\"fill-opacity\":\"0.27\",\"color\":\"#000000\"},\"nodes\":[\"284121dd33dcd50b\",\"4b0be73d7c1879b9\",\"6f8e51db50f117dd\",\"d7ce360f9e714a57\",\"d32229867aa7e3c6\",\"688f3cc99964f88d\",\"802bd5f9321628ad\",\"955997a9e7fb3c28\",\"a0976141d22bd12f\",\"9a7af1b5ee3353ba\",\"7ee9528a1b19eb12\",\"81bf7609272ef9af\",\"c1d0beb7a8dcf573\",\"1b6a3d16ed9f9995\",\"5d26dd3c341a40b3\"],\"x\":34,\"y\":1563,\"w\":732,\"h\":258},{\"id\":\"1f80e4a191d5322a\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"uibuilder IIFE client build with Vue v2 and bootstrap-vue (Minimal Example) \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffff\",\"fill-opacity\":\"0.27\",\"color\":\"#000000\"},\"nodes\":[\"251344c859a9f066\",\"9df22ce79ef39e07\",\"5028e29f49a5591f\",\"2a3a787b6520cef9\",\"5e40aeef2599e4e1\",\"d8c57c9cbfba6417\",\"5f2a84a134a770d7\",\"c90fa14f3bcd1b5a\",\"04b7fe83187b26ed\",\"c8177e230bf224db\",\"079a6828b01e3ca4\",\"168b498f7d93b9ca\",\"35591e8d08b9a8dc\",\"949ddd795829e86e\",\"2a6997fca56f2de1\"],\"x\":774,\"y\":1563,\"w\":732,\"h\":258},{\"id\":\"946ef719ea12bc08\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"Vue v3 ESM, no build - Check description in each node - Can load components without a build step on modern browsers\\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffff\",\"fill-opacity\":\"0.26\",\"color\":\"#000000\"},\"nodes\":[\"6eba307faa3c48e2\",\"3ff7fd7992d48c25\",\"f8f90bfd46b1f53e\",\"e340bdc745361401\",\"fb79d887323f47c1\",\"169c10878b6640e4\",\"97f0c2ea900e3055\",\"8db08ddd2a866fb5\",\"d66f87eca883848e\",\"619d338c7eba7669\",\"7ce2b59950e22ecb\",\"b9a054a3ff5f393d\",\"29bf34be48a50467\",\"31310a6648a194ce\"],\"x\":774,\"y\":1843,\"w\":754,\"h\":258},{\"id\":\"d14e5cf8cd61d8f5\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"A vanilla, blank template. Ready for anything. \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffbf\",\"fill-opacity\":\"0.33\",\"color\":\"#000000\"},\"nodes\":[\"01f14b086d7f8a11\",\"877b43edd7251acc\",\"17fde0242e191689\",\"7eee677cb9a62723\",\"d0621a8f51f507bb\",\"f012975f0375b6c8\",\"cb80cc034da2d8f1\",\"736993a690bbc167\",\"0df7b796d44d2e71\",\"d121c8e3e56c4747\",\"9eb1553c08864316\",\"0368db6d7d446339\",\"f12f44c1b6da7192\",\"41fd7d11ae3c157d\",\"5ac8daccaea4a291\",\"89bf36d6fc8d1d41\",\"e4f674b5eb32aa05\",\"7011f3686a81d7eb\",\"c0abb8e9c5a1262c\",\"9cf758cd9a3eda81\",\"3c2b5cb8448dbb64\"],\"x\":24,\"y\":83,\"w\":692,\"h\":302},{\"id\":\"31c2d342f75d0ef8\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"Extended version of the \\\"blank\\\" template showing some additional features. \\\\n \",\"style\":{\"label\":true,\"fill\":\"#ffffbf\",\"fill-opacity\":\"0.31\",\"color\":\"#000000\"},\"nodes\":[\"d0b6170b92cd6064\",\"9a4f424c76119444\",\"2cb6722e802cf5f1\",\"5003addd448138c2\",\"ba221f812ae3d84c\",\"4020b64008bfdad5\",\"be06a0df26c00462\",\"f95e69f67072596b\",\"5d1231ce8247b08a\",\"1b7e4c189916dbec\",\"05cb4b03058fc6f8\",\"71fa902dccb4cb5a\"],\"x\":24,\"y\":463,\"w\":652,\"h\":258},{\"id\":\"40dcfdd7e47f8573\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"Extended version of simple template using the ES Module version of the client \\\\n \",\"style\":{\"fill\":\"#ffffbf\",\"fill-opacity\":\"0.32\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"d12df878ac1b5714\",\"b921d7d1a7e06035\",\"8ca1a701441a31fa\",\"598ecb0adfa8fc5a\",\"599391803941e233\",\"958c94c7f03a6624\",\"5a3c5e4b8751fea2\",\"863c33dc4dab0216\",\"6e760e4d72cb74a7\",\"0ce0de04fb70fda9\",\"ca0007816b9f4419\",\"b28745cf103fce72\"],\"x\":34,\"y\":763,\"w\":643,\"h\":258},{\"id\":\"ae89de23bbb814c1\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"uibuilder IIFE client in conjunction with Svelte\",\"style\":{\"fill\":\"#bfc7d7\",\"fill-opacity\":\"0.31\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"ec93b864b4127859\",\"ab686ecd6ae447e3\",\"1e26ba1f939b35a4\",\"a9e607e92e5e2c93\",\"53f930dee4d661c0\",\"a75bacf5b8e676fb\",\"c6965c37441712a2\",\"28cb6bf6fb33f77c\",\"1813ac9ca8eeb177\",\"85733cc425b92915\",\"f0c89ce59299d66c\",\"43b416daeed4d5cb\",\"6b8fde3712999f7e\"],\"x\":34,\"y\":1079,\"w\":652,\"h\":448},{\"id\":\"43b416daeed4d5cb\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"Add\u002Fremove dynamic list\",\"style\":{\"label\":true,\"fill\":\"#ffffff\",\"fill-opacity\":\"0.5\",\"color\":\"#777777\"},\"nodes\":[\"7580041a7e962524\",\"d2c23f660fba67cf\",\"bc0a93a1ec21c077\"],\"x\":74,\"y\":1379,\"w\":492,\"h\":122,\"info\":\"Demonstrates that uibuilder's dynamic ui\\r\\nfeatures work with Svelte.\"},{\"id\":\"cb13651b4e3aee58\",\"type\":\"group\",\"z\":\"a29cf0664c167293\",\"name\":\"Old \\\"Blank\\\" template using uibuilderfe client - should no longer be used - kept for reference \\\\n \",\"style\":{\"fill\":\"#ffbfbf\",\"fill-opacity\":\"0.26\",\"label\":true,\"color\":\"#000000\"},\"nodes\":[\"ddb950ebb37ff3e5\",\"ca085978f7a1d622\",\"7b2410170a094534\",\"cfd5eba13fe03d51\",\"6238dd35c69f44f6\",\"c458491d5a2fb1e2\",\"398b84708d487dad\",\"e03509eff4a1c892\"],\"x\":34,\"y\":2223,\"w\":642,\"h\":178},{\"id\":\"0368db6d7d446339\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"x\":390,\"y\":200,\"wires\":[[\"877b43edd7251acc\"]]},{\"id\":\"d48166077d1f76af\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"x\":410,\"y\":1960,\"wires\":[[\"909a45a07adf4caf\"]]},{\"id\":\"05cb4b03058fc6f8\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"x\":330,\"y\":580,\"wires\":[[\"d0b6170b92cd6064\"]]},{\"id\":\"e03509eff4a1c892\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"x\":340,\"y\":2320,\"wires\":[[\"ddb950ebb37ff3e5\"]]},{\"id\":\"ca0007816b9f4419\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"x\":340,\"y\":880,\"wires\":[[\"d12df878ac1b5714\"]]},{\"id\":\"7ee9528a1b19eb12\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"x\":420,\"y\":1680,\"wires\":[[\"4b0be73d7c1879b9\"]]},{\"id\":\"81bf7609272ef9af\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"x\":340,\"y\":1620,\"wires\":[[\"7ee9528a1b19eb12\"]]},{\"id\":\"c1d0beb7a8dcf573\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"x\":340,\"y\":1740,\"wires\":[[\"7ee9528a1b19eb12\"]]},{\"id\":\"1b6a3d16ed9f9995\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"x\":340,\"y\":1700,\"wires\":[[\"7ee9528a1b19eb12\"]]},{\"id\":\"3e569dd871349f93\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"x\":350,\"y\":2020,\"wires\":[[\"d48166077d1f76af\"]]},{\"id\":\"dd004a6a442ee6a8\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"x\":350,\"y\":1980,\"wires\":[[\"d48166077d1f76af\"]]},{\"id\":\"079a6828b01e3ca4\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"x\":1160,\"y\":1680,\"wires\":[[\"9df22ce79ef39e07\"]]},{\"id\":\"168b498f7d93b9ca\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"x\":1080,\"y\":1620,\"wires\":[[\"079a6828b01e3ca4\"]]},{\"id\":\"35591e8d08b9a8dc\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"x\":1080,\"y\":1740,\"wires\":[[\"079a6828b01e3ca4\"]]},{\"id\":\"949ddd795829e86e\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"x\":1080,\"y\":1700,\"wires\":[[\"079a6828b01e3ca4\"]]},{\"id\":\"f0c89ce59299d66c\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"x\":360,\"y\":1240,\"wires\":[[\"ab686ecd6ae447e3\"]]},{\"id\":\"d66f87eca883848e\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"x\":1160,\"y\":1960,\"wires\":[[\"31310a6648a194ce\"]]},{\"id\":\"619d338c7eba7669\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"x\":1090,\"y\":2020,\"wires\":[[\"d66f87eca883848e\"]]},{\"id\":\"7ce2b59950e22ecb\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"x\":1090,\"y\":1980,\"wires\":[[\"d66f87eca883848e\"]]},{\"id\":\"f12f44c1b6da7192\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"x\":330,\"y\":260,\"wires\":[[\"0368db6d7d446339\"]]},{\"id\":\"3c2b5cb8448dbb64\",\"type\":\"junction\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"x\":610,\"y\":260,\"wires\":[[\"7011f3686a81d7eb\"]]},{\"id\":\"d0b6170b92cd6064\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"\",\"topic\":\"\",\"url\":\"iife\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"iife-blank-client\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":400,\"y\":580,\"wires\":[[\"f95e69f67072596b\"],[\"5d1231ce8247b08a\"]],\"info\":\"This example uses a minimal template with\\r\\nthe IIFE build of the front-end client.\\r\\n\\r\\nIt does not use any front-end framework, just\\r\\npure HTML, CSS and JavaScript.\\r\\n\\r\\nThe IIFE build should be included using a link\\r\\ntag in your HTML.\"},{\"id\":\"d12df878ac1b5714\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"\",\"topic\":\"\",\"url\":\"esm\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"esm-blank-client\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":410,\"y\":880,\"wires\":[[\"863c33dc4dab0216\"],[\"6e760e4d72cb74a7\"]],\"info\":\"This example uses a blank template with\\r\\nthe ESM build of the front-end client.\\r\\n\\r\\nIt does not use any front-end framework, just\\r\\npure HTML, CSS and JavaScript.\\r\\n\\r\\nThe ESM build should be included using an\\r\\n`import` statement in your `index.js` file.\\r\\n\\r\\nESM = ECMA Script Module.\"},{\"id\":\"01f14b086d7f8a11\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"payload\":\"This is \\u003cb\\u003eHTML\\u003c\u002Fb\\u003e from Node-RED\",\"payloadType\":\"str\",\"x\":85,\"y\":220,\"wires\":[[\"9eb1553c08864316\"]],\"l\":false},{\"id\":\"877b43edd7251acc\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"\",\"topic\":\"\",\"url\":\"blank\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"blank\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":470,\"y\":200,\"wires\":[[\"17fde0242e191689\"],[\"7eee677cb9a62723\"]],\"info\":\"This example uses the default blank template.\\r\\n\\r\\nIt does not use any front-end framework, just\\r\\npure HTML, CSS and JavaScript.\"},{\"id\":\"17fde0242e191689\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":655,\"y\":160,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"7eee677cb9a62723\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":655,\"y\":220,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"d0621a8f51f507bb\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":460,\"y\":260,\"wires\":[[\"3c2b5cb8448dbb64\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"f012975f0375b6c8\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":85,\"y\":140,\"wires\":[[\"cb80cc034da2d8f1\"]],\"l\":false},{\"id\":\"cb80cc034da2d8f1\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":200,\"y\":140,\"wires\":[[\"0368db6d7d446339\"]],\"info\":\"Overlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"ddb950ebb37ff3e5\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"\",\"topic\":\"\",\"url\":\"blank-old\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"old-blank-client\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":430,\"y\":2320,\"wires\":[[\"6238dd35c69f44f6\"],[\"c458491d5a2fb1e2\"]]},{\"id\":\"909a45a07adf4caf\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"\",\"topic\":\"\",\"url\":\"IIFE-vue3-nobuild\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"iife-vue3-nobuild\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":530,\"y\":1960,\"wires\":[[\"caf50be69279b624\"],[\"92f0587559df7590\"]],\"info\":\"This example uses a Vue v3 simple template with\\r\\nthe IIFE build of the front-end client.\\r\\n\\r\\nNo build step is needed to make this work,\\r\\nthe Vue library is included from a CDN on the\\r\\nInternet.\\r\\n\\r\\n\\r\\n## LIMITATIONS\\r\\n\\r\\nVue and similar front-end frameworks require UI\\r\\ncomponents and structure to be pre-defined \\r\\n_before_ the DOM is created. So you cannot \\r\\ndynamically insert further Vue elements easily.\\r\\n\\r\\nYou can still dynamically insert HTML elements.\\r\\nBut they will not be responsive Vue elements.\"},{\"id\":\"736993a690bbc167\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":85,\"y\":180,\"wires\":[[\"0df7b796d44d2e71\"]],\"l\":false},{\"id\":\"0df7b796d44d2e71\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"New Card\",\"func\":\"\u002F**\\n * Adds a dynamically created \\\"card\\\" to the web page\\n * using uibuilder's low-code capabilities.\\n * Try sending multiple times to see the counter increment.\\n *\u002F\\n\\nlet cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":190,\"y\":180,\"wires\":[[\"0368db6d7d446339\"]],\"info\":\"Inserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"d121c8e3e56c4747\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Chk Description in each node\",\"info\":\"This is the \\\"Blank\\\" template. \\nIt really is blank other than an H1\\nheading and the usual style \\u0026 script.\\n\\nIt is ready to be used for anything including\\nuibuilder's zero-code and low-code\\ncapabilities.\",\"x\":490,\"y\":140,\"wires\":[]},{\"id\":\"6c14431f469b8846\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"msg-from-nr\",\"payload\":\"A Message From Node-RED\",\"payloadType\":\"str\",\"x\":150,\"y\":1980,\"wires\":[[\"dd004a6a442ee6a8\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"e47195b8eda5d40e\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":130,\"y\":2020,\"wires\":[[\"3e569dd871349f93\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"0c9f24ab06ee0405\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":95,\"y\":1900,\"wires\":[[\"89ae80c659089985\"]],\"l\":false},{\"id\":\"89ae80c659089985\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"Notification (not Vue)\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":240,\"y\":1900,\"wires\":[[\"d48166077d1f76af\"]],\"info\":\"**NOTE:** This uses uibuilder's vanilla HTML overlay notification\\r\\n(as in the non-Vue examples). **It is NOT Vue responsive**.\\r\\n\\r\\n---\\r\\n\\r\\nOverlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"9a4f424c76119444\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":140,\"y\":600,\"wires\":[[\"05cb4b03058fc6f8\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"2cb6722e802cf5f1\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":120,\"y\":640,\"wires\":[[\"05cb4b03058fc6f8\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"5003addd448138c2\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":85,\"y\":520,\"wires\":[[\"ba221f812ae3d84c\"]],\"l\":false},{\"id\":\"ba221f812ae3d84c\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":200,\"y\":520,\"wires\":[[\"05cb4b03058fc6f8\"]],\"info\":\"Overlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"4020b64008bfdad5\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":85,\"y\":560,\"wires\":[[\"be06a0df26c00462\"]],\"l\":false},{\"id\":\"be06a0df26c00462\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"New Card\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":190,\"y\":560,\"wires\":[[\"05cb4b03058fc6f8\"]],\"info\":\"Inserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"ca085978f7a1d622\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":150,\"y\":2340,\"wires\":[[\"e03509eff4a1c892\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"7b2410170a094534\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":95,\"y\":2300,\"wires\":[[\"cfd5eba13fe03d51\"]],\"l\":false},{\"id\":\"cfd5eba13fe03d51\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":210,\"y\":2300,\"wires\":[[\"e03509eff4a1c892\"]],\"info\":\"Overlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"b921d7d1a7e06035\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":150,\"y\":900,\"wires\":[[\"ca0007816b9f4419\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"8ca1a701441a31fa\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":130,\"y\":940,\"wires\":[[\"ca0007816b9f4419\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"598ecb0adfa8fc5a\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":95,\"y\":820,\"wires\":[[\"599391803941e233\"]],\"l\":false},{\"id\":\"599391803941e233\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":210,\"y\":820,\"wires\":[[\"ca0007816b9f4419\"]],\"info\":\"Overlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"958c94c7f03a6624\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":95,\"y\":860,\"wires\":[[\"5a3c5e4b8751fea2\"]],\"l\":false},{\"id\":\"5a3c5e4b8751fea2\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"New Card\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":200,\"y\":860,\"wires\":[[\"ca0007816b9f4419\"]],\"info\":\"Inserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"f95e69f67072596b\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":615,\"y\":540,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"5d1231ce8247b08a\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":615,\"y\":600,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"caf50be69279b624\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":695,\"y\":1920,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"92f0587559df7590\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":695,\"y\":1980,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"6238dd35c69f44f6\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":615,\"y\":2300,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"c458491d5a2fb1e2\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":615,\"y\":2360,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"863c33dc4dab0216\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":615,\"y\":860,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"6e760e4d72cb74a7\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":616,\"y\":920,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"1b7e4c189916dbec\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":450,\"y\":520,\"wires\":[]},{\"id\":\"398b84708d487dad\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"cb13651b4e3aee58\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":460,\"y\":2280,\"wires\":[]},{\"id\":\"0ce0de04fb70fda9\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":460,\"y\":820,\"wires\":[]},{\"id\":\"284121dd33dcd50b\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":150,\"y\":1700,\"wires\":[[\"1b6a3d16ed9f9995\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"4b0be73d7c1879b9\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"\",\"topic\":\"\",\"url\":\"vuev2-bootstrap\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"vue2-bootstrap\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":530,\"y\":1680,\"wires\":[[\"6f8e51db50f117dd\"],[\"d7ce360f9e714a57\"]],\"info\":\"This example uses the VueJS v2 and \\r\\nbootstrap-vue template.\\r\\n\\r\\nYou must have both `Vue@2` and `bootstrap-vue`\\r\\nlibraries installed to use this template.\\r\\n\\r\\nThis used to be the default in some older\\r\\nversions of uibuilder before the native\\r\\nHTML versions started to mature.\\r\\n\\r\\nIt still provides a simple starting point\\r\\nfor anyone with minimal front-end design\\r\\nskills in HTML, CSS, and JavaScript. That is \\r\\nbecause, bootstrap-vue is a comprehensive \\r\\nframework complete with pre-configured look and\\r\\nfeel (using Bootstrap) along with plenty of \\r\\nhelper components that reduce the amount of \\r\\nHTML you have to write.\\r\\n\\r\\nThe template provides a page that looks\\r\\nOK with no further configuration. Simply add\\r\\nyour own UI code within the \\r\\n`\\u003cb-container id=\\\"app_container\\\"\\u003e` section.\\r\\n\\r\\nThe rest of the HTML in the template shows\\r\\nsome basic bootstrap-vue component examples\\r\\nsuch as forms and buttons along with cards.\\r\\n\\r\\n* https:\u002F\u002Fbootstrap-vue.org\u002F\\r\\n* https:\u002F\u002Fvuejs.org\u002F\\r\\n* https:\u002F\u002Fgetbootstrap.com\u002F\\r\\n\\r\\n## LIMITATIONS\\r\\n\\r\\nVue and similar front-end frameworks require UI\\r\\ncomponents and structure to be pre-defined \\r\\n_before_ the DOM is created. So you cannot \\r\\ndynamically insert further Vue elements easily.\\r\\n\\r\\nYou can still dynamically insert HTML elements.\\r\\nBut they will not be responsive Vue elements.\"},{\"id\":\"6f8e51db50f117dd\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":705,\"y\":1640,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"d7ce360f9e714a57\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":705,\"y\":1700,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"d32229867aa7e3c6\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":130,\"y\":1740,\"wires\":[[\"c1d0beb7a8dcf573\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"688f3cc99964f88d\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":95,\"y\":1620,\"wires\":[[\"802bd5f9321628ad\"]],\"l\":false},{\"id\":\"802bd5f9321628ad\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Check out the bootstrap-vue docs for details - Note that most if not all of these are optional\\n    \u002F\u002F https:\u002F\u002Fbootstrap-vue.org\u002Fdocs\u002Fcomponents\u002Ftoast\\n    \\\"options\\\": {\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n\\n      \u002F\u002F This is not part of the bootstrap-vue toast options - is used as the toast content.\\n      \u002F\u002F Note the inclusion of the payload from the upstram msg\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":210,\"y\":1620,\"wires\":[[\"81bf7609272ef9af\"]],\"info\":\"**NOTE:** This uses a bootstrap-vue _toast_ notification rather\\r\\nthan uibuilder's vanilla HTML overlay notification (as in the\\r\\nnon-Vue examples). If bootstrap-vue is not loaded, it will not\\r\\nshow anything.\\r\\n\\r\\n---\\r\\n\\r\\nOverlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\\r\\n\\r\\nNote the use of a workaround in the index.js file that lets\\r\\nthis work with VueJS and bootstrap-vue.\"},{\"id\":\"955997a9e7fb3c28\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":520,\"y\":1620,\"wires\":[]},{\"id\":\"a0976141d22bd12f\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":95,\"y\":1660,\"wires\":[[\"9a7af1b5ee3353ba\"]],\"l\":false},{\"id\":\"9a7af1b5ee3353ba\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"HTML insert (not Vue)\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":240,\"y\":1660,\"wires\":[[\"7ee9528a1b19eb12\"]],\"info\":\"**NOTE: ** This does NOT insert a bootstrap-vue card, only\\r\\nan HTML block element. So the result is NOT responsive to Vue.\\r\\nVue and similar front-end frameworks require UI components and\\r\\nstructure to be pre-defined _before_ the DOM is created. So you\\r\\ncannot dynamically insert further Vue elements.\\r\\n\\r\\n---\\r\\n\\r\\nInserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"c3bd76ce441dc3e3\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":95,\"y\":1940,\"wires\":[[\"3439dbee433a88a8\"]],\"l\":false},{\"id\":\"3439dbee433a88a8\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"HTML insert (not Vue)\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":240,\"y\":1940,\"wires\":[[\"d48166077d1f76af\"]],\"info\":\"**NOTE: ** This does NOT insert a bootstrap-vue card, only\\r\\nan HTML block element. So the result is NOT responsive to Vue.\\r\\nVue and similar front-end frameworks require UI components and\\r\\nstructure to be pre-defined _before_ the DOM is created. So you\\r\\ncannot dynamically insert further Vue elements.\\r\\n\\r\\n---\\r\\n\\r\\nInserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"ce9a12ba5070f920\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":510,\"y\":1900,\"wires\":[]},{\"id\":\"251344c859a9f066\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":890,\"y\":1700,\"wires\":[[\"949ddd795829e86e\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"9df22ce79ef39e07\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"\",\"topic\":\"\",\"url\":\"vuev2-simple\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"vue2-simple\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":1290,\"y\":1680,\"wires\":[[\"5028e29f49a5591f\"],[\"2a3a787b6520cef9\"]],\"info\":\"This example uses the VueJS v2 and \\r\\nbootstrap-vue template.\\r\\n\\r\\nYou must have both `Vue@2` and `bootstrap-vue`\\r\\nlibraries installed to use this template.\\r\\n\\r\\nThis is the simplest template for Vue v2 and\\r\\nbootstrap-vue.\\r\\n\\r\\nIt still provides a simple starting point\\r\\nfor anyone with minimal front-end design\\r\\nskills in HTML, CSS, and JavaScript. That is \\r\\nbecause, bootstrap-vue is a comprehensive \\r\\nframework complete with pre-configured look and\\r\\nfeel (using Bootstrap) along with plenty of \\r\\nhelper components that reduce the amount of \\r\\nHTML you have to write.\\r\\n\\r\\nThe template provides a page that looks\\r\\nOK with no further configuration. Simply add\\r\\nyour own UI code within the \\r\\n`\\u003cb-container id=\\\"app_container\\\"\\u003e` section.\\r\\n\\r\\nThe rest of the HTML in the template shows\\r\\nsome basic bootstrap-vue component examples\\r\\nsuch as forms and buttons along with cards.\\r\\n\\r\\n* https:\u002F\u002Fbootstrap-vue.org\u002F\\r\\n* https:\u002F\u002Fvuejs.org\u002F\\r\\n* https:\u002F\u002Fgetbootstrap.com\u002F\\r\\n\\r\\n## LIMITATIONS\\r\\n\\r\\nVue and similar front-end frameworks require UI\\r\\ncomponents and structure to be pre-defined \\r\\n_before_ the DOM is created. So you cannot \\r\\ndynamically insert further Vue elements easily.\\r\\n\\r\\nYou can still dynamically insert HTML elements.\\r\\nBut they will not be responsive Vue elements.\"},{\"id\":\"5028e29f49a5591f\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":1445,\"y\":1640,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"2a3a787b6520cef9\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":1445,\"y\":1700,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"5e40aeef2599e4e1\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":870,\"y\":1740,\"wires\":[[\"35591e8d08b9a8dc\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"d8c57c9cbfba6417\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":835,\"y\":1620,\"wires\":[[\"5f2a84a134a770d7\"]],\"l\":false},{\"id\":\"5f2a84a134a770d7\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Check out the bootstrap-vue docs for details - Note that most if not all of these are optional\\n    \u002F\u002F https:\u002F\u002Fbootstrap-vue.org\u002Fdocs\u002Fcomponents\u002Ftoast\\n    \\\"options\\\": {\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n\\n      \u002F\u002F This is not part of the bootstrap-vue toast options - is used as the toast content.\\n      \u002F\u002F Note the inclusion of the payload from the upstram msg\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":950,\"y\":1620,\"wires\":[[\"168b498f7d93b9ca\"]],\"info\":\"**NOTE:** This uses a bootstrap-vue _toast_ notification rather\\r\\nthan uibuilder's vanilla HTML overlay notification (as in the\\r\\nnon-Vue examples). If bootstrap-vue is not loaded, it will not\\r\\nshow anything.\\r\\n\\r\\n---\\r\\n\\r\\nOverlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\\r\\n\\r\\nNote the use of a workaround in the index.js file that lets\\r\\nthis work with VueJS and bootstrap-vue.\"},{\"id\":\"c90fa14f3bcd1b5a\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":1260,\"y\":1620,\"wires\":[]},{\"id\":\"04b7fe83187b26ed\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":835,\"y\":1660,\"wires\":[[\"c8177e230bf224db\"]],\"l\":false},{\"id\":\"c8177e230bf224db\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"HTML insert (not Vue)\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":980,\"y\":1660,\"wires\":[[\"079a6828b01e3ca4\"]],\"info\":\"**NOTE: ** This does NOT insert a bootstrap-vue card, only\\r\\nan HTML block element. So the result is NOT responsive to Vue.\\r\\nVue and similar front-end frameworks require UI components and\\r\\nstructure to be pre-defined _before_ the DOM is created. So you\\r\\ncannot dynamically insert further Vue elements.\\r\\n\\r\\n---\\r\\n\\r\\nInserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"ec93b864b4127859\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"Send a greeting\",\"props\":[{\"p\":\"greeting\",\"v\":\"Hi from Node-RED 😁🚀🎆😎\",\"vt\":\"str\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"A Message From Node-RED\",\"x\":160,\"y\":1260,\"wires\":[[\"f0c89ce59299d66c\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"ab686ecd6ae447e3\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"\",\"topic\":\"\",\"url\":\"svelte-template\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"svelte-basic\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"dist\",\"deployedVersion\":\"6.1.0\",\"showMsgUib\":true,\"x\":470,\"y\":1240,\"wires\":[[\"1e26ba1f939b35a4\"],[\"a9e607e92e5e2c93\"]],\"info\":\"This example uses the default blank template.\\r\\n\\r\\nIt does not use any front-end framework, just\\r\\npure HTML, CSS and JavaScript.\"},{\"id\":\"1e26ba1f939b35a4\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":625,\"y\":1200,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"a9e607e92e5e2c93\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":625,\"y\":1260,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"53f930dee4d661c0\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":130,\"y\":1300,\"wires\":[[\"f0c89ce59299d66c\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"a75bacf5b8e676fb\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":95,\"y\":1180,\"wires\":[[\"c6965c37441712a2\"]],\"l\":false},{\"id\":\"c6965c37441712a2\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"Notification\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \u002F\u002F \\\"autoHideDelay\\\": 2500,\\n      \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":210,\"y\":1180,\"wires\":[[\"f0c89ce59299d66c\"]],\"info\":\"Overlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"28cb6bf6fb33f77c\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":95,\"y\":1220,\"wires\":[[\"1813ac9ca8eeb177\"]],\"l\":false},{\"id\":\"1813ac9ca8eeb177\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"New Card\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":200,\"y\":1220,\"wires\":[[\"f0c89ce59299d66c\"]],\"info\":\"Inserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"85733cc425b92915\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"Simple Svelte Example. Chk Description in each node. Read me too\",\"info\":\"This example will work once you have set and\\ndeployed the URL. However, if you want to make\\nany changes to the front-end code, Svelte \\nrequires you to _rebuild_ the destination\\noutput.\\n\\n## Preparing\\n1. Go to the server command line and navigate\\nto the folder containing this example instance.\\n2. In the instance root folder, run\\n`npm install`. This will install all of the\\nrequired development tools.\\n3. Now run `npm run dev`. This starts a live\\ndevelopment server and it gives you a URL.\\n**IGNORE** the URL it gives you, because you\\nare using Node-RED and uibuilder, you don't\\nneed it 😎. Instead, you will now find that\\nyour web page will automatically reload \\nwhenever you save a change.\\n\\n## Making changes\\nMost of the changes you will make will be to\\nfiles in the `src` folder. However, if you\\nneed to change the global CSS or the outer\\nHTML template, these are in the root of the \\n`dist` folder. Do not change anything in \\n`dist\u002Fbuild` as this is overwritten by the \\nSvelte build process.\\n\\n## Deploying\\nOnce you have finished making changes, kill\\nthe dev server then run `npm run build`.\\n\\nThat creates the final version of the code in\\nthe dist folder.\\n\\nRemember: You are running your live pages from\\nthe `dist` folder not the `src` folder.\",\"x\":300,\"y\":1120,\"wires\":[]},{\"id\":\"6eba307faa3c48e2\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"\",\"props\":[],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":835,\"y\":1940,\"wires\":[[\"3ff7fd7992d48c25\"]],\"l\":false},{\"id\":\"3ff7fd7992d48c25\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"HTML insert (not Vue)\",\"func\":\"let cardCounter = context.get('cardCounter') ?? 0\\n\\nmsg = {\\n    \\\"_ui\\\": [\\n        {\\n            \\\"method\\\": \\\"remove\\\",\\n            \\\"components\\\": [\\n                \\\"#mycard\\\"\\n            ]\\n        },\\n        {\\n            \\\"method\\\": \\\"add\\\",\\n            \\\"parent\\\": \\\"#more\\\",\\n            \\\"components\\\": [\\n                {\\n                    \\\"type\\\": \\\"div\\\",\\n                    \\\"attributes\\\": {\\n                        \\\"id\\\": \\\"mycard\\\",\\n                        \\\"title\\\": \\\"This is my Card\\\",\\n                        \\\"style\\\": \\\"max-width: 20rem;border:solid silver 1px;margin-bottom:1rem;\\\",\\n                    },\\n                    \\\"components\\\": [\\n                        {\\n                            \\\"type\\\": \\\"h2\\\",\\n                            \\\"slot\\\": \\\"A New Card\\\",\\n                            \\\"attributes\\\": {\\n                                \\\"class\\\": \\\"complementary\\\",\\n                                \\\"style\\\": \\\"text-align:center;margin-top:0;\\\"\\n                            }\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Some text in a paragraph.\\\"\\n                        },\\n                        {\\n                            \\\"type\\\": \\\"p\\\",\\n                            \\\"slot\\\": \\\"Another paragraph. Count: \\\" + ++cardCounter\\n                        }\\n                    ]\\n                }\\n            ],\\n        }\\n    ]\\n}\\ncontext.set('cardCounter', cardCounter)\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":980,\"y\":1940,\"wires\":[[\"d66f87eca883848e\"]],\"info\":\"**NOTE: ** This does NOT insert a bootstrap-vue card, only\\r\\nan HTML block element. So the result is NOT responsive to Vue.\\r\\nVue and similar front-end frameworks require UI components and\\r\\nstructure to be pre-defined _before_ the DOM is created. So you\\r\\ncannot dynamically insert further Vue elements.\\r\\n\\r\\n---\\r\\n\\r\\nInserts a pure HTML \\\"card\\\" into a div called `#more`.\\r\\nIf that div does not exist, will add to the bottom of the HTML.\\r\\n\\r\\nFirstly attempts to remove the div so that you only ever have 1.\\r\\n\\r\\nAn example of using uibuilder's dynamic UI configuration-driven\\r\\nbuilding capabilities without the need for any fancy nodes or\\r\\nframeworks. Pure HTML. But you can still utilise the extra\\r\\nfeatures of your favourite framework too if you like!\"},{\"id\":\"f8f90bfd46b1f53e\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"Send a msg\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"msg-from-nr\",\"payload\":\"A Message From Node-RED\",\"payloadType\":\"str\",\"x\":890,\"y\":1980,\"wires\":[[\"7ce2b59950e22ecb\"]],\"info\":\"Send a simply msg to the front-end.\\r\\n\\r\\nThe default front-end template code will display the msg\\r\\nusing HTML formatting, no coding required.\"},{\"id\":\"e340bdc745361401\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"Reload\",\"props\":[{\"p\":\"_ui\",\"v\":\"{\\\"method\\\":\\\"reload\\\"}\",\"vt\":\"json\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"reload\",\"x\":870,\"y\":2020,\"wires\":[[\"619d338c7eba7669\"]],\"info\":\"Sends a pre-formatted msg to the front-end that\\r\\ncauses the page to reload itself.\"},{\"id\":\"fb79d887323f47c1\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"\",\"props\":[{\"p\":\"payload\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"payload\":\"\\\"This is the payload from the inject node! Random number: \\\" \\u0026 $formatInteger($random()*100, \\\"0\\\")\",\"payloadType\":\"jsonata\",\"x\":835,\"y\":1900,\"wires\":[[\"169c10878b6640e4\"]],\"l\":false},{\"id\":\"169c10878b6640e4\",\"type\":\"function\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"Notification (not Vue)\",\"func\":\"msg = {\\n  \\\"_uib\\\": {\\n    \u002F\u002F This can actually be anything, if it doesn't exist, \\n    \u002F\u002F the toast will appear in the default location\\n    \\\"componentRef\\\": \\\"globalNotification\\\",\\n    \u002F\u002F Note that most if not all of these are optional\\n    \\\"options\\\": {\\n      \u002F\u002F These can contain HTML - note the inclusion of the payload from the upstram msg\\n      \\\"title\\\": \\\"This is the \\u003ci\\u003etitle\\u003c\u002Fi\\u003e\\\",\\n      \\\"content\\\": `This is content \\u003cspan style=\\\\\\\"color:red;\\\\\\\"\\u003ein addition to\\u003c\u002Fspan\\u003e the payload\\u003cp\\u003e${msg.payload}\\u003c\u002Fp\\u003e`,\\n            \\n      \u002F\u002F Use 1 of the following 2 - click msg if no auto hide:\\n      \\\"autoHideDelay\\\": 2500,\\n      \u002F\u002F \\\"noAutoHide\\\": true,\\n\\n      \u002F\u002F If false or not included, msgs stack above each other.\\n      \\\"appendToast\\\": true,\\n\\n      \u002F\u002F See \\\"Recommended surfaces\\\" in uib-brand.css. Normally\\n      \u002F\u002F 'primary', 'secondary', 'success', 'info', 'warn', 'warning', 'failure', 'error', 'danger'\\n      \\\"variant\\\": \\\"info\\\",\\n    }\\n  }\\n}\\nreturn msg;\",\"outputs\":1,\"noerr\":0,\"initialize\":\"\",\"finalize\":\"\",\"libs\":[],\"x\":980,\"y\":1900,\"wires\":[[\"d66f87eca883848e\"]],\"info\":\"**NOTE:** This uses uibuilder's vanilla HTML overlay notification\\r\\n(as in the non-Vue examples). **It is NOT Vue responsive**.\\r\\n\\r\\n---\\r\\n\\r\\nOverlays a message on top of your UI.\\r\\n\\r\\nThe message removes itself after a couple of seconds.\\r\\n\\r\\nYou can change the options property to change the look\\r\\nof the displayed message.\"},{\"id\":\"97f0c2ea900e3055\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"uibuilder standard output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":1435,\"y\":1920,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #1 (top) which is\\r\\nthe standard output.\\r\\n\\r\\nHere you will see any standard msg sent from\\r\\nyour front-end code.\"},{\"id\":\"8db08ddd2a866fb5\",\"type\":\"debug\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"uibuilder control output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":1435,\"y\":1980,\"wires\":[],\"l\":false,\"info\":\"This shows the data coming out of the\\r\\nuibuilder node's Port #2 (bottom) which is\\r\\nthe control output.\\r\\n\\r\\nHere you will see any control msg either sent\\r\\nby the node itself or from the front-end library.\\r\\n\\r\\nFor example the \\\"client disconnect\\\" and\\r\\n\\\"client connect\\\" messages. Or the \\\"visibility\\\"\\r\\nmessages from the client.\\r\\n\\r\\nLoop the \\\"client connect\\\", \\\"cache replay\\\" and\\r\\n\\\"cache clear\\\" messages back to a `uib-cache`\\r\\nnode before the input to uibuilder in order\\r\\nto control the output of the cache.\"},{\"id\":\"b9a054a3ff5f393d\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"Chk Description in each node\",\"info\":\"\",\"x\":1250,\"y\":1900,\"wires\":[]},{\"id\":\"7580041a7e962524\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"43b416daeed4d5cb\",\"name\":\"Plain DL List (Array)\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"auto-create-dl-list\",\"payload\":\"[[\\\"Entry One\\\",\\\"Description One\\\"],[\\\"Entry Two\\\",\\\"Description Two a\\\",\\\"Description Two b\\\",\\\"Description Two c\\\"],[\\\"Entry Three\\\",\\\"Description Three\\\"],[\\\"Entry Four\\\",\\\"Description Four\\\"]]\",\"payloadType\":\"json\",\"x\":210,\"y\":1420,\"wires\":[[\"d2c23f660fba67cf\"]]},{\"id\":\"d2c23f660fba67cf\",\"type\":\"uib-element\",\"z\":\"a29cf0664c167293\",\"g\":\"43b416daeed4d5cb\",\"name\":\"\",\"topic\":\"eltest-dl\",\"elementtype\":\"dl\",\"parent\":\"#more\",\"parentSource\":\"#more\",\"parentSourceType\":\"str\",\"elementid\":\"eltest-dl\",\"elementIdSourceType\":\"str\",\"heading\":\"My DL Heading (h3)\",\"headingSourceType\":\"str\",\"headingLevel\":\"h3\",\"position\":\"last\",\"positionSourceType\":\"str\",\"confData\":{},\"x\":450,\"y\":1420,\"wires\":[[\"f0c89ce59299d66c\"]]},{\"id\":\"9eb1553c08864316\",\"type\":\"uib-update\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"\",\"topic\":\"\",\"mode\":\"update\",\"modeSourceType\":\"update\",\"cssSelector\":\"#more\",\"cssSelectorType\":\"str\",\"slotSourceProp\":\"payload\",\"slotSourcePropType\":\"msg\",\"attribsSource\":\"{\\\"style\\\": \\\"border: 1px solid silver;\\\"}\",\"attribsSourceType\":\"json\",\"slotPropMarkdown\":false,\"x\":210,\"y\":220,\"wires\":[[\"0368db6d7d446339\"]]},{\"id\":\"85bc1fad31a0dae8\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"name\":\"A set of flows that show off and test each of uibuilder's built-in templates and other features\",\"info\":\"\",\"x\":340,\"y\":40,\"wires\":[]},{\"id\":\"bc0a93a1ec21c077\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"43b416daeed4d5cb\",\"name\":\"Remove\",\"props\":[{\"p\":\"mode\",\"v\":\"remove\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":240,\"y\":1460,\"wires\":[[\"d2c23f660fba67cf\"]]},{\"id\":\"41fd7d11ae3c157d\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":160,\"y\":300,\"wires\":[[\"f12f44c1b6da7192\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"5ac8daccaea4a291\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Toggle Visible Status\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showStatus\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":160,\"y\":340,\"wires\":[[\"f12f44c1b6da7192\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"89bf36d6fc8d1d41\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Log Lvl 5\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"logLevel\\\",\\\"value\\\":5}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":470,\"y\":300,\"wires\":[[\"7011f3686a81d7eb\"]]},{\"id\":\"e4f674b5eb32aa05\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"Log Lvl 0\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"set\\\",\\\"prop\\\":\\\"logLevel\\\",\\\"value\\\":0}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":470,\"y\":340,\"wires\":[[\"7011f3686a81d7eb\"]]},{\"id\":\"7011f3686a81d7eb\",\"type\":\"link out\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"link out 31\",\"mode\":\"link\",\"links\":[\"c0abb8e9c5a1262c\"],\"x\":655,\"y\":280,\"wires\":[]},{\"id\":\"c0abb8e9c5a1262c\",\"type\":\"link in\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"link in 9\",\"links\":[\"7011f3686a81d7eb\"],\"x\":235,\"y\":260,\"wires\":[[\"f12f44c1b6da7192\"]]},{\"id\":\"9cf758cd9a3eda81\",\"type\":\"comment\",\"z\":\"a29cf0664c167293\",\"g\":\"d14e5cf8cd61d8f5\",\"name\":\"See \\\\n browser \\\\n console\",\"info\":\"\",\"x\":560,\"y\":320,\"wires\":[]},{\"id\":\"71fa902dccb4cb5a\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"31c2d342f75d0ef8\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":160,\"y\":680,\"wires\":[[\"05cb4b03058fc6f8\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"b28745cf103fce72\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"40dcfdd7e47f8573\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":170,\"y\":980,\"wires\":[[\"ca0007816b9f4419\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"6b8fde3712999f7e\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"ae89de23bbb814c1\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"body\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":170,\"y\":1340,\"wires\":[[\"f0c89ce59299d66c\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"2a6997fca56f2de1\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"1f80e4a191d5322a\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"#app_container\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":910,\"y\":1780,\"wires\":[[\"35591e8d08b9a8dc\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"5d26dd3c341a40b3\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"d7ec253e417f16b6\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"#app_container\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":170,\"y\":1780,\"wires\":[[\"c1d0beb7a8dcf573\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"c969ddb33e099a82\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"fc8f1db4547ef664\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"#app\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":170,\"y\":2060,\"wires\":[[\"3e569dd871349f93\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"29bf34be48a50467\",\"type\":\"inject\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"Toggle Visible Msgs\",\"props\":[{\"p\":\"_uib\",\"v\":\"{\\\"command\\\":\\\"showMsg\\\",\\\"prop\\\":\\\"#app\\\"}\",\"vt\":\"json\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"\",\"x\":910,\"y\":2060,\"wires\":[[\"619d338c7eba7669\"]],\"info\":\"Change the \\\"prop\\\" value to a CSS Selector.\\r\\n\\r\\nThe display will appear as the last child of\\r\\nthat selected element.\\r\\n\\r\\ne.g. `body` or `#more`.\"},{\"id\":\"31310a6648a194ce\",\"type\":\"uibuilder\",\"z\":\"a29cf0664c167293\",\"g\":\"946ef719ea12bc08\",\"name\":\"\",\"topic\":\"\",\"url\":\"esm-vue3-nobuild\",\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"esm-vue3-nobuild\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":false,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.1.0-beta\",\"showMsgUib\":false,\"x\":1280,\"y\":1960,\"wires\":[[\"97f0c2ea900e3055\"],[\"8db08ddd2a866fb5\"]]}]",{"name":160,"path":161,"url":162,"downloadUrl":163,"flow":164},"basic-uib","examples\u002Fbasic-uib.json","https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmain\u002Fexamples\u002Fbasic-uib.json","https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmain\u002Fexamples\u002Fbasic-uib.json","[{\"id\":\"2305299d982b77b1\",\"type\":\"inject\",\"z\":\"b2f18a716bd20f99\",\"name\":\"\",\"props\":[{\"p\":\"payload\"},{\"p\":\"topic\",\"vt\":\"str\"}],\"repeat\":\"\",\"crontab\":\"\",\"once\":false,\"onceDelay\":0.1,\"topic\":\"uib\",\"payload\":\"\",\"payloadType\":\"date\",\"x\":515,\"y\":920,\"wires\":[[\"8f3dd60e03fdf577\"]],\"l\":false},{\"id\":\"8f3dd60e03fdf577\",\"type\":\"uibuilder\",\"z\":\"b2f18a716bd20f99\",\"name\":\"\",\"topic\":\"\",\"okToGo\":false,\"fwdInMessages\":false,\"allowScripts\":false,\"allowStyles\":false,\"copyIndex\":true,\"templateFolder\":\"blank\",\"extTemplate\":\"\",\"showfolder\":false,\"reload\":true,\"sourceFolder\":\"src\",\"deployedVersion\":\"6.2.0-dev\",\"showMsgUib\":true,\"x\":630,\"y\":920,\"wires\":[[\"b1fd8419bef3fbe5\"],[\"6e22fd946cdf8088\"]]},{\"id\":\"b1fd8419bef3fbe5\",\"type\":\"debug\",\"z\":\"b2f18a716bd20f99\",\"name\":\"Std output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":745,\"y\":880,\"wires\":[],\"l\":false},{\"id\":\"6e22fd946cdf8088\",\"type\":\"debug\",\"z\":\"b2f18a716bd20f99\",\"name\":\"Ctrl output\",\"active\":true,\"tosidebar\":true,\"console\":false,\"tostatus\":true,\"complete\":\"true\",\"targetType\":\"full\",\"statusVal\":\"\",\"statusType\":\"counter\",\"x\":745,\"y\":960,\"wires\":[],\"l\":false},{\"id\":\"dc9ff4a730138964\",\"type\":\"global-config\",\"env\":[],\"modules\":{\"node-red-contrib-uibuilder\":\"7.5.0\"}}]","\u003Cp>\u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Ftag\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fstatic\u002Fv1.svg?label=Discussion&message=Node-RED%20Forum&color=green\" alt=\"Discussion\" title=\"The main place to discuss UIBUILDER\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FUIBUILDER_Homepage-0d85d7\" alt=\"Documentation\" title=\"The main documentation\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fdeepwiki.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fdeepwiki.com\u002Fbadge.svg\" alt=\"Ask DeepWiki\" title=\"Learn more about UIBUILDER for Node-RED via the DeepWiki AI\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002FTotallyInformation\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTotally_Information-0d85d7?logo=githubsponsors&label=Sponsor&labelColor=fff\" alt=\"Sponsor\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fnode-red-contrib-uibuilder.svg\" alt=\"NPM Version\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fnode-red-contrib-uibuilder.svg\" alt=\"NPM Total Downloads\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Fnode-red-contrib-uibuilder.svg\" alt=\"NPM Downloads per month\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flast-commit\u002Ftotallyinformation\u002Fnode-red-contrib-uibuilder.svg\" alt=\"GitHub last commit\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fwatchers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder.svg\" alt=\"GitHub stars\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fstargazers\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fwatchers\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder.svg\" alt=\"GitHub watchers\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmaster\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder.svg\" alt=\"GitHub license\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnode-red-contrib-uibuilder\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnode\u002Fv\u002Fnode-red-contrib-uibuilder.svg\" alt=\"Min Node Version\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"http:\u002F\u002Fpackagequality.com\u002F#?package=node-red-contrib-uibuilder\">\u003Cimg src=\"http:\u002F\u002Fnpm.packagequality.com\u002Fshield\u002Fnode-red-contrib-uibuilder.png\" alt=\"Package Quality\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fdeepscan.io\u002Fdashboard#view=project&tid=13157&pid=16160&bid=340901\">\u003Cimg src=\"https:\u002F\u002Fdeepscan.io\u002Fapi\u002Fteams\u002F13157\u002Fprojects\u002F16160\u002Fbranches\u002F340901\u002Fbadge\u002Fgrade.svg\" alt=\"DeepScan grade\" title=\"Independent code quality checks\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Factions\u002Fworkflows\u002Fcodeql-analysis.yml\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Factions\u002Fworkflows\u002Fcodeql-analysis.yml\u002Fbadge.svg\" alt=\"CodeQL\" title=\"Independent code quality checks\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-raw\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder.svg\" alt=\"Open Issues\" \u002F>\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues?q=is%3Aissue+is%3Aclosed\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-closed-raw\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder.svg\" alt=\"Closed Issues\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cimg class=\"dhide\" src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fmaster\u002Ffront-end\u002Fimages\u002Fnode-blue.svg\" title=\"uibuilder icon\" \u002F>\n\u003Ch1 id=\"uibuilder-for-node-red\">\u003Ca class=\"header-anchor\" href=\"#uibuilder-for-node-red\">UIBUILDER FOR Node-RED\u003C\u002Fa>\u003C\u002Fh1>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Easy data-driven web UI's. Batteries included!\u003C\u002Fstrong>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>UIBUILDER is a Node-RED add-on that makes it easy to build custom web UIs that talk to your flows (web applications). It supports no-code & low-code nodes (create UI from Node-RED itself), full-code front-end templates you edit, and everything in between.\u003C\u002Fp>\n\u003Cp>\u003Cem>No-code and Low-code options, driven from Node-RED\u003C\u002Fem> || \u003Cem>Dynamic data interchange Node-RED <--> browser\u003C\u002Fem> || \u003Cem>No front-end framework needed but use any of them if you want to\u003C\u002Fem> || \u003Cem>Integrate with existing web development workflows\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>It includes many helper features that can reduce or eliminate the need to write code for building data-driven web applications and user interfaces integrated with Node-RED.\u003C\u002Fp>\n\u003Ch2 id=\"installation\">\u003Ca class=\"header-anchor\" href=\"#installation\">Installation\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>UIBUILDER is best installed using Node-RED's Palette Manager.\u003C\u002Fp>\n\u003Cp>Note that UIBUILDER requires at least node.js v18 and Node-RED v4. You \u003Cem>should\u003C\u002Fem> be using a current LTS version of node.js. If you want to help develop UIBUILDER, you will need at least node.js v24 LTS and the latest release of Node-RED. UIBUILDER will release a new \u003Cem>major\u003C\u002Fem> version when the baseline node.js and\u002For Node-RED versions are increased.\u003C\u002Fp>\n\u003Cdetails>\u003Csummary>Manual installs and other versions\u003C\u002Fsummary>\n\u003Cp>To install manually, from a command line on your Node-RED server:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">cd ~\u002F.node-red\nnpm install node-red-contrib-uibuilder\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>To install old versions, provide the major version number:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">cd ~\u002F.node-red\nnpm install node-red-contrib-uibuilder@v5\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>To install development branches, please install from \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\">GitHub\u003C\u002Fa>. Branchnames are usually future version numbers, check GitHub for available branches:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">cd ~\u002F.node-red\nnpm install totallyinformation\u002Fnode-red-contrib-uibuilder#v7.1.0\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>You will need to restart Node-RED if installing manually.\u003C\u002Fp>\n\u003C\u002Fdetails>\n\u003Ch2 id=\"quickstart-guide\">\u003Ca class=\"header-anchor\" href=\"#quickstart-guide\">Quickstart Guide\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>For a super-quick start, once installed, please see the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmaster\u002Fquickstart\">Getting Started\u003C\u002Fa> guide.\u003C\u002Fp>\n\u003Cp>For more guidance, check out the \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002Fwalkthrough1\">First-timers walkthrough\u003C\u002Fa> and the \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=IVWR_3cx05A\">Introduction Video\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Also try out the built-in example flows (via the Node-RED Import menu).\u003C\u002Fp>\n\u003Ch2 id=\"documentation-and-other-links\">\u003Ca class=\"header-anchor\" href=\"#documentation-and-other-links\">Documentation and other links\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>Refer to the \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\">Documentation web site\u003C\u002Fa>. This can also be accessed from within UIBUILDER nodes even without an Internet connection.\u003C\u002Fp>\n\u003Cp>There is a library of \"official\" \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fplaylist?list=PL9IEADRqAal3mG3RcF0cJaaxIgFh3GdRQ\">video tutorials on YouTube\u003C\u002Fa>. Other folk have also produced \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fresults?search_query=UIBUILDER+node-red\">UIBUILDER-related content\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>The \u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002F\">Node-RED Forum\u003C\u002Fa> has a dedicated \u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Ftag\u002Fnode-red-contrib-uibuilder\">UIBUILDER tag\u003C\u002Fa> for questions, discussions, ideas, support, examples and FAQ's.\u003C\u002Fp>\n\u003Cp>You can use the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\">GitHub issues log\u003C\u002Fa> for raising issues.\u003C\u002Fp>\n\u003Cp>There is also a dedicated \u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Fchannels\u002F980480639679725689\u002F1416125488950411295\">Discord channel\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch2 id=\"purpose\">\u003Ca class=\"header-anchor\" href=\"#purpose\">Purpose\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The purpose of UIBUILDER is to:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Support easy methods for creating and delivering data-driven web apps and web pages (also known as web User-Interfaces).\u003C\u002Fli>\n\u003Cli>Be a conduit between Node-RED and front-end (browser) UI web apps.\u003C\u002Fli>\n\u003Cli>Be UI framework agnostic. No framework is needed to use UIBUILDER but it will work with them where desired. UIBUILDER aims to reduce the requirement for a framework by making it easier to work with vanilla HTML\u002FCSS.\u003C\u002Fli>\n\u003Cli>Provide interface\u002Fdata standards for exchanging data and controls between Node-RED and the web pages.\u003C\u002Fli>\n\u003Cli>Enable the creation and management of multiple web apps from a single Node-RED instance.\u003C\u002Fli>\n\u003Cli>Reduce the amount of front-end code (HTML\u002FJavaScript) needed to create and manage a web app.\u003C\u002Fli>\n\u003Cli>Reduce the knowledge required for creating reliable, accessible web apps by providing low-code and no-code features. But still ensure that any learning is applicable to general web development.\u003C\u002Fli>\n\u003Cli>Make it easy to install and serve front-end libraries to support the development of more complex web apps.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"compatibility-of-current-release\">\u003Ca class=\"header-anchor\" href=\"#compatibility-of-current-release\">Compatibility of current release\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Servers:\n\u003Cul>\n\u003Cli>Node-RED: v4+\u003C\u002Fli>\n\u003Cli>Node.js: v18+ LTS (matches Node-RED v4+ requirements)\u003C\u002Fli>\n\u003Cli>Platforms: Linux, Windows, MacOS, Raspberry Pi, Docker, FlowFuse, etc.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>Browsers:\n\u003Cul>\n\u003Cli>CSS - 0.12% or above of global usage but not Internet Explorer (\u003Ca href=\"https:\u002F\u002Fbrowserslist.dev\u002F?q=Pj0wLjEyJSwgbm90IGllID4gMA%3D%3D\">ref.\u003C\u002Fa>). The uncompiled CSS should work in all current mainstream browsers. The compiled CSS (\u003Ccode>uib-brand.min.css\u003C\u002Fcode>) should work in browsers back to early 2019, possibly before. Enforced by \u003Ca href=\"https:\u002F\u002Flightningcss.com\u002F\">LightningCSS\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>JavaScript - ES6+ so should work in all current mainstream browsers. The compiled JS (\u003Ccode>uibuilder.min.{iife|esm}.js\u003C\u002Fcode>) should work in browsers back to early 2019, possibly before. Enforced by \u003Ca href=\"https:\u002F\u002Fesbuild.github.io\u002F\">ESBuild\u003C\u002Fa>. Script (IIFE) and Module (ESM) versions are provided.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"updates\">\u003Ca class=\"header-anchor\" href=\"#updates\">Updates\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>The current \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002FCHANGELOG.md\">CHANGELOG\u003C\u002Fa> contains all of the changes and requirement details for each version.\u003C\u002Fp>\n\u003Cp>Older changes can be found in the previous change documents: \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002Farchived\u002FCHANGELOG-v6.md\">CHANGELOG-V5\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002Farchived\u002FCHANGELOG-v5.md\">CHANGELOG-V5\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmaster\u002F%5B\u002Fdocs%5D(https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002Farchived\u002F)\u002FCHANGELOG-v3-v4.md\">CHANGELOG-V3\u002FV4\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002Farchived\u002FCHANGELOG-v2.md\">CHANGELOG-v2\u003C\u002Fa>, and \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\u002F#\u002Farchived\u002FCHANGELOG-v1.md\">CHANGELOG-v2\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3 id=\"other-links\">\u003Ca class=\"header-anchor\" href=\"#other-links\">Other links\u003C\u002Fa>\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fraw\u002Fmain\u002Ffront-end\u002Fimages\u002Fnode-blue.ico\" alt=\"uib\" \u002F> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\">UIBUILDER for Node-RED\u003C\u002Fa>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>❓ \u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Ftag\u002Fnode-red-contrib-uibuilder\">Ideas, questions & general help\u003C\u002Fa> - Ask your question on the Node-RED forum using the node-red-contrib-uibuilder tag.\u003C\u002Fli>\n\u003Cli>📁 \u003Ca href=\"https:\u002F\u002Ftotallyinformation.github.io\u002Fnode-red-contrib-uibuilder\">Documentation\u003C\u002Fa> - Go to the latest documentation.\u003C\u002Fli>\n\u003Cli>🧑‍💻 \u003Ca href=\"https:\u002F\u002Fflows.nodered.org\u002Fsearch?term=uibuilder\">Flows\u003C\u002Fa> - Example flows, nodes and collections related to UIBUILDER.\u003C\u002Fli>\n\u003Cli>ℹ️ \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fwiki\">WIKI\u003C\u002Fa> - More documentation and examples.\u003C\u002Fli>\n\u003Cli>📂 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fuib-template-svelte-simple\">Example Svelte External Template\u003C\u002Fa> - In case you want to build your own svelte app.\u003C\u002Fli>\n\u003Cli>📂 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fuib-template-test\">Example Simple External Template\u003C\u002Fa> - In case you want to build your own external template.\u003C\u002Fli>\n\u003Cli>📊 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnr-uibuilder-uplot\">uPlot UIBUILDER extension\u003C\u002Fa> - Useful charts but also demonstrates how to build your own extension.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🧪 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fweb-components\">Web Components Library\u003C\u002Fa> - A growing library of useful HTML Web Components. Useable with or without Node-RED & UIBUILDER. Some having specific enhancements for Node-RED but will still work well stand-alone. These now have their own dedicated documentation, demo and test website at https:\u002F\u002Fwc.totallyinformation.net. Please check them out there.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🔨 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fui.js\">ui library module used by UIBUILDER\u003C\u002Fa> - Can be used stand-alone for turning UI standard config JSON into HTML.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🕜 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-moment\">node-red-contrib-moment\u003C\u002Fa> - Nodes to make use of the MomentJS date\u002Ftime handling library in Node-RED.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🧙 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Falternate-node-red-installer\">Alternate Node-RED installer\u003C\u002Fa> - Some scripts and example configs for running Node-RED locally instead of globally and having the userDir as a child folder so that everything can be easily backed up and restored from a single project folder.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🧪 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002FNode-RED-Testbed\">Testbed for Node-RED custom nodes\u003C\u002Fa> - Embodying more up-to-date thinking than the test nodes, a blank playground.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🧪 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fuib-template-test\">Test Nodes for Node-RED\u003C\u002Fa> - Some test nodes for Node-RED that help you understand how everything works.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🚤 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fgauge-hotnipi\">HotNipi Gauge Web Component\u003C\u002Fa> - A really nice looking gauge component. Works with Node-RED, UIBUILDER, or stand-alone.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>🧪 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fgroupit\">Array Grouper\u003C\u002Fa> - Stand-alone function to reshape an array of objects.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"contributing\">\u003Ca class=\"header-anchor\" href=\"#contributing\">Contributing\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cp>If you would like to contribute to this node, you can contact Totally Information on the \u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Ftag\u002Fnode-red-contrib-uibuilder\">Node-RED Forum\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\">via GitHub\u003C\u002Fa>, or \u003Ca href=\"https:\u002F\u002Fdiscord.com\u002Fchannels\u002F980480639679725689\u002F980480639679725693\">on Discord\u003C\u002Fa> or raise a request in the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\">GitHub issues log\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Pull Requests both for code and documentation are welcomed and the WIKI is open to new entries and corrections (but please let me know if you make a change).\u003C\u002Fp>\n\u003Cp>Please refer to the \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fblob\u002Fmaster\u002F.github\u002FCONTRIBUTING.md\">contributing guidelines\u003C\u002Fa> for more information.\u003C\u002Fp>\n\u003Cp>You can also support the development of UIBUILDER by sponsoring the development.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fko-fi.com\u002FA0A3PPMRJ\">\u003Cimg src=\"https:\u002F\u002Fko-fi.com\u002Fimg\u002Fgithubbutton_sm.svg\" alt=\"ko-fi\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002FTotallyInformation\">GitHub Sponsorship\u003C\u002Fa>,\n\u003Ca href=\"https:\u002F\u002Fpaypal.me\u002FTotallyInformation\">PayPal Sponsorship\u003C\u002Fa>,\n\u003Ca href=\"https:\u002F\u002Fpatreon.com\u002FTotallyInformation?utm_medium=github&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink\">Patreon Sponsorship\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch2 id=\"sponsors\">\u003Ca class=\"header-anchor\" href=\"#sponsors\">Sponsors\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FMagicJF\">@MagicJF\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"developerscontributors\">\u003Ca class=\"header-anchor\" href=\"#developerscontributors\">Developers\u002FContributors\u003C\u002Fa>\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\">Julian Knight\u003C\u002Fa> - the designer and main author.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcolinl\">Colin Law\u003C\u002Fa> - many thanks for testing, corrections and pull requests.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fshrickus\">Steve Rickus\u003C\u002Fa> - many thanks for testing, corrections, contributed code and design ideas.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fellieejlee\">Ellie Lee\u003C\u002Fa> - many thanks for the PR fixing duplicate msgs.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FThomseeen\">Thomas Wagner\u003C\u002Fa> - thanks for the steer and PR on using projects folder if active.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fboisei0\">Arlena Derksen\u003C\u002Fa> - thanks for suggestions, bug checks and Issue #59\u002FPR #60.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Fu\u002Fcflurin\">cflurin\u003C\u002Fa> - thanks for the cache example.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fscottpageindysoft\">Scott Page - IndySoft\u003C\u002Fa> - thanks for Issue #73\u002FPR #74.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Fu\u002FSteve-Mcl\">Stephen McLaughlin - Steve-Mcl\u003C\u002Fa> - thanks for the fix for \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\u002F71\">Issue #71\u003C\u002Fa> and for the enhancement idea \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\u002F102\">Issue #102\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FSergioRius\">Sergio Rius\u003C\u002Fa> - thanks for reporting \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\u002F121\">Issue #121\u003C\u002Fa> and providing \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fpull\u002F122\">PR #122\u003C\u002Fa> as a fix.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftve\">Thorsten von Eicken\u003C\u002Fa> - thanks for providing \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fpull\u002F131\">PR #131\u003C\u002Fa> to improve CORS handling for Socket.IO.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmeeki007\">meeki007\u003C\u002Fa> - thanks for supplying various documentation improvements and code fixes.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftalltechdude\">Scott - talltechdude\u003C\u002Fa> - thanks for supplying PR #170.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fcalumk\">Calum Knott\u003C\u002Fa> - Thanks for the tidied up node-blue logo.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FHaroldPetersInskipp\">Harold Peters Inskipp\u003C\u002Fa> - Thanks for the logging examples.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fdczysz\">dczysz\u003C\u002Fa> - Thanks for reporting \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FTotallyInformation\u002Fnode-red-contrib-uibuilder\u002Fissues\u002F186\">Issue #186\u003C\u002Fa> and helping work through the complex async bug.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmudwalkercj\">Colin J (mudwalkercj)\u003C\u002Fa> - Thanks for helping with the documentation.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Fu\u002Fmarcus-j-davies\">Marcus Davies\u003C\u002Fa> - Many thanks for the encouragement and for the 3d logo.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fdiscourse.nodered.org\u002Fu\u002Ffmarzocca\">Fabio Marzocca (fmarzocca)\u003C\u002Fa>) - Many thanks for help with the design and testing of the uibrouter front-end router library.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fmutec\">MysteryCode (mutec)\u003C\u002Fa>) - Thanks for the PR to fix up the standardised use of fast-glob for returning lists of files.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Many other people have contributed ideas and suggestions, thanks to everyone who does, they are most welcome.\u003C\u002Fp>\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackexchange.com\u002Fusers\u002F1375993\u002Fjulian-knight\">\u003Cimg src=\"https:\u002F\u002Fstackexchange.com\u002Fusers\u002Fflair\u002F1375993.png\" width=\"208\" height=\"58\" alt=\"profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&A sites\" title=\"profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&A sites\" \u002F>\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>Please also check out my blogs:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fwww.totallyinformation.net\">Totally Information's Web Log\u003C\u002Fa>, \"Ramblings by Julian Knight on all things Digital, Technology and Life\". This is my new blog. It will have articles on Node-RED, web development, hardware reviews and more.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fit.knightnet.org.uk\">Much Ado About IT\u003C\u002Fa>, it has information about all sorts of topics, mainly IT related, including Node-RED. This is no longer being updated but it will be retained for reference.\u003C\u002Fli>\n\u003C\u002Ful>\n",1784738654982]