Data Manipulation Plugin - Use the value entered in a form element ID as a query parameter for the URL of the Update Request POST

[alejandroguida]

Hi everyone,

Has anyone been able to use the value entered in a specific form element ID as a query parameter for the URL of the Update Request POST?

Basically I’m trying to do this:
Add a Note entered by a user in a form, using a POST API Call to a specific service that I’m using in my backend

Anybody know if what I’m trying to do with Data Manipulation plugin is possible, without using the API Server provided by Volkov Labs and a PostgreSQL behind?

Thanks in advance four your help.
Regards,
Alejandro

[mikhailvolkov]

@alejandroguida You can use the value in the URL as ${note} as described in the documentation and showcased in the first screenshot

Custom Code | Volkov Labs

[alejandroguida]

Hi @mikhailvolkov,

First of all, thanks for all your answers in all my questions about Volkov’s Labs plugins after a few minutes that I asked, really appreciated.

I reviewed the documentation about the plugin, and I already tried to use ${note} in the URL with no luck (is not being replaced with the value) before I created my post here.

I did a small POC to do troubleshooting and show you:

First, the dashboard and the plugin config:

Second, the received information in NodeRED when I press “Submit” button:

As you can see, my expectation is to receive “this-is-a-test” as the value of the “note” field on “query” and on “url”, but I’m receiving “${note}”, and I’m only getting the value “this-is-a-test” in the payload and in the “note” field in the body of the HTTP POST Request.

As an additional test, I added a Grafana’s variable to the URL, with the name “id”, and put it a hardcoded value in the dashboard, “25”, and is working as expected (I get “25” as the value of “id” field on “query” and on “url”.

Am I understanding something wrong? Or something is not behaving as expected?

Thanks in advance for all your help.

Regards,
Alejandro

[fercasjr]

I am pretty sure you can.

First create a grafana variable (it can be hidden, but will be easier to debug if you dont hide it).

Then you use data manipulation plugin and inside the custom code you assign the value to the grafana variable.

I believe you need to use locationService() to refresh the variable and load the new added value.

And you should be able to reference it in the link

You can use data manipulation plugin to update grafana variables

[mikhailvolkov]

@fercasjr You are correct. You can use dashboard variables as an alternative.

@alejandroguida, I misunderstood a question. Element values are not replaced in the URL. Maybe it should?!

You can use Custom Request instead of predefined POST request as explained in the documentation:

Custom Requests | Volkov Labs

There is an example:

/**
 * Set body
 */
const body = {};
options.elements.forEach((element) => {
  if (!options.update.updatedOnly) {
    body[element.id] = element.value;
    return;
  }

  /**
   * Skip not updated elements
   */
  if (element.value === initial[element.id]) {
    return;
  }

  body[element.id] = element.value;
});

/**
 * Set URL
 */
const url = `http://localhost:3001/${body["name"]}`;

/**
 * Fetch
 */
const resp = fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "PRIVATE-TOKEN": "$token",
  },
  body: JSON.stringify(body),
})
  .catch((error) => {
    console.error(error);
  })
  .then((resp) => {
    console.log(resp);
  });

Let me know if it’s what you are looking for.

[alejandroguida]

Perfect @mikhailvolkov !

With the provided code it worked like a charm,

Thanks for all your help! It’s so important that you not only create plugins, you support us to use them,

Regards,
Alejandro

[alejandroguida]

Hi @mikhailvolkov,

Abusing of your good will, I add a question here: how is the Data Manipulation plugin, in particular the Text Area Type field of a form element, managing the new lines?

Because when I add a note from Grafana, via API, to the end application, I’m loosing the new line:

On NodeRED, I can see the new line in the payload of the message, in the form of “↵” (which is replaced “visually” if I do a click on the payload with the newline), but in the URL and on the query field is erased (not even replaced by \n), while spaces are replaced by %20:

Sorry if this question is more referred to the way that Javascript replace the ${body["note"]} in the URL, and not mainly to the Data Manipulation plugin itself. The question is to try to understand, because I’m not a Javascript Developer, I’m just a script kiddie with willpower,

Thanks again for all your help.

Regards,
Alejandro

[alejandroguida]

Hi @mikhailvolkov ,

Finally I found the way for the end application to “understand” the newlines.

What I did is to replace /n with %0A on the body const for the note element (the only element that I have), and that did the trick:

/**
 * Set body
 */
const to_replace = `\n`
const replacement = `%0A`
const body = {};
options.elements.forEach((element) => {
  if (!options.update.updatedOnly) {
    body[element.id] = element.value.replaceAll(to_replace, replacement);
    return;
  }

The only problem is that I need to use the “note” field inside “body” or “payload”, which both have the “%0A” in the middle, and I cannot use the “note” field inside “query”, because it don´t has the “%0A” (I really don’t understand why). This obliges me to use NodeRED to do that “transpolation” from body/payload to query in the API call to the end service; I cannot do the API call directly to the end service because of that.

And finally, I added to your example code the option to notify on success and on error, and clean the field after submit:

  .catch((error) => {
    console.error(error);
  })
  .then((resp) => {
    console.log(resp);
    if (resp && resp.ok) {
      notifySuccess(['Added', 'Note added successfully.']);
    } else {
      notifyError([
        "Error",
        `An error occured adding the note: ${resp.status}`,
      ]);
    }
  });
elements.map((element) => {
  if (element.id === "note") {
    element.value = "";
  }
});
onOptionsChange(options);

Again, thanks for all your help.

Regards,
Alejandro

[mikhailvolkov]

@alejandroguida, I read your response multiple times, but I can’t say that I understood it correctly.

The %0A corresponds to \r, which is the Windows-style new line - \r\n to be exact. The text area returns new lines \n in Unix style (I am on Mac). Is it what the issue is?

If you need to have different formatting in the payload (body) and query parameter, then don’t replace it in the body. Replace it directly in the query.

const note = ${body["name"]}.replaceAll(to_replace, replacement);
const url = `http://localhost:3001/${note}`;

Let me know if it helps.

[alejandroguida]

Hi @mikhailvolkov ,

I think that the end application API only allows %0A as new line, and that was the main problem.

I tried first to do the replace directly in the query when I was doing the troubleshooting, but I really don’t know why, didn’t work.

I tried again with your suggestion now (I think is similar to what I did when I was doing the troubleshooting, but I don’t remember), and again, didn’t work.

I used the definition of the constant like you wrote it, and tried too with an additional “}” after “name”, like this:

const note = ${body["name"]}.replaceAll(to_replace, replacement);

Finally I did the replace in the body because for me is the same, I’m only using one element, and finally with that it worked.

Thanks again for all your help with the troubleshooting.

Regards,
Alejandro

[bhaskarsr]

Hi mik
I am using your example code,
options.elements.forEach((element) → here I am getting the “Form Elements ID” but not getting the value what I entered in the fields. What I am doing wrong here…

[mikhailvolkov]

It’s a breaking change in v3: Data Manipulation Panel 3.0.0 | Volkov Labs

[bhaskarsr]

Thanks for the reply.

instead of options.elements.forEach((element)
just give elements.forEach((element) i will get the required result.
Thanks for the help

[mikhailvolkov]

@bhaskarsr That’s correct. It was a required breaking change to continue improve the plugin.

Thank you for confirming.