Examples of UIBUILDER's uib-tag node
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.
[{"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":[]}]
