# How to create Dynamic Dashboard

**URL:** <https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, database\
**Created:** [16 August 2024 09:19 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212 "2024-08-16T09:19:26Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![lebao](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@lebao](https://discourse.nodered.org/u/lebao)\
**Post date:** [16 August 2024 09:19 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/1 "2024-08-16T09:19:26Z")

</div>

Hello! I'm having an issue with Dashboard v1.  
I created a table on PostgreSQL that includes three columns: `id`, `parameter`, and `data_type`.  
Then, I read the data and saved the `id` into a dropdown (I've managed to do this part).  
When I select an `id`, I want the appropriate node to appear based on the `data_type` (in this case, I'm only using two nodes: a dropdown and a text input) with the label being the `parameter`.

Can someone help me with this? Please provide a sample flow.  
Thank you very much!

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 August 2024 13:04 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/2 "2024-08-16T13:04:51Z")

</div>

> [@lebao](#):
>
> When I select an `id`, I want the appropriate node to appear based on the `data_type` (in this case, I'm only using two nodes: a dropdown and a text input) with the label being the `parameter`.

Welcome to the forum @lebao

Please can you explain what you mean by "I want the appropriate node to appear"?  
Maybe a sketch showing what the dashboard should display for a couple of different database IDs?

Also, why are you using a text _input_ node? Are you intending to update the database from user input?

---

<div class="post-metadata">

**Author:** ![lebao](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@lebao](https://discourse.nodered.org/u/lebao)\
**Post date:** [19 August 2024 02:54 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/3 "2024-08-19T02:54:25Z")

</div>

Hello jbudd,  
I am very grateful that you are interested in my topic.  
That sentence "I want the appropriate node to appear" means that when I select a dropdown option, the appropriate UI nodes will appear for it. For example, if I select 'Personal Information' from the dropdown, a text input for 'Full Name,' another text input for 'Age,' and a dropdown for 'Gender' will appear.  
I have researched and it seems like the `ui_control` node might be able to meet my requirements.

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [19 August 2024 04:41 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/4 "2024-08-19T04:41:16Z")

</div>

```auto
[{"id":"d3990ea58af4b54b","type":"ui_dropdown","z":"5b623fd31ca86a42","name":"","label":"","tooltip":"","place":"Select option","group":"6339e2ead216512f","order":1,"width":"8","height":"2","passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":465,"y":2300,"wires":[["d185ed3ec209d9ab","6721c09082dc906f"]]},{"id":"22b510d60b1dc7ef","type":"change","z":"5b623fd31ca86a42","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"Option 1\",\"Option 2\",\"Option 3\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":305,"y":2300,"wires":[["d3990ea58af4b54b"]]},{"id":"98ae0c1f141b6758","type":"inject","z":"5b623fd31ca86a42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":120,"y":2300,"wires":[["22b510d60b1dc7ef"]]},{"id":"d185ed3ec209d9ab","type":"switch","z":"5b623fd31ca86a42","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"Option 1","vt":"str"},{"t":"eq","v":"Option 2","vt":"str"},{"t":"eq","v":"Option 3","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":625,"y":2300,"wires":[["a4e2022d1058d45c"],["ff9da100f6eadf1a"],["c0e84872d92b02a4"]]},{"id":"a4e2022d1058d45c","type":"change","z":"5b623fd31ca86a42","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"Option 1-1\",\"Option 1-2\",\"Option 1-3\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":770,"y":2275,"wires":[["b26528bc02725907"]]},{"id":"ff9da100f6eadf1a","type":"change","z":"5b623fd31ca86a42","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"Option 2-1\",\"Option 2-2\",\"Option 2-3\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":780,"y":2300,"wires":[["b26528bc02725907"]]},{"id":"c0e84872d92b02a4","type":"change","z":"5b623fd31ca86a42","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"[\"Option 3-1\",\"Option 3-2\",\"Option 3-3\"]","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":770,"y":2325,"wires":[["b26528bc02725907"]]},{"id":"b26528bc02725907","type":"ui_dropdown","z":"5b623fd31ca86a42","name":"","label":"","tooltip":"","place":"Select option","group":"6339e2ead216512f","order":1,"width":"8","height":"2","passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":985,"y":2300,"wires":[["6721c09082dc906f"]]},{"id":"6721c09082dc906f","type":"ui_toast","z":"5b623fd31ca86a42","position":"top right","displayTime":"3","highlight":"","sendall":true,"outputs":0,"ok":"OK","cancel":"","raw":false,"className":"","topic":"","name":"","x":965,"y":2225,"wires":[]},{"id":"6339e2ead216512f","type":"ui_group","name":"Group 2","tab":"5e0dd10e66fdea95","order":2,"disp":false,"width":"30","collapse":false,"className":""},{"id":"5e0dd10e66fdea95","type":"ui_tab","name":"TEST","icon":"dashboard","order":9,"disabled":false,"hidden":false}]

```

May be like this ?

![submenu](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/c/cc60a9a6cd20b9a9cf87c85a5677a477fcbb806e.gif)

---

<div class="post-metadata">

**Author:** ![lebao](https://avatars.discourse-cdn.com/v4/letter/l/59ef9b/32.png) [@lebao](https://discourse.nodered.org/u/lebao)\
**Post date:** [26 August 2024 05:11 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/5 "2024-08-26T05:11:19Z")

</div>

Hey bro,  
Do you know how to show or hide nodes on the dashboard without using multiple groups?  
I am working on a project where, when fetching data from PostgreSQL, there is a parameter value and I want the parameters to be selected from a Dropdown or entered via text input.  
Previously, I used `ui_control` to make it dynamic, but every time I add a new device or table in PostgreSQL, I have to manually update the flow (add a new group or create a new Dropdown/Text Input). I want a dynamic solution.  
Does anyone know how or have any suggestions?

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [26 August 2024 10:05 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/6 "2024-08-26T10:05:39Z")

</div>

> [@lebao](#):
>
> to show or hide nodes on the dashboard

unable to understand this part.

> [@lebao](#):
>
> I want the parameters to be selected from a Dropdown or entered via text input.

what is the issue in the solution provided ? based on what you select in first dropdown, the second dropdown contents are dynamically changed.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [26 August 2024 11:15 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/7 "2024-08-26T11:15:37Z")

</div>

> [@lebao](#):
>
> Do you know how to show or hide nodes on the dashboard without using multiple groups?

You can hide individual elements within groups  
e.g. [Hide - show a group element - #2 by E1cid](https://discourse.nodered.org/t/hide-show-a-group-element/85154/2)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 September 2024 11:15 UTC](https://discourse.nodered.org/t/how-to-create-dynamic-dashboard/90212/8 "2024-09-25T11:15:47Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.