Skip to main content

Form Elements

The Data Manipulation plugin is equipped with a rich variety of element types to cover almost any imaginable requirements of a web application.

Layout​

You have a choice of three layouts - Basic, Buttons Only, and Sections. To switch between them open the Layout section.

Layout can be Basic, Buttons Only, and Sections.
Layout can be Basic, Buttons Only, and Sections.

Basic​

In the Basic layout, all form elements are positioned vertically, one following another.

Sections​

With the Sections layout, you can create as many sections as needed and place sections either vertically or horizontally using the Orientation option.

As shown in the picture above, when the layout Section is chosen, the controls to create sections appear. For every section you can specify an ID, to use when referencing the section, and a name which will be a displayed section label.

Buttons Only​

The Buttons Only, as the name implies, keeps only buttons on your form. With that layout, all Panel Options related to other form elements are hidden, which gives a cleaner Edit mode to work with.

Form elements layout types.
Form elements layout types.

Add a form element​

Go to the Form Elements section to add a form element. Start by specifying ID, label, and type. After you click the Add Element button, more element options are available to configure.

Element types have specific options. For instance, the Code Editor type in addition to the common option Width also has Height.

Form element in Edit mode.
Form element in Edit mode.

Move a form element​

Version

Supported since version 3.0.0.

You can drag-and-drop form elements in the edit mode to change their order on the form.

Drag-and-drop form elements in Edit mode.
Drag-and-drop form elements in Edit mode.

Form element types​

The picture below illustrates what the element types look like.

Form elements on UI.
Form elements on UI.

Code Editor​

The Code editor highlights keywords and formats the entered text. Specific for this element are the following options:

  • Language. Select between JSON and JavaScript.
  • Height. How high the entering window should be.
Options specific to the Code Editor type.
Options specific to the Code Editor type.

Date and Time​

The Date and Time element gives access to the built-in date time Grafana component where a user can select a date and time using the familiar controls.

Date and time type is Grafana universal type.
Date and time type is Grafana universal type.

Specific for this element are the following options:

  • Min. Sets the allowed minimum.
  • Max. Sets the allowed maximum.
Options specific to the Date and time type.
Options specific to the Date and time type.

File​

The File type allows users to access their file system to select a file. The file will be transferred as binary or Base64 encoded.

Specific for this element are the following options:

  • Accept. Lists the allowed file extensions. Example:
 .png,.gif
Options specific to the File type.
Options specific to the File type.

Example of the File type in a project​

You can find an example of the File type in the following article. There we demonstrate how Data Manipulation can interact with other plugins (the Variable panel and the Base64 panel).

The Data Manipulation panel with a file upload feature is used twice in that example. One time to illustrate the configuration using Data Source and the other to HTTP API Server.

File upload using the Grafana dashboard.
File upload using the Grafana dashboard.

If you are a visual style learner, you can watch the video. It covers the same ground.

File Upload using Grafana dashboard.

Multi-select with custom options​

The Multi-select with custom options is a dropdown where users can select one or many options.

Specific for this element are the following options:

  • User options.

To add an option click the 'Add option' button and then specify an option type (number or string), value, label and select an icon from the given list.

Add custom options for the multi-select custom type.
Add custom options for the multi-select custom type.

Number Input​

The Number Input is a text box where users enter a number manually.

Specific for this element are the following options:

  • Min. Sets the minimum allowed input number.
  • Max. Sets the maximum allowed input number.

Number Slider​

The Number Slider is a horizontal line with a toggle that a user can drag left and right with a mouse. Alternatively, the user can enter the integer number manually.

Specific for this element are the following options:

  • Min. Sets the minimum allowed input number.
  • Max. Sets the maximum allowed input number.
  • Step. Sets the value of every move the toggle makes.

Password Input​

The Password Input is a text box where every entered symbol is transformed into a dot.

This type does not have any specific options.

Radio Group with boolean options​

The Radio Group with boolean options provides a user with a choice between True and False.

This type does not have any specific options.

Radio Group with custom options​

The Radio Group with custom options provides a user with a choice between two or many options.

Specific for this element are the following options:

  • User options.

To add an option click the 'Add option' button and then specify an option type (number or string), value, label and select an icon from the given list.

Add custom options for the radio custom type.
Add custom options for the radio custom type.

Read-only​

The read-only type is sometimes also called the disabled type. It is a text box with a faded background and text. It does not allow a user to change the value it displays.

Specific for this element are the following options:

  • User options.

To add an option click the 'Add option' button and then specify an option type (number or string), value, label and select an icon from the given list.

Select with Custom options​

The Select with Custom Options type is a dropdown where users can select one option.

Specific for this element are the following options:

  • User options.

To add an option click the 'Add option' button and then specify an option type (number or string), value, label and select an icon from the given list.

String Input​

The String Input is a text box where a user manually enters a string value.

Specific for this element are the following options:

  • A visual control, a button, to make the element hidden.

Text Area​

The Text Area is a rectangular area where a user can enter a text.

Specific for this element are the following options:

  • Rows. Sets the vertical size of the element.

Read-only Text Area​

Version

Below is supported since version 3.2.1.

This element type is similar to the Read-Only type with the difference that this one allows to display multiple rows of text.

Version

Below is supported since version 3.2.1 and Grafana 10.1.0.

This element type allows you to add links on your Data Manipulation form. The link text is customizable using the Link Text option. If not specified, link address will be displayed.

Specific for this element are the following options:

  • Link text
  • Open in. The link can be opened in the same or a new tab.
The Link element type.
The Link element type.

Common configuration​

There are three form elements with select options.

  • Multi Select with Custom Options
  • Select with Custom Options
  • Radio Group with Custom Options

All three have some options in common.

Icon​

Optionally select an icon for this element.
Optionally select an icon for this element.

Select Options from Query​

Version

Below is supported since version 3.2.1.

Reference a query from any configured data source to populate form elements dynamically. You can specify the Label and Value fields.

Use values from the query for your types with select options.
Use values from the query for your types with select options.

Conditional Visibility​

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.
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";
}
Version

Below is supported since version 3.2.1.

You can use the dashboard and global variables within your JavaScript code.

Conditional visibility using a dashboard variable example.
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'

Field Mapping​

Version

Below is supported since version 3.2.1.

Using the Field name parameter for Data Source and the Query Field for Query, you can specify field-to-form mapping.

Data Source​

Explicitly specify the field-to-form element mapping for Data Source using Field name.
Explicitly specify the field-to-form element mapping for Data Source using Field name.

Query​

Explicitly specify the field-to-form element mapping for Query using Query Field.
Explicitly specify the field-to-form element mapping for Query using Query Field.