Documentationbreadcrumb arrow Pluginsbreadcrumb arrow Business Formsbreadcrumb arrow Form elementsbreadcrumb arrow Read-only
Enterprise Open source Grafana Cloud

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 doesn’t allow users to change the value it displays.

This element has the following specific option:

  • User options

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

Set the initial value in the initial request section to display the option label with Read-only correctly. The value set for the item should match the value of one of the options to be displayed.

Change elements model

Note

Use this model to set elements if you use the context.panel.onChangeElements([]) method.

Dynamic element creation and manipulation through the panel fetches the complete element model and sets it through a method. The elements aren’t saved in the panel options.

js 
{
  uid:'',
  id: '',
  title: '',
  type: 'disabled',
  labelWidth: 10,
  width: 30,
  tooltip: '',
  section: '',
  unit: '',
  value: '',
  disabled: false,
  background: '',
  labelBackground:'',
  labelColor: '',
  helpers: {
    showIf: () => true,
    disableIf: () => false,
    getOptions: () => [],
  }
}

Code example

JavaScript 
/**
 * Hardcoded element
 */
const element = {
  uid: "uid-123",
  id: "element-123",
  title: "Element",
  type: "disabled",
  optionsSource: "Custom",
  labelWidth: 15,
  width: 150,
  tooltip: "",
  section: "",
  unit: "",
  value: "",
  background: "",
  labelBackground: "",
  labelColor: "",
  helpers: {
    showIf: () => true,
    disableIf: () => false,
    getOptions: () => [],
  },
};

const elementsForUI = [];
elementsForUI.push(element);

context.panel.onChangeElements(elementsForUI);

Code example with query action for initial request

Initial Request
js 
/**
 * Convert JSON to form elements array
 */
const formElements = JSON.parse(
  context.panel.data.series[0].fields[0].values[0]
);
/**
 * Set elements with helpers
 */
context.panel.onChangeElements(
  formElements.map((element) => {
    const elementInForm = context.panel.elements.find(
      (item) => item.uid === element.uid
    );
    let value = element.value;

    if (element.uid === "comment" && elementInForm) {
      value = elementInForm.value;
    }

    return {
      ...element,
      value,
      helpers: {
        showIf: () => true,
        disableIf: () => false,
        getOptions: () => element.options,
      },
    };
  })
);

Element parameters

  • value

    string. Optional.
    Current element value.

  • type

    string. Required.
    Element type: ‘disabled’.

  • optionsSource

    string. Required.
    Element options source: ‘Query’ | ‘Custom’ | ‘Code’.

  • uid

    string. Required.
    A unique identifier used for correct mapping on the UI.

  • id

    string. Required.
    The unique identifier of the element.

  • title

    string. Required.
    The title or label of the element. Equivalent to the ‘Label’ in the UI editor.

Label field

  • labelWidth

    Number | null . Required.
    The element label width.

  • width

    Number | null. Required.
    The element width.

  • tooltip

    string. Required.
    The element tooltip. Leave as an empty string (’’) if not displayed.

  • section

    string. Required.
    The unique section identifier (section ID). Specify this if the element is in a section. Leave as an empty string (’’) if the element has no section.

  • unit

    string. Required.
    The units of measurement. Located to the right of the element. Leave as an empty string (’’) if the element has no unit.

Unit of measurement

  • background

    string. Optional.
    The background color as a hex color code.

  • labelBackground

    string. Optional. The label background color as a hex color code.

  • labelColor

    string. Optional.
    The label color as a hex color code.

  • helpers

    Helpers provide information about the item display or its disabled state and return options.

js 
 {
  showIf: () => true,
  disableIf: () => false,
  getOptions: () => options || [],
 }

  • helpers.showIf

    Function. Required. Returns true or false. Controls whether the element displays on the UI.

  • helpers.disableIf

    Function. Required. Returns true or false. Controls whether the element is disabled on the UI.

  • helpers.getOptions

    Function. Required. Returns an array of options.

    Each option contains the following properties:

    • value.
      string. Required. The option value.

    • label.
      string. Required. The option label.

