ANDP - Documentation

You have the possibility to customize the editing of elements in the Formgrid as desired. These enhancements offer you comprehensive flexibility in designing and editing your forms.

FormGrid Element Options

The Element Options refer to the choices that appear when you click on the three red dots in the upper left corner of a form element. These options allow for targeted customization and configuration of the elements directly within the Formgrid.

Implementation

For a successful implementation of the adjustments, in addition to the name of the element to be edited, the following attributes must be defined in the associated custom options:

key - The key required to uniquely identify the element.
type - The type of the added option, defining the nature of the interaction.
name - The label displayed, for example, above the input field (can also be left empty, e.g., name: "").

Furthermore, the following optional attributes can be added to further customize functionality:

text - Allows adding additional text above the label, which can also contain HTML code.
constraint - Allows defining an If-condition to control under which circumstances the option should be displayed.
selectOptions - Can only be used in conjunction with the type dropdown to define the selection choices. Each selectOption must have a key and a value.

Code Example

[
  {
    "name": "number",
    "options": [
      {
        "key": "numberPlaceholder",
        "text": "Number Formatting",
        "name": "Placeholder for number input fields",
        "type": "string",
        "constraint": "this.schema && this.schema.type == 'number' && this.schema.isRaw"
      },
      {
        "key": "numberStep",
        "name": "Steps (Integer)",
        "type": "string",
        "constraint": "this.schema && this.schema.type == 'number' && this.schema.isRaw && this.schema?.precision === 0"
      },
      {
        "key": "numberStep",
        "name": "Steps (Fixed/Floating Point)",
        "type": "string",
        "constraint": "this.schema && this.schema.type == 'number' && this.schema.isRaw && this.schema?.precision !== 0"
      },
      {
        "key": "alignment",
        "name": "Value Alignment: ",
        "type": "dropdown",
        "constraint": "this.schema && this.schema.type == 'number' && this.schema.isRaw",
        "selectOptions": [
          {
            "key": "Left",
            "value": "left"
          },
          {
            "key": "Center",
            "value": "center"
          },
          {
            "key": "Right",
            "value": "right"
          }
        ]
      },
      {
        "key": "alignmentUnit",
        "name": "Unit Alignment: ",
        "type": "dropdown",
        "constraint": "this.schema && this.schema.type == 'number' && this.schema.isRaw",
        "selectOptions": [
          {
            "key": "Left",
            "value": "left"
          },
          {
            "key": "Center",
            "value": "center"
          },
          {
            "key": "Right",
            "value": "right"
          }
        ]
      }
    ]
  }
]

Result example:

Code Implementation

To integrate the finished JSON code, two methods are available to you:

1. Insert code into `mesh features.yml` in the ANDP-PROJECT

The code to be inserted begins with feature_formgrid_options: …. and ends before feature_onboarding.

formgrid custom element options feature config

2. Insert code directly as a Mesh Environment Variable

Alternatively, you can insert the JSON code directly as a Mesh environment variable to make a specific adjustment without modifying the project files.

formgrid custom element options config ioflair

These enhancements offer you the opportunity to even better adapt the user interface and functionality of your forms to the individual needs of your users, thereby ensuring even more efficient and targeted usage.

FormGrid