# Problem using ui-control

**URL:** <https://discourse.nodered.org/t/problem-using-ui-control/86063>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [1 March 2024 15:40 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063 "2024-03-01T15:40:24Z")\
**Posts on this page:** 19\
**Page:** 2

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [6 March 2024 14:16 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/21 "2024-03-06T14:16:05Z")

</div>

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/e/7e8e294b62dc391a210b3e2ed75b79cdb9577a33.png)

function in use

```auto
if (msg.payload === '780705') {
    node.send({ payload: { 'page': 'Neway Automações' }});

    setTimeout(function () {
        node.send({
            payload: {
                groups: {
                    show: [
                        'Neway Automações:Fitas',
                        'Neway Automações:Luzes',
                        'Neway Automações:Movimentos',
                        'Neway Automações:Servidor',
                        'Neway Automações:Entretenimento',
                        'Neway Automações:Funcionalidades',
                        'Neway Automações:Ativação Individual',
                        'Neway Automações:Alexa'
                    ]
                }
            }
        });
    }, 25);

    setTimeout(function () {
        node.send({ payload: { pages: { hide: ['Neway Automações'] } } });
    }, 50);

    setTimeout(function () {
        node.send({ payload: { pages: { show: ['Login'] } } });
    }, 75);
}

```

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [6 March 2024 14:27 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/22 "2024-03-06T14:27:57Z")

</div>

I think you need a page name for each group

```auto
msg.payload = {
    pages: {
        show: ['<Page Name>', '<Page Name>'],
        hide: ['<Page Name>']
    }
    groups: {
        show: ['<Page Name>:<Group Name>', '<Page Name>:<Group Name>'],
        hide: ['<Page Name>:<Group Name>']
    }
}

```

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 March 2024 14:28 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/23 "2024-03-06T14:28:57Z")

</div>

