[Question] Infinity Datasource with Update Request

[mschweig]

Hello,

how can I use the Infinity Datasource to do a Update Request with the specified field from the Form Elements?

For example: Form Element Custom Select is "command1"

When clicking on "Submit" a GET/POST request should be carried out via Infinity Datasource to the desired API like that:

https://demo-api?param=command1

Is that possible?

Thanks Best regards.

[vitPinchuk]

@mschweig Thank you for your question.

Use Infinity Datasource. For example, I use endpoint: https://jsonplaceholder.typicode.com/posts

Add 3 element for Title, Body, and for user Id

Here is my Initial request settings

And an example of creating an update request with the specified field from form elements:

Update Action -> Data Source Data Source -> Infinity

custom code example

if (context.panel.response) {
  context.grafana.notifySuccess(['Update', 'Values updated successfully.']);
  context.panel.initialRequest();
} else {
  context.grafana.notifyError(['Update', 'An error occurred updating values.']);
}

Please create a payload using the panel elements. The code editor should return the appropriate payload. Create payload:

let payload = {
  title: '',
  body: '',
  userId: ''
}
context.panel.elements.forEach((element) => {
  console.log('console >> element', element)
  if (element.id === "postTitle") {
    payload.title = element.value
  }

  if (element.id === "postBody") {
    payload.body = element.value
  }

  if (element.id === "userId") {
    payload.userId = element.value
  }

})

return payload

Next, we should use payload in request via Infinity Data Source. Use for that Query Editor field in Update Request Method: POST
URL: https://jsonplaceholder.typicode.com/posts And Headers, Body, Request params have URL options
Body Type: Raw Body Content Type: JSON Body Content (for example):

{
  "title": "${payload.title}",
  "body": "${payload.body}",
  "userId": "${payload.userId}"
}

Here we use the payload we got from the Create Payload code editor.

And after click "Submit" button I see in Network my payload in body:

In the same way we can add parameters from the payload to URL As example:
https://jsonplaceholder.typicode.com/posts?param=${payload.title}

[mikhail-vl]

@vitPinchuk Well done! Could you please create a blog post how to use Business forms with Infinity Data Source based on this content.

[mschweig]

Hi @vitPinchuk thanks, that's amazing! I had to update to 4.1.0, it was not working with prior versions.

I also combined Infinity with the base64 Plugin to show Images from HTTP APIs, what a great add-on :)