Change options model

Note

Use this model to set elements if you use the context.panel.onOptionsChange({}) method.

Elements added through this method are added to the panel options. The element’s operation might not match the expected behavior.

If you use this method in the initial request, disable the Synchronize option. Enabling the Synchronize option with context.panel.onOptionsChange() in the Initial Request causes the panel to reload constantly.

Disable Synchronize with data to avoid endless reloading of the panel if onOptionsChange() is used in the initial request.
js 
{
  uid:'',
  id: '',
  title: '',
  type: "disabled",
  optionsSource: "Custom",
  queryOptions: {},
  options: [],
  getOptions: '',
  labelWidth: 10,
  width: 35,
  tooltip: '',
  section: '',
  unit: '',
  value: '',
  showIf: '',
  disableIf: '',
  fieldName: '',
  queryField: {},
  background: '',
  labelBackground:'',
  labelColor: '',
}

Code example

JavaScript 
context.panel.onOptionsChange({
  ...context.panel.options,
  elements: context.panel.options.elements.map((element) => {
    return element.id === "name" ? { ...element, value: "test" } : element;
  }),
});
JavaScript 
const formElements = JSON.parse(
  context.panel.data.series[0].fields[0].values[0]
);

context.panel.onOptionsChange({
  ...context.panel.options,
  elements: formElements,
});

  • value

    string. Optional.
    Current element value.

  • type

    string. Required.
    Element type: ‘disabled’.

  • optionsSource

    string. Required.
    Element options source: ‘Query’ | ‘Custom’ | ‘Code’.

  • getOptions

    string. Optional.
    “getOptions” function of the element returns options for list. Use for optionsSource: 'Code'.

    js 
    {
  getOptions: "return [{value:1,label:'1'}]";
}

  • queryOptions

    object. Optional.
    Return options from query. Use for optionsSource: 'Query'.

    Parameters:

    • source
      string. Frame refId

    • value
      string. Field name

    • label
      string. Field name

  • options

    array. Optional.
    Return options for checkbox list.

    Each option contain following property

    • value.
      string. Required. Option value

    • label.
      string. Required. Option label

  • uid

    string. Required.
    A unique identifier used for correct mapping on the UI.

  • id

    string. Required.
    The unique identifier of the element.

  • title

    string. Required.
    The title or label of the element. Equivalent to the ‘Label’ in the UI editor.

    Label field

  • labelWidth

    Number | null . Required.
    The element label width.

  • width

    Number | null. Required.
    The element width.

  • tooltip

    string. Required.
    The element tooltip. Leave as an empty string (’’) if not displayed.

  • section

    string. Required.
    The unique section identifier (section ID). Specify this if the element is in a section. Leave as an empty string (’’) if the element has no section.

  • unit

    string. Required.
    The units of measurement. Located to the right of the element. Leave as an empty string (’’) if the element has no unit.

    Unit of measurement

  • background

    string. Optional.
    The background color as a hex color code.

  • labelBackground

    string. Optional.
    The label background color as a hex color code.

  • labelColor

    string. Optional.
    The label color as a hex color code.

  • showIf

    string. Optional.
    The “Show if” function of the element returns true or false. Controls whether the element displays on the UI.

    js 
    {
  showIf: "if (condition) {\n  return true\n}\n return false";
}

  • disableIf

    string. Optional.
    The “Disable if” function of the element returns true or false. Controls whether the element is disabled on the UI.

    js 
    {
  disableIf: "if (condition) {\n  return true\n}\n return false";
}

  • fieldName

    string. Optional.
    The name field from the DataSource initial request. Use for the initial value. We recommend using value instead.

  • queryField

    object. Optional.
    The name query from the Query initial request. Use for the initial value. We recommend using value instead.

    Parameters:

    • refId
      string. The frame refId.

    • value
      string. The field name.

    • label
      string. The format: refId:value (for example, A:time).