Skip to main content

Custom Code

Custom code allows you 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.

Parameters​

ParameterDescription
dataResult set of panel queries.
elementsForm elements.
initialParsed values from the initial request.
initialRequest()Performs an initial request to reload the panel.
locationServiceGrafana's locationService function to work with the browser's location and history.
notifyError(['Header', 'Error Message'])Displays an error.
notifySuccess(['Header', 'Message'])Displays a success notification.
notifyWarning(['Header', 'Message'])Displays a warning.
onChange()Updates elements in the local state. Added in v3.1.0.
onOptionsChange()Modifies a handler to refresh the panel.
optionsPanel's options.
responseRequest's response.
setInitial({})Specifies initial values for a custom initial request to highlight modified values and requests a user's confirmation.
templateServiceGrafana's templateService function that provides access to variables and enables the update of a time range.
Initial and update requests in Data Manipulation Panel.
Initial and update requests in Data Manipulation Panel.

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

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

Refresh Dashboard after update request or show error​

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

Update variable after update request to interact with other panels​

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

Perform Initial Request after update request or show error​

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

Perform initial request only on dashboard load​

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

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

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

return getValues();

Clear elements' values after click on the Submit or Reset button​

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

The onOptionsChange handler is required to update the panel.

Update local state in Data Manipulation Panel 3.1.0​

onChange(elements.map((element) => {
  return element.id === 'name' ? { ...element, value: 'test' } : element
});

The onChange() function is required to update the element values in the local state.