# Dropdown Not Displayed in UI Dashboard, Only in Node-RED Editor

**URL:** https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118
**Category:** Developing Nodes
**Tags:** dashboard-2
**Created:** [23 December 2024 10:32 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118 "2024-12-23T10:32:15Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)
#### Post date: [23 December 2024 10:32 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/1 "2024-12-23T10:32:15Z")

</div>

I’m creating a custom Node-RED node that includes a Vue.js-based dropdown using `v-autocomplete`. The goal is to display this dropdown in the Node-RED UI Dashboard. However, the dropdown appears only in the Node-RED editor and not in the actual dashboard.

Here’s a summary of my setup:

1. The node’s HTML contains a `<template>` block for rendering the dropdown.
2. The Vue.js script dynamically populates the dropdown options based on incoming messages (`msg.payload`).
3. The Vue component renders correctly in the editor, but the dropdown is not visible in the dashboard.

```auto
<template>
  <div>
    <div class="msg">
      <v-form>
        <v-autocomplete
          :items="topologies.map(topology => topology.name)"
          label="Select Topology"
          placeholder="Search for the topologies"
          clearable
          chips
          variant="underlined"
          closable-chips
          v-model="selectedTopology">
        </v-autocomplete>
      </v-form>
      <div id="topology-container"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      topologies: [],
      selectedTopology: null,
    };
  },
  mounted() {
    this.$watch('msg.payload', (newPayload) => {
      if (Array.isArray(newPayload)) {
        this.topologies = newPayload;
      }
    });
  },
};
</script>

<style>
#topology-container {
  width: 100%;
  height: 100%;
}
</style>

```

- How can I ensure the dropdown renders in the UI Dashboard rather than in the Node-RED editor?
- Are there any specific considerations for embedding Vue.js components in the dashboard?
- Do I need to modify the `<template>` block or use a different approach to integrate with the dashboard?

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 December 2024 10:44 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/2 "2024-12-23T10:44:22Z")

</div>

When you say it's rendering in the Node-RED Editor, can you screenshot this please?

