# IS there a way to change a ui element of the group with another

**URL:** <https://discourse.nodered.org/t/is-there-a-way-to-change-a-ui-element-of-the-group-with-another/67352>\
**Category:** General\
**Created:** [5 September 2022 13:18 UTC](https://discourse.nodered.org/t/is-there-a-way-to-change-a-ui-element-of-the-group-with-another/67352 "2022-09-05T13:18:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [5 September 2022 13:18 UTC](https://discourse.nodered.org/t/is-there-a-way-to-change-a-ui-element-of-the-group-with-another/67352/1 "2022-09-05T13:18:23Z")

</div>

Is there a way to let the player coming from the the ui\_mp4frag node ?  
background: I don´t want to replace my old view method which graps a more detailed picture of the cams than the video stream. So ein want implement a button for video and picture mode. but don´t know how to disable the player or change inside the group between the video view ( ui\_mp4frag node) and picture mode (ui template node) . Any idea on that ? perhaps @kevinGodell ? 🙂

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/5/a51c17c28ac70a30a4c2b0addf6d1bdc564e06ac.jpeg)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [5 September 2022 14:15 UTC](https://discourse.nodered.org/t/is-there-a-way-to-change-a-ui-element-of-the-group-with-another/67352/2 "2022-09-05T14:15:52Z")

</div>

You can use ui-contorl to enable/diable hide/show groups/tabs, read the ui-control in-built help text.

You can also feed msg.enabled true/false to most ui nodes to enable or disable them e.g.

```auto
[{"id":"31c8a351.f79b3c","type":"inject","z":"30af2d3e.d94ea2","name":"enable","props":[{"p":"enabled","v":"true","vt":"bool"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":130,"y":660,"wires":[["b81a05e7.733ff"]]},{"id":"b81a05e7.733ff","type":"ui_template","z":"30af2d3e.d94ea2","group":"2d4fe667.28f8ba","name":"","order":11,"width":0,"height":0,"format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":280,"y":680,"wires":[[]]},{"id":"89b3861e.e2325","type":"inject","z":"30af2d3e.d94ea2","name":"","props":[{"p":"enabled","v":"false","vt":"bool"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"disable","x":120,"y":700,"wires":[["b81a05e7.733ff"]]},{"id":"ab11b443.0b62d","type":"inject","z":"30af2d3e.d94ea2","name":"show timestamp","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":310,"y":620,"wires":[["b81a05e7.733ff"]]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![WhiteLion](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/whitelion/32/12266_2.png) [@WhiteLion](https://discourse.nodered.org/u/WhiteLion)\
**Post date:** [6 September 2022 22:19 UTC](https://discourse.nodered.org/t/is-there-a-way-to-change-a-ui-element-of-the-group-with-another/67352/3 "2022-09-06T22:19:12Z")

</div>

Thx!  
I got it to work:

```auto
[{"id":"17d5e81d7fa0a6eb","type":"ui_switch","z":"f35bf9c81635c79c","name":"","label":"Cam 4 Bilder","tooltip":"","group":"62575f31e409f3f7","order":3,"width":"7","height":"1","passthru":true,"decouple":"false","topic":"","topicType":"str","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":true,"className":"","x":750,"y":700,"wires":[["07b4946c73dc2818","64f20fdc836a91ce"]]},{"id":"64f20fdc836a91ce","type":"function","z":"f35bf9c81635c79c","name":"payload2action","func":"let newPayload = {};\nif(msg.payload)\n{\n newPayload = '{\"group\":{\"show\":[\"Webcams_Cam_4_-_Garten_Bilder_(Reolink)\"]}}';\n msg.payload = newPayload;\n return msg;\n}\nelse\n{\n newPayload = '{\"group\":{\"hide\":[\"Webcams_Cam_4_-_Garten_Bilder_(Reolink)\"]}}';\n msg.payload = newPayload;\n return msg;\n}\nreturn null;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":960,"y":760,"wires":[["e115152d288926ba"]]},{"id":"e115152d288926ba","type":"json","z":"f35bf9c81635c79c","name":"","property":"payload","action":"","pretty":false,"x":1170,"y":760,"wires":[["61ef938ed9953932","da87bbb8.d2bfb8"]]},{"id":"da87bbb8.d2bfb8","type":"ui_ui_control","z":"f35bf9c81635c79c","name":"","events":"connect","x":1900,"y":1080,"wires":[[]]},{"id":"62575f31e409f3f7","type":"ui_group","name":"Webcams Controller","tab":"9f7f7c23.5626d8","order":1,"disp":true,"width":"14","collapse":true,"className":""},{"id":"9f7f7c23.5626d8","type":"ui_tab","name":"Webcams","icon":"videocam","order":14,"disabled":false,"hidden":false}]

```

---

<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:** [20 September 2022 22:20 UTC](https://discourse.nodered.org/t/is-there-a-way-to-change-a-ui-element-of-the-group-with-another/67352/4 "2022-09-20T22:20:06Z")

</div>

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