I would like to ask how to make a dynamic search box in the dashboard. What I want to achieve:
I have data stored in SqLite Db - for example names
I would like the user to have a searchbox where he will write for example "Alex" and he will be able to see all the names from the database which name is Alex.
If there will be more records with this name, then I need the user to be able to choose which record he wants to work with... I was not able to find how to make it.... thanks.
Welcome to the forum!
Have you tried the ui-text input in the dashboard ?
I am hoping you already know how to build a query to get data from database in node-red.
[{"id":"595551d669da5707","type":"ui_text_input","z":"1214ee3d2b7539f7","name":"","label":"","tooltip":"","group":"325714454937adc5","order":4,"width":"11","height":"1","passthru":true,"mode":"text","delay":"0","topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":210,"y":1710,"wires":[["98a943aa924511a2"]]},{"id":"98a943aa924511a2","type":"template","z":"1214ee3d2b7539f7","name":"","field":"topic","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"select * from dbase where name = '{{payload}}';","output":"str","x":390,"y":1710,"wires":[["b3eb6003863504a1","f5aab6a775c8a82e"]]},{"id":"b3eb6003863504a1","type":"ui_text","z":"1214ee3d2b7539f7","group":"325714454937adc5","order":6,"width":"10","height":"1","name":"","label":"query>","format":"{{msg.topic}}","layout":"row-spread","className":"","style":false,"font":"","fontSize":16,"color":"#000000","x":580,"y":1710,"wires":[]},{"id":"f5aab6a775c8a82e","type":"debug","z":"1214ee3d2b7539f7","name":"debug 291","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":530,"y":1800,"wires":[]},{"id":"325714454937adc5","type":"ui_group","name":"DEMO","tab":"fb48ae21810a7ddc","order":2,"disp":false,"width":"25","collapse":false,"className":""},{"id":"fb48ae21810a7ddc","type":"ui_tab","name":"TEST","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
Hello, yes, text input works for me. I just have to solve the question how to display some virtual keyboard on the monitor.
The second question is - if I use for example some UI-Table node to show to results, how to achieve the possibility to choose desired record...So the user will write for example "ADAM", it will show him "ADAM 1", "ADAM 2", "ADAM 3" and I want to let him choose ADAM 3 and go to next step... Some sample flow will help me a lot. thanks
share what you have acheived so far. provide a sample data from your query
I do not have problem with the query, I have now problem with the text input. I need the text input to have two main functions:
- When the site will be loaded, the cursor has to be in the text input (so the user does not need to click on the input box, and be able to start typing immediately
- I need the font to be larger - i have achieved it by using style, but letters do not show properly when the font is larger.
- I have tried this sample flow:
[
{
"id": "5392862ec1620634",
"type": "debug",
"z": "0d53d5269b75ca34",
"name": "debug 26",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 600,
"y": 380,
"wires": []
},
{
"id": "c2ba3ca42571b2d9",
"type": "ui_text_input",
"z": "0d53d5269b75ca34",
"name": "",
"label": "Input field",
"tooltip": "",
"group": "d5063815704da8e3",
"order": 1,
"width": 0,
"height": 0,
"passthru": true,
"mode": "text",
"delay": 300,
"topic": "topic",
"sendOnBlur": true,
"className": "prijatedata",
"topicType": "msg",
"x": 420,
"y": 380,
"wires": [
[
"5392862ec1620634"
]
]
},
{
"id": "185b3d986da3af1a",
"type": "ui_template",
"z": "0d53d5269b75ca34",
"group": "d5063815704da8e3",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<style>\n .prijatedata {\n font-size: 2.5em;\n border-width: 5px 20px;\n }\n</style>\n\n<div class=\"form-row\">\n <label>Second variant of input:</label>\n <input type=\"text\" id=\"node-input-myField\">\n <input type=\"hidden\" id=\"node-input-myFieldType\">\n</div>\n\n\n\n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 260,
"y": 380,
"wires": [
[
"c2ba3ca42571b2d9"
]
]
},
{
"id": "e28ed04bec2fd99e",
"type": "ui_template",
"z": "0d53d5269b75ca34",
"group": "d5063815704da8e3",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"format": "<script>\n //$(\"node-input-myField\").focus();\n\ndocument.getElementById(node-input-myField).focus();\ndocument.getElementById(node-input-myField).select();\n\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "global",
"className": "",
"x": 260,
"y": 460,
"wires": [
[
"185b3d986da3af1a"
]
]
},
{
"id": "d5063815704da8e3",
"type": "ui_group",
"name": "Prijaté dáta",
"tab": "c227c281e7199e1b",
"order": 1,
"disp": true,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "c227c281e7199e1b",
"type": "ui_tab",
"name": "AVS",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
some CSS expert will be able to help you.
for getting the table and the feedback on selection of content, you may use the attached example.
[{"id":"bc380b4b.e2d668","type":"inject","z":"dcb95e6461fb800f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"Name\":\"Kazuhito Yokoi\",\"Age\":\"35\",\"Favourite Color\":\"red\",\"Date Of Birth\":\"12/09/1983\"},{\"Name\":\"Oli Bob\",\"Age\":\"12\",\"Favourite Color\":\"red\",\"Date Of Birth\":\"12/08/2017\"}]","payloadType":"json","x":490,"y":960,"wires":[["2460c057.cfbc4"]]},{"id":"2460c057.cfbc4","type":"ui_table","z":"dcb95e6461fb800f","group":"6081d250e21892b0","name":"","width":"15","height":"5","columns":[],"outputs":1,"cts":true,"x":690,"y":960,"wires":[["5edc5a9bd20ae433","e22035901c162da1"]]},{"id":"5edc5a9bd20ae433","type":"debug","z":"dcb95e6461fb800f","name":"debug 416","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":920,"y":870,"wires":[]},{"id":"e22035901c162da1","type":"change","z":"dcb95e6461fb800f","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload.Name","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":860,"y":960,"wires":[["89c8cdf9096004fe"]]},{"id":"89c8cdf9096004fe","type":"ui_toast","z":"dcb95e6461fb800f","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":1060,"y":960,"wires":[[]]},{"id":"6081d250e21892b0","type":"ui_group","name":"Prijaté dáta","tab":"c227c281e7199e1b","order":1,"disp":true,"width":"15","collapse":false,"className":""},{"id":"c227c281e7199e1b","type":"ui_tab","name":"AVS","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
let me know if this helps.
Yes, thanks a lot. This helps. I have only still problem with formating the text input, so there will be cursor immediately after page load and the font size will be bigger...
You may find clue from this thread
Thanks a lot. This helped and it works. I have used it like this:
[
{
"id": "5392862ec1620634",
"type": "debug",
"z": "0d53d5269b75ca34",
"name": "debug 26",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"statusVal": "",
"statusType": "auto",
"x": 600,
"y": 380,
"wires": []
},
{
"id": "c2ba3ca42571b2d9",
"type": "ui_text_input",
"z": "0d53d5269b75ca34",
"name": "",
"label": "Input field",
"tooltip": "",
"group": "d5063815704da8e3",
"order": 1,
"width": 0,
"height": 0,
"passthru": true,
"mode": "text",
"delay": 300,
"topic": "topic",
"sendOnBlur": true,
"className": "prijatedata",
"topicType": "msg",
"x": 440,
"y": 380,
"wires": [
[
"5392862ec1620634",
"8fa9a42fbd0f60a3"
]
]
},
{
"id": "185b3d986da3af1a",
"type": "ui_template",
"z": "0d53d5269b75ca34",
"group": "d5063815704da8e3",
"name": "",
"order": 1,
"width": 0,
"height": 0,
"format": "<script>\n$(\".prijatedata\").find('input')[0].value = \"\"\n$(\".prijatedata\").find('input').focus()\n</script>\n\n<style>\n .prijatedata {\n font-size: 2.5em;\n border-width: 5px 20px;\n }\n</style>\n\n<div class=\"form-row\">\n <label>Second variant of input:</label>\n <input type=\"text\" id=\"node-input-myField\">\n <input type=\"hidden\" id=\"node-input-myFieldType\">\n</div>\n\n\n\n\n",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "",
"x": 260,
"y": 380,
"wires": [
[
"c2ba3ca42571b2d9"
]
]
},
{
"id": "d5063815704da8e3",
"type": "ui_group",
"name": "Prijaté dáta",
"tab": "c227c281e7199e1b",
"order": 1,
"disp": true,
"width": "15",
"collapse": false,
"className": ""
},
{
"id": "c227c281e7199e1b",
"type": "ui_tab",
"name": "AVS",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
Blockquote
1 Like
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