I recommend forking [GitHub - FlowFuse/node-red-dashboard-2-ui-example: An example project for writing third-party nodes that integrate with Node-RED Dashboard 2.0](https://github.com/FlowFuse/node-red-dashboard-2-ui-example) in order to build your custom node as that already contains all of the templated code and folder structure you would need.

You can also read more about this in our documentation [here](https://dashboard.flowfuse.com/contributing/widgets/third-party.html)

---

<div class="post-metadata">

### Author: ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)
#### Post date: [23 December 2024 11:11 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/3 "2024-12-23T11:11:08Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/b/3b3af1489ae0111fd94ffb447e5db08ef03ba3ef.png)  
but i need to bring that dropdown functionality through the dashboard ui. i created a new custom node red

---

<div class="post-metadata">

### Author: ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)
#### Post date: [23 December 2024 11:33 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/4 "2024-12-23T11:33:41Z")

</div>

For any pieces in the Node-RED Editor, you need to use jQuery or plain HTML/JS. The Vue components only work in the Dashboard itself, which you define in the `.vue` files (see the documentation and example I linked previously which covers this in more detail)

---

<div class="post-metadata">

### Author: ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)
#### Post date: [26 December 2024 07:06 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/5 "2024-12-26T07:06:39Z")

</div>

i followed the same example to understand and trying to create a new one with only one button. but i could get the proper output.

this is my ui-my-widget.html

```auto
<script type="text/javascript">
    RED.nodes.registerType("ui-my-widget", {
        category: "dashboard",
        color: "#f39c12",
        defaults: {
            name: { value: "" },
            group: { type: "ui_group" },
            order: { value: 0 },
            width: { value: 6 },
            height: { value: 1 },
        },
        icon: "dashboard.png",
        paletteLabel: "My Widget",
        label: function () {
            return this.name || "my widget";
        },
    });
</script>

<script type="text/html" data-template-name="ui-my-widget">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" />
    </div>
</script>

<script type="text/html" data-help-name="ui-my-widget">
    <p>A custom widget for the Node-RED Dashboard 2.0.</p>
</script>

```

in my js file: ui-my-widget.js

```auto

module.exports = function (RED) {
    function UIMyWidgetNode(config) {
        RED.nodes.createNode(this, config);
        const node = this;

        // Get the group configuration
        const group = RED.nodes.getNode(config.group);

        // Register the widget with the Dashboard
        group.register(node, config, {
            events: {}, // Define events if needed
        });
    }

    // Register the node with Node-RED
    RED.nodes.registerType("ui-my-widget", UIMyWidgetNode);
};

```

my widget vue template: MyWidget.vue

```auto
<template>
    <div class="my-widget">
        <h3>{{ title }}</h3>
        <p>{{ description }}</p>
        <button @click="handleClick">Click Me</button>
    </div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: "My Custom Widget",
        },
        description: {
            type: String,
            default: "This is a custom widget for Node-RED Dashboard.",
        },
    },
    methods: {
        handleClick() {
            console.log("Button clicked in the widget!");
        },
    },
};
</script>

<style>
.my-widget {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}
</style>

```

exported the vue components : `ui/index.js`

```auto
import MyWidget from "./components/MyWidget.vue";

export default {
    components: {
        MyWidget,
    },
};

```

Build Configuration (`vite.config.js`)

```auto
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    build: {
        lib: {
            entry: "./ui/index.js",
            name: "ui-my-widget",
            fileName: "ui-my-widget",
            formats: ["umd"],
        },
        rollupOptions: {
            output: {
                globals: {
                    vue: "Vue",
                },
            },
        },
    },
    plugins: [vue()],
});

```

package.json:

```auto
{
  "name": "red-dashboard-2-my-widget",
  "version": "1.0.0",
  "description": "",
  "main": "nodes/ui-my-widget.js",
  "scripts": {
    "build": "vite build",  
    "dev": "vite",             
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "vue": "^3.2.0",
    "vite": "^4.0.0"
  },
    "devDependencies": {
      "@vitejs/plugin-vue": "^4.0.0"
  },
    "node-red": {
      "nodes": {
          "ui-my-widget": "nodes/ui-my-widget.js"
      }
  },
  "node-red-dashboard-2": {
      "widgets": {
          "ui-my-widget": {
              "output": "ui-my-widget.umd.js",
              "component": "MyWidget"
          }
      }
  },
  "author": "",
  "license": "ISC"
}

```

and my final output is like in the editor

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/eda1f55a9aae672bd54248bb87460c582de417f5.png)

why i m not able to see the button in the ui.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 December 2024 11:17 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/6 "2024-12-26T11:17:37Z")

</div>

> [@Nandhini-Subramaniya](#):
>
> why i m not able to see the button in the ui.

Assuming you are meaning the button you defined in the Vue html...

Where are you expecting to see the button ? In the node-red edit form?

---

<div class="post-metadata">

### Author: ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)
#### Post date: [26 December 2024 11:30 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/7 "2024-12-26T11:30:06Z")

</div>

no in the ui. i mean the dashboard

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 December 2024 12:43 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/8 "2024-12-26T12:43:02Z")

</div>

Have you added an instance of your node to the workspace and deployed it & refreshed the dashboard?

Actually. I just noticed you don't have any group specifier. What I mean by that is look at any of the built in nodes (like ui-text) - they all have a group selector so that the dashboard knows where to render the Vue to.

---

<div class="post-metadata">

### Author: ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)
#### Post date: [26 December 2024 14:33 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/9 "2024-12-26T14:33:27Z")

</div>

i did not get it . where i can modify my code.give me some information regarding that.

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 December 2024 14:44 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/10 "2024-12-26T14:44:59Z")

