How to add icon to card header. Dashboard 2

Dashboard
1

I was asked privately but I tend to share ...
The actual case was a bit more advanced but definitely for dedicated build so I do share basics only.
Key point was that icon should be dynamically controllable in may ways ...

[{"id":"ab1a416038dfd420","type":"ui-template","z":"50af7128c761b2cb","group":"4190965f220f9afd","page":"","ui":"","name":"Card header icon","order":6,"width":0,"height":0,"head":"","format":"<template>\n   <Teleport v-if=\"mounted\" :to=\"target\">\n        <div :class=\"positionClass\">\n            <v-icon aria-hidden=\"false\">{{icon}}</v-icon>\n        </div>\n   </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {           \n            return {\n                mounted:false,\n                target:\"\",\n                position:\"right\",//\"left\"\n                icon:\"mdi-account\"     \n            }\n        },\n        computed: {        \n            positionClass: function () {\n                return this.position == \"left\" ? \"v-card-item__prepend\" : \"v-card-item__append\"\n            }\n        },\n        watch: {\n            msg: function () {\n                //\n            }\n        },\n        mounted(){            \n            this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'\n            this.mounted = true            \n        }\n    }\n</script>\n<style>\n    .hidden-template{\n        display:none !important;\n    }\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"hidden-template","x":630,"y":540,"wires":[[]]},{"id":"4190965f220f9afd","type":"ui-group","name":"Test Group","page":"b55c3e3640901741","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"b55c3e3640901741","type":"ui-page","name":"Test Page","ui":"cab2761fcbe60245","path":"/test","icon":"home","layout":"grid","theme":"0819910104699eae","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":4,"className":"","visible":"true","disabled":"false"},{"id":"cab2761fcbe60245","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control","ui-template"],"showPathInSidebar":false,"showPageTitle":false,"navigationStyle":"temporary","titleBarStyle":"fixed"},{"id":"0819910104699eae","type":"ui-theme","name":"Site Dark","colors":{"surface":"#141414","primary":"#32a00a","bgPage":"#121212","groupBg":"#141414","groupOutline":"#333333"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"12px","widgetGap":"12px"}}]
1 Like
2

Works great .. thank you for that inspiration :slight_smile:

@hotNipi Any advise on how to get the Group-Title Changed / Amended ?

3

By using same strategy...
The default group title is required but an empty space is does the trick to get rid of it.

[{"id":"ab1a416038dfd420","type":"ui-template","z":"a5b9f027282f32b3","group":"4190965f220f9afd","page":"","ui":"","name":"Card header icon and title","order":1,"width":0,"height":0,"head":"","format":"<template>\n   <Teleport v-if=\"mounted\" :to=\"target\">\n        <div class=\"v-card-item__append\">\n            <v-icon aria-hidden=\"false\">{{icon}}</v-icon>            \n        </div>\n        <div class=\"v-card-item__prepend\">\n            <div class=\"v-card-title\">{{title}}</div>\n        </div>\n   </Teleport>\n</template>\n\n<script>\n    export default {\n        data() {           \n            return {\n                mounted:false,\n                target:\"\",\n                icon:\"mdi-account\",\n                title:\"Dynamic title\"     \n            }\n        },\n        computed: {        \n            \n        },\n        watch: {\n            msg: function () {\n                if(this.msg?.title != undefined){\n                    this.title = this.msg.title\n                }\n                if(this.msg?.icon != undefined){\n                    this.icon = this.msg.icon\n                }\n            }\n        },\n        mounted(){            \n            this.target = '#nrdb-ui-group-'+this.props.group+' .v-card-item'\n            this.mounted = true            \n        }\n    }\n</script>\n<style>\n    .hidden-template{\n        display:none !important;\n    }\n</style>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"hidden-template","x":690,"y":580,"wires":[[]]},{"id":"2be3bc674c163d0b","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"title","v":"Account Check","vt":"str"},{"p":"icon","v":"mdi-account-check","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":470,"y":540,"wires":[["ab1a416038dfd420"]]},{"id":"7984f3d787ad6014","type":"inject","z":"a5b9f027282f32b3","name":"","props":[{"p":"title","v":"Account Cancel","vt":"str"},{"p":"icon","v":"mdi-account-cancel","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":470,"y":600,"wires":[["ab1a416038dfd420"]]},{"id":"4190965f220f9afd","type":"ui-group","name":" ","page":"b55c3e3640901741","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"b55c3e3640901741","type":"ui-page","name":"Test Page","ui":"29792df7d7b05e2e","path":"/test","icon":"home","layout":"grid","theme":"0819910104699eae","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":5,"className":"","visible":"true","disabled":"false"},{"id":"29792df7d7b05e2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":[],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"0819910104699eae","type":"ui-theme","name":"Site Dark","colors":{"surface":"#141414","primary":"#32a00a","bgPage":"#121212","groupBg":"#141414","groupOutline":"#333333"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"12px","widgetGap":"12px"}}]
1 Like
4

Yeah, I was able to add a title in 'Append" and 'Prepend' section but not to modify the existing title :frowning:

So the solution is :slight_smile:

  • default group title ='' during design phase
  • use your code to publish any group title/icon dynamiclly

:+1::+1::+1: already integrated into my light status :slight_smile:

image
image583Ă—144 6.05 KB