# Open UIBuilder page from NR nodes elements

**URL:** <https://discourse.nodered.org/t/open-uibuilder-page-from-nr-nodes-elements/77140>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [1 April 2023 14:33 UTC](https://discourse.nodered.org/t/open-uibuilder-page-from-nr-nodes-elements/77140 "2023-04-01T14:33:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![gNeandr](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gneandr/32/73947_2.png) [@gNeandr](https://discourse.nodered.org/u/gNeandr)\
**Post date:** [1 April 2023 14:33 UTC](https://discourse.nodered.org/t/open-uibuilder-page-from-nr-nodes-elements/77140/1 "2023-04-01T14:33:30Z")

</div>

UIBuilder works fine with my "dev" port setup and starting with  
`node-red -p 2000 -u /home/pi/.red2000`  
This gives a setup like this:

```auto
$ ls -lta (part of listing)
drwxr-xr-x 5 pi pi 4096 1. Apr 15:53 .red2000
drwxr-xr-x 5 pi pi 4096 31. Mär 23:26 .node-red
drwxr-xr-x 7 pi pi 4096 31. Mär 16:22 .
-rw-r--r-- 1 pi pi 169 31. Mär 00:18 .wget-hsts
drwxr-xr-x 3 pi pi 4096 31. Mär 00:05 .local
drwxr-xr-x 4 pi pi 4096 30. Mär 22:49 .npm

```

The UIBuilder standard test 'uitest' works well, so exchange between node-red nodes and pages build with UIBuilder works. Great!

An open point with this setup: what is an elegant way to open a UIbuilder page from node-red nodes?  
Assume the NR app opens with the default ../ui and for a particular operation (button or event) the UIBuilder page needs to open in a separate TAB..

At the moment I use a call like this:

```auto
<button onclick="openInTab()" >UBItest in my TAB</button>

<script>
    function openInTab() {
        window.open("http://xxxxxx:2000/ubitest", "mytab");
    }
</script>

```

Does UIBuilder have an 'internal' call/mode to open a requested URL/page in a similar way?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [1 April 2023 15:40 UTC](https://discourse.nodered.org/t/open-uibuilder-page-from-nr-nodes-elements/77140/2 "2023-04-01T15:40:54Z")

</div>

> [@gNeandr](#):
>
> Does UIBuilder have an 'internal' call/mode to open a requested URL/page in a similar way?

You can see on the uibuilder node that there are 2 places with buttons that open the page.

This is the code used to handle the button clicks:

```auto
.on('click', (evt) => {
    evt.preventDefault()
    window.open(`${node.urlPrefix}${$('#node-input-url').val()}`, '_blank')
})

```

Which, as you can see is basically the same as what you are doing. But the urlPrefix is complex because of the different ways you can change the URL of node-red pages from the settings in settings.js and also because uibuilder allows for the use of a custom ExpressJS web server instance and not just the node-red one.

> [@gNeandr](#):
>
> Assume the NR app opens with the default ../ui

Not certain you are actually making a safe assumption there. Take my dev setup for example which deliberately uses several properties in settings.js to make sure that I have to test the different options.

Here is the Editor:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/3/43719fe1b8a84dc7a0ecbf7101cbc0962fca921b.png)  
And here is the Dashboard:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6cd31a452c26fbf4d01bd260a1dd85c6787edf87.png)  
And here is a uibuilder endpoint:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/b/9b257067fe36ff71e267cbbafe90e66e8ebb0f76.png)  
If I wasn't using a custom Express server, that last URL would be `red.localhost:1880/nr/iife-client-tests/` because in settings.js, `httpNodeRoot` is set to `nr` rather than the default empty string. `iife-client-tests` is, of course, the uibuilder url.

And, of course, if you use a reverse proxy outside of Node-RED for efficiency and security then it can all be different again.

There is no easy way for uibuilder to be able to share this information because of the way that node-red works. As you can have any number of uibuilder nodes, it isn't like Dashboard where you are restricted to only one. uibuilder is vastly more flexible than Dashboard.

Now, it would be feasible to write an API endpoint that returned the required prefix I suppose. Generally though, you would expect people to know it. I can add something to a future release though if you think it worth-while? It could also return a list of deployed uibuilder urls (there is already an admin API endpoint for that anyway).

---

<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:** [31 May 2023 15:41 UTC](https://discourse.nodered.org/t/open-uibuilder-page-from-nr-nodes-elements/77140/3 "2023-05-31T15:41:23Z")

</div>

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