# Subflow - UI Group

**URL:** <https://discourse.nodered.org/t/subflow-ui-group/92068>\
**Category:** Dashboard\
**Created:** [30 September 2024 08:22 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068 "2024-09-30T08:22:17Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 September 2024 08:22 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/1 "2024-09-30T08:22:17Z")

</div>

- Not sure if this is an issue, or by design
- If it's an issue, where can I report a bug (Node-RED core, or dashboard?)

If I create a subflow containing a UI Template then set its UI Tab Group to point to an environment variable (thus allowing me to create instances of the subflow and assign them to different UI tabs etc.), this works well.

But if I then change the width of the dashboard group, it seems to spawn a second group on the same Dashboard page with the same title, where one contains normal (non-subflow) dashboard items with the correct new width, but the other has the old width and contains the subflow item.

See below. Here there should be ONE group not two. I updated the dashboard group width from 5 to 7, but that "last updated" widget which is from a Template UI node shows at the original width of 5 still.

Workaround is obviously to delete the subflow instance and recreate it.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/1/31cb8d1763d95bd96810fc58b62a87930d55206e.png)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 08:26 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/2 "2024-09-30T08:26:59Z")

</div>

Can I ask if you can produce a repro please?  
Ideally, if you produce a small flow and provide exact steps of how this occurs?

The steps might seem obvious to you but, for example, there are multiple places from where a config can be edited or it might be dependant on the name of the subflow or the specific config node or the nodes within your subflow etc. So to save someone having to rediscover what you already have, it would help this go a lot smoother. A screen recording might be easier?

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 September 2024 09:11 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/3 "2024-09-30T09:11:14Z")

</div>

Here's a screen recording:

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/5/a5faae9797ed4d25e2696559aa497bab624ba750.jpeg "2024 09 30 09 59 08") ](https://www.youtube.com/watch?v=xP2nkluk8ac)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 September 2024 09:28 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/4 "2024-09-30T09:28:01Z")

</div>

Dashboard 1.0 seems to me. Correct me if I'm wrong.  
If so, then as far I know using dashboard 1.0 widgets in subflow is not officially supported. It works to some extent but without any guarantee.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 09:33 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/5 "2024-09-30T09:33:18Z")

</div>

Thanks very much. Perfect level of detail.

Unfortunately, I cannot reproduce

![chrome_HBFByDy2HB](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/e/3e3618464cf0a65516d492dbe3423b2a6526efd4.gif)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 09:33 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/6 "2024-09-30T09:33:57Z")

</div>

Wait, as @hotNipi suggests, is this Dashboard-1?

Explicit support for this functionality was added to DB2

Can you confirm Node-RED and Dashboard versions please?

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 September 2024 09:44 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/7 "2024-09-30T09:44:17Z")

</div>

Yes Dashboard 1. Sorry - major detail I left out! It's possible I thought the functionality for UI Tabs in environment variables was built into Node-RED core as opposed to dashboard, and therefore it wouldn't make any difference which Dashboard version...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 09:56 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/8 "2024-09-30T09:56:46Z")

</div>

In theory, it is. The presentation of configs for subflow env is a core implementation and does work as designed however there is clearly a pitfall somewhere specific to dashboard 1. Probably something related to DB1 not testing the chosen config is an ENV VAR before applying some specific logic.

The support I refer to in DB2 is explicitly testing it works as expected and supporting sorting / displaying of subflow instances.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 10:04 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/9 "2024-09-30T10:04:40Z")

</div>

forgot to add - cool dashboard @hazymat - a lot of time + love gone into that.

Are you exploring a move to Dashboard 2? Would be a great exercise in flushing out any areas of improvement or areas lacking. Also a fairly large task I would understand if it is something you are putting off. Just so you know, there is a migration service that takes care of the majority of things (but as you are likely aware, not all contrib nodes have been rewritten for DB2).

I'll leave you with this: DB1 and DB2 can co-exist and so you can move over at your own pace.

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 September 2024 10:39 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/10 "2024-09-30T10:39:14Z")

</div>

> [@Steve-Mcl](#):
>
> fairly large task ...

Yes that's exactly it. Made another little video to explain my personal barriers to moving over to 2.0. I'd be interested in starting to get involved in the user-feedback aspect. As always there are so many things to do in home automation / node-red / life, that it's just about finding time!

[](https://www.youtube.com/watch?v=SxZui09XfAA)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [30 September 2024 11:21 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/11 "2024-09-30T11:21:29Z")

</div>

A lot of the angular stuff like `ng-if` `ng-show` `ng-repeat` have vue equivalents e.g. in vue these are:

- `v-if`: This conditionally renders an element based on a truthy or falsy expression. Similar to ng-if, it removes the element from the DOM when the condition is false.
- `v-show`: This conditionally displays or hides an element based on a truthy or falsy expression. It keeps the element in the DOM, but toggles its display style property.
- `v-for`: This iterates over an array or object, creating a new element for each item. It's similar to ng-repeat, but offers more flexibility and features.

For sending messages back to Node-RED, we have added `send()` functionality so is almost identical. Instead of `ng-click="send({...})` you would do `@click="send({...})`

Regarding your question around an angularjs video you found that got you up and running, I am not certain there is a specific dashboard 2 equivalent video however, there are lots of VUE videos around that cover this. Not trying to dodge the subject but rather state what you learned from the angularjs video can almost directly be applied to Dashboard-2 but using `v-` instead of `ng-`

PS, the [dashboard 2 docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html#working-with-variables) DO cover this but to summarise for you here directly.

- element control (equivelants of `ng-xxxx`) are all `v-xxxx`
- attribute binding (e.g. `class`, `disabled`) can be done use the colon.
  - e.g. `:class="msg.myClass"`

- event hookup is done using `@` e.g. `@click="myMethod"`
  - e.g. `@click="send({...})`

Obviously this is scratching the surface but having used both, i can tell you i find personally vue cleaner and faster and easier.

---

<div class="post-metadata">

**Author:** ![hazymat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hazymat/32/108159_2.png) [@hazymat](https://discourse.nodered.org/u/hazymat)\
**Post date:** [30 September 2024 11:22 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/12 "2024-09-30T11:22:47Z")

</div>

Thanks, that's really helpful. I'll have a play with this!

---

<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:** [30 October 2024 11:23 UTC](https://discourse.nodered.org/t/subflow-ui-group/92068/13 "2024-10-30T11:23:04Z")

</div>

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