Über Formularkomponenten

Eine Formularkomponente bietet Ihnen die Möglichkeit, Benutzerdaten zu sammeln. Die UI-Komponenten sind basierend auf ihrer Funktionalität wie folgt in Kategorien gruppiert:

• Standard
• Erweitert (Advanced)
• Layout
• Daten.

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

You can use the Password component to input passwords. The text is displayed as asterisks instead of the actual value entered for secrecy.

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.

Values - allows you to add options to your Select Box component. The Label column is the value visible to users. The Value column is the name stored in the data.

Bezeichnung/Header

Datei-/Ordnerpfad

You can use the Label/Header component to add labels to other form components. You can also use it to separate sections in your form.

• Label Size - choose a size or type for the Label/Header component from the dropdown list.

You can use the File/Folder Path component to get the file or folder path of a user's document.

To provide a file path in the Form Renderer:

1. Click the Select button of the File/Folder path component. The File Control window opens.
2. Wählen Sie eine Datei aus.
3. Click Open in the File Control window.

To provide a folder path in the Form Renderer:

1. Click the Select button of the File/Folder path component. The Browse For Folder window opens.

2. Wählen Sie einen Ordner aus.

3. Click OK in the Browse For Folder window.

   

• Selection Type - choose the type of path users can select: File or Folder.

• Show All Files - when checked, users can select any file type from the File Control. When left unchecked, the Add Extensions section is displayed, where you have to manually choose what type of files the users can select in the File Control.

  

Hinweis:

Sie können die Dateitypen, die der Benutzer im Abschnitt Erweiterungen hinzufügen auf der Registerkarte Anzeige auswählen kann, entweder einschränken oder erweitern.

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.

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

  

• 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:
  • Submit - submits the form, and runs the Do block.
  • Click - performs the click operation, and runs the Do block.
  • Reset Form - resets the form fields.
  • Event - when a user clicks the button, a certain event starts running. When selecting Event you need to input the event in the Button Event field.
• Reset Data from DO block - when checked for Click type buttons, it sets the data that is received from the Do block. Helps increase performance when the data found on other pages is not on the current page.
• Theme - choose the color theme of the button from the drop-down list.
• Size - choose the size of the button from the drop-down list.
• Block Button - stretches to the full width of the bounding container.
• Left / Right Icon - add the full icon class string, to show a specific icon. For example, you can add 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:

Aktivieren Sie die Eigenschaft Bereinigung deaktivieren in der Aktivität Create Form , um alle unsicheren Inhalte innerhalb eines HTML-Elements anzuzeigen .

• 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.
• Attributes - The attributes for the HTML Element. Only safe attributes are allowed, such as: src, href, and title.
• Content - the content of the HTML Element.
• Refresh On Change - re-renders the HTML Element whenever a value changes in the form.

To display images and PDF files inside forms, you need to use the HTML Element component. Check out the following tutorials:

• 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.

• Refresh On Change - renders the Content component each time a value in the form changes.

E-Mail

You can use the Email component to add a field for inputting email addresses.

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 – numerisch
• a – Alphabetisch
• * – 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.

• Use calendar to set maxDate - enables the user to use a calendar to set the 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.

• Hour Step Size - the number of hours that have to be incremented or decremented in the time picker.

• Minute Step Size - the number of minutes that have to be incremented or decremented in the time picker.

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

• Default Date - sets the default value to a specific date using Moment.js functions. For example, you can use the following function: 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.

• Currency - choose a certain currency from the drop-down list.

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.
• Auto adjust columns - automatically adjusts columns, if there are hidden nested components.

Bereich

You can use the Panel component to group components and add them inside a named panel.

• 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.
• Initially Collapsed - the property is available only when Collapsible is checked. Collapses the panel when the form has loaded.

Tabelle

You can use the Table component to create a table that holds other form components inside the columns and rows of the table.

• Number of Rows / Columns - enter the numbers of rows or columns that you want to be displayed in the table.
• Clone Row Components - clones the components inside rows and adds them in the remaining rows, too. You can use it when creating tables with multiple rows, that contain the same content.
• 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

Ausgeblendet

You can use the Hidden component to create a resource property that can be custom set inside a form. It doesn't display in rendered forms.

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

You can use the Data Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple components in the Data Grid to match your use case.

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.
• Enable Row Groups - allows separating rows into groups. Add groups, label them, and select the rows for each group.
• Initialize Empty - the Data Grid will have no visible rows when initialized.

Bearbeitungsraster

You can use the Edit Grid component to render multiple rows of data, similar to a data table. You can drag and drop multiple form components into the Edit Grid, to capture loads of data.

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

• Open First Row when Empty - opens the first row when the Edit Grid is empty.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• 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.

The Templates tab is specific to the Edit Grid component only. The Header, Row, and Footer Templates allow you to customize the grid using JavaScript. You can modify what type of components display in the rows within a grid or the look of the header / footer.

Kopfzeilenvorlage

This is the Lodash Template used to render the header of the Edit Grid component.

Wichtig:

Die Header-Vorlage funktioniert nicht mit Formularaktionen.

Es sind zwei Variablen verfügbar:

• value - the array of row data.
• components - the array of components in the grid.

Zeilenvorlage

This is the Lodash Template used to render each row of the Edit Grid component.

Wichtig:

Die Zeilenvorlage funktioniert nicht mit Formularaktionen.

Es sind drei Variablen verfügbar:

• row - object of one row's data.
• components - the array of components in the grid.
• state - current row's state (draft/saved).

To add Click type events, add the following classes to elements: editRow and removeRow.

Fußzeilenvorlage

This is the Lodash Template used to render the footer of the Edit Grid component.

Es sind zwei Variablen verfügbar:

• value - the array of row data.
• components - the array of components in the grid.

Raster

You can use the Grid component to render multiple rows of data, similar to a data table. Grid is a read-only component that you can use to display large amounts of data. You can drag and drop multiple form components into the Grid component.

• Sortable - sort data inside columns in ascending or descending order. You sort the data at runtime, in Form Renderer.

• Filterable - filter data inside each column. Filter the data at runtime, in Form Renderer.

• Column(s) Resizable - change the width of the columns at runtime, in Form Renderer. The Column(s) Resizable capability allows you to see the data inside columns better.

• Pagination - display the data of the Grid (Preview) component on pages that are numbered. The pagination capability also includes setting the number of items per page.

  

Weitere Informationen zur Verwendung der Rasterkomponente finden Sie unter Verwenden des Rasters.

Vergleich zwischen Rastersteuerungskomponenten

In der folgenden Tabelle werden die Funktionen der im Formular-Designer verfügbaren Rastersteuerelemente verglichen. In der Tabelle werden auch die empfohlenen Szenarien für die Verwendung der einzelnen Grid-Steuerelementkomponenten beschrieben: Grid, Data Gridund Edit Grid.

Legende: ✅ = Nicht verfügbar.

Funktion	Raster	Datenraster	Bearbeitungsraster
Empfohlene Szenarien	Anzeigen einer großen Anzahl von Daten für schreibgeschützte Zwecke (schreibgeschützte Funktion).	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	Unbegrenzt (100-Zeilen-Paginierungsunterstützung).	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	Unbegrenzt.	Maximal sieben 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	❌	❌	❌