Subflow - UI Group

  • 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.

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?

Here's a screen recording:

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.

Thanks very much. Perfect level of detail.

Unfortunately, I cannot reproduce

chrome_HBFByDy2HB

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?

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...

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.

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.

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!

2 Likes

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 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.

1 Like

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

1 Like