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
Parameter | Description |
---|---|
data | Result set of panel queries. |
elements | Form elements. |
initial | Parsed values from the initial request. |
initialRequest() | Performs an initial request to reload the panel. |
locationService | Grafana'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. |
options | Panel's options. |
response | Request's response. |
setInitial({}) | Specifies initial values for a custom initial request to highlight modified values and requests a user's confirmation. |
templateService | Grafana's templateService function that provides access to variables and enables the update of a time range. |

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.