</div>

Look at the open and available source of any working dashboard 2 node and you will see where the group is defined in the html file.

E.g: [node-red-dashboard/nodes/widgets/ui\_button.html at 6e66c17846b26a37c6443550e51741b6825e9e1c · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/blob/6e66c17846b26a37c6443550e51741b6825e9e1c/nodes/widgets/ui_button.html#L157-L160)

  

Also, it's ui-group not ui\_group

> [@Nandhini-Subramaniya](#):
>
> `group: { type: "ui_group" },`

See [node-red-dashboard/nodes/widgets/ui\_button.html at 6e66c17846b26a37c6443550e51741b6825e9e1c · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/blob/6e66c17846b26a37c6443550e51741b6825e9e1c/nodes/widgets/ui_button.html#L10)

---

<div class="post-metadata">

### Author: ![Nandhini-Subramaniya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nandhini-subramaniya/32/92882_2.png) [@Nandhini-Subramaniya](https://discourse.nodered.org/u/Nandhini-Subramaniya)
#### Post date: [26 December 2024 14:52 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/11 "2024-12-26T14:52:04Z")

</div>

now i changed my code by your guidance,still i did get the vue template button is not appearing in the dashboard. this is my code i changed and my configuration is given below:

```auto
<script type="text/javascript">
    RED.nodes.registerType("ui-my-widget", {
        category: "dashboard",
        color: "#f39c12",
        defaults: {
            name: { value: "" },
            group: { type: 'ui-group', required: true },
            order: { value: 0 },
            width: {
                    value: 0,
                    validate: function (v) {
                        const width = v || 0
                        const currentGroup = $('#node-input-group').val() || this.group
                        const groupNode = RED.nodes.node(currentGroup)
                        const valid = !groupNode || +width <= +groupNode.width
                        $('#node-input-size').toggleClass('input-error', !valid)
                        return valid
                    }
                },
            height: { value: 0 },
        },
        icon: "dashboard.png",
        paletteLabel: "My Widget",
        label: function () {
            return this.name || "my widget";
        },
        inputs: 1,
        outputs: 0,
        align: 'right',
        oneditprepare: function () {
                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
                if (RED.nodes.subflow(this.z)) {
                    // change inputs from hidden to text & display them
                    $('#node-input-width').attr('type', 'text')
                    $('#node-input-height').attr('type', 'text')
                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
                    $('div.form-row.nr-db-ui-manual-size-row').show()
                } else {
                    // not in a subflow, use the elementSizer
                    $('div.form-row.nr-db-ui-element-sizer-row').show()
                    $('div.form-row.nr-db-ui-manual-size-row').hide()
                    $('#node-input-size').elementSizer({
                        width: '#node-input-width',
                        height: '#node-input-height',
                        group: '#node-input-group'
                    })
                }

                         
            }
    });
</script>

<script type="text/html" data-template-name="ui-my-widget">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" />
    </div>
    <div class="form-row">
        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-text.label.group"></label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-text.label.width">Width</label>
        <input type="hidden" id="node-input-width">
    </div>
    <div class="form-row nr-db-ui-manual-size-row">
        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-text.label.height">Height</label>
        <input type="hidden" id="node-input-height">
    </div>
</script>

<script type="text/html" data-help-name="ui-my-widget">
    <p>A custom widget for the Node-RED Dashboard 2.0.</p>
</script>

```

configuration for the editor page : for group

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/d/1d59489815e846d052999334220955d276ac238b.png)

in dashboard ui. i m getting the output as empty:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf6b09c9670ab4ebaf97e04cc7a6569e34852e6a.png)  
why i m not getting the vue button in the ui.

---

<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: [26 March 2025 14:52 UTC](https://discourse.nodered.org/t/dropdown-not-displayed-in-ui-dashboard-only-in-node-red-editor/94118/12 "2025-03-26T14:52:51Z")

</div>

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