(That was more to Steve.... But anyway.)
My eyes are yelling at me:
Enough for today and are really wanting to close for today.
Got an interesting day tomorrow, helping someone make a wooden table to sub mm precision.
That's going to be fun.
Luckily I caught them today with +mm errors and we pulled it apart before the glue set.
That's going to be fun to deal with too. Non flat surfaces. :cringe:
Ah, all part of learning.
Thanks again Julian.
I've only just installed it and am looking at it.
It may take some days as I've been away and need to catch up on stuff.
Hi Julian.
Sorry it has been a long time. (Life, etc)
Um, yes, I have CRAFT disease, but when I'm looking at the ui-builder node, and open it:
It is a shame there is no expand button (top right) as there is with function nodes to view the code in full screen rather than in the smaller box/area.
Ah! It is outside the area and in the bottom left.
Of course. Sorry.
So, attempting to get back on the horse I'm looking at things.
I seem to have forgotten just about everything. 
A thought that comes to mind is that with the search option in your example that the member list is presorted anyway.
I'm going to try to find where it is loaded and put a line in to sort it before displaying the list.
But - as said - I can't remember what the 3 files do.
There is the html css and js ones.
I kind of get it but also don't.
I have downloaded an 8 hour JS course but am only at the start of it.
P.S.
Loading the js window: why is there all these errors?
AFAIK, I haven't edited it and the stuff has been initialised. (There is a members list,etc)
I'm thinking maybe 2 columns on your screen.
1 - the full list of members.
2 - a list of members who have signed in today
So it seems I am going to have to do a lot of studying how to have two columns.
This is what I did - badly - for now.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Members In/Out Register - Node-RED UIBUILDER</title>
<meta name="description" content="Node-RED UIBUILDER - Members In/Out Register">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
<!-- #endregion -->
</head>
<body class="uib">
<h1 class="with-subtitle">Members full list</h1>
<div role="doc-subtitle">Using Node-RED and the UIBUILDER IIFE library.</div>
<div>
<label for="search">Search: </label>
<input id="search" type="text" placeholder="Enter first characters of name to search for" style="width: 50%;" oninput="doSearch(event)">
</div>
<ul id="results"></ul>
</body>
<body class="uid">
<h1 class="width-subtitle">Members signed in</h1>
<div>
<label "text" </label>
</div>
</html>
But the second list is at the bottom of the list of members, rather than in a different window (area) on the screen.
Putting the errors aside, I made SOME progress.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Members In/Out Register - Node-RED UIBUILDER</title>
<meta name="description" content="Node-RED UIBUILDER - Members In/Out Register">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
<!-- #endregion -->
</head>
<body class="uib">
<h1 class="with-subtitle">Members full list</h1>
<div role="doc-subtitle">Using Node-RED and the UIBUILDER IIFE library.</div>
<div style="width: 50%; height: 50%; background-color: green; float:left;"> Members full list</div>
<label for="search">Search: </label>
<input id="search" type="text" placeholder="Enter first characters of name to search for" style="width: 50%;" oninput="doSearch(event)">
</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">Members signed in</div>
<label> signedIn </label>
</div>
<ul id="results"></ul>
</body>
</html>
This gives me this screen:
(Believe me, I am winging this.)
So as I click on the names, they turn green - fair enough.
I want that new array/list/object (still not sure what it is called) flow.today to be displayed in the right column.
Alas I am really not able to work out how to display the today array/object/thing on the second part.
I have looked at the html and js file.
I am missing the key part to do what I want.
No worries. I settled on the idea of having the 3 most common files as a default a long time back when HTML web programming was a little simpler and more restricted.
The basic idea is, that for any data-driven web app, you are likely to need 3 distinct things, each of which requires its own grammar.
Hence the 3 files. You absolutely don't have to use them. A UIBUILDER app is, after all, primarily defined by a combination of a uibuilder node (that defines all the servery bits) and an index.html file that defines the static front-end bits.
Indeed, the latest version of the "Blank" template does not even LOAD the index.js file because, with modern web features combined with the newer features of UIBUILDER, you often don't need it at all. 
However, if you follow a "standard" web development path and as your app gets more complex, it is generally helpful to keep the 3 aspects separated, it makes it a LOT easier (IMO) for your brain to process the separate grammar's involved.
To recap:
I can't fully tell just looking at the image. But I could make some guesses.
uibuilder shows an "error" because the Monaco editor does not understand that uibuilder is a global definition - it is automatically created along with a few other things when you load the uibuilder script library. If you really want to get rid of the error, you could replace uibuilder with `window['uibuilder'] but who has the time or energy to keep typing that!
Not totally sure why your other variables are underlined but my guess would be that Monaco is telling you that you should use const instead of let. This is a minor thing really but it helps avoid mistakes in your code. It is also an oddity of JavaScript (there are many of those!) that, when defining a variable as an object or array, you can use const because js still lets you change the content of an object or array even though it is defined as a constant, you just can't replace the whole thing.
This might help:
You need a quick refresher about HTML I think. There are some tags you can only have once in your page. <html>, <head>, and <body> are 3 of them. Similarly, best practice says that you should only ever have 1 <h1> - this is an accessibility thing. For accessibility, try to think of your <hn> tags as a strict hierarchy - 1 h1 that may contain multiple h2s. Each h2 can contain multiple h3s and so on. Try to avoid going below h4.
OK, you are using float which is OK but a bit dated. See the MDN link for a more up-to-date way of doing it.
You need 2 ul list containers and they need to be inside the divs that specify the float left/right.
To move between the full list and the signed in list, .... hang on, I need some lunch.
I'll add some more later but there are several ways you could do this. Basically you need to make a copy of the li entry from the full list and add it to the signed in list.
Similarly, for signing out, you will need to remove the entry from the ul that contains the signed in list.
Weirdly - or otherwise - I did seem to remember the 3 specifications of the files.
The errors: Ok, I shall put it down to Monaco. No worries.
Ok, thanks.
I'll get into that link when I can.
WRT the other list (today) I was more meaning the JS code to display it.
I'm guessing similar to how the members list is read/displayed.
What may not be helping is the 3 layers with ui-builder.
I can live with it, but am still stuck with knowing where the stratification happens.
The stuff I did was just by asking how to make two vertically separated columns in html.
So - yes - the result/answer will probably be very basic/weak in how it is done.
the <h1> stuff etc... That is still very much me flying blind.
But maybe after reading the link, I will be more aware of what is happening and how to do it.
Oh, something else - in case you missed it.
Only to make it look nicer, I discovered if I enter a space in the search bar, I get a full members list.
So I left the list (the first part of it) visible for aesthetic reasons.
That shouldn't be hard to implement in the final version. Just inject a space to the search field as default.
Hover over the red squiggle and it will tell you why it doesn't like it.
Ok, just to share.
I've read a bit of the link - not meaning I expect to understand it all after only reading 2 pages.
css
/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.min.css`
* This version auto-adjusts for light/dark browser settings but might not be as complete.
*/
@import url("../uibuilder/uib-brand.min.css");
/* OR, load the defaults from the older `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-styles.css` */
/* @import url("../uibuilder/uib-styles.css"); */
.container {
column-width: 100px;
}
body {
width: 70%;
max-width: 900px;
margin: 2em auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
.in {
color: hsl(120, 100%, 50%);
}
.out {
color: hsl(290, 100%, 80%);
}
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Members In/Out Register - Node-RED UIBUILDER</title>
<meta name="description" content="Node-RED UIBUILDER - Members In/Out Register">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
<!-- #endregion -->
</head>
<body class="uib">
<h1 class="with-subtitle">Members In/Out Register</h1>
<div role="doc-subtitle">Using Node-RED and the UIBUILDER IIFE library.</div>
<div>
<p>
<label for="search">Search: </label>
<input id="search" type="text" placeholder="Enter first characters of name to search for" style="width: 50%;" oninput="doSearch(event)">
</p>
</div>
<ul id="results"></ul>
</body>
</html>
Forgetting the second column I wanted with today listed.
I get ONE column indented from the left.
This is taken a working (from the example on MULTI COLUMN LAYOUT.
I'm missing something.
Yes, I am not exactly clear on the structure/layering.
I admit it.
But the example is not really explaining things.
It went from:
.container {
column-count: 3;
}
to
.container {
column-width: 200px;
}
And didn't mention this part:
body {
width: 70%;
max-width: 900px;
margin: 2em auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
Which I only saw after doing the play button and looking at the code.
So I am kind of ....... reserved about believing their examples when they don't show all the code they use.
Could you please help/explain what is going on there?
Search for fullMembersList and see if you have another declaration of it somewhere else (which will also be marked as an error). If you can't find it then post the full text here please.
Hi, just hacked something with the dashboard-2.
You can ignore it, if it is not relevant for you. i just wanted to try it out 
Dashboard 2 and a sqlite db: a very simple login/logout app:
[{"id":"8e6b07d1688aac0d","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"b8ae4b7d1b7f9009","type":"ui-table","z":"8e6b07d1688aac0d","group":"3c68ea2ef8aaa739","name":"","label":"text","order":1,"width":"0","height":"0","maxrows":0,"passthru":false,"autocols":false,"showSearch":true,"selectionType":"click","columns":[{"title":"Name","key":"name","type":"text","width":"","align":"start"},{"title":"action","key":"action","type":"tickcross","width":"","align":"start"},{"title":"Last Action at","key":"datetime","type":"text","width":"","align":"start"}],"x":930,"y":700,"wires":[["f06bab117905eafe","42f2d5e780152b30","02543ea0037ac111","add0ee0fad25d2d6"]]},{"id":"4190fb92b50f9870","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":710,"y":700,"wires":[["b8ae4b7d1b7f9009"]]},{"id":"bb3f2d965caa8b65","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":680,"wires":[["213c59fe7d209120"]]},{"id":"f06bab117905eafe","type":"debug","z":"8e6b07d1688aac0d","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1240,"y":700,"wires":[]},{"id":"aa9770ab985f1dff","type":"ui-control","z":"8e6b07d1688aac0d","name":"","ui":"174e44d306da2771","events":"all","x":200,"y":600,"wires":[["213c59fe7d209120"]]},{"id":"42f2d5e780152b30","type":"change","z":"8e6b07d1688aac0d","name":"","rules":[{"t":"set","p":"last_person","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1180,"y":760,"wires":[[]]},{"id":"9c9d40060387fc8d","type":"ui-button","z":"8e6b07d1688aac0d","group":"3c68ea2ef8aaa739","name":"","label":"Log-In","order":3,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"last_person","payloadType":"flow","topic":"login","topicType":"str","buttonColor":"","textColor":"","iconColor":"","x":510,"y":1000,"wires":[["4310e1ba4a88d69a"]]},{"id":"7a6c36fe1c9ac3fa","type":"ui-button","z":"8e6b07d1688aac0d","group":"3c68ea2ef8aaa739","name":"","label":"Log-Out","order":4,"width":"3","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"last_person","payloadType":"flow","topic":"logout","topicType":"str","buttonColor":"","textColor":"","iconColor":"","x":500,"y":1040,"wires":[["4310e1ba4a88d69a"]]},{"id":"ab16c0872ee524e0","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"{}","payloadType":"json","x":210,"y":540,"wires":[["1b23cff4a27e596f"]]},{"id":"1b23cff4a27e596f","type":"change","z":"8e6b07d1688aac0d","name":"","rules":[{"t":"set","p":"last_person","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":540,"wires":[[]]},{"id":"df1531f868a360c1","type":"ui-notification","z":"8e6b07d1688aac0d","ui":"174e44d306da2771","position":"top right","colorDefault":true,"color":"#000000","displayTime":"3","showCountdown":true,"outputs":1,"allowDismiss":true,"dismissText":"Close","raw":false,"className":"","name":"","x":1280,"y":840,"wires":[[]]},{"id":"02543ea0037ac111","type":"template","z":"8e6b07d1688aac0d","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Person Selected: {{payload.name}}","output":"str","x":1040,"y":800,"wires":[["df1531f868a360c1"]]},{"id":"4310e1ba4a88d69a","type":"switch","z":"8e6b07d1688aac0d","name":"","property":"payload","propertyType":"msg","rules":[{"t":"hask","v":"id","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":690,"y":1020,"wires":[["3227b4d019775deb","b1446043b451b420"]]},{"id":"3227b4d019775deb","type":"function","z":"8e6b07d1688aac0d","name":"function 1","func":"const person_id = msg.payload.id\nconst action = msg.topic == 'login' ? 1 : 0\nconst now =Date.now().valueOf()\n\nmsg.topic = `\nINSERT INTO log (person_id,action,created_at) \nVALUES (${person_id},${action},${now})\n` \n\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":860,"y":1020,"wires":[["30a364adebb032fc"]]},{"id":"cbfc517bba77e70e","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":710,"y":440,"wires":[["640a537e09dba98f"]]},{"id":"8db480c05a13dcae","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":340,"y":440,"wires":[["d8d2c25af43d32c0"]]},{"id":"d8d2c25af43d32c0","type":"template","z":"8e6b07d1688aac0d","name":"Select Last","field":"topic","fieldType":"msg","format":"handlebars","syntax":"mustache","template":";with cte_last_status (person_id,action,created_at) AS\n(\n SELECT\n person_id,\n action,\n MAX(created_at) AS Last_created_at\n from log\n GROUP BY person_id\n)\nSelect * from cte_last_status\nINNER JOIN person\nON cte_last_status.person_id = person.id","output":"str","x":530,"y":440,"wires":[["cbfc517bba77e70e"]]},{"id":"640a537e09dba98f","type":"debug","z":"8e6b07d1688aac0d","name":"debug 2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":900,"y":440,"wires":[]},{"id":"b1446043b451b420","type":"debug","z":"8e6b07d1688aac0d","name":"debug 3","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":820,"y":960,"wires":[]},{"id":"30a364adebb032fc","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":1030,"y":1020,"wires":[["213c59fe7d209120","2270a7a87ffda0e4"]]},{"id":"213c59fe7d209120","type":"template","z":"8e6b07d1688aac0d","name":"","field":"topic","fieldType":"msg","format":"handlebars","syntax":"mustache","template":";with cte_last_status (person_id,action,created_at) AS\n(\n SELECT\n person_id,\n action,\n MAX(created_at) AS Last_created_at\n from log\n GROUP BY person_id\n)\nSelect \n person.id,\n name,\n action,\n datetime(created_at / 1000, 'unixepoch') as [datetime]\n from cte_last_status\nINNER JOIN person\nON cte_last_status.person_id = person.id","output":"str","x":440,"y":700,"wires":[["4190fb92b50f9870"]]},{"id":"2270a7a87ffda0e4","type":"change","z":"8e6b07d1688aac0d","name":"","rules":[{"t":"set","p":"last_person","pt":"flow","to":"{}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":1220,"y":1080,"wires":[[]]},{"id":"94c0836789d72aa0","type":"ui-text","z":"8e6b07d1688aac0d","group":"3c68ea2ef8aaa739","order":2,"width":0,"height":0,"name":"","label":"","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","className":"","x":1230,"y":640,"wires":[]},{"id":"add0ee0fad25d2d6","type":"template","z":"8e6b07d1688aac0d","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"{{payload.name}} :","output":"str","x":1060,"y":640,"wires":[["94c0836789d72aa0"]]},{"id":"d35bccc73d26891b","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":380,"y":40,"wires":[["05332fd9affcc38e"]]},{"id":"05332fd9affcc38e","type":"template","z":"8e6b07d1688aac0d","name":"CREATE person","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"CREATE TABLE \"person\" (\n\t\"id\"\tINTEGER NOT NULL UNIQUE,\n\t\"name\"\tTEXT NOT NULL,\n\tPRIMARY KEY(\"id\" AUTOINCREMENT)\n)","output":"str","x":600,"y":40,"wires":[["18a05a5c4c48c4a4"]]},{"id":"ee8deb38daea8aec","type":"template","z":"8e6b07d1688aac0d","name":"CREATE log","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"CREATE TABLE \"log\" (\n\t\"id\"\tINTEGER NOT NULL UNIQUE,\n\t\"person_id\"\tINTEGER NOT NULL,\n\t\"action\"\tINTEGER NOT NULL,\n\t\"created_at\"\tINTEGER NOT NULL,\n\tPRIMARY KEY(\"id\" AUTOINCREMENT)\n)","output":"str","x":590,"y":80,"wires":[["809cf72ef5baf743"]]},{"id":"87bbeec09443b762","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":380,"y":80,"wires":[["ee8deb38daea8aec"]]},{"id":"18a05a5c4c48c4a4","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":790,"y":40,"wires":[[]]},{"id":"809cf72ef5baf743","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":790,"y":80,"wires":[[]]},{"id":"a7dd2167ef4c059a","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":730,"y":300,"wires":[["78eed5cae61be6e0"]]},{"id":"68795d2c9536c9db","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":360,"y":300,"wires":[["8d077a035546cb45","fcfdf1974398d2bb"]]},{"id":"8d077a035546cb45","type":"template","z":"8e6b07d1688aac0d","name":"Select person","field":"topic","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Select * from person","output":"str","x":560,"y":300,"wires":[["a7dd2167ef4c059a"]]},{"id":"78eed5cae61be6e0","type":"debug","z":"8e6b07d1688aac0d","name":"debug 4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":920,"y":300,"wires":[]},{"id":"fcfdf1974398d2bb","type":"template","z":"8e6b07d1688aac0d","name":"Select log","field":"topic","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Select * from log","output":"str","x":540,"y":340,"wires":[["a7dd2167ef4c059a"]]},{"id":"c920e9f315c0be84","type":"sqlite","z":"8e6b07d1688aac0d","mydb":"f9551d91b22b1441","sqlquery":"msg.topic","sql":"","name":"","x":730,"y":180,"wires":[["e74d253b284f8252"]]},{"id":"c2726e1c29d87303","type":"inject","z":"8e6b07d1688aac0d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":360,"y":180,"wires":[["817821d3c68d3388"]]},{"id":"817821d3c68d3388","type":"template","z":"8e6b07d1688aac0d","name":"INSERT person","field":"topic","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"INSERT INTO person (name)\nVALUES ('Mr. T'),('Superman'),('Neo')","output":"str","x":560,"y":180,"wires":[["c920e9f315c0be84"]]},{"id":"e74d253b284f8252","type":"debug","z":"8e6b07d1688aac0d","name":"debug 5","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":900,"y":180,"wires":[]},{"id":"3c68ea2ef8aaa739","type":"ui-group","name":"My Group","page":"7eacc83e5964c751","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":true,"disabled":false},{"id":"f9551d91b22b1441","type":"sqlitedb","db":"status.sqlite","mode":"RW"},{"id":"174e44d306da2771","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control","ui-button"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"7eacc83e5964c751","type":"ui-page","name":"Page 1","ui":"174e44d306da2771","path":"/page1","icon":"home","layout":"grid","theme":"171855b186577ac4","order":1,"className":"","visible":"true","disabled":"false"},{"id":"171855b186577ac4","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
Don't forget that you can click on the "View Problem" link and it will take you to a page the defines the problem and shows examples that trigger/avoid the problem.
Yes - I think I confused you unnecessarily!
Try this simpler method:
<div>
<label for="search">Search: </label>
<input id="search" type="text" placeholder="Enter first characters of name to search for" style="width: 50%;" oninput="doSearch(event)">
</div>
<div>
<div id="left" style="float:left;">
<ul id="results"></ul>
</div>
<div id="right" style="float:right;">
<ul id="today">
<li>Example 1</li>
</ul>
</div>
</div>
I've put the styles in manually but they should eventually be moved to #left and #right entries in your index.css.
I've also put in a single dummy entry into the today list just to have something to show.
Note how I've created a hierarchy of elements that encapsulates the "logic" of what you want to show. Some of it isn't strictly necessary but it should help you (and particularly your future self) understand the structure.
Note that there is an outer div that encapsulates the 2 floating div's which themselves encapsulate the lists which in turn encapsulate the list entries. This is really the essence of HTML and thinking about the hierarchy really helps.
I know this is going to be a dumb question but:
Where does that code go?
I guess 99% it is the html one.
But is it the full code?
(Sorry. I've only just got up, eating breakfast and have about 40 minutes before I am off until lunch time-ish)
Um, thanks.
But.....
If I don't have the sql database, it kinda fails.
The flow was covered with errors.
Ok, sorry, not sure which of these errors are yours and not other.
That machine is a TEST machine just now.
Sorry, I'll redact the covered in errors.
I forgot to DEPLOY it and the dots were blue, not red.
But a lot of missing node nodes.
I've just got up.
WRT the view problem
Sorry, still above my pay grade.
2451 - I'm guessing is the line number.
I can't see that many lines.
4(1,5): Where?
I don't know if me worrying about the errors is helping the immediate thing.
I appreciate it would be good/better for me to understand what is going on, but as I see it - now - I am maybe better to accept it as magic and concentrate on the output rather than the mechanics of it's workings.
When it is all working, I could then look at it and attempt to understand it all.
That is because, as stated, it is for the new dashboard, which you have not installed.
Argh.
Yaeh, ok.
Sorry @kitori.
I'll see if I can get it working when I get home this afternoon.
Dashboard-2 can co-exist with the original?
Yes, i think so. Its on the path /dashboard
My example is a really fast draft.
You probably need some more SQL querys.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
