Data Manipulation Panel 3.2.1

We are happy to announce the release of the Data Manipulation Panel 3.2.1. This release includes the following updates:

• Added minimum and maximum date limit for the date time element.
• Added a field mapping for the Data Source Initial Request type.
• Added a field mapping for the Query Initial Request type.
• Show If returned value is true element now supports variables.
• Added the ability to restrict a file type for the File element.
• Added indication of loading in progress for Initial, Update and Reset button actions.
• Added the ability to have icons for radio and select options.

Grafana Catalog

The plugin was updated in the Grafana Plugins catalog on September 11, 2023.

Data Manipulation Panel 3.2.1 for Grafana.

Date Time

Now you can impose the allowed minimum and maximum date by using the familiar built-in Grafana controls.

Impose minimum and maximum for the Date Time type.

Field Mapping

Following many community requests, we made field-to-form element mapping for the Data Source and Query initial request type more straightforward. Now you can do it using a new parameter that appears for every form element when the proper initial request type is selected.

Data Source

Explicitly specify the field-to-form element mapping for Data Source using a new parameter.

Query

Explicitly specify the field-to-form element mapping for Query using a new parameter.

Show If supports variables

Every form element has the Show If returned value is true parameter where you enter JavaScript code.

• If this code returns true, the element is shown on the panel.
• If this code returns false, the element is hidden from the panel.

Conditional visibility example.

Example code to check the current value of the select element and show the dateTime element if the value equal to max:

const select = elements.find((element) => element.id === "select");

if (select) {
  return select.value === "max";
}

In this release, we made it possible to use dashboard and global variables within your JavaScript code.

Conditional visibility using a dashboard variable example.

Example code to check the value of the dashboard variable var:

const test = replaceVariables('$var');
return test === 'test'

File Upload

For the File type, you can specify a list of allowed file extensions.

A new parameter for the File type - accepted file extensions.

Indication of loading in progress

If the data loading takes time, the Data Manipulation form will indicate that as follows.

Initial Request

The end user will see a running blue line at the top of the form.

A moving blue line indicates an initial request being in progress.

Update Request

All buttons are disabled and moving circled dots are placed instead of the Submit button icon.

Dots moving in a circle indicate an update request being in progress.

Custom Code

Custom code can be asynchronous. For that, the custom code should return the promise.

const getInitialData = async () => {
  const response = await fetch('http://123');

  const data = await response.json();

  /**
   * Update Elements with data
   */
  onChange([])
}

/**
 * Return Promise
 */
return getInitialData()

Radio and Select icons

Radio with Custom options element and two Select elements (Select with custom options and Multi Select with Custom options) have the Options parameter where you specify all possible choices that a user can make.

Starting from this release, every such choice in addition to type, value and label, now has an icon parameter. You can select from the standard Grafana icon list.

Dots moving in a circle indicate an update request being in progress.

Getting Started

You can install the Data Manipulation Panel from the Grafana Plugins catalog or using the Grafana command line tool.

For the latter, please use the following command:

grafana-cli plugins install volkovlabs-form-panel

YouTube Tutorial

Data Manipulation Panel is a plugin for Grafana that allows you to insert and update application data, as well as modify configuration directly from your Grafana dashboard.

Use REST API, Data Source, and Queries to manipulate your data.

Release Notes

Features / Enhancements in 3.2.1

• Added backward compatibility for option id (#244)

Features / Enhancements in 3.2.0

• Added min and max date for date time element (#225)
• Added mapping Data Source values to elements (#224)
• Updated element Show If to support variables (#230)
• Added clearing errors before initial and update requests (#232)
• Added URL encode to variables (#231)
• Updated section name to allow empty values (#228)
• Added Query Field Picker for Initial Request (#227)
• Added File element type for File Upload (#229)
• Added converting option value to string and number based on type (#233)
• Added loading states for Initial, Update and Reset button actions (#234)
• Added support for asynchronous custom code (#234)
• Updated Query and Data Source initial request (#237)
• Added icons for radio and select options (#238)

Feedback

We're looking forward to hearing from you. You can use different ways to get in touch with us.

• Ask a question, request a new feature, or report an issue at GitHub issues.
• Subscribe to our YouTube Channel and leave your comments.
• Sponsor our open-source plugins for Grafana at GitHub Sponsor.
• Support our project by starring the repository.