Node-RED Dashboard ui not displaying correctly on mobile device

Dashboard
1

Hi all,

I have been working on a project that includes a Node-RED system. I have developed an app in order to display my Node-RED dashboard on the actual app (screenshot attached).

The issue I am having is the ui_form is not displaying as it should on my app. It is shortening the text fields, which is doesn't do on my desktop (see screenshot).

Has anyone had a similar issue when using the dashboard on a mobile?

Thanks.

screenshot
screenshot.png4480Ă—1440 417 KB

P.S - If anyone knows how to configure where the buttons are placed on the form, that would be great also, as I would ideally like them to be displayed on the right hand side of the form, and shortened down in size. If this is actually possible.

2

Can you attach a copy of the flow?

3

Having to paste my flow in two different posts, as my flow has too man characters for me to post.

[{"id":"96fd6a7d.c63498","type":"tab","label":"Insert Data","disabled":false,"info":""},{"id":"f1d7872.a535978","type":"tab","label":"Update Room Service Details","disabled":false,"info":""},{"id":"4b79a9e1.930808","type":"tab","label":"Update Job Status","disabled":false,"info":""},{"id":"59723f02.6eb58","type":"tab","label":"Delete Job","disabled":false,"info":""},{"id":"c0c65810.b182e8","type":"tab","label":"Delete Multiple Job","disabled":false,"info":""},{"id":"8f30f009.b5868","type":"tab","label":"Job Sheet View","disabled":false,"info":""},{"id":"89e61aba.e37948","type":"tab","label":"Room Details View","disabled":false,"info":""},{"id":"60521f83.f8f7b","type":"tab","label":"Logo/Clock","disabled":false,"info":""},{"id":"e33cf5ce.702c38","type":"tab","label":"Print Room Details","disabled":false,"info":""},{"id":"f9150fa9.cd9d9","type":"ui_tab","z":"","name":"Insert Data Form","icon":"dashboard"},{"id":"9209fcda.2a276","type":"ui_tab","z":"","name":"Update Job Status Form","icon":"dashboard"},{"id":"2f16bd17.730e62","type":"ui_group","z":"","name":"Update Job Status Form","tab":"9209fcda.2a276","disp":true,"width":"10","collapse":false},{"id":"286accf2.0a2684","type":"ui_group","z":"","name":"Insert Data Form","tab":"f9150fa9.cd9d9","disp":true,"width":"18","collapse":false},{"id":"b6e1647e.b46cf8","type":"ui_tab","z":"","name":"Delete Job(s)","icon":"dashboard"},{"id":"f7845451.ab1928","type":"ui_group","z":"","name":"Delete Job(s)","tab":"b6e1647e.b46cf8","disp":true,"width":"6","collapse":false},{"id":"d3b284a4.4789d8","type":"ui_group","z":"","name":"Delete Range of Jobs","tab":"b6e1647e.b46cf8","disp":true,"width":"6","collapse":false},{"id":"4249f4b5.c1e67c","type":"ui_base","theme":{"name":"theme-custom","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","reset":false},"themeState":{"base-color":{"default":"#4B7930","value":"#4B7930","edited":true},"page-titlebar-backgroundColor":{"value":"#4B7930","edited":false},"page-backgroundColor":{"value":"#ffffff","edited":true},"page-sidebar-backgroundColor":{"value":"#000000","edited":false},"group-textColor":{"value":"#6db046","edited":false},"group-borderColor":{"value":"#ffffff","edited":true},"group-backgroundColor":{"value":"#ffffff","edited":true},"widget-textColor":{"value":"#000000","edited":true},"widget-backgroundColor":{"value":"#4b7930","edited":true},"widget-borderColor":{"value":"#ffffff","edited":true},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}}},"site":{"name":"Node-RED Test","hideToolbar":"false","allowSwipe":"false","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"2295c3a9.1f063c","type":"ui_tab","z":"","name":"View Job List","icon":"dashboard"},{"id":"1cd4729b.9f3d3d","type":"ui_group","z":"","name":"View Job List","tab":"2295c3a9.1f063c","disp":false,"width":"45","collapse":false},{"id":"d953186c.a7d5c8","type":"ui_group","z":"","name":"IMAGE TEST","tab":"f9150fa9.cd9d9","disp":false,"width":"10","collapse":false},{"id":"4d1b2b02.436164","type":"sqldbsdatabase","z":"","host":"92.19.221.177","port":"58970","db":"Node-Red-Test","dialect":"mssql"},{"id":"2a3481b.b28c27e","type":"ui_tab","z":"","name":"Home","icon":"dashboard"},{"id":"8b75b2f1.a3a93","type":"ui_tab","z":"","name":"Home","icon":"dashboard"},{"id":"d7fcbd21.6b69","type":"ui_group","z":"","name":"Default","tab":"481d99b4.0944b8","order":1,"disp":false,"width":"24","collapse":false},{"id":"481d99b4.0944b8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"},{"id":"9d3bde2e.93e0e","type":"ui_group","z":"","name":"Default","tab":"60481216.c7f81c","order":1,"disp":false,"width":"24","collapse":false},{"id":"60481216.c7f81c","type":"ui_tab","z":"","name":"Home","icon":"dashboard"},{"id":"48cdc586.7ea4cc","type":"sqldbsdatabase","z":"","host":"den1.mssql1.gear.host","port":"","db":"NodeRED","dialect":"mssql"},{"id":"8774aa52.582258","type":"ui_group","z":"","name":"Refresh Table Button","tab":"2295c3a9.1f063c","disp":true,"width":"6","collapse":false},{"id":"fe8ed0e.7d4c23","type":"ui_group","z":"","name":"testhtmltable","tab":"2295c3a9.1f063c","disp":true,"width":"6","collapse":false},{"id":"7fa153e8.0fe2ac","type":"ui_group","z":"60521f83.f8f7b","name":"Test","tab":"cc6b2063.6309a","disp":true,"width":"6"},{"id":"cc6b2063.6309a","type":"ui_tab","z":"60521f83.f8f7b","name":"Tableau","icon":"dashboard"},{"id":"ce9ab745.f7e638","type":"ui_tab","z":"","name":"TEST HTML","icon":"dashboard"},{"id":"ea45c694.e08838","type":"ui_group","z":"","name":"TEST HTML","tab":"ce9ab745.f7e638","disp":true,"width":"24","collapse":false},{"id":"52d57e96.19ad2","type":"ui_group","z":"","name":"testbutton","tab":"ce9ab745.f7e638","disp":true,"width":"6","collapse":false},{"id":"2c7b3846.112ef8","type":"ui_group","z":"8f30f009.b5868","name":"Test","tab":"6ab1c155.0ba37","disp":true,"width":"6"},{"id":"6ab1c155.0ba37","type":"ui_tab","z":"8f30f009.b5868","name":"Tableau","icon":"dashboard"},{"id":"7acb1847.eb0198","type":"ui_group","z":"8f30f009.b5868","name":"Test","tab":"7bce3531.10e80c","disp":true,"width":"6"},{"id":"7bce3531.10e80c","type":"ui_tab","z":"8f30f009.b5868","name":"Tableau","icon":"dashboard"},{"id":"9658156f.6123a8","type":"ui_group","z":"","name":"html test insert data","tab":"d823f2d.c619a1","disp":true,"width":"16","collapse":false},{"id":"d823f2d.c619a1","type":"ui_tab","z":"","name":"formtest","icon":"dashboard"},{"id":"2ed1fbb9.386894","type":"sqldbsdatabase","z":"","host":"den1.mssql4.gear.host","port":"","db":"passwordstore1","dialect":"mssql"},{"id":"da5b4143.bafe2","type":"ui_tab","z":"","name":"Update Room Verification Details","icon":"dashboard"},{"id":"f52915c8.50e0d8","type":"ui_group","z":"","name":"Update Room Verification Details","tab":"da5b4143.bafe2","disp":true,"width":"14","collapse":false},{"id":"fd6bd779.9718a8","type":"ui_tab","z":"","name":"Room Details View","icon":"dashboard"},{"id":"e9326d39.818f3","type":"ui_group","z":"","name":"Room Details View","tab":"fd6bd779.9718a8","disp":false,"width":"18","collapse":false},{"id":"727d1296.809b7c","type":"ui_tab","z":"","name":"Print Room Details","icon":"dashboard"},{"id":"69501d5f.4e7c24","type":"ui_group","z":"","name":"Print Room Details","tab":"727d1296.809b7c","disp":true,"width":"12","collapse":false},{"id":"621a532f.312ebc","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","newline":"\\n","bin":"false","out":"char","addchar":false},{"id":"19ba3e9a.8622c1","type":"serial-port","z":"","serialport":"/dev/ttyS0","serialbaud":"9600","databits":"8","parity":"none","stopbits":"1","newline":"\\n","bin":"false","out":"char","addchar":false},{"id":"42ad1cb1.442a54","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"115200","databits":"8","parity":"none","stopbits":"1","newline":"\\n\\r","bin":"false","out":"char","addchar":false},{"id":"8bfc3ba5.33b868","type":"ui_group","z":"","name":"SMS","tab":"4fb130cf.66888","order":1,"disp":true,"width":"6"},{"id":"39690297.acfb5e","type":"serial-port","z":"","serialport":"/dev/ttyUSB0","serialbaud":"115200","databits":"8","parity":"none","stopbits":"1","newline":"\\n\\r","bin":"false","out":"char","addchar":false},{"id":"4fb130cf.66888","type":"ui_tab","z":"","name":"SMS","icon":"dashboard"},{"id":"497925b0.375a6c","type":"serial-port","z":"","serialport":"/dev/ttyACM1","serialbaud":"57600","databits":"8","parity":"none","stopbits":"1","newline":"\\n\\r","bin":"false","out":"char","addchar":false},{"id":"2b410239.157a8e","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"console":"false","complete":"false","x":1230,"y":340,"wires":[]},{"id":"56795fca.e675b","type":"sqldbs","z":"96fd6a7d.c63498","mydb":"48cdc586.7ea4cc","querytype":"Insert","name":"","x":1080,"y":340,"wires":[["2b410239.157a8e"]]},{"id":"46df93bf.0dbb4c","type":"function","z":"96fd6a7d.c63498","name":"Insert Data","func":"msg.topic = \"INSERT INTO dbo.NodeREDData (Topic, JobType, Information, Timestamp, Status) VALUES ('Job', '\" + msg.payloaddata[\"Room Number\"] + \"', '\" + msg.payloaddata[\"Insert Room Service Items\"] + \"',  current_timestamp, 'Not Completed')\";\nreturn msg ;","outputs":1,"noerr":0,"x":950,"y":400,"wires":[["56795fca.e675b"]]},{"id":"2b579eb.7793a62","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":230,"y":60,"wires":[]},{"id":"ea5b69a8.194a78","type":"debug","z":"4b79a9e1.930808","name":"","active":true,"console":"false","complete":"false","x":1110,"y":340,"wires":[]},{"id":"43825bb1.896a24","type":"function","z":"4b79a9e1.930808","name":"Update Status","func":"msg.topic = \" UPDATE dbo.NodeREDData SET Status ='\" + msg.payload[\"Job Status\"] + \"' WHERE id =\" + msg.payload.ID + \" \" ;\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":260,"wires":[["8cceb9c.5468b48"]]},{"id":"8cceb9c.5468b48","type":"sqldbs","z":"4b79a9e1.930808","mydb":"48cdc586.7ea4cc","querytype":"update","name":"","x":920,"y":240,"wires":[["ea5b69a8.194a78"]]},{"id":"8ad69a4e.381c98","type":"sqldbs","z":"59723f02.6eb58","mydb":"48cdc586.7ea4cc","querytype":"delete","name":"","x":474,"y":145,"wires":[["46e6435c.0b612c"]]},{"id":"80833bc8.63da68","type":"function","z":"59723f02.6eb58","name":"Delete Job","func":"msg.topic = \"DELETE FROM dbo.NodeREDData WHERE id='\" + msg.payload[\"Delete Job ID\"] + \"' \"\nreturn msg;","outputs":1,"noerr":0,"x":302,"y":104,"wires":[["8ad69a4e.381c98"]]},{"id":"46e6435c.0b612c","type":"debug","z":"59723f02.6eb58","name":"","active":true,"console":"false","complete":"false","x":670,"y":200,"wires":[]},{"id":"4e6eb0fa.1d64d","type":"sqldbs","z":"c0c65810.b182e8","mydb":"48cdc586.7ea4cc","querytype":"delete","name":"","x":610,"y":180,"wires":[["75aaf0e0.42043"]]},{"id":"8876730c.5a39b","type":"function","z":"c0c65810.b182e8","name":"Delete Multiple Jobs","func":"var from = parseInt(msg.payload.From);\nvar to = parseInt(msg.payload.To);\n\nif (!isNaN(from) && !isNaN(to) && from <= to) {\n   var myIdArray = [];\n   for (var i = from; i <= to; i++) {\n      myIdArray.push(i);\n   }\n \n   var list = \"'\"+myIdArray.join(\"','\")+\"'\";\n   msg.topic = \"DELETE FROM dbo.NodeREDData WHERE id in ( \" + list + \" )\";\n} else {\n   \n}\nreturn msg;","outputs":1,"noerr":0,"x":400,"y":400,"wires":[["4e6eb0fa.1d64d","c7924919.64a208"]]},{"id":"c7924919.64a208","type":"debug","z":"c0c65810.b182e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"topic","x":640,"y":440,"wires":[]},{"id":"75aaf0e0.42043","type":"debug","z":"c0c65810.b182e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":830,"y":100,"wires":[]},{"id":"5e8bed59.6ae074","type":"ui_form","z":"96fd6a7d.c63498","name":"","label":"","group":"286accf2.0a2684","order":0,"width":0,"height":0,"options":[{"label":"Room Number","value":"Room Number","type":"number","required":true},{"label":"Password","value":"Password","type":"password","required":true},{"label":"Email","value":"Email","type":"email","required":true},{"label":"Please Enter Room Service Items","value":"Insert Room Service Items","type":"text","required":true}],"formValue":{"Room Number":"","Password":"","Email":"","Insert Room Service Items":""},"payload":"","topic":"","x":70,"y":60,"wires":[["2b579eb.7793a62","8fc65b7a.001d18"]]},{"id":"e91de804.7760f8","type":"ui_form","z":"59723f02.6eb58","name":"","label":"Delete Job","group":"f7845451.ab1928","order":0,"width":0,"height":0,"options":[{"label":"Please Enter Job ID","value":"Delete Job ID","type":"text","required":true}],"formValue":{"Delete Job ID":""},"payload":"","topic":"","x":80,"y":80,"wires":[["80833bc8.63da68"]]},{"id":"64f71f6f.adf67","type":"ui_form","z":"4b79a9e1.930808","name":"","label":"Update Job Status Form","group":"2f16bd17.730e62","order":0,"width":0,"height":0,"options":[{"label":"Please Enter Job ID","value":"ID","type":"text","required":true},{"label":"Please Enter Job Status","value":"Job Status","type":"text","required":true}],"formValue":{"ID":"","Job Status":""},"payload":"","topic":"","x":130,"y":220,"wires":[["43825bb1.896a24"]]},{"id":"d2710457.11ce48","type":"ui_form","z":"c0c65810.b182e8","name":"","label":"Delete Range of Job(s)","group":"d3b284a4.4789d8","order":0,"width":0,"height":0,"options":[{"label":"From ID (Lowest)","value":"From","type":"text","required":true},{"label":"To ID (Highest)","value":"To","type":"text","required":true}],"formValue":{"From":"","To":""},"payload":"","topic":"msg.payload","x":140,"y":120,"wires":[["8876730c.5a39b"]]},{"id":"6096793e.844ff8","type":"ui_template","z":"60521f83.f8f7b","group":"9d3bde2e.93e0e","name":"Logo / Clock","order":0,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n    var clockInterval;\n    $(function () {\n        if (clockInterval) return;\n\n        //add logo\n        var div1 = $('<div/>');\n        var logo = new Image();\n\n        logo.src = '/logo.png'\n        logo.height = 60;\n        div1[0].style.margin = '4px auto';\n\n        div1.append(logo);\n\n        //add clock\n        var div2 = $('<div/>');\n        var p = $('<p/>');\n\n        div2.append(p);\n        div2[0].style.margin = '5px';\n\n        function displayTime() {\n            p.text(new Date().toLocaleString());\n        }\n        \n        clockInterval = setInterval(displayTime, 1000);\n\n        //add to toolbar when it's available\n        var addToToolbarTimer;\n        \n        function addToToolbar() {\n            var toolbar = $('.md-toolbar-tools');\n            \n            if(!toolbar.length) return;\n            \n            toolbar.append(div1);\n            toolbar.append(div2);\n            clearInterval(addToToolbarTimer);\n        }\n        addToToolbarTimer = setInterval(addToToolbar, 100);\n    });\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":610,"y":220,"wires":[[]]},{"id":"ad489ccd.214b4","type":"sqldbs","z":"8f30f009.b5868","mydb":"48cdc586.7ea4cc","querytype":"select","name":"","x":580,"y":380,"wires":[["faa83741.810758","ad5d0c56.3bd9c"]]},{"id":"860a7750.bd0788","type":"debug","z":"8f30f009.b5868","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":610,"y":500,"wires":[]},{"id":"f975dbc3.e13668","type":"function","z":"8f30f009.b5868","name":"TEST","func":"msg.topic = \"SELECT * FROM dbo.NodeRedData ORDER BY id DESC\";\nreturn msg;","outputs":1,"noerr":0,"x":410,"y":220,"wires":[["ad489ccd.214b4","acedeb7f.0f8f28"]]},{"id":"acedeb7f.0f8f28","type":"debug","z":"8f30f009.b5868","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":370,"y":280,"wires":[]},{"id":"faa83741.810758","type":"change","z":"8f30f009.b5868","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":460,"wires":[["860a7750.bd0788"]]},{"id":"ad5d0c56.3bd9c","type":"change","z":"8f30f009.b5868","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":380,"wires":[["72dfa212.5c91fc"]]},{"id":"228b227e.eab39e","type":"comment","z":"8f30f009.b5868","name":"SELECTS DATA FROM MY MSSQL DATABASE","info":"","x":560,"y":180,"wires":[]},{"id":"eef9f24b.ecad6","type":"comment","z":"8f30f009.b5868","name":"CHANGES ARRAY FROM 2 TO 1","info":"","x":730,"y":420,"wires":[]},{"id":"4c3ce79c.3446f8","type":"debug","z":"8f30f009.b5868","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":990,"y":640,"wires":[]},{"id":"42a3b34d.1ff3ac","type":"template","z":"8f30f009.b5868","name":"HTML TABLE","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n    \n<table>\n  <tr>\n    <th>id</th>\n    <th>Topic</th>\n    <th>Room Number</th>\n    <th>Information</th>\n    <th>Status</th>\n    <th>Timestamp</th>\n  </tr>\n  \n  {{#payload}}\n  <tr>\n    <td>{{{id}}}</td>\n    <td>{{{Topic}}}</td>\n    <td>{{{JobType}}}</td>\n    <td>{{{Information}}}</td>\n    <td>{{{Status}}}</td>\n    <td>{{{Timestamp}}}</td>\n  </tr>\n{{/payload}}\n</table>\n</html>","output":"str","x":1040,"y":560,"wires":[["eeab512c.21c3","4c3ce79c.3446f8"]]},{"id":"618b88df.0ecc18","type":"debug","z":"8f30f009.b5868","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1050,"y":460,"wires":[]},{"id":"8099c9a4.c7d558","type":"debug","z":"8f30f009.b5868","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1280,"y":800,"wires":[]},{"id":"eeab512c.21c3","type":"ui_template","z":"8f30f009.b5868","group":"1cd4729b.9f3d3d","name":"","order":0,"width":"24","height":"12","format":"<style>\n    {{msg.style}}\n</style>\n<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1240,"y":740,"wires":[["8099c9a4.c7d558"]]},{"id":"72dfa212.5c91fc","type":"template","z":"8f30f009.b5868","name":"css test","field":"style","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"table {\n    font-family: \"Trebuchet MS\", Arial, Helvetica, sans-serif;\n    border-collapse: collapse;\n    width: 100%;\n}\n\n td, th {\n    border: 1px solid #ddd;\n    padding: 8px;\n    text-align: center;\n}\n\ntr:nth-child(even){background-color: #f2f2f2;}\n\ntr:hover {background-color: #ddd;}\n\nth {\n    padding-top: 12px;\n    padding-bottom: 12px;\n    text-align: center;\n    background-color: #4CAF50;\n    color: white;\n}","output":"str","x":870,"y":480,"wires":[["42a3b34d.1ff3ac","618b88df.0ecc18"]]},{"id":"8c1ebd25.92b2c","type":"sqldbs","z":"96fd6a7d.c63498","mydb":"2ed1fbb9.386894","querytype":"select","name":"","x":240,"y":240,"wires":[["15276dc3.6c3692","b082f444.eba688"]]},{"id":"59801652.ff3628","type":"function","z":"96fd6a7d.c63498","name":"Verification Attempt","func":"msg.topic = \"(SELECT COUNT(1) FROM dbo.passwordstore WHERE Room = '\" + msg.payloaddata[\"Room Number\"] + \"' AND Password = '\" + msg.payloaddata[\"Password\"] + \"' AND Email = '\" + msg.payloaddata[\"Email\"] + \"')\";\nreturn msg;","outputs":1,"noerr":0,"x":190,"y":180,"wires":[["f438b290.f5cac","8c1ebd25.92b2c"]]},{"id":"15276dc3.6c3692","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":410,"y":240,"wires":[]},{"id":"f438b290.f5cac","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":350,"y":180,"wires":[]},{"id":"cccc60ec.0c8ea","type":"switch","z":"96fd6a7d.c63498","name":"","property":"payload","propertyType":"msg","rules":[{"t":"nnull"},{"t":"null"}],"checkall":"true","repair":false,"outputs":2,"x":510,"y":440,"wires":[["46df93bf.0dbb4c","5d6d5fec.486ea"],[]]},{"id":"de2dfea7.31529","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":470,"y":360,"wires":[]},{"id":"5b4f362b.60b8c8","type":"debug","z":"f1d7872.a535978","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1130,"y":260,"wires":[]},{"id":"5c0493b3.5539bc","type":"function","z":"f1d7872.a535978","name":"Update Status","func":"msg.topic = \"UPDATE dbo.PasswordStore SET Password ='\" + msg.payload[\"Password\"] + \"', Email ='\" + msg.payload[\"Email\"] + \"' WHERE Room =\" + msg.payload.Room + \" \";\nreturn msg;","outputs":1,"noerr":0,"x":560,"y":180,"wires":[["c0e0107e.030ab","dc673607.2b7f88"]]},{"id":"c0e0107e.030ab","type":"sqldbs","z":"f1d7872.a535978","mydb":"2ed1fbb9.386894","querytype":"update","name":"","x":960,"y":160,"wires":[["5b4f362b.60b8c8"]]},{"id":"3fc40630.40ffca","type":"ui_form","z":"f1d7872.a535978","name":"","label":"Update Room Verification Details Form","group":"f52915c8.50e0d8","order":0,"width":0,"height":0,"options":[{"label":"Please Enter Room Number","value":"Room","type":"text","required":true},{"label":"Please Enter New Password","value":"Password","type":"text","required":true},{"label":"Please Enter Customer's Email","value":"Email","type":"email","required":true}],"formValue":{"Room":"","Password":"","Email":""},"payload":"","topic":"","x":210,"y":140,"wires":[["5c0493b3.5539bc"]]},{"id":"dc673607.2b7f88","type":"debug","z":"f1d7872.a535978","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":680,"y":300,"wires":[]},{"id":"8fc65b7a.001d18","type":"change","z":"96fd6a7d.c63498","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payloaddata","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":150,"y":120,"wires":[["59801652.ff3628","2a88acbd.889884"]]},{"id":"2a88acbd.889884","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":310,"y":120,"wires":[]},{"id":"b55c797a.c22ce8","type":"inject","z":"8f30f009.b5868","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":true,"onceDelay":0.1,"x":150,"y":80,"wires":[["f975dbc3.e13668"]]},{"id":"143d7157.97da0f","type":"sqldbs","z":"89e61aba.e37948","mydb":"2ed1fbb9.386894","querytype":"select","name":"","x":580,"y":360,"wires":[["3b7785f2.f5c64a","652fecd.ff02e14"]]},{"id":"8f17a114.f9a7","type":"debug","z":"89e61aba.e37948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":590,"y":480,"wires":[]},{"id":"98082811.34df38","type":"function","z":"89e61aba.e37948","name":"TEST","func":"msg.topic = \"SELECT * FROM dbo.PasswordStore ORDER BY Room ASC\";\nreturn msg;","outputs":1,"noerr":0,"x":390,"y":200,"wires":[["143d7157.97da0f","d163c08f.bef25"]]},{"id":"d163c08f.bef25","type":"debug","z":"89e61aba.e37948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":350,"y":260,"wires":[]},{"id":"3b7785f2.f5c64a","type":"change","z":"89e61aba.e37948","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":440,"wires":[["8f17a114.f9a7"]]},{"id":"652fecd.ff02e14","type":"change","z":"89e61aba.e37948","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":360,"wires":[["d81141ab.11aaa"]]},{"id":"636b7cac.9429d4","type":"comment","z":"89e61aba.e37948","name":"SELECTS DATA FROM MY MSSQL DATABASE","info":"","x":540,"y":160,"wires":[]},{"id":"470d35.f5fbb2cc","type":"comment","z":"89e61aba.e37948","name":"CHANGES ARRAY FROM 2 TO 1","info":"","x":710,"y":400,"wires":[]},{"id":"6f9e886d.a51358","type":"debug","z":"89e61aba.e37948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":970,"y":620,"wires":[]},{"id":"435bd0ac.b6f7","type":"template","z":"89e61aba.e37948","name":"HTML TABLE","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n    \n<table>\n  <tr>\n    <th>Room</th>\n    <th>Password</th>\n    <th>Email</th>\n  </tr>\n  \n  {{#payload}}\n  <tr>\n    <td>{{{Room}}}</td>\n    <td>{{{Password}}}</td>\n    <td>{{{Email}}}</td>\n  </tr>\n{{/payload}}\n</table>\n</html>","output":"str","x":1020,"y":540,"wires":[["37c9fe49.3b8fd2","6f9e886d.a51358"]]},{"id":"fa6f2ebb.54465","type":"debug","z":"89e61aba.e37948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1030,"y":440,"wires":[]},{"id":"ee52337.3002dd","type":"debug","z":"89e61aba.e37948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1260,"y":780,"wires":[]},{"id":"37c9fe49.3b8fd2","type":"ui_template","z":"89e61aba.e37948","group":"e9326d39.818f3","name":"","order":0,"width":"0","height":"0","format":"<style>\n    {{msg.style}}\n</style>\n<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1220,"y":720,"wires":[["ee52337.3002dd"]]},{"id":"d81141ab.11aaa","type":"template","z":"89e61aba.e37948","name":"css test","field":"style","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"table {\n    font-family: \"Trebuchet MS\", Arial, Helvetica, sans-serif;\n    border-collapse: collapse;\n    width: 100%;\n}\n\n td, th {\n    border: 1px solid #ddd;\n    padding: 8px;\n    text-align: center;\n}\n\ntr:nth-child(even){background-color: #f2f2f2;}\n\ntr:hover {background-color: #ddd;}\n\nth {\n    padding-top: 12px;\n    padding-bottom: 12px;\n    text-align: center;\n    background-color: #4CAF50;\n    color: white;\n}","output":"str","x":850,"y":460,"wires":[["435bd0ac.b6f7","fa6f2ebb.54465"]]},{"id":"43bcd993.d067c8","type":"inject","z":"89e61aba.e37948","name":"","topic":"","payload":"","payloadType":"date","repeat":"10","crontab":"","once":true,"onceDelay":0.1,"x":130,"y":60,"wires":[["98082811.34df38"]]},{"id":"21c436b.97a5aca","type":"ui_toast","z":"96fd6a7d.c63498","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"OK","cancel":"","topic":"Successful!","name":"Success pop-up","x":800,"y":480,"wires":[["4703e91e.cba818"]]},{"id":"5d6d5fec.486ea","type":"change","z":"96fd6a7d.c63498","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Your room service request was successful!","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":740,"y":440,"wires":[["21c436b.97a5aca"]]},{"id":"b082f444.eba688","type":"change","z":"96fd6a7d.c63498","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":260,"y":300,"wires":[["6b5e003a.99b","cea9b283.2c41d"]]},{"id":"6b5e003a.99b","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":430,"y":300,"wires":[]},{"id":"4703e91e.cba818","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":950,"y":480,"wires":[]},{"id":"cea9b283.2c41d","type":"function","z":"96fd6a7d.c63498","name":"Return Value 1 or Null","func":"var array = msg.payload;\nif (msg.payload[0][\"\"]== \"1\")  {\n   return [ msg, null ];\n} else {\n   return [null, msg  ];\n}\nreturn msg1, msg2;","outputs":2,"noerr":0,"x":280,"y":360,"wires":[["cccc60ec.0c8ea","de2dfea7.31529"],["ed1ae462.b8e6e8"]]},{"id":"4fb4d54d.be0fec","type":"ui_toast","z":"96fd6a7d.c63498","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"OK","cancel":"","topic":"Error","name":"","x":190,"y":520,"wires":[["95a4d5ee.342008"]]},{"id":"ed1ae462.b8e6e8","type":"change","z":"96fd6a7d.c63498","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"Your room details have been entered incorrectly. Please try again, or if you have lost your room details, please contact Reception.","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":180,"y":460,"wires":[["4fb4d54d.be0fec","7e6bc4c0.748bdc"]]},{"id":"7e6bc4c0.748bdc","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":460,"wires":[]},{"id":"95a4d5ee.342008","type":"debug","z":"96fd6a7d.c63498","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":520,"wires":[]},{"id":"70c0317e.13625","type":"ui_form","z":"e33cf5ce.702c38","name":"","label":"","group":"69501d5f.4e7c24","order":0,"width":0,"height":0,"options":[{"label":"Please enter the room number to which you want the details for.","value":"Room","type":"text","required":true},{"label":"Please enter the customer's phone number to send their details via text.","value":"number","type":"text","required":false},{"label":"Please enter customer email.","value":"Cust","type":"text","required":false}],"formValue":{"Room":"","number":"","Cust":""},"payload":"","topic":"","x":90,"y":40,"wires":[["78382508.b5fe0c"]]},{"id":"be3a89ad.e11128","type":"function","z":"e33cf5ce.702c38","name":"TEST","func":"msg.topic = \"SELECT * FROM dbo.PasswordStore WHERE Room='\" + msg.payload[\"Room\"] + \"'\";\nreturn msg;","outputs":1,"noerr":0,"x":270,"y":140,"wires":[["15dc12f7.530d8d","b6a4d2b3.42f3a"]]},{"id":"15dc12f7.530d8d","type":"debug","z":"e33cf5ce.702c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":330,"y":240,"wires":[]},{"id":"9a86b8ee.b96d08","type":"template","z":"e33cf5ce.702c38","name":"HTML","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<!DOCTYPE html>\n<html>\n    <head>\n{{#payload}}\n    <h1>Room Number - {{{Room}}}</h1>\n    </head>\n<body>\n    <p>Email Address - {{{Email}}}</p>\n    <p>Password - {{{Password}}}</p>\n    </body>\n{{/payload}}\n</html>","output":"str","x":710,"y":120,"wires":[["4d69f146.2c893"]]},{"id":"b6a4d2b3.42f3a","type":"sqldbs","z":"e33cf5ce.702c38","mydb":"2ed1fbb9.386894","querytype":"select","name":"","x":420,"y":180,"wires":[["e3e0c534.d99248"]]},{"id":"e3e0c534.d99248","type":"change","z":"e33cf5ce.702c38","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":560,"y":260,"wires":[["9a86b8ee.b96d08","a845b7d1.537638","8a566658.164d78","cd79aed6.49609"]]},{"id":"5b83f32.386c30c","type":"e-mail","z":"e33cf5ce.702c38","server":"smtp.gmail.com","port":"465","secure":true,"name":"","dname":"","x":910,"y":40,"wires":[]},{"id":"4d69f146.2c893","type":"change","z":"e33cf5ce.702c38","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Your Room Details","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":80,"wires":[["5b83f32.386c30c","3e8d67bc.a6ba68"]]},{"id":"8075de99.fc67c","type":"serial out","z":"e33cf5ce.702c38","name":"","serial":"497925b0.375a6c","x":1260,"y":280,"wires":[]},{"id":"cd79aed6.49609","type":"function","z":"e33cf5ce.702c38","name":"Send to number","func":"var num = msg.number;\nvar at_cmd = \"AT+CMGS=\\\"\"+num+\"\\\"\";\n\nmsg.payload=at_cmd+\"\\r\";\n\nreturn msg;","outputs":1,"noerr":0,"x":960,"y":260,"wires":[["8075de99.fc67c","e35a4486.f1d668"]]},{"id":"10f94766.829f59","type":"serial in","z":"e33cf5ce.702c38","name":"","serial":"497925b0.375a6c","x":240,"y":480,"wires":[["23338114.0aadce"]]},
4 
{"id":"23338114.0aadce","type":"debug","z":"e33cf5ce.702c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":300,"y":600,"wires":[]},{"id":"3e8d67bc.a6ba68","type":"debug","z":"e33cf5ce.702c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":940,"y":160,"wires":[]},{"id":"78382508.b5fe0c","type":"change","z":"e33cf5ce.702c38","name":"","rules":[{"t":"move","p":"payload.Cust","pt":"msg","to":"to","tot":"msg"},{"t":"move","p":"payload.number","pt":"msg","to":"number","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":220,"y":80,"wires":[["be3a89ad.e11128","c64d8d29.078b7"]]},{"id":"c64d8d29.078b7","type":"debug","z":"e33cf5ce.702c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":460,"y":80,"wires":[]},{"id":"e35a4486.f1d668","type":"debug","z":"e33cf5ce.702c38","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":1160,"y":360,"wires":[]},{"id":"dbcb3be5.c77b28","type":"function","z":"e33cf5ce.702c38","name":"Send Message","func":"var sms_msg = msg.payload;\n\nmsg.payload=sms_msg+\"\\x1A\";\n//msg.payload.msg =msg.payload.message;\n\nreturn msg;","outputs":1,"noerr":0,"x":1100,"y":600,"wires":[["8075de99.fc67c"]]},{"id":"8a566658.164d78","type":"delay","z":"e33cf5ce.702c38","name":"Wait for > prompt","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":922,"y":538,"wires":[["dbcb3be5.c77b28"]]},{"id":"a845b7d1.537638","type":"delay","z":"e33cf5ce.702c38","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":860,"y":340,"wires":[["f137aba4.ea6408"]]},{"id":"f137aba4.ea6408","type":"function","z":"e33cf5ce.702c38","name":"Write newline","func":"msg.payload=\"\\r\\n\";\nreturn msg;","outputs":1,"noerr":0,"x":1040,"y":420,"wires":[["8075de99.fc67c"]]}]

Thanks.

5

@liambroughton500 - I should have asked you to create a small example of the issue. I’m not sure anyone is going to go thru your entire flow to see where you are displaying things.

My suggestion would be to copy your entire flow and then stop NR. restart NR using “node-red issue.json” which will create a brand new json file. Import your existing flow from the clipboard and then remove everything that is not involved with the display. If you need to send data to the display, use a combination of inject and change nodes to build the data.

This way someone can see just the UI issue you are having without spending a large amount of time digging thru the rest of your flow. You should be able to recreate the issue in a single tab with very few nodes.

6

Also, what device are you using to look at it?

7

@zenofmud - The device I am using to test this on is a Samsung Galaxy S7 Edge. However I have a Samsung Galaxy S6, Samsung Galaxy Tab 4 and a Motorola Moto G 1st gen I can test on also (The Samsung Galaxy Tab 4 displays it perfectly, due to the bigger screen resolution on the device.

I have managed to re-size the logo on the toolbar (obviously that wasn’t what my original question was about).

Regarding what you suggested, I am unsure what you mean about using inject and change nodes?? In the flow I sent above, the ui_forms are literally at the top of each flow heading. I do not have any more ui_forms in my flow.

Also, if I am just displaying the forms with none of the other nodes in the flow, surely this wouldn’t make any difference to the output on the dashboard?

Thanks.

8

That is what @zenofmud meant. Create a sample consisting of the minimum amount of nodes that show the problem so we can easily just import it and see the issue. One way is to make a copy of the flows_xxx.json file as a backup. Then delete all the tabs and nodes that are not necessary, check it still shows the issue and export that. Then you can just restore the file from your backup and restart node-red.

9

@Colin - I have gotten rid of all of my other nodes in my flow, and I am now left with one ui_form, which is displaying incorrectly on my mobile.

[{"id":"163fbb35.2599e5","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"d19d1baa.2bcc88","type":"ui_tab","z":"","name":"Home","icon":"dashboard"},{"id":"43c014bc.1e8f1c","type":"ui_group","z":"","name":"Default","tab":"d19d1baa.2bcc88","disp":true,"width":"18","collapse":false},{"id":"ada33f4a.5c4a1","type":"ui_base","theme":{"name":"theme-light","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#0094CE","value":"#0094CE","edited":false},"page-titlebar-backgroundColor":{"value":"#0094CE","edited":false},"page-backgroundColor":{"value":"#fafafa","edited":false},"page-sidebar-backgroundColor":{"value":"#ffffff","edited":false},"group-textColor":{"value":"#1bbfff","edited":false},"group-borderColor":{"value":"#ffffff","edited":false},"group-backgroundColor":{"value":"#ffffff","edited":false},"widget-textColor":{"value":"#111111","edited":false},"widget-backgroundColor":{"value":"#0094ce","edited":false},"widget-borderColor":{"value":"#ffffff","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"80c9aac5.9879d8","type":"ui_form","z":"163fbb35.2599e5","name":"","label":"","group":"43c014bc.1e8f1c","order":0,"width":"16","height":"1","options":[{"label":"Room Number","value":"Room","type":"text","required":true},{"label":"Password","value":"Password","type":"text","required":false},{"label":"Email","value":"Email","type":"text","required":false},{"label":"Please enter the room service items you want to order.","value":"Service","type":"text","required":false}],"formValue":{"Room":"","Password":"","Email":"","Service":""},"payload":"","topic":"","x":153,"y":79,"wires":[[]]}]

Thanks.

10

This flow looks fine on my iPhone 6 and when I look using FireFox and responsive design and pick every device they have listed.

The iPhone display looks exactly like your phone display. When you click on a item, the text shrinks and you can enter data in that field.

11

@zenofmud - I appreciate that the flow is working, and I can enter data in the field, but I do not want the fields to shrink. That was the whole point of the post.

I understand that this is a responsive view design, but is there a way to totally ignore the responsive view? Is this configurable within Node-RED, or is it device specific

Also:

I would ideally like the buttons on the form to be displayed to the right of the fields, is it possible to configure the position of the buttons? Or is this something we can maybe implement in future releases of the Node-RED dashboard?

Thanks,

12

Being able to configure the layout of the dashboard nodes would be a big advantage to a lot of users I would have thought.

I am not sure how difficult this is on your guys’ side, but it could definitely bring something more to the Node-RED dashboard, to make it more configurable for users to play about with, such as configuring the size of the form, rather than just the width, being able to configure the button sizes, field sizes etc.

Just an idea.

13

Any dashboard is going to be something of a compromise. Having a fairly fixed layout of widgets within a group - but reactive groups to try to fit screens seemed like a good way to allow users to create something quickly but still with some multi device capability without any effort. There is a lot you can do to change the fundamental units of the layout (which would change the form) - and indeed you don’t need to use the ui_form to create a form - you can use a join node on the Node-RED side to collect a series of inputs into a single message.

Of course we are more than happy to look at Pull Requests to improve both the form and the overall dashboard… we like ideas - but we like lines of code more.

1 Like
14

@dceejay - Oh yes, I completely understand the reasoning behind having a responsive dashboard. Having this makes it so much easier for users to create it quickly, without having to worry about compatibility with devices with smaller screens.

I will definitely look into using the join node, however I may try to design my own form using CSS and HTML (and maybe Javascript?). I am not too familiar with this, but at least it’s something else to get my brain ticking along!

Thanks for the explanation and idea.

15

Not to pile more onto your plate, but you can build some pretty nice multi-field UI “forms-looking” pages, with interactive field logic, using just html element with angular directives, and with the built-in dashboard material design elements

16

@shrickus - This sounds very interesting!

I am looking to try and get the system I am developing, the “best” I can really. So any minor part I think could work better, or make the interface that little bit easier to use, I will look into.

Thanks for the suggestion.