# Dynamically create dashboard items

**URL:** <https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841>\
**Category:** Dashboard\
**Created:** [30 July 2019 13:41 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841 "2019-07-30T13:41:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 July 2019 13:41 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841/1 "2019-07-30T13:41:07Z")

</div>

I'm redesigning my lighting control from scratch.

Previously each light belonged to a "zone" (e.g. bedroom) and each "zone" had a set of presets which were "hard-coded". Here's an example of what I mean by "hard-coded":

 ![zone%20presets](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7a5ed76aaeb5a1bfbbdc75a765cecf147a56d104.png)

In v2 of my design, I'd like to make a dashboard that will allow me to:

- create zones, assign light fixtures to zones, and create "scenes" or presets. (from dynamically populated listboxes, which I know is possible). This would allow assigning a light fixture to more than one zone, e.g. for open-plan spaces

- store the current lighting status for a given zone into a "scene" for that zone

This way, scenes and zones would be arbitrary sets, used only to _control_, (not _contain_) devices.

**The only missing piece of the jigsaw would be to somehow generate a Node-RED dashboard dynamically.**

For example, one zone might have 5 light fittings, and 7 "scenes". So I'd like to show 7 buttons and 4 sliders. Similar to this:

 ![zone-dash](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b4b28b1c746ba17b53398ab051d24975d61e44af.png)

I believe this is possible with the dashboard template node. Can someone help me get started with this node? Here's what I have so far, to dynamically generate x number of buttons depending on how many objects there are:

```auto
<script>
var value = "hello world";
// or overwrite value in your callback function ...
this.scope.action = function() { return value; }

var howmanybuttons = global.get("home.3f_bedroom.light.preset").length

for (var i=0;i < howmanybuttons;i++) {
</script>
<md-button ng-click="send({payload:action()})">
    Click me to send a hello world
</md-button>
<script>
}
</script>

```

I thought the above would display 5x buttons (given 5 preset objects that I have already created) however it just displays the one.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [30 July 2019 14:38 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841/2 "2019-07-30T14:38:19Z")

</div>

You will need to design a JavaScript Object to hold all the data in a way that makes it easy to process. you can then feed that into a Dashboard template and use ng-repeat to walk the object and create the interface.

I'm doing something similar for my new home dashboard based on an aggregation of data from heating and other sensors. But I am using uibuilder with VueJS and bootstrap-vue instead of Dashboard.

Here is some of the example code:

> **[TotallyInformation/node-red-contrib-uibuilder](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Examples-Vue-Complex-Home-Dashboard)**
>
> Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired. - TotallyInformation/node-red-contrib-uibuilder

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 July 2019 23:39 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841/3 "2019-07-30T23:39:29Z")

</div>

I have now managed to generate a set of buttons from a JS object store in global context.

However I've encountered a strange (Angular?) display issue. The first button is rendered with a greater height than the others. It's easier to show you:

 ![height](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/3651727bfb357cfade47890859a1b400c52ef5dd.png)

I've not included any additional CSS, or changed anything from the default NodeRED dashboard theme. Here's my dashboard template node:

```auto
<div layout="" layout-align="space-between">
<md-button style="display:inline-block" ng-repeat="(key, value) in msg.payload" ng-click="send({payload: value.number})">{{value.name}}</md-button>
</div>

```

Thanks in advance for any pointers

---

<div class="post-metadata">

**Author:** ![Techplex](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/techplex/32/12830_2.png) [@Techplex](https://discourse.nodered.org/u/Techplex)\
**Post date:** [30 January 2020 15:13 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841/4 "2020-01-30T15:13:18Z")

</div>

You can't interleave script and html like that. Something like this will work:

```auto
<md-button ng-click="send({payload:action()})" ng-repeat="item in global.get("home.3f_bedroom.light.preset")">
    Click me to send a hello world
</md-button>

```

---

<div class="post-metadata">

**Author:** ![moseslee1986](https://avatars.discourse-cdn.com/v4/letter/m/df788c/32.png) [@moseslee1986](https://discourse.nodered.org/u/moseslee1986)\
**Post date:** [31 January 2020 08:57 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841/5 "2020-01-31T08:57:35Z")

</div>

Hi can you please share your json or detailed code, im wondering how to iteratively create buttons as you mentioned above

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [26 February 2020 12:22 UTC](https://discourse.nodered.org/t/dynamically-create-dashboard-items/13841/6 "2020-02-26T12:22:20Z")

</div>

Hi @moseslee1986, I think this has been answered in the post directly above from @Techplex and also in the code snippet in Post #3, namely:

```auto
<md-button style="display:inline-block" ng-repeat="(key, value) in msg.payload" ng-click="send({payload: value.number})">{{value.name}}</md-button>

```

The ng-repeat basically repeats the element for each key-value pair in msg.payload (or whatever else you want)

Does that answer your question?

Cheers