Custom Code

The custom code has access to the Panel options, the response from the REST API call, form elements, and various Grafana services. The Custom code is executed after the Initial and Update requests.

Parameters

Parameter	Description
data	Result set of panel queries.
elements	Form Elements.
initial	Parsed values from the Initial Request.
initialRequest()	Perform the Initial Request to reload panel.
locationService	Grafana's locationService to work with browser location and history.
notifyError(['Header', 'Error Message'])	Display error notification.
notifySuccess(['Header', 'Message'])	Display successful notification.
onOptionsChange()	Change handler to refresh panel.
options	Panels' options.
response	Request's response.
setInitial({})	Allows to specify the initial values for Custom Initial Requests to Highlight changed values and Require Confirmation.
templateService	Grafana's templateService provides access to variables and allows to update Time Range.

Initial and Update requests in the Data Manipulation panel.

To learn more about parameters you can log them in the Browser 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 occured 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}`,
  ]);
}

Clear elements' values after Submit or on Reset button click

elements.map((element) => {
  if (element.id === "name") {
    element.value = "";
  }
});

onOptionsChange(options);

The onOptionsChange handler is required to update the panel.