I have a PR I can get in this afternoon to help with the error reporting here: [UI Control: Ensure better error reporting for ui-control when group/pages not found & update tests by joepavitt · Pull Request #633 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/pull/633)

I'll try and get a 1.3.1 out with it in.

---

<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:** [6 March 2024 14:53 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/24 "2024-03-06T14:53:37Z")

</div>

A post was split to a new topic: [Only pages contains a group are displayed in the sort order](https://discourse.nodered.org/t/only-pages-contains-a-group-are-displayed-in-the-sort-order/86193)

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [6 March 2024 14:38 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/25 "2024-03-06T14:38:51Z")

</div>

Yes, I'm already adding it, but it still doesn't work when you try to run it for multiple groups.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 March 2024 14:49 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/26 "2024-03-06T14:49:18Z")

</div>

This is not related to the "Problem using ui-control" topic, please post this either in a new GitHub issue, or in a new topic on the forum.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [6 March 2024 14:59 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/28 "2024-03-06T14:59:45Z")

</div>

Apologies, I completely missed the colon `:`

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [6 March 2024 15:24 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/29 "2024-03-06T15:24:44Z")

</div>

I tried it and it works, I got the error message when the page / group did not exist. Just a thought but are all the spellings correct?

I also found that if I wanted the last page mentioned to be onscreen I had to switch to it. This may be outside of the code shown

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [14 March 2024 13:31 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/30 "2024-03-14T13:31:03Z")

</div>

@joepavitt

Problems resolved for creating multiple users. I still encounter some obstacles, but I'm learning to work around them until they are resolved. I still can't offer this to customers after I don't feel confident in 2.0, but I know I will be able to in a short time.

![a1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b86f9fe05f255c0c25abe20e00f725aa7ca75d2.gif)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [14 March 2024 13:43 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/31 "2024-03-14T13:43:12Z")

</div>

> [@diegodamaceno](#):
>
> I still can't offer this to customers after I don't feel confident in 2.0, but I know I will be able to in a short time.

Confidence in Dashboard 2.0 itself, or just where you're not as familiar with it?

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [15 March 2024 12:15 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/32 "2024-03-15T12:15:44Z")

</div>

I use it daily and develop components daily according to the needs of clients, hotels, hospitals here in Brazil. I'm still not able to deal with the problems enough to be able to switch from 1.0 to 2.0. These are simple things that can be confused by me as problems and just a lack of knowledge on how to use them. I try to throw everything here so that the developers mainly see it. We still have a panel dedicated to printing data when my work is 90% limited to activations. I rarely make a graph because in automation, in the line I work in, graphs are useless for almost anything other than monitoring energy consumption. I understand that this must be the main use of node-red, but I would like to make this observation. This may help to expand the use of the panel in node-red, thinking in the same proportion in terms of weighting in graphs. Here's a basic example of an interview I have... I'm not managing to align things properly in 2.0 to the point where it handles responsiveness in a memorable way like 1.0 does.

 ![Capturar](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/5514a70e98ff0a1a7b0c684b90c93908f28e72c0.jpeg)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 March 2024 13:09 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/33 "2024-03-15T13:09:40Z")

</div>

Curious - what layout type are you using on the left-side there?

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [15 March 2024 13:15 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/34 "2024-03-15T13:15:10Z")

</div>

I have experimented with various approaches, but currently, I am using GRID. However, I still do not fully understand how to position the elements; I feel that this skill is no longer under my control as it was in version 1.0. I believe this gap in my understanding to be the cause of my difficulties. The combination of writing the code for the element along with configuring the groups and pages is not clear to me. Nevertheless, this was never an issue before.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [15 March 2024 13:26 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/35 "2024-03-15T13:26:55Z")

</div>

I published two major documentation updates on Wednesday which may help in this space:

- [Layouts](https://dashboard.flowfuse.com/layouts/)
- [Grid Layout](https://dashboard.flowfuse.com/layouts/types/grid.html)

It's worth noting though that the layout I'm seeing on that left-side doesn't look right. There is little consistency in the alignment which is surprising

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [15 March 2024 14:09 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/36 "2024-03-15T14:09:20Z")

</div>

All my elements follow a 1x1 or 2x1 grid, rarely deviating from this pattern, just as it was in version 1.0. Your work, when applied within its operational guidelines, fulfills its intended purpose. It is I who attempt to flexibilize things in order to implement updates without alarming clients with abrupt changes. In the examples below, we see the same 6x1 concept in 1x1 elements, yet they appear drastically different both on desktop and mobile. This is another challenge I am grappling with.

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/1/b18f36eb98d9012b66402570b963b0bb280ff7a4.jpeg)

---

<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:** [15 March 2024 16:13 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/37 "2024-03-15T16:13:38Z")

</div>

Back to roots. DB1 didn't provide option to design the page. You can only design card content. What you did is just adopted your things to have something . This is same for DB2 with exception, you can make page as you wish if you don't use ready made (grid, fixed) layout. Make it then as you wish and you are on control. Don't fight with options if they don't bring any goodies for you.

---

<div class="post-metadata">

**Author:** ![diegodamaceno](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/diegodamaceno/32/85742_2.png) [@diegodamaceno](https://discourse.nodered.org/u/diegodamaceno)\
**Post date:** [15 March 2024 16:35 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/38 "2024-03-15T16:35:48Z")

</div>

Do you point out the possibility of creating elements within widget (page-scoped) and thus positioning and making them responsive as I desire?

---

<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:** [15 March 2024 16:42 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/39 "2024-03-15T16:42:21Z")

</div>

Something like that yes.

And if you ask if to create your own layout is easy or complicated task then there is no straight answer.

The thing starts with pen and paper and only after seeing sketches the one can say anything about the complexity. The strategy of layout depends entirely on input of designer and product owner.

---

<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:** [14 April 2024 16:43 UTC](https://discourse.nodered.org/t/problem-using-ui-control/86063/40 "2024-04-14T16:43:02Z")

</div>

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

[Previous page](https://discourse.nodered.org/t/problem-using-ui-control/86063.md?page=1)