Über Formularkomponenten

Basiskomponenten

Textfeld

You can use the Text Field component to input short text.

Textbereich

You can use the Text Area component to input long text. The Text Area component offers multi-line input.

The Rows setting allows you to set how many rows are visible in the Text Area component.

Nummer

You can use the Number component to input any number value.

• Use Thousands Separator - separates thousands with a comma.
• Require Decimal - always shows decimals, even if 0.
• Decimal Places - sets the maximum number of decimals displaying.

Passwort

Sie können die Komponente Kennwort verwenden, um Kennwörter einzugeben. Der Text wird als Sternchen anstelle des tatsächlichen Werts angezeigt, der für die Geheimhaltung eingegeben wurde. Die Komponente Kennwort verfügt über dieselben Optionen wie die Komponente Textfeld .

Kontrollkästchen

You can use the Checkbox component to input boolean values (true or false).

Felder auswählen

You can use the Select Boxes component to allow users to choose multiple values from a list.

• Werte – Ermöglicht es Ihnen, Ihrer Auswahlfeld-Komponente Optionen hinzuzufügen. Die Spalte Beschriftung ist der Wert, der für Benutzer sichtbar ist. Die Spalte Wert ist der in der Datenbank gespeicherte Name.

  

Auswahlliste

You can use the Drop-down List component to display lists in a dropdown format.

• Widget Type - select the type of widget you want to use.

• Datenquellenwerte – Geben Sie die Werte ein, die in der Dropdownliste angezeigt werden. Die Spalte Beschriftung ist der Wert, der für Benutzer sichtbar ist. Die Spalte Wert ist der in der Datenbank gespeicherte Name.

  

• Item Template - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in the dropdown list, through the item variable. For example, use item.label to access a certain value in the dropdown list

• Refresh Options On - refreshes data when another field changes.

• Refresh Options On Blur - refreshes data when another field is blurred.

• Clear Value on Refresh Options - clears the components value when the Refresh On Field option is changed.

• Read Only Value - only show the value when in Read-Only mode.

• Choice.js options - input raw JSON object to use as options for the Select component.

• Use exact search - disables search algorithm threshold.

• Custom Default Value - create a custom default value using JavaScript or JSONLogic.

Optionsfeld

You can use the Radio component to allow users to choose only one value from a list.

• Values - input the values that appear in the list. The Label column is the value visible to users. The Value column is the name stored in the database.

Schaltfläche

You can use the Button component to allow users to perform various actions in the form.

• Action - select the action you want the button to perform:
  • Übermitteln – Sendet das Formular.
  • Klicken – Führt die Klickoperation aus.
  • Reset Form - resets the form fields.
  • Ereignis – Wenn ein Benutzer auf die Schaltfläche klickt, beginnt die Ausführung eines bestimmten Ereignisses. Wenn Sie Ereignis auswählen, müssen Sie das Ereignis in das Feld Schaltflächenereignis eingeben. Jetzt können Sie den Namen des Ereignisses verwenden, um eine benutzerdefinierte Logik zu erstellen, die eine andere Komponente auslöst.

Wenn Sie beispielsweise möchten, dass eine Schaltfläche den Wert von zwei Komponenten berechnet und in einer dritten ausgibt, können Sie eine Schaltfläche mit dem Ereignis namens calculate erstellen und dann eine Logik mit dem Namen calculate für die gewünschte Komponente erstellen um das Ergebnis auszugeben.

• Daten aus DO-Block zurücksetzen – Wenn diese Option für Klicktyp-Schaltflächen aktiviert ist, werden die Daten festgelegt, die vom DO-Block empfangen werden. Hilft bei der Steigerung der Leistung, wenn sich die Daten auf anderen Seiten nicht auf der aktuellen Seite befinden.
• Design – Wählen Sie das Farbdesign der Schaltfläche aus der Dropdownliste aus.
• Größe – Wählen Sie die Größe der Schaltfläche aus der Dropdownliste aus.
• Blockschaltfläche – erstreckt sich über die gesamte Breite des umgebenden Containers.
• Symbol links/ rechts – fügt die vollständige Zeichenfolge der Symbolklasse hinzu, um das Symbol anzuzeigen. Zum Beispiel: fa fa-plus.

Erweiterte Komponenten

HTML-Element

You can use the HTML Element to display a single HTML element in your form and configure it based on your use-case.

Hinweis:

Alle unsicheren HTML-Tags und -Attribute werden beim Rendern des Formulars entfernt, um Cross-Site-Scripting zu verhindern. Die Tags und Attribute, die entfernt werden, sind: <script>, <embed>, <style>, onmouseover und onload.

• HTML Tag - The tag of the HTML Element.
• CSS Class - The CSS Class that can be added for this HTML Element. You can input multiple classes, by separating them with single spaces.
• Attribute – Die Attribute für das HTML-Element. Nur sichere Attribute sind zulässig, z. B.: src, href und title.
• Inhalt – Der Inhalt des HTML-Elements.
• Bei Änderung aktualisieren – Rendern Sie das HTML-Element erneut, wenn sich ein Wert im Formular ändert.

