Send POST Request with custom Data out Grafana

[SirGamsay]

TL;DR How to Include a dynamically changing Body in a Request created by Business Forms Plugin.

Hello,

I'm trying to use a Grafana Panel as a file Upload. My Setup is a Grafana Instance and a simple Python Flask API. Both Running on the same Server. Important is, that the API is not accessible by my Client, it is just internal in the Grafana Network. So Grafana itself has to make the requests to my API Endpoint.

This is why I use the Infinity Data source to send API Calls to my Endpoint from Grafana. This part does work, the API is reachable by the Data source.

Because I need my User to give Data to my API (in later Terms a file encoded as a base64 String, but for now anything would be lovely) this seems to be a challenge. I'm using the Volkvolabs Business Forms Plugin to achieve Data Transfer back to a Data source, but I can't find/ understand the documentation for doing this with a changing JSON Body.

The Data will be Sent in the Body of the API call, and I only find ways to provide a static Body to my API Call. Those Calls with static JSON Body do work and my API can be reached. But I need to include the data that is Input in the Business Forms in my JSON Body as well.

I have no background in Web Development, so the JavaScript Part of the Custom Code are hard for me. I think I have to prepare the payload (at least to encode the file as base64 String) but I can't change the Body of the Request dynamically at all.

Of course, I will be Happy to provide more Documentation of what my Setup looks like if needed.

I followed this Article How to combine Infinity Data Source with the Business Forms step by step, but my result is

How can it be, that in my Configuration the Payload is not correctly changed?

[SirGamsay]

Also these are the names of the Form Elements, even though it should not matter, there should be empty strings I suppose if the values just cant be found

[SirGamsay]

I fixed it. The tutorial was incorrect whilst preparing the Javascript Object.

let payload = {
  title: "",
  body: "",
  userId: 0,
};

The userId has to be of data type number instead of string.

[mikhail-vl]

@SirGamsay Thank you for letting us know. Blog post updated.

[SirGamsay]

Hey,

Just a quick thing I noticed too. In this Part of this Blog Post. The Function is by definition above and testing called patchFormValue and not patchFormValues

[vitPinchuk]

@SirGamsay Thank you for letting us know. Blog post and documentation updated.