UIBuilder Vue3 REST better than my hack

Dashboard
1

I'd like a simpler way to get REST json than my hack:

[{"id":"7e333256.6fb56c","type":"http response","z":"50528611.ae64a8","name":"","statusCode":"","headers":{},"x":1610,"y":640,"wires":[]},{"id":"e549f9e3.4965","type":"template","z":"50528611.ae64a8","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n<head>\n<style>\nbody {\n  margin:0px;\n  font-family:'Source Sans Pro', 'Helvetica Neue', 'Helvetica', sans-serif;\n}\n\ndiv {\n  margin:0px;\n}\n\n.Screen_1 {\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n}\n\n.Screen_1 .Grid {\n  color: #333333;\n  display: flex;\n  flex-direction: column;\n  margin-right: 3%;\n  margin-left: 3%;\n  min-height: 400px;\n  margin-top: 63px;\n  margin-bottom: 17px;\n}\n\n\n.Screen_1 .Row_2 {\n  display: grid;\n  grid-template-columns: 35% 13% auto;\n  grid-template-rows: 11% 31% auto;\n  margin-right: 2%;\n  margin-left: 3%;\n  min-height: 100px;\n  margin-top: 2px;\n  margin-bottom: 298px;\n}\n\n\n.Screen_1 .Camerea_Image {\n  border: 1px solid #333333;\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 1;\n  grid-row-end: 4;\n}\n\n\n.Screen_1 .Label {\n  color: #333333;\n  text-align: left;\n  font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n  font-size: 31px;\n  letter-spacing: 0;\n  line-height: 1;\n  grid-column-start: 3;\n  grid-column-end: 4;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\t</style>\n</head>\n<body>\n    <div class=\"Screen_1 MatcSreen\">\n      <div class=\"Grid\">\n        {{{payload}}}\n      </div>\n    </div>\n</body>\n</html>","output":"str","x":1460,"y":640,"wires":[["7e333256.6fb56c"]]},{"id":"472f518a.f763e","type":"function","z":"50528611.ae64a8","name":"","func":"var object = msg.payload\nvar html = \"\"\nfor(var prop in object) {\n html += '<div class=\"Row_2\">'\n html += '<div class=\"Camerea_Image\"><img src=\"'+object[prop].image+'\"/></div>'\n html += '<div class=\"Label\">'+object[prop].name+'</div>'\n html += '</div>'\n }\n \nmsg.payload = html\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":1300,"y":640,"wires":[["e549f9e3.4965","1dde2dda.33854a"]]},{"id":"3f53e468.38c784","type":"http request","z":"50528611.ae64a8","name":"getjson","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals","tls":"","persist":false,"proxy":"","authType":"","x":1120,"y":580,"wires":[["472f518a.f763e","1dde2dda.33854a"]]},{"id":"1dde2dda.33854a","type":"debug","z":"50528611.ae64a8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1370,"y":560,"wires":[]},{"id":"7424b02a.ee4ec","type":"http in","z":"50528611.ae64a8","name":"","url":"/rest","method":"get","upload":false,"swaggerDoc":"","x":980,"y":580,"wires":[["3f53e468.38c784"]]}]

And noted that Vue3 seems to work fine within UIBuilder (see Can't change width and height of screen · Issue #32 · KlausSchaefers/quant-ux · GitHub for details).

I wonder how to parse the payload and place data easily, at least easier than the function above (taken from a '18 post here).

Another problem, how to request the json result when uibuilder page is called since you can't chain it with a GET right?
Thanks

2

Sorry, that's too big a flow for me to want to load it right now and it wouldn't show any of your front-end code anyway. So I'm not sure what you are trying to do.

That is a really interesting project. It would be really good to get a working example into the WIKI (or the Node-RED flows site) or at least the instructions to get quant-ux working with Node-RED and uibuilder.

Not sure I understand what you are trying to do. If you need to get external data, you have 2 choices, call from Node-RED (where you can use the uibuilder control msg's to detect when there is a page load event) OR from the front-end using a suitable async http request.

3

image
That's all the big flow :slight_smile:
Basically, it ...
gets the REST https://6041e60f7f50e000173ab43e.mockapi.io/api/v1/animals
function parse it to html:

var object = msg.payload
var html = ""
for(var prop in object) {
 html += '<div class="Row_2">'
 html += '<div class="Camerea_Image"><img src="'+object[prop].image+'"/></div>'
 html += '<div class="Label">'+object[prop].name+'</div>'
 html += '</div>'
 }
 
msg.payload = html
return msg;

template expose it using {{{payload}}} with style from Quant-UX

For the wiki, getting an example of UIB Vue of getting the values from the json would really help.
I frankly don't know how to do it, hence my post.

4

So if you return that API as a JSON response, you can easily do a call to the API from your front-end code and use the returned data to update Vue variables.

5

How? That's the point of my question :slight_smile:

6

Alternatively, you could just pass an event request back to Node-RED via uibuilder and let your resulting flow send the data back to your front-end via the uibuilder node.

OK, wasn't quite what you wrote.

Fist you need to decide how/when you want to trigger the call to the API?

7

I tried image but it's not working
What I wrote was :
my hack is working, here it is.
Vue3 is working in UIB
how to rewrite this GET + parse using UIB (best with Vue3)

8

What is triggering the uibuilder.send? Is it working, add debug nodes to the uibuilder and the request nodes.

9

I though the upper output was for control as you show previously in an example:
image

10

No, the bottom port is for control msg's, the top one is for your output. If you hover over the output ports, they tell you what they are for, it is also listed in the documentation.

11

Haa, ok, I didn't see that.

And, AFAIK, the documentation is just text (btw, changelog is empty or missing?):
image

So what does trigger a control msg?
My index.js has:
uibuilder.onChange('msg', function(msg){ console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
But when I click a btton on the page, it doesn't fire it

12

You seem to have landed on the CHANGELOG which, for some reason, doesn't appear to be working for you. Try:

http://102.168.1.236:1880/uibuilder/techdocs

Which is the link in the node itself and in the help sidebar.

I can see that the help sidebar shows the two ports as "1" and "2" but perhaps that isn't quite clear enough, I will add "upper" and "lower" to the description as well for a future release.

The information is likely also in the node's README doc.

Any new/updated connection plus disconnections. Each has a specific control msg type which is described in the tech docs. Stick a debug output on the port but make sure you set it to show the whole msg not just the payload.

The default template has a button that has an onClick event handler method attached that does a uibuilder.send(....), that will come out of port 1 (the upper port).

If you create a new uibuilder node so that you get the latest template for v3.2, you will see that the click method uses a new uibuilder helper function to make life even easier. That still comes out of port 1 though.

13

My bad, I actually changed it to the control (lower) after your post before firing it.
So, let's say I keep the onChange behavior and upper loop for now to get the json result.

For Vue3, it simply works with:
image

From there, any example I tried from Vue3 documentation will work out of the box:
image

How UIB could take advantage of this and parse the msg.payload and show the result?

Ah, didn't read the end of your message before replying.
6pm, time for a drink with family and rest my head for now
Cheers!
Will read later :slight_smile:

14

Thanks for testing. I don't think you need to make any real changes then. As long as you are using the mounted function, you put the onChange in there as usual. The start function is best put into Vue's started function as it currently is.

If you are using components, you can create more onChange functions in the component if that is convenient rather than having just one in the main app and having to pass data down to your component. Either way should work just fine. There is no real limit to the number of onChange functions you can have. They will fire in the order in which they got created.

The uibuilder object is global and so should be available to everything.

15

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