Skip to main content

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

ParameterDescription
dataResult set of panel queries.
elementsForm Elements.
initialParsed values from the Initial Request.
initialRequest()Perform the Initial Request to reload panel.
locationServiceGrafana'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.
optionsPanels' options.
responseRequest's response.
setInitial({})Allows to specify the initial values for Custom Initial Requests to Highlight changed values and Require Confirmation.
templateServiceGrafana's templateService provides access to variables and allows to update Time Range.
Initial and Update requests in the Data Manipulation panel.
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.