# Dashboard 2 : Radiogroup based on the template

**URL:** <https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [21 November 2025 17:55 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739 "2025-11-21T17:55:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [21 November 2025 17:55 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/1 "2025-11-21T17:55:08Z")

</div>

Hi all.

I am all time studying dashboard 2, to xchange my old DB1. But always I took any special code, what blocks me to continuing.  
I need dialog window in template 2 which can send a value after click Exec command to output. But this "new" method and all related commands in script are still unknown for me. Also the radio function - switching dots between selections - are not running.  
Please, help, if you have any knowledge :

```auto
[
    {
        "id": "a33b650507a83a9f",
        "type": "tab",
        "label": "Flow 1",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "415847a290936747",
        "type": "ui-template",
        "z": "a33b650507a83a9f",
        "group": "11869ad7fd42cec2",
        "page": "",
        "ui": "",
        "name": "",
        "order": 5,
        "width": "3",
        "height": "2",
        "head": "",
        "format": "<template>\n <div class=\"pa-4 text-center\">\n <v-dialog\n width=\"auto\"\n scrollable\n >\n <template v-slot:activator=\"{ props: activatorProps }\">\n <v-btn\n color=\"brown\"\n prepend-icon=\"mdi-timer-play-outline\"\n text=\"Get select command\"\n v-bind=\"activatorProps\"\n ></v-btn>\n </template>\n\n <template v-slot:default=\"{ isActive }\">\n <v-card\n title=\"Select remote command :\"\n >\n <v-divider class=\"mt-3\"></v-divider>\n\n <v-card-text class=\"px-4\" style=\"height: 250px;\">\n <v-radio-group\n v-model=\"dialog\"\n >\n <v-radio\n label=\"NOT SEL\"\n value=\"0\"\n ></v-radio>\n\n <v-radio\n label=\"Details\"\n value=\"1\"\n ></v-radio>\n\n <v-radio\n label=\"Errors reset\"\n value=\"2\"\n ></v-radio>\n\n <v-radio\n label=\"Output disconn.\"\n value=\"3\"\n ></v-radio>\n\n <v-radio\n label=\"Battery test\"\n value=\"4\"\n ></v-radio>\n\n <v-radio\n label=\"Ext.relay On\"\n value=\"5\"\n ></v-radio>\n\n </v-radio-group>\n </v-card-text>\n\n <v-divider></v-divider>\n\n <v-card-actions>\n <v-btn\n text=\"Close\"\n @click=\"isActive.value = false\"\n ></v-btn>\n\n <v-spacer></v-spacer>\n\n <v-btn\n color=\"surface-variant\"\n text=\"Exec command\"\n variant=\"flat\"\n @click=\"isActive.value = false\"\n ></v-btn>\n </v-card-actions>\n </v-card>\n </template>\n </v-dialog>\n </div>\n</template>\n\n<script> //there will be script\n\n</script>",
        "storeOutMessages": true,
        "passthru": false,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 260,
        "y": 60,
        "wires": [
            [
                "72fe593aa9dfdfc6"
            ]
        ]
    },
    {
        "id": "72fe593aa9dfdfc6",
        "type": "ui-text",
        "z": "a33b650507a83a9f",
        "group": "11869ad7fd42cec2",
        "order": 4,
        "width": "3",
        "height": "1",
        "name": "",
        "label": "Selected(view) :",
        "format": "{{msg.payload}}",
        "layout": "row-left",
        "style": false,
        "font": "",
        "fontSize": 16,
        "color": "#717171",
        "wrapText": false,
        "className": "",
        "x": 500,
        "y": 60,
        "wires": []
    },
    {
        "id": "11869ad7fd42cec2",
        "type": "ui-group",
        "name": "UPS data",
        "page": "61da60b785079943",
        "width": "18",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "61da60b785079943",
        "type": "ui-page",
        "name": "Hlavná tabla UPS",
        "ui": "dcc335a4d4aff979",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "dc7a49816c7ea38f",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 3,
        "className": "",
        "visible": false,
        "disabled": "false"
    },
    {
        "id": "dcc335a4d4aff979",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "dc7a49816c7ea38f",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#000000",
            "groupBg": "#515151",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "compact",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "fedc5ee52a6ab399",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.26.0"
        }
    }
]

```

Thanks a lot for your time.

Bohus

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 November 2025 10:42 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/2 "2025-11-22T10:42:28Z")