Um Bilder und PDF-Dateien in Formularaktionen anzuzeigen, müssen Sie die HTML-Element -Komponente verwenden. Sehen Sie sich die folgenden Tutorials an:

• Anzeigen von Bildern
• Anzeigen von PDF-Dateien

Inhalt

You can use the Content component to add information in your form, that is display-only. The value of the component is not submitted back to the server.

• Bei Änderung aktualisieren – Rendern Sie die Inhaltskomponente jedes Mal erneut, wenn sich ein Wert im Formular ändert.

E-Mail

Sie können die Komponente E-Mail verwenden, um ein Feld zur Eingabe von E-Mail-Adressen hinzuzufügen. Die Komponente E-Mail ähnelt der Komponente Textfeld .

Telefonnummer

You can use the Phone Number component to add a field for inputting phone numbers.

• Input Mask - Provides a predefined format for the phone number. For the phone number field, the default format is [phone].
  • 9 - numeric
  • a - alphabetical
  • * – alphanumerisch
• Input Mask Placeholder Char - You can use a character as a placeholder in the field.
  Hinweis:

  Das Platzhalterzeichen wird durch ein Leerzeichen ersetzt, wenn es innerhalb der Maske verwendet wird.

Datum/Uhrzeit

You can use the Date/Time component to input dates, times, or input both.

• Format - the format used for displaying the datetime value.

• Enable Date Input - allows users to input dates for this field.

• Use Input to add moment.js for minDate - enables the user to use an input for minDate moment function, instead of a calendar.

• Use calendar to set minDate - enables the user to use a calendar to set the minDate.

• Use Input to add moment.js for maxDate - enables the user to use an input for maxDate moment function, instead of a calendar.

• Kalender zum Festlegen von maxDate verwenden – Ermöglicht die Verwendung eines Kalenders zum Festlegen des maxDate.

• Disable specific dates or dates by range - add dates that you want to ban. For example, 2027-08-11.

• Custom Disabled Dates - allows you to ban certain dates using a customized function.

• Disable weekends - allows you to ban weekends.

• Disable weekdays - allows you to ban weekdays.

• Enable Time Input - allows users to input time for this field.

• Größe der Stundenschritte – Die Anzahl der Stunden, um die in der Zeitauswahl erhöht oder verringert werden soll.

• Größe der Minutenschritte – Die Anzahl der Minuten, um die in der Zeitauswahl erhöht oder verringert werden soll.

• 12 Hour Time (AM/PM) - displays time in 12 hour periods, using AM or PM.

• Standarddatum – Legt den Standardwert mithilfe von Moment.js -Funktionen auf ein bestimmtes Datum fest. Zum Beispiel: moment().substract(10, 'days').

  

Tag

You can use the Day component to ask for input for Day, Month, and Year, either through a number-type field or a select-type field.

• Type / Type of input - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.

Minimum / Maximum Year - choose the minimum / maximum year that can be entered.

• Require Day - the Day field must be filled in before the form renders.

• Require Month - the Month field must be filled in before the form renders.

• Require Year - the Year field must be filled in before the form renders.

• Maximum / Minimum Day - choose a minimum / maximum day that can be entered. You can also use Moment.js functions. For example, you can use moment().add(10, 'days').

  

Zeit

You can use the Time component to input time in different formats.

• Input Type - select the type of widget you would like to use for inputting time: HTML5 Time Input (users can choose the time from a given panel) or Text Input with Mask (users can manually input the time).

Währung

You can use the Currency component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.

• Währung – Wählen Sie eine bestimmte Währung aus der Dropdownliste aus.

PDF

Sie können die PDF- Komponente verwenden, um PDF-Dateien in Ihren Formularaktionen zu rendern.

Datei

Sie können die Komponente Datei verwenden, um Benutzern das Hochladen von Dateien in ein Formular oder das Herunterladen von Dateien aus einem Formular zu ermöglichen.

• Modales Element bearbeiten – Öffnet ein modales Element, um den Wert dieser Komponente zu bearbeiten.
• Verzeichnis – speichert alle in diese Komponente hochgeladenen Dateien in dem angegebenen Verzeichnis. Die Zeichenfolge muss mit / enden.
• Nur hochladen – Ermöglicht Benutzern nur das Hochladen von Dateien. Die Option zum Herunterladen ist nicht verfügbar, wenn diese Option aktiviert ist.
• Dateitypen – Ermöglicht es Ihnen, die Dateitypen anzugeben, um die Typen von Dateien zu klassifizieren, die der Benutzer hochlädt. Empfohlen, wenn ein Benutzer mehrere Dateitypen hochlädt und der Benutzer den Typ jeder hochgeladenen Datei angeben soll.
• Dateimuster – Ermöglicht es Ihnen, Dateierweiterungen anzugeben, die hochgeladen werden dürfen. Andere Dateierweiterungen, die nicht angegeben sind, werden nicht hochgeladen.
• Mindestgröße der Datei – Legt die Mindestgröße für die hochgeladene Datei fest.
• Maximale Dateigröße – Legt die maximale Größe für die hochgeladene Datei fest.

