Perhaps someone can give you some super simple example. Here would be my solution which is a bit more complicated:
[
{
"id": "0ad0e4652ed2c5a9",
"type": "tab",
"label": "Flow 1",
"disabled": false,
"info": "",
"env": []
},
{
"id": "67e5a02dc04c0c98",
"type": "ui_template",
"z": "0ad0e4652ed2c5a9",
"group": "d921e9fe7b208126",
"name": "button 3",
"order": 3,
"width": "2",
"height": "4",
"format": "<style>\n .custom-button{\n color:white!important;\n }\n\n .red{\n background-color:red!important;\n }\n\n .green{\n background-color:green!important;\n }\n\n .s36{\n display:block;\n vertical-align:unset;\n width: 36px;\n height: 36px;\n filter:saturate(0.0) brightness(3.0) !important;\n }\n \n .s36 md-icon{\n \n }\n</style>\n<button id=\"quadbutton\" class=\"{{quadcolor}} custom-button md-raised md-button md-ink-ripple\" type=\"button\" ng-click=\"OnButtonClick($event)\" aria-label=\"cloudbutton\">\n <md-icon class=\"s36\" md-svg-src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 616 512\"><path d=\"M148.6 304c8.2 68.5 67.4 115.5 146 111.3 51.2 43.3 136.8 45.8 186.4-5.6 69.2 1.1 118.5-44.6 131.5-99.5 14.8-62.5-18.2-132.5-92.1-155.1-33-88.1-131.4-101.5-186.5-85-57.3 17.3-84.3 53.2-99.3 109.7-7.8 2.7-26.5 8.9-45 24.1 11.7 0 15.2 8.9 15.2 19.5v20.4c0 10.7-8.7 19.5-19.5 19.5h-20.2c-10.7 0-19.5-6-19.5-16.7V240H98.8C95 240 88 244.3 88 251.9v40.4c0 6.4 5.3 11.8 11.7 11.8h48.9zm227.4 8c-10.7 46.3 21.7 72.4 55.3 86.8C324.1 432.6 259.7 348 296 288c-33.2 21.6-33.7 71.2-29.2 92.9-17.9-12.4-53.8-32.4-57.4-79.8-3-39.9 21.5-75.7 57-93.9C297 191.4 369.9 198.7 400 248c-14.1-48-53.8-70.1-101.8-74.8 30.9-30.7 64.4-50.3 114.2-43.7 69.8 9.3 133.2 82.8 67.7 150.5 35-16.3 48.7-54.4 47.5-76.9l10.5 19.6c11.8 22 15.2 47.6 9.4 72-9.2 39-40.6 68.8-79.7 76.5-32.1 6.3-83.1-5.1-91.8-59.2zM128 208H88.2c-8.9 0-16.2-7.3-16.2-16.2v-39.6c0-8.9 7.3-16.2 16.2-16.2H128c8.9 0 16.2 7.3 16.2 16.2v39.6c0 8.9-7.3 16.2-16.2 16.2zM10.1 168C4.5 168 0 163.5 0 157.9v-27.8c0-5.6 4.5-10.1 10.1-10.1h27.7c5.5 0 10.1 4.5 10.1 10.1v27.8c0 5.6-4.5 10.1-10.1 10.1H10.1zM168 142.7v-21.4c0-5.1 4.2-9.3 9.3-9.3h21.4c5.1 0 9.3 4.2 9.3 9.3v21.4c0 5.1-4.2 9.3-9.3 9.3h-21.4c-5.1 0-9.3-4.2-9.3-9.3zM56 235.5v25c0 6.3-5.1 11.5-11.4 11.5H19.4C13.1 272 8 266.8 8 260.5v-25c0-6.3 5.1-11.5 11.4-11.5h25.1c6.4 0 11.5 5.2 11.5 11.5z\"/></svg>'>\n </md-icon>\n <span>{{quadLabel}}</span>\n</button>\n<button id=\"circlebutton\" class=\"{{circlecolor}} custom-button md-fab md-raised md-button md-ink-ripple\" type=\"button\" ng-click=\"OnButtonClick($event)\" aria-label=\"cloudbutton\">\n <md-icon class=\"s36\" md-svg-src='data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 616 512\"><path d=\"M148.6 304c8.2 68.5 67.4 115.5 146 111.3 51.2 43.3 136.8 45.8 186.4-5.6 69.2 1.1 118.5-44.6 131.5-99.5 14.8-62.5-18.2-132.5-92.1-155.1-33-88.1-131.4-101.5-186.5-85-57.3 17.3-84.3 53.2-99.3 109.7-7.8 2.7-26.5 8.9-45 24.1 11.7 0 15.2 8.9 15.2 19.5v20.4c0 10.7-8.7 19.5-19.5 19.5h-20.2c-10.7 0-19.5-6-19.5-16.7V240H98.8C95 240 88 244.3 88 251.9v40.4c0 6.4 5.3 11.8 11.7 11.8h48.9zm227.4 8c-10.7 46.3 21.7 72.4 55.3 86.8C324.1 432.6 259.7 348 296 288c-33.2 21.6-33.7 71.2-29.2 92.9-17.9-12.4-53.8-32.4-57.4-79.8-3-39.9 21.5-75.7 57-93.9C297 191.4 369.9 198.7 400 248c-14.1-48-53.8-70.1-101.8-74.8 30.9-30.7 64.4-50.3 114.2-43.7 69.8 9.3 133.2 82.8 67.7 150.5 35-16.3 48.7-54.4 47.5-76.9l10.5 19.6c11.8 22 15.2 47.6 9.4 72-9.2 39-40.6 68.8-79.7 76.5-32.1 6.3-83.1-5.1-91.8-59.2zM128 208H88.2c-8.9 0-16.2-7.3-16.2-16.2v-39.6c0-8.9 7.3-16.2 16.2-16.2H128c8.9 0 16.2 7.3 16.2 16.2v39.6c0 8.9-7.3 16.2-16.2 16.2zM10.1 168C4.5 168 0 163.5 0 157.9v-27.8c0-5.6 4.5-10.1 10.1-10.1h27.7c5.5 0 10.1 4.5 10.1 10.1v27.8c0 5.6-4.5 10.1-10.1 10.1H10.1zM168 142.7v-21.4c0-5.1 4.2-9.3 9.3-9.3h21.4c5.1 0 9.3 4.2 9.3 9.3v21.4c0 5.1-4.2 9.3-9.3 9.3h-21.4c-5.1 0-9.3-4.2-9.3-9.3zM56 235.5v25c0 6.3-5.1 11.5-11.4 11.5H19.4C13.1 272 8 266.8 8 260.5v-25c0-6.3 5.1-11.5 11.4-11.5h25.1c6.4 0 11.5 5.2 11.5 11.5z\"/></svg>'>\n </md-icon>\n <span>{{circleLabel}}</span>\n</button>\n\n<script>\n (function(scope) {\n scope.quadcolor = \"red\";\n scope.circlecolor = \"green\";\n scope.circleLabel = \"none\";\n scope.quadLabel = \"none\";\n scope.InjectRipple = function() {\n const circleinjector = angular.element('#circlebutton').injector();\n const quadinjector = angular.element('#quadbutton').injector();\n circleinjector.invoke(scope.AttachCirclebuttonToRipple,null,null);\n quadinjector.invoke(scope.AttachQuadbuttonToRipple,null,null);\n };\n scope.AttachCirclebuttonToRipple = function($mdInkRipple){\n $mdInkRipple.attach(scope, angular.element('#circlebutton'), { center: false });\n }\n scope.AttachQuadbuttonToRipple = function($mdInkRipple){\n $mdInkRipple.attach(scope, angular.element('#quadbutton'), { center: false });\n }\n scope.OnButtonClick = function(evt){\n switch(evt.currentTarget.id){\n case \"circlebutton\":\n if(scope.circlecolor == 'green'){\n scope.circlecolor = 'red';\n }else{\n scope.circlecolor = 'green';\n }\n scope.send({payload: \"Circle Button clicked\"});\n break;\n case \"quadbutton\":\n if(scope.quadcolor == 'green'){\n scope.quadcolor = 'red';\n }else{\n scope.quadcolor = 'green';\n }\n scope.send({payload: \"Quad Button clicked\"});\n break;\n default:\n break;\n }\n }\n scope.InjectRipple();\n \n //handle arriving messages\n scope.$watch('msg', function(msg) {\n if(msg !== undefined && msg !== null){\n try{\n switch(msg.topic) {\n case \"circlevalue\":\n scope.$applyAsync(function(){\n scope.circleLabel = msg.payload;\n });\n break;\n \n case \"quadvalue\":\n scope.$applyAsync(function(){\n scope.quadLabel = msg.payload;\n });\n break;\n\n default:\n break;\n }\n }catch(err){\n console.error(err);\n }\n }\n });\n })(scope);\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"className": "nr-dashboard-button _md styled-button styled-template",
"x": 840,
"y": 380,
"wires": [
[]
]
},
{
"id": "a9efe2984828caf7",
"type": "inject",
"z": "0ad0e4652ed2c5a9",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "3",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 290,
"y": 380,
"wires": [
[
"7bde84b82e94f5ef"
]
]
},
{
"id": "7bde84b82e94f5ef",
"type": "function",
"z": "0ad0e4652ed2c5a9",
"name": "function 1",
"func": "const obj1 = {topic: 'circlevalue', payload:new Date().getSeconds()};\nconst obj2 = { topic: 'quadvalue', payload: new Date().getSeconds()};\n\nreturn [[obj1, obj2]];",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs": [],
"x": 540,
"y": 380,
"wires": [
[
"67e5a02dc04c0c98"
]
]
},
{
"id": "d921e9fe7b208126",
"type": "ui_group",
"name": "Buttons",
"tab": "d0d82445ef65a632",
"order": 1,
"disp": true,
"width": "6",
"collapse": false,
"className": ""
},
{
"id": "d0d82445ef65a632",
"type": "ui_tab",
"name": "ButtonDesign",
"icon": "dashboard",
"order": 3,
"disabled": false,
"hidden": false
}
]