Open UIBuilder page from NR nodes elements

General
1

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:

$ 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:

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

2

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:

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

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
And here is the Dashboard:
image
And here is a uibuilder endpoint:
image
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).

3

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