Mit Gentics ANDP Version 2.3, haben Sie jetzt die Möglichkeit, die Bearbeitung der Elemente im Formgrid beliebig zu gestalten. Diese Erweiterungen bieten Ihnen umfassende Flexibilität bei der Gestaltung und Bearbeitung Ihrer Formulare.

FormGrid Element Options:

Die Element Optionen beziehen sich auf die Auswahlmöglichkeiten, die erscheinen, wenn Sie bei einem Formular-Element auf die drei roten Punkte in der oberen linken Ecke klicken. Diese Optionen ermöglichen eine gezielte Anpassung und Konfiguration der Elemente direkt im Formgrid.

Umsetzung:

Für eine erfolgreiche Implementierung der Anpassungen müssen neben dem Namen des zu bearbeitenden Elements auch die folgenden Attribute in den zugehörigen benutzerdefinierten Optionen (`custom options`) festgelegt werden:

key - Der Schlüssel, der zur eindeutigen Identifizierung des Elements erforderlich ist.
type - Der Typ der hinzugefügten Option, der die Art der Interaktion definiert.
name - Das Label, das beispielsweise über dem Eingabefeld angezeigt wird (kann auch leer gelassen werden, z.B. name: "").

Darüber hinaus können die folgenden optionalen Attribute hinzugefügt werden, um die Funktionalität weiter anzupassen:

text - Ermöglicht das Hinzufügen eines zusätzlichen Textes über dem Label, der auch HTML-Code enthalten kann.
constraint - Erlaubt die Definition einer If-Bedingung, um zu steuern, unter welchen Umständen die Option angezeigt werden soll.
selectOptions - Kann nur in Verbindung mit dem Typ dropdown verwendet werden, um die Auswahlmöglichkeiten zu definieren. Jedes selectOption muss einen Schlüssel (key) und einen Wert (value) besitzen.

Code Beispiel:



[

      {

        name: "number",

        options: [

          {

          key: "numberPlaceholder",

          text: "Formatierung Nummer",

          name: "Platzhalter für Nummereingabefelder",

          type: "string",

          constraint: "this.schema && this.schema.type == 'number' && this.schema.isRaw"

        },

          {

          key: "numberStep",

          name: "Zählschritte (Ganzzahl)",

          type: "string",

          constraint: "this.schema && this.schema.type == 'number' && this.schema.isRaw && this.schema?.precision === 0"

        },

          {

          key: "numberStep",

          name: "Zählschritte (Festkomma/Fliesskomma)",

          type: "string",

          constraint: "this.schema && this.schema.type == 'number' && this.schema.isRaw && this.schema?.precision !== 0"

        },

          {

          key: "alignment",

          name: "Ausrichtung Wert: ",

          type: "dropdown",

          constraint: "this.schema && this.schema.type == 'number' && this.schema.isRaw",

          selectOptions:[

            {

              key: "Links",

              value: "left"

              },

            {

              key: "Zentriert",

              value: "center"

              },

            {

              key: "Rechts",

              value: "right"

              },

            ]

        },



          {

          key: "alignmentUnit",

          name: "Ausrichtung Einheit: ",

          type: "dropdown",

          constraint: "this.schema && this.schema.type == 'number' && this.schema.isRaw",

          selectOptions:[

            {

              key: "Links",

              value: "left"

              },

            {

              key: "Zentriert",

              value: "center"

              },

            {

              key: "Rechts",

              value: "right"

              },

            ]

        },

       ]

      }

    ];

Beispiel Resultat:

Code Implementierung:

Um den fertigen JSON-Code zu integrieren, stehen Ihnen zwei Methoden zur Verfügung:

1. Im ANDP-PROJECT den Code ins mesh features.yml einfügen

Der einzufügende Code beginnt mit feature_formgrid_options: .... und endet vor feature_onboarding.

2. Den Code direkt als Mesh Environment Variable einfügen:

Alternativ können Sie den JSON-Code direkt als Mesh-Umgebungsvariable einfügen, um eine spezifische Anpassung ohne Änderungen an den Projektdateien vorzunehmen.

Diese Erweiterungen bieten Ihnen die Möglichkeit, die Benutzeroberfläche und Funktionalität Ihrer Formulare noch besser an die individuellen Bedürfnisse Ihrer Benutzer anzupassen, wodurch Sie eine noch effizientere und zielgerichtetere Nutzung gewährleisten können.

ANDP Formgrid - Custom Element Options