I am interested in inserting a different id each time I insert a div using uib-element. To use one of the uibuilder examples;
<div id="md1"><h2>Markdown Card</h2>
<p>Dynamically added from a Node-RED/UIBUILDER no-code node.</p>
<p>Random number: 67</p>
</div>
I would like to insert a div using id="md1" for the first div, then, say id="md2" for the second div, and so on, up to say eight divs each with a different id. What would be the best way to do this?
I can put my own <div id="test1"></div> tags in the payload, and by removing the "md1" tag in the config I obtain my objective but every instance is then surrounded by a plain <div></div> set of tags. That might work.
So all you need to do is to send a series of messages and just pick up the id from the msg. Or you can use a JSONata expression directly. You need a counter though so you might also need a change node and a flow variable, just a single change node will let you do both things together. Of course, you could also use a function node if you are happy using JavaScript.
Also remember that the no-code nodes like uib-element actually output low-code objects so by all means capture an output and amend it for yourself either using JavaScript or a change node with JSONata. So you could use a temporary element node to produce your own template output and then build on that.
Also, don't forget one of the other no-code nodes uib-tag:
Which is good for creating individual tags rather than compound elements.
Another option is to use a standard Node-RED template node to output HTML where you can use Mustache {{someMsgProperty}} tags. Then send that to the uib-element node set to HTML output.
Since the HTML node wraps in a div with the supplied ID, you would just need your inner HTML from your example, the element node would wrap that in the div.
OK so I just put a function node before the uib-element node and changed msg.tagid to my choice of id for the div and it works out just fine. Thank you.
