# Flow Tab properties

**URL:** <https://discourse.nodered.org/t/flow-tab-properties/84607>\
**Category:** Feature Requests\
**Created:** [16 January 2024 13:59 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607 "2024-01-16T13:59:06Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [16 January 2024 13:59 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/1 "2024-01-16T13:59:06Z")

</div>

Just a thought that I had today (I don't have many) 😂

Could the flow tabs in the editor have other properties than the name ?

Colour settings similar to the group options, for fill and font colour would be really helpful for identifying the flow TABs more easily. An optional icon would be the icing on the cake 🍰

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 January 2024 14:24 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/2 "2024-01-16T14:24:03Z")

</div>

Also there is a blue indicator "led" on tabs with undeployed changes.  
It would be nice to be able to trigger this (or similar in a different corner of the tab) from within the flow with a chosen colour, eg to indicate some error condition.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/a/0a6d58cdb5006f64eaf35eaee557ecc4f544f498.png)

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [16 January 2024 14:28 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/3 "2024-01-16T14:28:35Z")

</div>

I like the idea of having a red bubble to indicate which flow has a node in error.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [16 January 2024 17:21 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/4 "2024-01-16T17:21:50Z")

</div>

You all are going to hate me but:

```auto
$('#red-ui-tab-d9450c0f08a45cfa').find('circle').css('fill', 'red')

```

where `d945...cfa` is the flow Id.

Combine that line with the [ClientCode](https://flows.nodered.org/node/@gregoriusrippenstein/node-red-contrib-introspection) node and you can change the color all the time:

```auto
[{"id":"0e710fe5d053391c","type":"ClientCode","z":"864df4104ed3c1e1","name":"","clientcode":"$('#red-ui-tab-' + msg.flowid).find('circle').css('fill', msg.color)","format":"javascript","x":2399.9999999999995,"y":1229.9999999999998,"wires":[[]]},{"id":"6d97573977674ead","type":"change","z":"864df4104ed3c1e1","name":"","rules":[{"t":"set","p":"flowid","pt":"msg","to":"d9450c0f08a45cfa","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2117,"y":1231,"wires":[["0e710fe5d053391c"]]},{"id":"ec9c248c0d44d0f2","type":"inject","z":"864df4104ed3c1e1","name":"red","props":[{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1718,"y":1162,"wires":[["6d97573977674ead"]]},{"id":"ebf91b241b2155e8","type":"inject","z":"864df4104ed3c1e1","name":"blue","props":[{"p":"color","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1714,"y":1243,"wires":[["6d97573977674ead"]]},{"id":"11502c2c85cc2605","type":"inject","z":"864df4104ed3c1e1","name":"green","props":[{"p":"color","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1720,"y":1315,"wires":[["6d97573977674ead"]]}]

```

change the flowid in the change node in that flow.

Edit: it can also be generalised so that you don't need to supply the flow id by retrieving the node in the frontend and using its 'z' value (which is the flowid):

```auto
[{"id":"0e710fe5d053391c","type":"ClientCode","z":"864df4104ed3c1e1","name":"","clientcode":"let flowid = RED.nodes.node(msg.this_node_id).z || msg.flowid\n\n$('#red-ui-tab-' + flowid).find('circle').css('fill', msg.color)","format":"javascript","x":2508,"y":1350,"wires":[[]]},{"id":"6d97573977674ead","type":"change","z":"864df4104ed3c1e1","name":"","rules":[{"t":"set","p":"flowid","pt":"msg","to":"d9450c0f08a45cfa","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":2116,"y":1256,"wires":[["684a84833ff13f86"]]},{"id":"ec9c248c0d44d0f2","type":"inject","z":"864df4104ed3c1e1","name":"red","props":[{"p":"color","v":"red","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1718,"y":1162,"wires":[["6d97573977674ead"]]},{"id":"ebf91b241b2155e8","type":"inject","z":"864df4104ed3c1e1","name":"blue","props":[{"p":"color","v":"blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1714,"y":1243,"wires":[["6d97573977674ead"]]},{"id":"11502c2c85cc2605","type":"inject","z":"864df4104ed3c1e1","name":"green","props":[{"p":"color","v":"green","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1717,"y":1366,"wires":[["6d97573977674ead"]]},{"id":"684a84833ff13f86","type":"function","z":"864df4104ed3c1e1","name":"function 17","func":"\nmsg.this_node_id = node.id\n\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":2311,"y":1292,"wires":[["0e710fe5d053391c"]]}]

```

Edit2: [live demonstration](https://cdn.flowhub.org/?t=0&fhid=f93e13e54f881a08#group/70631e7893e83c8a)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [16 January 2024 17:53 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/5 "2024-01-16T17:53:41Z")

</div>

Well I don't hate you 😉

But this wasn't my request ! (in any case your idea only works if the dot is already there, i.e. flow has been changed)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [16 January 2024 18:00 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/6 "2024-01-16T18:00:15Z")

</div>

As @Sean-McG says, plus if you set the circle red, a deploy clears it  
but moving a node in the editor redraws it, still red. It should now be blue ?

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [16 January 2024 18:17 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/7 "2024-01-16T18:17:03Z")

</div>

> [@Sean-McG](#):
>
> Well I don't hate you 😉

"Node-RED is not a dashboard"-hate 😉

> [@jbudd](#):
>
> it, still red. It should now be blue

Indeed that's because the color is set on the svg element - this isn't a perfect solution, this is a quick hack! I think if you use jQuery, you can clear the color setting again (then it take the original css class, i.e. blue) --\> `$('#....').find('circle').css('color', '')`

Admittedly setting the color directly on the element isn't the NR way, there should be a css class or something. But since that dot doesn't change colour, there isn't a NR-way to do it.

> [@Sean-McG](#):
>
> case your idea only works if the dot is already there,

Indeed, but that seems to be toggleable with:

```auto
$('#red-ui-tab-f93e13e54f881a08').removeClass("red-ui-workspace-changed")

```

and

```auto
$('#red-ui-tab-f93e13e54f881a08').addClass("red-ui-workspace-changed")

```

again `f93...a08` being the flow id

---

<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:** [16 March 2024 18:17 UTC](https://discourse.nodered.org/t/flow-tab-properties/84607/8 "2024-03-16T18:17:39Z")

</div>

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