Examples of UIBUILDER's uib-tag node

README.md

This is the flow that goes along with the YouTube video "UIBUILDER for Node-RED: 004 - The uib-tag node".

It demonstrates how to use the uib-tag zero-code node to add and update single elements or collections of elements on your UIBUILDER web page.

flow.json

[
    {
        "id": "4a39ac1ff2223df7",
        "type": "tab",
        "label": "004-uib-tag",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "1c90f61a30866aca",
        "type": "debug",
        "z": "4a39ac1ff2223df7",
        "name": "std out",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "counter",
        "x": 695,
        "y": 100,
        "wires": [],
        "l": false
    },
    {
        "id": "4403ccde4028fa3d",
        "type": "uibuilder",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "topic": "",
        "url": "uib-tag-example",
        "fwdInMessages": false,
        "allowScripts": false,
        "allowStyles": false,
        "copyIndex": true,
        "templateFolder": "blank",
        "extTemplate": "",
        "showfolder": false,
        "reload": false,
        "sourceFolder": "src",
        "deployedVersion": "6.5.0",
        "showMsgUib": false,
        "title": "",
        "descr": "",
        "x": 470,
        "y": 140,
        "wires": [
            [
                "1c90f61a30866aca"
            ],
            [
                "2074b9027d3bb261"
            ]
        ]
    },
    {
        "id": "2074b9027d3bb261",
        "type": "debug",
        "z": "4a39ac1ff2223df7",
        "name": "ctrl out",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "counter",
        "x": 695,
        "y": 180,
        "wires": [],
        "l": false
    },
    {
        "id": "6da0d40e9dabac68",
        "type": "link in",
        "z": "4a39ac1ff2223df7",
        "name": "link in 1",
        "links": [
            "f93aa2432333b3ef",
            "666d1d6f9200d829",
            "39e5be65c01a2bb7"
        ],
        "x": 265,
        "y": 140,
        "wires": [
            [
                "4403ccde4028fa3d"
            ]
        ]
    },
    {
        "id": "7a78aa5276d51cb1",
        "type": "inject",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "payload"
            },
            {
                "p": "attribs",
                "v": "{\t   \"type\":\"button\",\t   \"onclick\":\"uibuilder.eventSend(event)\",\t   \"data-mything\": \"Button \" & $formatInteger($random()*100, \"0\")\t}",
                "vt": "jsonata"
            },
            {
                "p": "btnid",
                "v": "btn1",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "uib-tag-eg1",
        "payload": "\"Button \" & $formatInteger($random()*100, \"0\")\t",
        "payloadType": "jsonata",
        "x": 265,
        "y": 320,
        "wires": [
            [
                "9978927071468259"
            ]
        ],
        "l": false
    },
    {
        "id": "f93aa2432333b3ef",
        "type": "link out",
        "z": "4a39ac1ff2223df7",
        "name": "link out 2",
        "mode": "link",
        "links": [
            "6da0d40e9dabac68"
        ],
        "x": 695,
        "y": 320,
        "wires": []
    },
    {
        "id": "9978927071468259",
        "type": "uib-tag",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "topic": "",
        "tag": "button",
        "parent": "#more",
        "parentSource": "",
        "parentSourceType": "str",
        "elementId": "btnid",
        "elementIdSourceType": "msg",
        "position": "last",
        "positionSourceType": "str",
        "slotSourceProp": "payload",
        "slotSourcePropType": "msg",
        "attribsSource": "attribs",
        "attribsSourceType": "msg",
        "slotPropMarkdown": false,
        "x": 480,
        "y": 320,
        "wires": [
            [
                "f93aa2432333b3ef"
            ]
        ]
    },
    {
        "id": "28351a7829997e8d",
        "type": "inject",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "props": [
            {
                "p": "topic",
                "vt": "str"
            },
            {
                "p": "payload"
            },
            {
                "p": "attribs",
                "v": "{\t   \"type\":\"button\",\t   \"onclick\":\"uibuilder.eventSend(event)\",\t   \"data-mything\": \"Button \" & $formatInteger($random()*100, \"0\")\t}",
                "vt": "jsonata"
            },
            {
                "p": "btnid",
                "v": "btn2",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "uib-tag-eg1",
        "payload": "\"Button 2 \" & $formatInteger($random()*100, \"0\")\t",
        "payloadType": "jsonata",
        "x": 265,
        "y": 380,
        "wires": [
            [
                "9978927071468259"
            ]
        ],
        "l": false
    },
    {
        "id": "50bd68a804728c63",
        "type": "inject",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "uib-tag",
        "payload": "\"[\" & $formatInteger($random() * 100, \"#00\") & \"] Dynamic title\"",
        "payloadType": "jsonata",
        "x": 130,
        "y": 500,
        "wires": [
            [
                "0551e90124f1644a"
            ]
        ]
    },
    {
        "id": "411f46b6e8198d5a",
        "type": "inject",
        "z": "4a39ac1ff2223df7",
        "name": "Remove",
        "props": [
            {
                "p": "mode",
                "v": "remove",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 120,
        "y": 540,
        "wires": [
            [
                "0551e90124f1644a"
            ]
        ]
    },
    {
        "id": "0551e90124f1644a",
        "type": "uib-tag",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "topic": "",
        "tag": "div",
        "parent": "body",
        "parentSourceType": "str",
        "elementId": "tag-div1",
        "elementIdSourceType": "str",
        "position": "last",
        "positionSourceType": "str",
        "slotSourceProp": "payload",
        "slotSourcePropType": "msg",
        "attribsSource": "{\"style\":\"border:1px solid red;padding:1em;background-color:var(--surface3);\"}",
        "attribsSourceType": "json",
        "slotPropMarkdown": false,
        "x": 310,
        "y": 500,
        "wires": [
            [
                "f5f1c92f67f79b61"
            ]
        ]
    },
    {
        "id": "f5f1c92f67f79b61",
        "type": "uib-tag",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "topic": "",
        "tag": "hr",
        "parent": "#tag-div1",
        "parentSource": "",
        "parentSourceType": "str",
        "elementId": "hr1",
        "elementIdSourceType": "str",
        "position": "last",
        "positionSourceType": "str",
        "slotSourceProp": "",
        "slotSourcePropType": "msg",
        "attribsSource": "",
        "attribsSourceType": "msg",
        "slotPropMarkdown": false,
        "x": 520,
        "y": 500,
        "wires": [
            [
                "30c550e25667339a"
            ]
        ]
    },
    {
        "id": "870f9db775b0e44a",
        "type": "inject",
        "z": "4a39ac1ff2223df7",
        "name": "Remove",
        "props": [
            {
                "p": "mode",
                "v": "remove",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 570,
        "y": 540,
        "wires": [
            [
                "30c550e25667339a"
            ]
        ]
    },
    {
        "id": "30c550e25667339a",
        "type": "uib-tag",
        "z": "4a39ac1ff2223df7",
        "name": "",
        "topic": "",
        "tag": "a",
        "parent": "#tag-div1",
        "parentSourceType": "str",
        "elementId": "tag-a1",
        "elementIdSourceType": "str",
        "position": "last",
        "positionSourceType": "str",
        "slotSourceProp": "A Link",
        "slotSourcePropType": "str",
        "attribsSource": "{\"href\":\"http://example.com\",\"title\":\"A link\"}",
        "attribsSourceType": "json",
        "slotPropMarkdown": false,
        "x": 780,
        "y": 500,
        "wires": [
            [
                "39e5be65c01a2bb7"
            ]
        ]
    },
    {
        "id": "39e5be65c01a2bb7",
        "type": "link out",
        "z": "4a39ac1ff2223df7",
        "name": "link out 3",
        "mode": "link",
        "links": [
            "6da0d40e9dabac68"
        ],
        "x": 935,
        "y": 500,
        "wires": []
    }
]