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, when Element Value Changed.

Parameters

Parameter	Description	Initial, Update	Change Value	ShowIf, DisableIf, Get Options
context.element	Current element		✔️
context.panel.data	Result set of panel queries.	✔️	✔️	✔️ (For Get Options)
context.panel.elements	Form elements.	✔️	✔️	✔️
context.panel.initial	Parsed values from the initial request.	✔️	✔️
context.panel.initialRequest()	Performs an initial request to reload the panel.	✔️	✔️
context.panel.onChange()	Updates elements in the local state. Added in v3.1.0.	✔️	✔️
context.panel.options	Panel's options.	✔️	✔️
context.panel.onOptionsChange()	Modifies a handler to refresh the panel.	✔️	✔️
context.panel.response	Request's response.	✔️
context.panel.setInitial({})	Specifies initial values for a custom initial request to highlight modified values and requests a user's confirmation.	✔️
context.panel.enableSubmit()	Enable Submit button	✔️	✔️
context.panel.disableSubmit()	Disable Submit button	✔️	✔️
context.panel.enableReset()	Enable Reset button		✔️
context.panel.disableReset()	Disable Reset button		✔️
context.panel.enableSaveDefault()	Enable Save Default button		✔️
context.panel.disableSaveDefault()	Disable Save Default button		✔️
context.panel.setError('Message')	Displays an error on panel.		✔️
context.panel.collapseSection(id)	Collapse Section. Added in v4.0.0.	✔️	✔️
context.panel.expandSection(id)	Expand Section. Added in v4.0.0.	✔️	✔️
context.panel.toggleSection(id)	Toggle (Collapse/Expand) Section. Added in v4.0.0.	✔️	✔️
context.panel.sectionsExpandedState	Expand/Collapse State for Sections. Added in v4.0.0.	✔️	✔️
context.grafana.locationService	Grafana's locationService function to work with the browser's location and history.	✔️	✔️
context.grafana.backendService	Grafana's backendService used to communicate to a remote backend such as the Grafana backend, a datasource etc.	✔️
context.grafana.notifyError(['Header', 'Message'])	Displays an error.	✔️	✔️
context.grafana.notifySuccess(['Header', 'Message'])	Displays a success notification.	✔️	✔️
context.grafana.notifyWarning(['Header', 'Message'])	Displays a warning.	✔️	✔️
context.grafana.eventBus	Publish and subscribe to application events.	✔️	✔️
context.grafana.templateService	Grafana's templateService function that provides access to variables and enables the update of a time range.	✔️	✔️
context.grafana.refresh()	Function to refresh dashboard panels using application events.	✔️	✔️
context.grafana.replaceVariables()	Function to interpolate variables.			✔️

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

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

Refresh Dashboard after update request or show warning

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

Update variable after update request to interact with other panels

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

Perform Initial Request after update request or show error

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 initial request only on dashboard load

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.onChange(
      context.panel.elements.map((element) => ({
        ...element,
        value: json[element.id],
      }))
    );
  }
};

return getValues();

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

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

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

Update local state in Data Manipulation Panel 3.1.0

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

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