Umfrage

You can use the Survey component to allow users to answer multiple questions, by choosing only one value from a list.

• Questions - add the questions that the users should answer.
• Values - add the options that the user can select per question.

Layoutkomponenten

Spalten

You can use the Columns component to display other components in line, grouping them as columns.

• Column Properties - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the Columns component.
• Automatisch Spalten anpassen – passt Spalten automatisch an, wenn ausgeblendete geschachtelte Komponenten vorhanden sind.

Bereich

Sie können die Komponente Panel verwenden, um Feldkomponenten zu gruppieren und sie in einem benannten Panel hinzuzufügen.

• Theme - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.

• Collapsible - allows you to collapse the panel.

• Ursprünglich reduziert – die Eigenschaft ist nur verfügbar, wenn Reduzierbar aktiviert ist. Reduziert den Bereich, wenn das Formular geladen wird.

  Tabelle

Sie können die Komponente Tabelle verwenden, um eine Tabelle zu erstellen, die andere Formularkomponenten in Spalten und Zeilen enthält.

• Anzahl der Zeilen/Spalten – Geben Sie die Anzahl der Zeilen und Spalten ein, die in der Tabelle angezeigt werden sollen
• Zeilenkomponenten klonen – Klont die Komponenten innerhalb von Zeilen und fügt sie in den verbleibenden Zeilen hinzu. Sie können sie verwenden, wenn Sie Tabellen mit mehreren Zeilen erstellen, die denselben Inhalt enthalten.
• Cell Alignment- choose the horizontal alignment of the cells in the table.
• Striped - adds striped shading to rows.
• Bordered - adds visible borders to the table.
• Hover - highlights row when hovering the mouse over it.
• Condensed - condenses the size of the table.

Registerkarten

You can use the Tabs component to group components into tabs. When the form renders, you can view one tab at a time.

The Tabs setting allows you to add, configure, reorder, and remove tabs.

Daten

Container

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

{
    data: {
    financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

Datenraster

Sie können die Komponente Datenraster verwenden, um mehrere Komponenten inline in einem einzigen Raster hinzuzufügen. Sie können mehrere Komponenten in das Datenraster ziehen und ablegen, um Ihrem Anwendungsfall zu entsprechen. Mit der Datenrasterkomponente können Sie mehrere doppelte Felder inline und in einem einzigen Raster hinzufügen.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Zeilengruppen aktivieren – Ermöglicht das Aufteilen von Zeilen in Gruppen. Fügen Sie Gruppen hinzu, beschriften Sie sie und wählen Sie die Zeilen für jede Gruppe aus.
• Leer initialisieren – Das Datenraster hat keine sichtbaren Zeilen, wenn es initialisiert wird.

Bearbeitungsraster

Sie können die Komponente Raster bearbeiten verwenden, um Daten im Tabellenformat anzuzeigen. Sie können mehrere Formularkomponenten in das Bearbeitungsraster ziehen und ablegen, um unterschiedliche Daten zu erfassen.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Erste Zeile öffnen, wenn leer
  • öffnet die erste Zeile, wenn das Bearbeitungsraster leer ist.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Vorlage für Kopfzeile/Zeile/Fußzeile – Passen Sie das Raster mit JavaScript an.
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

Vergleich zwischen Rastersteuerungskomponenten

Die folgende Tabelle vergleicht die Funktionen der Rastersteuerelemente, die im Formulardesigner verfügbar sind. In der Tabelle werden auch die empfohlenen Szenarien für die Verwendung jeder Rastersteuerungskomponente beschrieben: Datenraster und Bearbeitungsraster.

Legende: ✅= Nicht verfügbar.

Funktion	Datenraster	Bearbeitungsraster
Empfohlene Szenarien	Anzeigen eines kleinen Datensatzes, der vom Benutzer bearbeitet werden muss (Inline-Bearbeitungsfunktion).	Anzeigen eines kleinen Datensatzes, der vom Benutzer bearbeitet werden muss (Inline-Bearbeitungsfunktion für Unterformulare).
Empfohlene Anzahl von Zeilen	Nicht mehr als 100 Zeilen. Risiko einer Leistungsminderung über die empfohlenen Werte hinaus.	Nicht mehr als 100 Zeilen. Risiko einer Leistungsminderung über die empfohlenen Werte hinaus.
Empfohlene Anzahl von Spalten	Maximal 7 Spalten für 100 Zeilen. Risiko einer Leistungsminderung.	Maximal 7 Spalten für 100 Zeilen. Risiko einer Leistungsminderung.
Bearbeitbar	✅	✅
Paginierung (Pagination)	❌	❌
Sortierbar	❌	❌
Filterbar	❌	❌
Spaltenänderung zur Laufzeit	❌	❌
Zeilengruppierung	✅	❌
Logik und Bedingungen	✅	✅
Umfangreiche Anpassung mit Vorlagen	❌	✅
Globale Suche	❌	❌