I created a function node to call REST api and response is coming from that api but I want to display (response)data in node configuration UI in html file. Is it possible to get data from js file to html?
Yes, but you need to know the format of the data. I would guess that it is JSON? If so, have a look at JavaScript's JSON.stringify() function. It has the ability to "pretty print" the output. You can then wrap that with HTML <pre></pre> tags before outputting.
The short answer is "yes", it's possible -- you want some actual ideas on how to get the data from your ajax call into the html page, then you'll need to show us what the response data contains, and give us some idea of what you want it to look like in the browser.
Hi @nitinmax10
Yes, this is a common pattern for node configuration uis. Ive outlined the basic approach on stackoverflow: https://stackoverflow.com/questions/41567175/send-data-on-configuration/41567832#41567832
This assumes you want the node edit dialog to be able to query information from the runtime component.
It is not suitable for the runtime to push information to the editor.
So it will depend on your exact scenario.
Thanks for your reply. I have to create a node that will get JSON data from API and I need to display its content in node UI. Example:
I am getting email template id list from api and I need to display this list with checkbox where user can check that template id and it can be used for further node. What I need to do in js file to send api response in html file.
Thanks in advance
Hi. The link I shared to stack overflow describes what you need to do.
Hi, Thanks for sharing.
I did not understand, What I need to do?
I am sharing What I did?
in JS file:
request(url, function (error, response, body) {
if (!error && response.statusCode == 200) {
node.status({fill:"green",shape:"ring",text:"count:1"});
node.send(body);
}
Here I am getting response in body now further What should I do in HTML file to get this data or I have to make some changes in JS file?
Thanks
Which part of the information on that link did you not understand? I'm happy to clarify it - but I'm not going to repeat the whole lot here.
You need two things:
- your runtime code (in the .js file) to register an admin api endpoint that can be called by the editor to retrieve the information
- your editor side code to call that endpoint to get the information
The link I shared includes a link to the Serial nodes which demonstrate this in action.
Thanks for your reply.
I have to create a node that will get JSON data from API and I need to display its content in node UI. Example:
I am getting email template id list from api and I need to display this list with checkbox where user can check that template id and it can be used for further node. What I need to do in js file to send api response in html file.
Thanks in advance
@nitinmax10 I'm sure @shrickus will be happy to help, once you're responded to the question I asked in my last reply. I've pointed you at a post that describes what you need.
If you can explain what part of that post you are not clear about, we can clarify. But just to ask the same question again is not going to get you a different answer. We aren't here to write your code for you.
Hi @knolleary
I did not ask the same question again, it was by mistake, I thought my reply is visible only for you and then I also deleted that. I did not understand the use of endpoint in JS file and usage of serial ports. I made a get request from JS file and I have data now what I need to do to get this data in html file.
Thanks
Can you share more of the code you have in the js file? It will help us understand how you are getting the information.
There is a very important point here. From the previous code you shared, you had node.send and node.status in there. That suggests you are doing this as part of handling messages in a flow. You cannot push information to the editor from this part of your node. You cannot assume the edit dialog is open when you flow is running.
The only model we support is where the edit dialog of the node makes an http request back to the runtime and asks the runtime for the information. This is what the serial node does; it defines an admin http endpoint that the editor can call at any time to get the information it needs.
Hi,
I have only the following code in js file:
request({
url: campListUrl
}, function (error, response, body) {
if (!error && response.statusCode == 200) {
node.status({fill:"green",shape:"ring",text:"connected"});
node.send(body);
}
else if(!error && response.statusCode == 401){
node.status({fill:"red",shape:"ring",text:"disconnected"});
node.error(response);
//refreshToken();
}
else {
node.status({fill:"red",shape:"ring",text:"disconnected"});
node.error(response);
}
});
What changes I have to do in js and html file. Please explain.
Thanks
You must have more code than just that... or is that literally all you have in the file?!
I am just calling API in this file. Ok I am sharing complete code in JS file.
module.exports = function(RED) {
var request = require('request');
function EmailNode(config) {
RED.nodes.createNode(this, config);
this.name = config.name;
var node = this;
node.status({fill:"red",shape:"ring",text:"disconnected"});
request({
url: campListUrl
}, function (error, response, body) {
if (!error && response.statusCode == 200) {
node.status({fill:"green",shape:"ring",text:"connected"});
node.send(body);
}
else if(!error && response.statusCode == 401){
node.status({fill:"red",shape:"ring",text:"disconnected"});
node.error(response);
//refreshToken();
}
else {
node.status({fill:"red",shape:"ring",text:"disconnected"});
node.error(response);
}
});
}
RED.nodes.registerType("email", EmailNode);
}
I'm sorry, but I think you need to start from the very beginning here and describe exactly what sequence of events you want to happen. To be frank, I'm trying to find a way to explain that what I've already shared with you a few times is exactly what you want. There are only so much time I can spend repeating it.
Is the following a fair description of what you'd want to happen?
- a user drags on an instance of your node to their workspace
- they double click it to open its edit dialog
- within the edit dialog the user is shown some information that has been retrieved from the REST api
- the user makes some selection and closes the dialog
- the user deploys the node and their flow does whatever its configured to do
Exactly I want to do something like that. Please suggest me some material.
Well, I have. Multiple times.
In your .js file, you need to define an admin http endpoint that the editor can call.
For example:
module.exports = function(RED) {
// define you nodes etc as normal
// ...
// ...
// define your admin http endpoint for the editor to call:
RED.httpAdmin.get("/nitinmax10-node", RED.auth.needsPermission('read'), function(req,res) {
request({
url: campListUrl
}, function (error, response, body) {
res.json(body);
});
});
}
Then, in your node's edit dialog, you can call that endpoint with:
$.getJSON('nitinmax10-node',function(data) {
//... does stuff with data
});
Now, you'll need to include all the error handle etc, but that's the basic approach to follow. It is exactly what was in the stackoverflow example, but with some of your code swapped in.
1 Like
Hi @knolleary
Thanks a lot for help.
Hey did you manage to make it work? I have a similar idea and same problem.
