How to use class functionality for widgets in Dashboard 2.0

Dashboard
1

I am struggling to use CSS Class functiionality for widgets in dashboard 2.0.
Kindly suggest some examples where this functionality is explained. for exmple in the below code, I am not able to increase the font size of the button label.

[
    {
        "id": "99f0d6c8876920a5",
        "type": "ui-button",
        "z": "8b4bd0230d9a8a72",
        "group": "7a71cb83c1ec7d1b",
        "name": "",
        "label": "",
        "order": 1,
        "width": "3",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 570,
        "y": 2200,
        "wires": [
            []
        ]
    },
    {
        "id": "268faf7ea8fc6aa1",
        "type": "inject",
        "z": "8b4bd0230d9a8a72",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 200,
        "y": 2180,
        "wires": [
            [
                "8d4c4fec3ee8346d"
            ]
        ]
    },
    {
        "id": "8d4c4fec3ee8346d",
        "type": "function",
        "z": "8b4bd0230d9a8a72",
        "name": "function 21",
        "func": "msg.payload = \"CFF LINE\"\nmsg.ui_update={\n    \"buttonColor\" : \"green\",\n    \"label\": \"CFF Line\",\n    \"class\": \"red\"\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 2220,
        "wires": [
            [
                "99f0d6c8876920a5"
            ]
        ]
    },
    {
        "id": "8b243794fdc08d49",
        "type": "ui-template",
        "z": "8b4bd0230d9a8a72",
        "group": "",
        "page": "bb3d409a9702f9f3",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": ".red{\nfont-size: 50px;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:page",
        "className": "",
        "x": 520,
        "y": 2120,
        "wires": [
            []
        ]
    },
    {
        "id": "7a71cb83c1ec7d1b",
        "type": "ui-group",
        "name": "Oven Status",
        "page": "bb3d409a9702f9f3",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "bb3d409a9702f9f3",
        "type": "ui-page",
        "name": "Epack Oven",
        "ui": "8af0eba80b85dcfe",
        "path": "/epackoven",
        "icon": "home",
        "layout": "grid",
        "theme": "623ff1c5e1dc9bab",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8af0eba80b85dcfe",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "623ff1c5e1dc9bab",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeded",
            "groupBg": "#ffffff",
            "groupOutline": "#f3f1f1"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

please suggest.

2

Just couple of changes needed

image
image781Ă—580 21.9 KB

3

Thanks for quick reply. Unfortunately, it does not work. I tried both cases:
msg.ui_update={"class":"red"}, as well as msg.class = "red". both does not work. Other elemenys of ui_update like background color is working. Am i doing something wrong in the below code:

[
    {
        "id": "99f0d6c8876920a5",
        "type": "ui-button",
        "z": "8b4bd0230d9a8a72",
        "group": "7a71cb83c1ec7d1b",
        "name": "",
        "label": "",
        "order": 1,
        "width": "3",
        "height": "1",
        "emulateClick": false,
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "iconPosition": "left",
        "payload": "",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "buttonColor": "",
        "textColor": "",
        "iconColor": "",
        "x": 570,
        "y": 2220,
        "wires": [
            []
        ]
    },
    {
        "id": "268faf7ea8fc6aa1",
        "type": "inject",
        "z": "8b4bd0230d9a8a72",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 200,
        "y": 2220,
        "wires": [
            [
                "8d4c4fec3ee8346d"
            ]
        ]
    },
    {
        "id": "8d4c4fec3ee8346d",
        "type": "function",
        "z": "8b4bd0230d9a8a72",
        "name": "function 21",
        "func": "//msg.payload = \"CFF LINE\"\nmsg.ui_update={\n    \"buttonColor\" : \"green\",\n    \"label\": \"CFF Line\",\n    \"class\": \"red\"\n}\n//msg.class = \"red\"\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 390,
        "y": 2220,
        "wires": [
            [
                "99f0d6c8876920a5"
            ]
        ]
    },
    {
        "id": "8b243794fdc08d49",
        "type": "ui-template",
        "z": "8b4bd0230d9a8a72",
        "group": "",
        "page": "",
        "ui": "8af0eba80b85dcfe",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "\n.red .v-btn_content{\nfont-size: 50px;\n}",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "site:style",
        "className": "",
        "x": 560,
        "y": 2140,
        "wires": [
            []
        ]
    },
    {
        "id": "7a71cb83c1ec7d1b",
        "type": "ui-group",
        "name": "Oven Status",
        "page": "bb3d409a9702f9f3",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "8af0eba80b85dcfe",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "default",
        "titleBarStyle": "default"
    },
    {
        "id": "bb3d409a9702f9f3",
        "type": "ui-page",
        "name": "Epack Oven",
        "ui": "8af0eba80b85dcfe",
        "path": "/epackoven",
        "icon": "home",
        "layout": "grid",
        "theme": "623ff1c5e1dc9bab",
        "order": 3,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "623ff1c5e1dc9bab",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeded",
            "groupBg": "#ffffff",
            "groupOutline": "#f3f1f1"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]
4

image
image923Ă—506 11.5 KB

image

[{"id":"2fe9ed0065bafadd","type":"ui-template","z":"3e2dbdb52b566414","group":"67172933099081b6","ui":"d45641ed6d39fea1","name":"","order":0,"width":0,"height":0,"head":"","format":".nrdb-ui-widget.nrdb-ui-button.big span {\n    font-size: 2em;\n}\n.nrdb-ui-widget.nrdb-ui-button.little span {\n    font-size: 1em;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":720,"y":140,"wires":[[]]},{"id":"13422c692db9f8b9","type":"ui-button","z":"3e2dbdb52b566414","group":"67172933099081b6","name":"","label":"button","order":0,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":710,"y":200,"wires":[[]]},{"id":"02f9bbb5882983a4","type":"ui-button","z":"3e2dbdb52b566414","group":"67172933099081b6","name":"","label":"Big","order":0,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":390,"y":180,"wires":[["3963ceaf34c6641c"]]},{"id":"c6e98463e9f888d6","type":"ui-button","z":"3e2dbdb52b566414","group":"67172933099081b6","name":"","label":"Little","order":0,"width":"1","height":"1","emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","x":390,"y":220,"wires":[["80e33e1da3cd3403"]]},{"id":"3963ceaf34c6641c","type":"change","z":"3e2dbdb52b566414","name":"","rules":[{"t":"set","p":"class","pt":"msg","to":"big","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":180,"wires":[["13422c692db9f8b9"]]},{"id":"80e33e1da3cd3403","type":"change","z":"3e2dbdb52b566414","name":"","rules":[{"t":"set","p":"class","pt":"msg","to":"little","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":220,"wires":[["13422c692db9f8b9"]]},{"id":"67172933099081b6","type":"ui-group","name":"Demo","page":"e3a1a003d3c5fd05","width":"6","height":"8","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"d45641ed6d39fea1","type":"ui-base","name":"This is my ui-base","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"e3a1a003d3c5fd05","type":"ui-page","name":"Demo","ui":"d45641ed6d39fea1","path":"/demo","icon":"home","layout":"grid","theme":"e4e51d0dcd1c0e6d","order":3,"className":"","visible":"true","disabled":"false"},{"id":"e4e51d0dcd1c0e6d","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
1 Like
5

Thanks a lot jbudd.. Where can we find any documentation on this so that other use cases can also be studied?
Thanks It is of great help. I really appreciate.

6

There doesn't seem to be much available, which is why I have posted my experiments in the "Share your projects" section of the forum. I am far from expert though so following my examples might lead you into trouble.

There is a flowfuse blog which might have something, also a flowfuse channel on Youtube.

1 Like
7

Oh, I did not know the "Share your project" section. I looked at it and I must say you have really put a lot of efforts in styling topic. thanks for your hardwork which help lot of people like me.