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.
The plugin was updated in the Grafana Plugins catalog on September 11, 2023.
Date Time
Now you can impose the allowed minimum and maximum date by using the familiar built-in Grafana controls.

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

Query

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.

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.

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.

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.

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

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.

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.
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.