For v7.5.0, I've updated the status-side-panel CSS class so that it now takes a --status-color CSS variable. Makes life easier for changing the status colour. You can simply change it as a style attribute in HTML or as elPanel.style.setProperty('--status-color', 'green') in JavaScript.
2 Likes
Sorry Gerry, I've not been around much last few days...
A flow wouldn't really help as the html, JavaScript & CSS is published in full in the git repo (link above), and could not be exported as a 'flow'.
Also my NR flow is heavily linked into other flows & data sources, without which, the flow would do nothing.
Soā¦ went to your git hub site and got code and sort of got your buttons working in db2. I opened another post to address not being able to input to buttons.
Thanks for the response though
1 Like
Fast execution 
@TotallyInformation
I want to learn more of UIBuilder, but before i go any further maybe you can answer some question regarding my "project" - if it is even possible.
I want to make a grid with buttons, maybe 5 col 10 rows, button as we have talked here about, but with 2 lines - line 1 equal ""name" and line 2 "status" could be on/off color green/red.
At statup data are read from an external file eg. CSV file containing two col "ID" and "name", ID (001 - 050) need to be used for the button, because that ID needs to be used later for an external program, name from file is for line 1 on button.
I saw some of you examples where you "build" the html code, but I have not found any thing that help me, or maybe I just don't see it.
I have something started in DB2, but it seems like when you need to handle 50 buttons, it's a pain in the b.....
Yes, perfectly possible. You can easily use a CSS Grid layout for this.
Yes, you can either do that from node-red or from the front-end, but from node-red is easiest.
UIBUILDER has several ways you can use to generate front-end code. We don't have a specific simple node that will do what you want directly. However, you can either build a low-code object yourself or, possibly easier in this case, use a standard node-red template node (not a ui_template but rather the core template node that can use mustache templating) to build the HTML structure from your input data and send it straight to the front end by using a uib-element node set to html mode.
To recap that, a core template node can build your HTML directly using Mustache templating (you could also do that manually using a function node). Or you could build uibuilder's low-code object yourself using a function node. Either method will let you use some input data to build the 2 lines of buttons. It just depends whether you are more comfortable using Mustache to create HTML, or creating a JavaScript object using the uibuilder low-code schema which closely follows HTML but using a standardised data structure which is described in the documentation.
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
