Switch to a new tab programatically

Dashboard
1

I'm using D2 with tab layout
Node-Red v4.0.9
D2 v1.21.0
I want to click on a table row and switch to a new tab passing the row info to a control on that tab

I used to be able to use link out and link in nodes to accomplish this on Dashboard 1 but while the data is passed to the tab on D2, I have to click on the tab to see it. Is this different behaviour on D2 or due to tab layout. Can I switch to the tab using code?

2

have you looked at the docs?

You should also use JS in a template to open a new tab

3

Can you switch to a tab (rather than a page) using the ui-control node?

4

if you read the doc it says page, that's why i mentioned js to open a new tab etc.

5

It does seem to be a bit of a deficiency in the control node that it has not been extended to cope with tabbed layout.

6

Hi
I've read the ui-control examples This is what I have
passing to ui-control just to prove I can manipulate the dashboard

msg.payload = {
    page:'Kiniska',
    groups: {
        show:['Kiniska:Testing']
    }
}

So I can show/hide the tab but I can't figure out how to switch to that tab
The example shows how to navigate to a page but not a group/tab

Just saw Colin' post so maybe tab navigation is not supported

8

Reading further down the page it looks like you can open external links with target

Have not tested but this may work for a dashboard url.

9

I'll try a few of those suggestions and see if the user experience is acceptable

Thanks for the help

10

Send a msg.payload to the ui-control with the tab/page name (page and tab are the same in D2, use them interchangeably)

msg.payload = '<Page Name>'

// Object
msg.payload = {
    page: '<Page Name>',
}```

Hint: When loading content to a widget on a different tab.page, you may need to add a delay so the data gets there after the new tab/page loads. I've run into this almost every time, especially when the group or tab I'm sending data to was hidden and then unhidden just before loading (think dialog groups)
11

Hi
That doesn't work
D2 is set up for tab layout. My tab name is History

{DB0D7740-4AEE-4FDC-BC2E-AED5AD790FAF}

Payload to ui-control

msg.payload={page: "History"}
return msg;

Debug

No page with the name 'History' found

Navigation to a group doesn't appear to be supported. I can hide/show a group but not switch to it

12

no you cannot switch to a group, you must switch to a page/tab that the wanted group is assigned to.

[{"id":"12606684c07e95ea","type":"ui-control","z":"f06b4b91aca80f98","name":"","ui":"12740dcdb7e0bff0","events":"all","x":840,"y":260,"wires":[[]]},{"id":"1436cf8a12929890","type":"ui-button","z":"f06b4b91aca80f98","group":"9746774bdb6159d2","name":"","label":"Go to page2","order":1,"width":0,"height":0,"emulateClick":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","iconPosition":"left","payload":"","payloadType":"str","topic":"topic","topicType":"msg","buttonColor":"","textColor":"","iconColor":"","enableClick":true,"enablePointerdown":false,"pointerdownPayload":"","pointerdownPayloadType":"str","enablePointerup":false,"pointerupPayload":"","pointerupPayloadType":"str","x":470,"y":260,"wires":[["a65e78090559d1c6","46f6c5205e21ea36"]]},{"id":"3f98ee78efb29596","type":"ui-text","z":"f06b4b91aca80f98","group":"a5ed115fabc2d472","order":1,"width":0,"height":0,"name":"","label":"Message","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","x":840,"y":360,"wires":[]},{"id":"a65e78090559d1c6","type":"change","z":"f06b4b91aca80f98","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"target","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":260,"wires":[["12606684c07e95ea"]]},{"id":"46f6c5205e21ea36","type":"delay","z":"f06b4b91aca80f98","name":"","pauseType":"delay","timeout":"100","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":490,"y":360,"wires":[["40019e6e5dbc0ce9"]]},{"id":"40019e6e5dbc0ce9","type":"change","z":"f06b4b91aca80f98","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"You've arrived!","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":360,"wires":[["3f98ee78efb29596"]]},{"id":"12740dcdb7e0bff0","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true},{"id":"9746774bdb6159d2","type":"ui-group","name":"change pages","page":"a074d734eb9cea0e","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a5ed115fabc2d472","type":"ui-group","name":"group2","page":"86d8ed2bd7ae9124","width":6,"height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a074d734eb9cea0e","type":"ui-page","name":"Home","ui":"12740dcdb7e0bff0","path":"/page1","icon":"home","layout":"grid","theme":"b084dec56556dff7","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":"true","disabled":"false"},{"id":"86d8ed2bd7ae9124","type":"ui-page","name":"target","ui":"12740dcdb7e0bff0","path":"/page2","icon":"bullseye","layout":"grid","theme":"b084dec56556dff7","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"b084dec56556dff7","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094CE","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
13

without seeing your flow, you just need to ensure that the page you're navigating to is the exact page name that you assigned in the page configuration.

edit: after using the "tabs" layout on a page, I now see the issue you're having. "tabs" here are not like the tabs of D1, where each tab is a page. These D2 "tabs" are groups in a tab layout on the page. ui-control is not configured to handle navigating to groups as of now, but I could see how this could be functional. What I would do is refactor your site to use individual pages as your tabs instead of trying to navigate different groups within a page. This has much more flexibility.

14

Hi
Thanks for the response.

In tab layout group navigation is not supported as you say but it would be nice if it was e.g.

msg.payload = {
    page:'Page1',
    groups: {
        open:['Page1:Group1']
    }
}

For now I've changed back to grid layout which works fine

15

I agree, if they have a "tab" layout, why not allow this to be manipulated, but I've never had a use case for the tabs layout myself and I'm not sure what its use would be unless you are trying to nest many dashboards into one and want to fold it down compact. Another option is to use a dialog group (change group type to dialog) and use the ui-control to show/hide this, as it will then be a box that takes up the whole screen. I do this exact thing in a couple apps I've built using D2 and it works well.

16

Yes indeed it makes sense to implement that feature.

Note that my pull-request (to refactor the ui-control code) is already open for a couple of months. Imho it is not advisable to add extra features to the ui-control node, until that PR is reviewed and merged. Otherwise the new feature needs to be implemented twice, in a different way...

I think it is best to add an issue to the dashboard repo, and add a link to this Discourse discussion. And please add a link to my pull request, to make sure everybody sees there is a dependency.

1 Like
17

Issue added to Repo.

Not an expert here so may not have explained it sufficiently for the contributors

1 Like
18

@gerrybartley
Thanks! More than ckear enough.

19

Yes, that would be a great feature.

I also opened a related issue—not specifically for TAB control, but for reporting which TAB was selected via a UI event.

ISSUE 1579

1 Like
20

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