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.

image

[{"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":[]}]

Flow Info

Created 8 months ago
Updated 7 months ago
Rating: not yet rated

Actions

Rate:

Node Types

Core
  • debug (x2)
  • inject (x5)
  • link in (x1)
  • link out (x2)
Other
  • tab (x1)
  • uib-tag (x4)
  • uibuilder (x1)

Tags

  • uibuilder
  • web
  • uib-tag
  • YouTube
  • video
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option