\n{{payload.mystring}},\n
\n{{payload.mynumber}}.\n
\n\n\n\n", "output": "str", "x": 260, "y": 1840, "wires": [ [ "07f1643db81c0995" ] ] }, { "id": "9b8878a8a530e1b9", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "161798c0ebe14c60", "name": "", "topic": "eltest-title", "elementtype": "title", "parent": "body", "parentSource": "body", "parentSourceType": "str", "elementid": "eltest-title", "elementIdSourceType": "str", "heading": "", "headingSourceType": "str", "headingLevel": "h2", "data": "payload", "dataSourceType": "msg", "position": "last", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 500, "y": 2260, "wires": [ [ "7ed058d7900e3daa" ] ] }, { "id": "7ed058d7900e3daa", "type": "link out", "z": "3badb0a6906eef7f", "g": "161798c0ebe14c60", "name": "link out 21", "mode": "link", "links": [ "c203417099e22d29" ], "x": 655, "y": 2260, "wires": [] }, { "id": "58968670b8adf81b", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "65795642cec1af50", "name": "", "topic": "", "elementtype": "tr", "parent": "#eltest-tbl", "parentSource": "#eltest-tbl", "parentSourceType": "str", "elementid": "", "elementIdSourceType": "str", "heading": "", "headingSourceType": "str", "headingLevel": "h2", "data": "payload", "dataSourceType": "msg", "position": "1", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 390, "y": 1480, "wires": [ [ "b8338b38fa0f261f" ] ] }, { "id": "b8338b38fa0f261f", "type": "link out", "z": "3badb0a6906eef7f", "g": "65795642cec1af50", "name": "link out 24", "mode": "link", "links": [ "c203417099e22d29" ], "x": 655, "y": 1480, "wires": [] }, { "id": "a05186890868f6cb", "type": "inject", "z": "3badb0a6906eef7f", "g": "65795642cec1af50", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "auto-update-title", "payload": "{\"COL1\":\"**\",\"COL2\":\"**\"}", "payloadType": "json", "x": 190, "y": 1480, "wires": [ [ "58968670b8adf81b" ] ] }, { "id": "d94e668db5709de3", "type": "inject", "z": "3badb0a6906eef7f", "g": "161798c0ebe14c60", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "auto-update-title", "payload": "\"[\" & $formatInteger($random() * 100, \"#00\") & \"] Dynamic title\"", "payloadType": "jsonata", "x": 130, "y": 2260, "wires": [ [ "9b8878a8a530e1b9" ] ] }, { "id": "e1795c2c54ee3880", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "42a2b3e7d6c165bf", "name": "", "topic": "eltest-textbox", "elementtype": "article", "parent": "#more", "parentSource": "#more", "parentSourceType": "str", "elementid": "eltest-textbox", "elementIdSourceType": "str", "heading": "A Manually Inserted Heading", "headingSourceType": "str", "headingLevel": "h2", "data": "payload", "dataSourceType": "msg", "position": "last", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 480, "y": 2380, "wires": [ [ "0ff90fd3f27b33be" ] ] }, { "id": "0ff90fd3f27b33be", "type": "link out", "z": "3badb0a6906eef7f", "g": "42a2b3e7d6c165bf", "name": "link out 25", "mode": "link", "links": [ "c203417099e22d29" ], "x": 655, "y": 2380, "wires": [] }, { "id": "8b561177d69cb6d3", "type": "inject", "z": "3badb0a6906eef7f", "g": "42a2b3e7d6c165bf", "name": "Inject text/HTML", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "auto-article", "payload": "Some HTML inserted dynamically.", "payloadType": "str", "x": 160, "y": 2380, "wires": [ [ "e1795c2c54ee3880" ] ] }, { "id": "f8db205586825dcd", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "", "topic": "", "elementtype": "li", "parent": "#eltest-ul-ol", "parentSource": "#eltest-ul-ol", "parentSourceType": "str", "elementid": "", "elementIdSourceType": "str", "heading": "IGNORED", "headingSourceType": "str", "headingLevel": "h2", "data": "payload", "dataSourceType": "msg", "position": "last", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 500, "y": 700, "wires": [ [ "474079d2dd072158" ] ] }, { "id": "474079d2dd072158", "type": "link out", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "link out 26", "mode": "link", "links": [ "c203417099e22d29" ], "x": 735, "y": 700, "wires": [] }, { "id": "685760eb828baa61", "type": "inject", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "add-to-list", "payload": "A am a new list entry 😁", "payloadType": "str", "x": 190, "y": 700, "wires": [ [ "f8db205586825dcd" ] ] }, { "id": "5df757879277f3a3", "type": "inject", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "add-to-list-array", "payload": "[\"One new\", \"Two new\"]", "payloadType": "json", "x": 240, "y": 740, "wires": [ [ "f8db205586825dcd" ] ] }, { "id": "c2dcca959c44112c", "type": "uib-update", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "", "topic": "", "mode": "update", "modeSourceType": "modeType", "cssSelector": "\"#eltest-ul-ol li:nth-child(\" & payload & \")\"", "cssSelectorType": "jsonata", "slotSourceProp": "", "slotSourcePropType": "msg", "attribsSource": "{\"style\":\"list-style: \\\"✅\\\";\"}", "attribsSourceType": "json", "slotPropMarkdown": false, "x": 570, "y": 820, "wires": [ [ "474079d2dd072158" ] ] }, { "id": "c87017ebcab8dc1a", "type": "inject", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "Tick off #2", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" }, { "p": "payload3", "v": "\"#eltest-ul-ol li:nth-child(2)\"", "vt": "jsonata" }, { "p": "payload4", "v": "#eltest-ul-o", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "tick-off-two", "payload": "2", "payloadType": "str", "x": 200, "y": 820, "wires": [ [ "c2dcca959c44112c" ] ] }, { "id": "e51ee02c0622e551", "type": "uib-update", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "", "topic": "", "mode": "delete", "modeSourceType": "modeType", "cssSelector": "\"#eltest-ul-ol li:nth-child(\" & payload & \")\"", "cssSelectorType": "jsonata", "slotSourceProp": "", "slotSourcePropType": "msg", "attribsSource": "", "attribsSourceType": "json", "slotPropMarkdown": false, "x": 570, "y": 880, "wires": [ [ "474079d2dd072158" ] ] }, { "id": "92af2057a4b6218f", "type": "inject", "z": "3badb0a6906eef7f", "g": "08f358ec9af4dfc2", "name": "Delete #2", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "delete-#two", "payload": "2", "payloadType": "str", "x": 200, "y": 880, "wires": [ [ "e51ee02c0622e551" ] ] }, { "id": "8a39826860e82c51", "type": "uib-update", "z": "3badb0a6906eef7f", "name": "", "topic": "", "mode": "update", "modeSourceType": "modeType", "cssSelector": "#eltest-ul-ol li", "cssSelectorType": "str", "slotSourceProp": "", "slotSourcePropType": "msg", "attribsSource": "{\"style\":\"list-style: \\\"🚑\\\";\"}", "attribsSourceType": "json", "slotPropMarkdown": false, "x": 520, "y": 780, "wires": [ [ "474079d2dd072158" ] ] }, { "id": "88c5781097ea7ef5", "type": "inject", "z": "3badb0a6906eef7f", "name": "Update all li's", "props": [ { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "update-all-li", "x": 210, "y": 780, "wires": [ [ "8a39826860e82c51" ] ] }, { "id": "ede83b9af785c506", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "f6154314aee80d24", "name": "", "topic": "", "elementtype": "sform", "parent": "body", "parentSource": "", "parentSourceType": "str", "elementid": "sform1", "elementId": "", "elementIdSourceType": "str", "heading": "My Form", "headingSourceType": "str", "headingLevel": "h2", "data": "payload", "dataSourceType": "msg", "position": "last", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 450, "y": 1620, "wires": [ [ "534ccd905d0adc50" ] ] }, { "id": "3923739d82142906", "type": "inject", "z": "3badb0a6906eef7f", "g": "f6154314aee80d24", "name": "Add a Form", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "sform1", "payload": "[{\"id\":\"r1-text\",\"type\":\"text\",\"required\":false,\"label\":\"Text Input:\",\"value\":\"Foo\"},{\"id\":\"r6-email-req\",\"type\":\"email\",\"title\":\"You can add your own popup info\",\"required\":true,\"label\":\"Email:\"},{\"id\":\"r2-color\",\"type\":\"color\",\"label\":\"Colour:\",\"value\":\"#427798\"},{\"id\":\"r3-date-req\",\"type\":\"date\",\"required\":true},{\"id\":\"r3-date-month\",\"type\":\"month\",\"disabled\":true},{\"id\":\"r4-range\",\"type\":\"range\",\"required\":false,\"label\":\"Range (0-100):\",\"value\":\"20\",\"min\":0,\"max\":100},{\"id\":\"r3-file\",\"type\":\"file\"},{\"id\":\"r4-check\",\"label\":\"Checkbox (true/false):\",\"type\":\"checkbox\",\"value\":\"false\"},{\"id\":\"r5-check\",\"label\":\"Checkbox selected (true/false):\",\"type\":\"checkbox\",\"checked\":true},{\"id\":\"r5-textarea\",\"label\":\"Text area:\",\"type\":\"textarea\",\"value\":\"Some text. Sorry, no HTML.\"},{\"id\":\"r6-select\",\"label\":\"Select (two):\",\"type\":\"select\",\"options\":[{\"label\":\"Option 1\",\"value\":\"one\"},{\"label\":\"Option 2\",\"value\":\"two\"},{\"label\":\"Option 3\"}],\"value\":\"two\"},{\"id\":\"r7-select\",\"label\":\"Select (multi):\",\"type\":\"select\",\"options\":[{\"label\":\"Option 1a\",\"value\":\"one a\"},{\"label\":\"Option 2a\",\"value\":\"two a\"},{\"label\":\"Option 3a\",\"value\":\"three a\"}],\"value\":\"three a\",\"multiple\":true}]", "payloadType": "json", "x": 190, "y": 1620, "wires": [ [ "ede83b9af785c506" ] ], "info": "Creates an example form showing off different features.\r\n\r\nNo buttons are included so that the `uib-element` node\r\nautomatically creates the two \"Send\" and \"Reset\" default\r\nbuttons for you.\r\n\r\nEmail & Data inputs are marked as required but left with\r\nno default value to show the invalid field/form highlights." }, { "id": "534ccd905d0adc50", "type": "link out", "z": "3badb0a6906eef7f", "g": "f6154314aee80d24", "name": "link out 29", "mode": "link", "links": [ "c203417099e22d29" ], "x": 655, "y": 1620, "wires": [] }, { "id": "d0ab82e45161ca1e", "type": "inject", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "Toggle Visible Msgs", "props": [ { "p": "_uib", "v": "{\"command\":\"showMsg\", \"pageName\": \"index.html\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 170, "y": 240, "wires": [ [ "195a61f93a912086" ] ] }, { "id": "262ab2295096703e", "type": "inject", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "Toggle Visible Status", "props": [ { "p": "_uib", "v": "{\"command\":\"showStatus\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 170, "y": 280, "wires": [ [ "195a61f93a912086" ] ] }, { "id": "88abbd5438821f7a", "type": "link out", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "link out 30", "mode": "link", "links": [ "c203417099e22d29" ], "x": 655, "y": 260, "wires": [] }, { "id": "6221e2b8f2b50df8", "type": "inject", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "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": 440, "y": 240, "wires": [ [ "88abbd5438821f7a" ] ] }, { "id": "0dd33ba823c0af7b", "type": "inject", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "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": 440, "y": 280, "wires": [ [ "88abbd5438821f7a" ] ] }, { "id": "85fd31019802a001", "type": "inject", "z": "3badb0a6906eef7f", "g": "f6154314aee80d24", "name": "Remove", "props": [ { "p": "mode", "v": "remove", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 200, "y": 1660, "wires": [ [ "ede83b9af785c506" ] ] }, { "id": "f6094a474faf5649", "type": "uib-update", "z": "3badb0a6906eef7f", "g": "f6154314aee80d24", "name": "", "topic": "", "mode": "update", "modeSourceType": "update", "cssSelector": "topic", "cssSelectorType": "msg", "slotSourceProp": "", "slotSourcePropType": "str", "attribsSource": "{ \"value\": payload }", "attribsSourceType": "jsonata", "slotPropMarkdown": false, "x": 490, "y": 1700, "wires": [ [ "534ccd905d0adc50" ] ] }, { "id": "495d6cfe53a5351a", "type": "inject", "z": "3badb0a6906eef7f", "g": "f6154314aee80d24", "name": "Change row 1 value", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "#r1-text", "payload": "Bah", "payloadType": "str", "x": 170, "y": 1700, "wires": [ [ "f6094a474faf5649" ] ] }, { "id": "31f1c33627de3ec3", "type": "comment", "z": "3badb0a6906eef7f", "name": "Zero-Code Examples. Flows for all uib-element types", "info": "", "x": 230, "y": 40, "wires": [] }, { "id": "6e5aada95fc82d83", "type": "inject", "z": "3badb0a6906eef7f", "g": "42a2b3e7d6c165bf", "name": "Remove", "props": [ { "p": "mode", "v": "remove", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 180, "y": 2420, "wires": [ [ "e1795c2c54ee3880" ] ] }, { "id": "5d2fb30390013840", "type": "switch", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "Connect Only", "property": "uibuilderCtrl", "propertyType": "msg", "rules": [ { "t": "eq", "v": "client connect", "vt": "str" } ], "checkall": "false", "repair": false, "outputs": 1, "x": 725, "y": 220, "wires": [ [ "5961e6952243291c" ] ], "l": false }, { "id": "3fd347d2dad186ca", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "Set title/heading on load", "topic": "", "elementtype": "title", "parent": "body", "parentSource": "", "parentSourceType": "str", "elementid": "myh1", "elementId": "", "elementIdSourceType": "str", "heading": "", "headingSourceType": "str", "headingLevel": "h2", "position": "first", "positionSourceType": "str", "confData": {}, "x": 825, "y": 220, "wires": [ [ "3b6dfa72a2767eb8" ] ], "l": false }, { "id": "3b6dfa72a2767eb8", "type": "link out", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "Set title/heading on page load", "mode": "link", "links": [ "c203417099e22d29" ], "x": 875, "y": 220, "wires": [] }, { "id": "5961e6952243291c", "type": "change", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "Set title text", "rules": [ { "t": "set", "p": "payload", "pt": "msg", "to": "uib-element tests", "tot": "str" }, { "t": "delete", "p": "uibuilderCtrl", "pt": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 775, "y": 220, "wires": [ [ "3fd347d2dad186ca" ] ], "l": false }, { "id": "f2a7c0f95409f865", "type": "inject", "z": "3badb0a6906eef7f", "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": 130, "y": 360, "wires": [ [ "2663180282c358a6" ] ] }, { "id": "2663180282c358a6", "type": "uib-update", "z": "3badb0a6906eef7f", "name": "Set Light/Dark mode", "topic": "", "mode": "update", "modeSourceType": "modeType", "cssSelector": "html", "cssSelectorType": "str", "slotSourceProp": "", "slotSourcePropType": "msg", "attribsSource": "payload", "attribsSourceType": "msg", "slotPropMarkdown": false, "x": 320, "y": 360, "wires": [ [ "c5effb699b6d4bc1" ] ] }, { "id": "c5effb699b6d4bc1", "type": "link out", "z": "3badb0a6906eef7f", "name": "link out 38", "mode": "link", "links": [ "c203417099e22d29" ], "x": 455, "y": 360, "wires": [] }, { "id": "c3449025d8452e42", "type": "inject", "z": "3badb0a6906eef7f", "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": 130, "y": 400, "wires": [ [ "2663180282c358a6" ] ] }, { "id": "6b8e19a607d6f0ec", "type": "uibuilder", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "", "topic": "", "url": "esm-element-test", "okToGo": true, "fwdInMessages": false, "allowScripts": false, "allowStyles": false, "copyIndex": true, "templateFolder": "esm-blank-client", "extTemplate": "", "showfolder": false, "reload": true, "sourceFolder": "src", "deployedVersion": "6.4.0", "showMsgUib": true, "title": "", "descr": "", "x": 1360, "y": 180, "wires": [ [ "b6a6e078c7a153c2" ], [ "ea5182145ff56087" ] ], "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": "a0b06621c07398b3", "type": "inject", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "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": 1090, "y": 160, "wires": [ [ "b73520be76a16375" ] ], "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": "add2bdd8bebe5b03", "type": "inject", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "Reload", "props": [ { "p": "_ui", "v": "{\"method\":\"reload\"}", "vt": "json" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "reload", "x": 1110, "y": 200, "wires": [ [ "b73520be76a16375" ] ], "info": "Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself." }, { "id": "b6a6e078c7a153c2", "type": "debug", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "uibuilder standard output", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "counter", "x": 1525, "y": 140, "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": "ea5182145ff56087", "type": "debug", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "uibuilder control output", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "counter", "x": 1525, "y": 200, "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": "daa1504f2685319f", "type": "comment", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "Chk Description in each node", "info": "", "x": 1340, "y": 120, "wires": [] }, { "id": "410e148e289e3a7a", "type": "inject", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "Toggle Visible Msgs", "props": [ { "p": "_uib", "v": "{\"command\":\"showMsg\",\"prop\":\"body\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1070, "y": 240, "wires": [ [ "b73520be76a16375" ] ], "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": "36f1c2cc9ef194db", "type": "link in", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "esm-element-test-in", "links": [ "168eb9ab00594028", "c5b8417d9c02b24d" ], "x": 1145, "y": 120, "wires": [ [ "b73520be76a16375" ] ] }, { "id": "f030437d5a7e5dee", "type": "inject", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "Toggle Visible Status", "props": [ { "p": "_uib", "v": "{\"command\":\"showStatus\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1070, "y": 280, "wires": [ [ "b73520be76a16375" ] ] }, { "id": "95ca4e82137d3438", "type": "inject", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "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": 1320, "y": 240, "wires": [ [ "168eb9ab00594028" ] ] }, { "id": "c639fd1e7f3a6df6", "type": "inject", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "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": 1320, "y": 280, "wires": [ [ "168eb9ab00594028" ] ] }, { "id": "168eb9ab00594028", "type": "link out", "z": "3badb0a6906eef7f", "g": "59a2614f0a755654", "name": "link out 48", "mode": "link", "links": [ "36f1c2cc9ef194db" ], "x": 1445, "y": 260, "wires": [] }, { "id": "c1b89704c05fce56", "type": "inject", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "", "props": [ { "p": "_uib", "v": "{\"command\":\"include\",\"prop\":\"./SmallCat.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": 1160, "y": 380, "wires": [ [ "c5b8417d9c02b24d" ] ] }, { "id": "c5b8417d9c02b24d", "type": "link out", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "link out 49", "mode": "link", "links": [ "36f1c2cc9ef194db" ], "x": 1545, "y": 520, "wires": [] }, { "id": "9e4db07a14720c37", "type": "inject", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "GET Vue version", "props": [ { "p": "_uib", "v": "{\"command\":\"get\",\"prop\":\"vueVersion\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1160, "y": 540, "wires": [ [ "c5b8417d9c02b24d" ] ] }, { "id": "85e73c64c66a2f76", "type": "inject", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "Is Vue loaded?", "props": [ { "p": "_uib", "v": "{\"command\":\"get\",\"prop\":\"isVue\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1160, "y": 500, "wires": [ [ "c5b8417d9c02b24d" ] ] }, { "id": "a3f355b96aeb5228", "type": "inject", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "Is DOMPurify loaded?", "props": [ { "p": "_uib", "v": "{\"command\":\"get\",\"prop\":\"purify\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1140, "y": 440, "wires": [ [ "c5b8417d9c02b24d" ] ] }, { "id": "8156a1051ff2380f", "type": "inject", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "Is Markdown-IT loaded?", "props": [ { "p": "_uib", "v": "{\"command\":\"get\",\"prop\":\"markdown\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1140, "y": 600, "wires": [ [ "c5b8417d9c02b24d" ] ] }, { "id": "c2ac84fbddaba1d2", "type": "inject", "z": "3badb0a6906eef7f", "g": "2bf4b6af49f039ff", "name": "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" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 1180, "y": 640, "wires": [ [ "c5b8417d9c02b24d" ] ] }, { "id": "d49663a49059ee64", "type": "inject", "z": "3badb0a6906eef7f", "g": "527bf7938fced52c", "name": "", "props": [ { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "auto-create-dl-list2", "x": 775, "y": 1040, "wires": [ [ "3197fab9ed7deac5" ] ], "l": false }, { "id": "5c4d5b5e27f107dd", "type": "inject", "z": "3badb0a6906eef7f", "g": "527bf7938fced52c", "name": "Remove", "props": [ { "p": "mode", "v": "remove", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 820, "y": 1080, "wires": [ [ "3197fab9ed7deac5" ] ] }, { "id": "3197fab9ed7deac5", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "527bf7938fced52c", "name": "", "topic": "eltest-dl", "elementtype": "dl", "parent": "#more", "parentSource": "#more", "parentSourceType": "str", "elementid": "eltest-dl2", "elementIdSourceType": "str", "heading": "", "headingSourceType": "str", "headingLevel": "h3", "data": "[[\"Entry One\",\"Description One\"],[\"Entry Two\",\"Description Two a\",\"Description Two b\",\"Description Two c\"],[\"Entry Three\",\"Description Three\"],[\"Entry Four\",\"Description Four\"]]", "dataSourceType": "json", "position": "last", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 1030, "y": 1040, "wires": [ [ "4459ed2147acfb03" ] ] }, { "id": "4459ed2147acfb03", "type": "link out", "z": "3badb0a6906eef7f", "g": "527bf7938fced52c", "name": "link out 52", "mode": "link", "links": [ "c203417099e22d29" ], "x": 1205, "y": 1040, "wires": [] }, { "id": "c928f8a757e6370e", "type": "debug", "z": "3badb0a6906eef7f", "g": "3cd8b7c5aae9d40b", "name": "uibuilder standard output", "active": false, "tosidebar": true, "console": false, "tostatus": true, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "counter", "x": 315, "y": 100, "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": "2de54e9a477d0182", "type": "inject", "z": "3badb0a6906eef7f", "name": "Dynamic load MarkdownIT from CDN", "props": [ { "p": "_ui", "v": "{\"method\":\"load\",\"srcScripts\":[\"https://cdn.jsdelivr.net/npm/markdown-it@13.0.1/dist/markdown-it.min.js\"]}", "vt": "json" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "load-markdownit-cdn", "x": 690, "y": 360, "wires": [ [ "5dcb54122d456b2e" ] ] }, { "id": "5dcb54122d456b2e", "type": "link out", "z": "3badb0a6906eef7f", "name": "link out 55", "mode": "link", "links": [ "c203417099e22d29" ], "x": 895, "y": 360, "wires": [] }, { "id": "82c02ab0a364c239", "type": "inject", "z": "3badb0a6906eef7f", "name": "Remove MarkdownIT", "props": [ { "p": "_ui", "v": "[{\"method\":\"removeAll\",\"components\":[\"head > script[src*='markdown-it']\"]}]", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 740, "y": 400, "wires": [ [ "5dcb54122d456b2e" ] ] }, { "id": "67e8e62079ccf664", "type": "uib-element", "z": "3badb0a6906eef7f", "g": "cc417b2a9e6fa0e7", "name": "", "topic": "eltest-html", "elementtype": "markdown", "parent": "#more", "parentSource": "#more", "parentSourceType": "str", "elementid": "eltest-html", "elementIdSourceType": "str", "heading": "", "headingSourceType": "str", "headingLevel": "h2", "data": "payload", "dataSourceType": "msg", "position": "last", "positionSourceType": "str", "passthrough": false, "confData": {}, "x": 470, "y": 2120, "wires": [ [ "44bf335d96f7c8ca" ] ] }, { "id": "44bf335d96f7c8ca", "type": "link out", "z": "3badb0a6906eef7f", "g": "cc417b2a9e6fa0e7", "name": "link out 58", "mode": "link", "links": [ "c203417099e22d29" ], "x": 655, "y": 2120, "wires": [] }, { "id": "271b10261bd319ca", "type": "inject", "z": "3badb0a6906eef7f", "g": "cc417b2a9e6fa0e7", "name": "", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "auto-create-html-from-html", "payload": "{\t \"mystring\": \"Boo-hoo\",\t \"mynumber\": $formatInteger($random() * 100, \"#00\")\t}\t ", "payloadType": "jsonata", "x": 130, "y": 2100, "wires": [ [ "e27c29b27c5a40a4" ] ] }, { "id": "e5dcec35b5e548c7", "type": "inject", "z": "3badb0a6906eef7f", "g": "cc417b2a9e6fa0e7", "name": "Remove", "props": [ { "p": "mode", "v": "remove", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 140, "y": 2140, "wires": [ [ "67e8e62079ccf664" ] ] }, { "id": "e27c29b27c5a40a4", "type": "template", "z": "3badb0a6906eef7f", "g": "cc417b2a9e6fa0e7", "name": "Markdown template with some data dynamically injected from the incoming msg.payload", "field": "payload", "fieldType": "msg", "format": "markdown", "syntax": "mustache", "template": "## Testing Markdown support\n\nThis is the payload: _{{payload.mystring}}_, **{{payload.mynumber}}**.\n\nA list:\n\n* List #1\n* List #2\n\nCheckboxes require a Markdown-IT plugin\n\n1. [ ] Check 1\n2. [ ] Check 2\n\nGFM Callouts also require a plugin\n\n> [!NOTE]\n>\n> You will need to load the [markdown-it-github-alert](https://www.npmjs.com/package/markdown-it-github-alert) or similar plugin for this to work correctly.\n\n## Auto-linking\n\nhttps://totallyinformation.github.io/node-red-contrib-uibuilder\n\n## Code Highlighting\n\nJust needs the highlightjs library pre-loaded\n\n### Language given as \"js\"\n\n```js\nconst x = 42\n[1, 2, 3].forEach( i => {\n console.log('>>>', x * i)\n})\n```\n\n### No language given (HighlightJS guesses it)\n\n```\n