Documentation Plugins Business Forms Custom code

Custom code

You can use custom code to access the panel’s options, REST API responses, form elements, and various Grafana services.

Custom code is executed after the Initial and Update requests and when Element Value Changed occurs.

Parameters

Inspect parameters

To find out the current parameters, you can log them in the browser’s console:

JavaScript Copy

console.log(
  context.panel.options,
  context.panel.data,
  context.panel.response,
  context.panel.elements,
  context.grafana.locationService,
  context.grafana.templateService
);

Refresh the dashboard after an update request or show a warning

The following example shows how to refresh the dashboard after a successful update request or display an error notification if the request fails.

JavaScript Copy

if (context.panel.response && context.panel.response.ok) {
  context.grafana.notifySuccess(["Update", "Values updated successfully."]);
  context.grafana.refresh();
} else {
  context.grafana.notifyError([
    "Update",
    `An error occurred updating values: ${context.panel.response.status}`,
  ]);
}

Update a variable after an update request to interact with other panels

The following example demonstrates how to update a dashboard variable with data from the response, enabling interaction with other panels.

JavaScript Copy

if (context.panel.response && context.panel.response.ok) {
  context.panel.response.json().then((resp) => {
    context.grafana.locationService.partial({ "var-name": resp["name"] }, true);
  });
}

Perform an initial request after an update request or show an error

The following example shows how to trigger an initial request to reload the panel after a successful update or display an error notification if the request fails.

JavaScript Copy

if (context.panel.response && context.panel.response.ok) {
  context.grafana.notifySuccess(["Update", "Values updated successfully."]);
  context.panel.initialRequest();
} else {
  context.grafana.notifyError([
    "Error",
    `An error occurred updating values: ${context.panel.response.status}`,
  ]);
}

Perform an initial request only on dashboard load

The following example demonstrates how to fetch and populate form elements only when the dashboard first loads, avoiding unnecessary requests on subsequent interactions.

JavaScript Copy

const getValues = async () => {
  /**
   * Check if all values are empty
   */
  const isFirstLoad = context.panel.elements.every((element) => !element.value);

  if (isFirstLoad) {
    /**
     * Get Data
     */
    const response = await fetch();
    const json = await response.json();

    /**
     * Update initial element values
     */
    context.panel.onChangeElements(
      context.panel.elements.map((element) => ({
        ...element,
        value: json[element.id],
      }))
    );
  }
};

return getValues();

Clear element values after clicking the Submit or Reset button

The following example shows how to reset or modify form element values programmatically.

JavaScript Copy

context.panel.onOptionsChange({
  ...context.panel.options,
  elements: context.panel.options.elements.map((element) => {
    return element.id === "name" ? { ...element, value: "test" } : element;
  }),
});

The context.panel.onOptionsChange() handler is required to update the panel.

Update the local state in Data Manipulation panel 3.1.0

The following example demonstrates how to update element values in the local state without refreshing the entire panel.

JavaScript Copy

context.panel.onChangeElements(
  elements.map((element) => {
    return element.id === "name" ? { ...element, value: "test" } : element;
  })
);

The context.panel.onChangeElements() function is required to update the element values in the local state.

Simplified form elements patchFormValue helper

Before version 4.4.0, to update a form element value, you had to use context.panel.elements.map(). In version 4.4.0, a new function was added to simplify that approach. It accepts an object with element IDs as keys and their new values.

Before 4.4.0 version:

JavaScript Copy

context.panel.onChangeElements(
  context.panel.elements.map((element) =>
    element.id === "name" ? { ...element, value: "Alex" } : element
  )
);

The simplified version example:

JavaScript Copy

// only passed elements should be updated, the rest stay the same
context.panel.patchFormValue({ name: "Alex" });
// name and isAdmin
context.panel.patchFormValue({ name: "Alex", isAdmin: true });

Simplified form elements formValue helper

Before version 4.4.0, to get form element values, you had to use context.panel.elements.forEach(). In version 4.4.0, a new function was added to simplify that approach. It returns an object with element IDs as keys.

Before 4.4.0 version:

Copy

const payload = {};

context.panel.elements.forEach((element) => {
  payload[element.id] = element.value;
});

// payload = { name: 'Alex', isAdmin: true }

The simplified version example:

Copy

context.panel.formValue // { name: 'Alex', isAdmin: true }