Uibuilder with a href

General
1

I need to turn to my friends, beasts.

Do you have any idea how?

Click on this link (which is a datatable) and it opens the report embedded in the UI_BUILDER? But with the data loaded?

Below are the screens I want to make:

image
image1230×667 127 KB

I would like to click on this screen and open the report. This is really easy to do (but I wouldn't have a way to boost the stream to load the data.
The flow would be this:

image
image1400×762 192 KB

The report I want to open is in uibuilder:

image
image554×669 29.6 KB

Any suggestion? I realized that it is possible for an HTML page to communicate with NODE-RED (but as a printed report). Wouldn't it be cool to have a button in the HTML

2

Just checking my understand. The table has a set of rows and the 2nd column has an html link which presumably has a query parameter on it? And you want the details page to open but for it to have the details from that specific row of the table showing in it?

This is certainly possible. By adding an on load JavaScript function in your uibuilder page that unpacked the query parameter(s) and sent them to Node-RED as a msg, that msg would then trigger a get of the data onto a new msg - including the msg id from the 1st output - sent back to the uibuilder node. You then have an onchange function in your front-end code that processes the message and updates the data - or, you pass the data into uib-update or uib-element nodes which go back to uibuilder to update the page. Either way works.

3

Exactly.

This line has the href='/relat' target=_blank

This opens an external window with the report.

I'll try your suggestion to do the communication back on ON-LOAD.

And post the result here.

I'm loving this NODE-UIBUILDER

4

You should make a change to that so that it passes the row id. That way, the uibuilder page will be able to process it directly: href="/relat?rowid=xxxx" or however you identify the row's source record.

Hmm, gives me thought for a future convenience function for the uibuilder client library. An option to automatically recognise URL query parameters and automatically send them back to Node-RED. :slight_smile:

One for a future release though I'm afraid. Added to the roadmap.

5

image
image511×701 68.5 KB

I already do that to some extent.

But which command within the javascript will I return the communication to node red?

6

A simple uibuilder.send({....}) The format of the data you send is the same as a message in Node-RED.

This front-end JavaScript will automatically send a message to Node-RED containing all of the URL parameters when the page is loaded:

window.onload =  ev => {
    uibuilder.send( { payload: Object.fromEntries(new URLSearchParams(location.search)) } )
}
7

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