</div>

For the dialog, you should be able to do that using a Group of type Dialog. This gives you a modal popup that you can put any widgets you like into. Then use a ui-control to show/hide the dialog.

For the radio buttons does a radio group widget do what you want?

---

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [22 November 2025 10:46 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/3 "2025-11-22T10:46:07Z")

</div>

@Colin yes, show/hide is OK. But I do not know, how the result (value) of the radio send to payload output.  
And also, I do not have any minds, how the "template button" style to line to row. Because, this is out of row - half row bellow standard buttons.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 November 2025 10:48 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/4 "2025-11-22T10:48:55Z")

</div>

I don't understand. Do you mean that the radio group widget ([Radio Group ui-radio-group | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-radio-group)) is not sending any output?

Why are you using template nodes not the built in nodes?

---

<div class="post-metadata">

**Author:** ![Felix](https://avatars.discourse-cdn.com/v4/letter/f/aeb1de/32.png) [@Felix](https://discourse.nodered.org/u/Felix)\
**Post date:** [22 November 2025 10:58 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/5 "2025-11-22T10:58:13Z")

</div>

> [@Colin](#):
>
> I don't understand. Do you mean that the radio group widget ([Radio Group ui-radio-group | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-radio-group)) is not sending any output.
> 
> Why are you using template nodes not the built in nodes?

Because, I need radio group as a dialog popup window. And I am newbie in DB2 and do know about more new things opposite DB1.  
I have tried following, and is looking good :

```auto
<template>
  <div class="pa-4 text-center">
    <v-dialog
      width="auto"
      scrollable
    >
      <template v-slot:activator="{ props: activatorProps }">
        <v-btn
          color="brown"
          prepend-icon="mdi-timer-play-outline"
          text="Get select command"
          v-bind="activatorProps"
        ></v-btn>
      </template>

      <template v-slot:default="{ isActive }">
        <v-card
          title="Select remote command :"
        >
          <v-divider class="mt-3"></v-divider>

          <v-card-text class="px-4" style="height: 250px;">
            <v-radio-group
              v-model="SelectedVal"
            >
              <v-radio
                label="NOT SEL"
                value="0"
              ></v-radio>

              <v-radio
                label="Details"
                value="1"
              ></v-radio>

              <v-radio
                label="Errors reset"
                value="2"
              ></v-radio>

              <v-radio
                label="Output disconn."
                value="3"
              ></v-radio>

              <v-radio
                label="Battery test"
                value="4"
              ></v-radio>

              <v-radio
                label="Ext.relay On"
                value="5"
              ></v-radio>

            </v-radio-group>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-btn
              text="Close"
              @click="isActive.value = false"
            ></v-btn>

            <v-spacer></v-spacer>

            <v-btn
              color="surface-variant"
              text="Exec command"
              variant="flat"
              @click="send({payload: SelectedVal}), isActive.value = false"
              
            ></v-btn>
          </v-card-actions>
        </v-card>
      </template>
    </v-dialog>
  </div>
</template>

<script>
    export default {
  data() {
    return {
      SelectedVal:null
    }
  }
  }
</script>

```

But, at the end I must styling button to line, because, actually is out of row (brown one) :

 ![obrázok](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7e5dec7f2d2a7dcf3f8527723e70e12973fcdce1.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [22 November 2025 11:35 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/6 "2025-11-22T11:35:54Z")

</div>

> [@Felix](#):
>
> Because, I need radio group as a dialog popup window

Use a radio group widget (not a template) in a ui group configured to be of type Dialog, and use a ui-control node to show/hide the dialog group. No need for a template.

---

<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:** [22 December 2025 11:36 UTC](https://discourse.nodered.org/t/dashboard-2-radiogroup-based-on-the-template/99739/7 "2025-12-22T11:36:33Z")

</div>

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