Dashboard 2 : Radiogroup based on the template

Dashboard
1

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 :

[
    {
        "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

2

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?

3

@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.

4

I don't understand. Do you mean that the radio group widget (Radio Group ui-radio-group | Node-RED Dashboard 2.0) is not sending any output?

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

5

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 :

<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
obrázok1051×124 7.74 KB

6

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.