Hi,
I am new to Uibuilder.
What is the function I should use to navigate the multiple webpages in the same project file?
Best Regards,
Hi, with uibuilder, you can either work with real multiple web pages (in separate html files) or you can create an SPA (Single Page App) which is more like Dashboard and is what you get with something like Vue Router.
So that is the first thing you need to think about. A lot of people go for the SPA route as it often feels more natural from an application development perspective. But, it does make your webpage bigger which can sometimes be an issue on some mobile devices.
With a multi-page app, the disadvantage is that each page has to initialise on load which means creating a new link with Node-RED and loading the required libraries and CSS. But each page could be somewhat smaller in size.
So if you value the experience of rapidly switching visuals, an SPA is probably the way to go. If your users are likely to stay on one of the pages for an extended period, a multi-page approach might be better.
1 Like
In my application, multiple web pages option is the right choice bases on your explanation.
May I know the function to be used to move from one page to another?
This is standard HTML and JavaScript. There is nothing specific to uibuilder. One of uibuilder's strengths is that it lets you use standard web development.
To allow users to manually move to a new page just needs a URL link (or a button acting as a link).
To automate moving between pages from a script:
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com"
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com")
1 Like
Hi, it works fine, but there is an issue that Uibuilder is getting disconnected. The connected client is becoming zero, once it navigates to the second page.
How can I fix this issue?
Also, can I add react SPAs in uibuilder?
Thank you,
That is how web pages work. If you load a new page, you are making a new connection to node-red. Each page is a stand-alone thing. That is not specific to uibuilder, it's just how HTTP/HTML works. The new page though should be set up the same way as your main page - with links that load the uibuilder and other libraries and your index.js. You may be able to use the same index.js file as your main page depending on what front-end processing you want to do.
If the websocket connect is not working, check the browser's developer console for errors and report them back here.
You can add any front-end framework. REACT, Vue, Angular, ... - they will all work with uibuilder.
It works fine.
How can I define topic for each page? I want to distinguish the pages based on the topic.
uibuilderCtrl: "client disconnect"
reason: "transport close"
topic: undefined
_socketId: "OpAEnW_UeCqUc-SNAABX"
version: "5.1.1"
Best Regards,
It looks like you are using the older client (uibuilderfe.js) and I still need to fix the page name output for that version. In the new version (uibuilder.iife.js or uibuilder.esm.js), the page name is included in the connect and disconnect messages.
{
"uibuilderCtrl":"client disconnect",
"reason":"transport close",
"_socketId":"wU6N8W2wXTw6F2DPAAAW",
"version":"6.0.0-iife.min",
"ip":"::1",
"clientId":"ozJrEhM3_tR6XrbwHxidd",
"pageName":"index.html",
"connections":0,
"from":"server",
"_msgid":"2c95acae48e95d2a"
}
{"uibuilderCtrl":"client connect","version":"6.0.0-iife.min","_socketId":"l5mqsVwDUYE-FzMzAAAZ","ip":"::1","clientId":"ozJrEhM3_tR6XrbwHxidd","pageName":"index.html","connections":0,"_msgid":"89c04bda03739396"}
In v6, I'll also be adding an option to include some of this data in standard messages as well.
It works fine after changing the client to uibuilder.iife.js
1 Like
uibuilder v6 shouldn't be too far away now and it includes an advanced option to add msg._uib to standard msg outputs that includes the client id, remote IP address and page name.
1 Like
Hi,
Can I add my own object with this? if yes, how to add it?
Best Regards,
Ashiq
You'll need to give me a bit more of a clue as to what you are trying to do.
In general, you can send anything you like back to Node-RED using the uibuilder.send function and then deal with it as normal in node-red. That is the basic functionality of uibuilder. Similarly, you can send anything you like to your front-end via the uibuilder node or the uib-sender node.
There will be practical limitations around data sizing but nothing really specific to uibuilder.
From the front-end js code to node-red:
uibuilder.send( {
topic: "My Topic",
payload: { something: "custom", answer: 42},
bespoke: "is standard"
} )
uibuilder will add internal meta-data to msg._uib to ensure that it doesn't clash with anything that you are doing for yourself.
I want to send the username and token_no along with meta-data as shown below:
{
"uibuilderCtrl":"client disconnect",
"token_no ":"afsdjasdkjnlaskdflkmkasmdf",
** "username":"david",**
"reason":"transport close",
"_socketId":"wU6N8W2wXTw6F2DPAAAW",
"version":"6.0.0-iife.min",
"ip":"::1",
"clientId":"ozJrEhM3_tR6XrbwHxidd",
"pageName":"index.html",
"connections":0,
"from":"server",
"_msgid":"2c95acae48e95d2a"
}
You can't currently add anything custom to the uibuilder control messages, they are tightly controlled to ensure that everything continues to work reliably.
Though in truth, it probably wouldn't be hard to add a capability to the library.
Is that token set by something else? If so, what creates it? Is it a JWT?
it's UUID number generated by node-red.
So you send that to the client when they first connect? You might want to consider using the clientId instead since that is very similar but is set up for you by uibuilder and is already included in control msgs. As you are already using the v6 preview, it is also an option in std msgs as mentioned (turn it on with the switch in the Advanced tab).
The client id is a UUID that persists as long as the client browser is open. It is reset if the browser is closed then reopened. That means that all tabs connected to the same uibuilder node on the same browser will have the same client id.
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
