Ü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

Sie können die Textfeldkomponente verwenden, um kurzen Text einzugeben.

Textbereich

Sie können die Komponente Textbereich verwenden, um langen Text einzugeben. Die Komponente Textbereich bietet mehrzeilige Eingaben.

Mit der Einstellung Zeilen können Sie festlegen, wie viele Zeilen in der Textbereichskomponente sichtbar sind.

Nummer

Sie können die Number -Komponente verwenden, um einen beliebigen Zahlenwert einzugeben.

• Tausendertrennzeichen verwenden – trennt Tausende durch ein Komma.
• Dezimalzahl erforderlich – Zeigt immer Dezimalstellen an, auch wenn 0.
• Dezimalstellen – legt die maximale Anzahl der angezeigten Dezimalstellen fest.

Passwort

Sie können die Kennwortkomponente verwenden, um Kennwörter einzugeben. Der Text wird als Sternchen anstelle des tatsächlichen Werts angezeigt, der für die Geheimhaltung eingegeben wurde.

Kontrollkästchen

Sie können die Checkbox- Komponente verwenden, um boolesche Werte (true oder false) einzugeben.

Felder auswählen

Sie können die Komponente Select Boxes verwenden, um Benutzern die Auswahl mehrerer Werte aus einer Liste zu ermöglichen.

Werte – Ermöglicht Ihnen das Hinzufügen von Optionen zu Ihrer Select Box-Komponente. Die Spalte Beschriftung ist der für Benutzer sichtbare Wert. Die Spalte Wert ist der Name, der in den Daten gespeichert ist.

Bezeichnung/Header

Datei-/Ordnerpfad

Sie können die Komponente Beschriftung /Kopfzeile verwenden, um anderen Formularkomponenten Beschriftungen hinzuzufügen. Sie können damit auch Abschnitte in Ihrem Formular trennen.

• Etikettengröße – Wählen Sie eine Größe oder einen Typ für die Komponente „ Label/Header “ aus der Dropdownliste aus.

Sie können die Komponente Datei-/Ordnerpfad verwenden, um den Datei- oder Ordnerpfad des Dokuments eines Benutzers abzurufen.

So geben Sie einen Dateipfad im Form Rendereran:

1. Klicken Sie auf die Schaltfläche Auswählen der Komponente Datei-/Ordnerpfad . Das Fenster Dateisteuerung wird geöffnet.
2. Wählen Sie eine Datei aus.
3. Klicken Sie im Fenster Dateisteuerung auf Öffnen .

So geben Sie einen Ordnerpfad im Form Rendereran:

1. Klicken Sie auf die Schaltfläche Auswählen der Komponente Datei-/Ordnerpfad . Das Fenster „Nach Ordner suchen“ wird geöffnet.
2. Wählen Sie einen Ordner aus.

3. Klicken Sie im Fenster Nach Ordner suchen auf OK .

   
   

   

   
   

• Auswahltyp – Wählen Sie denPfadtyp aus, den Benutzer auswählen können: Datei oder Ordner.

• Alle Dateien anzeigen – Wenn diese Option aktiviert ist, können Benutzer einen beliebigen Dateityp aus der Dateisteuerungauswählen. Wenn das Kontrollkästchen deaktiviert ist, wird der Abschnitt Erweiterungen hinzufügen angezeigt, in dem Sie manuell auswählen müssen, welche Dateitypen die Benutzer in der Dateisteuerungauswählen können.

  
  

  

  
  

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

Auswahlliste

Sie können die Komponente Dropdownliste verwenden, um Listen in einem Dropdown-Format anzuzeigen.

• Widget-Typ – Wählen Sie den Widget-Typ aus, den Sie verwenden möchten.

• Datenquellenwerte – Geben Sie die Werte ein, die in der Dropdownliste angezeigt werden. Die Spalte Beschriftung ist der für Benutzer sichtbare Wert. Die Spalte Wert ist der Name, der in den Daten gespeichert ist.

  
  

  

  
  
• Elementvorlage – HTML-Vorlage, mit der Sie steuern können, wie Werte in der Dropdownliste angezeigt werden. Sie können über die Variable item auf die Werte in der Dropdownliste zugreifen. Verwenden Sie beispielsweise item.label , um auf einen bestimmten Wert in der Dropdownliste zuzugreifen.
• Aktualisierungsoptionen Ein – Aktualisiert Daten, wenn sich ein anderes Feld ändert.
• Aktualisierungsoptionen bei Unschärfe – Aktualisiert Daten, wenn ein anderes Feld unscharf ist.
• Wert bei Aktualisierungsoptionen löschen – löscht den Komponentenwert, wenn die Option „ Bei Feld aktualisieren“ geändert wird.
• Read Only Value (Schreibgeschützter Wert) – Zeigt den Wert nur im schreibgeschützten Modus an.
• Choice.js-Optionen – Eingabe-Roh-JSON-Objekt, das als Optionen für die Select -Komponente verwendet werden soll.
• Genaue Suche verwenden – deaktiviert den Schwellenwert für den Suchalgorithmus.
• Benutzerdefinierter Standardwert – Erstellen Sie einen benutzerdefinierten Standardwert mit JavaScript oder JSONLogic.

Optionsfeld

Sie können die Komponente Radio verwenden, um Benutzern zu ermöglichen, nur einen Wert aus einer Liste auszuwählen.

• Werte – Geben Sie die Werte ein, die in der Liste angezeigt werden. Die Spalte Beschriftung ist der für Benutzer sichtbare Wert. Die Spalte Wert ist der Name, der in der Datenbank gespeichert ist.

Schaltfläche

Sie können die Button- Komponente verwenden, um Benutzern das Ausführen verschiedener Aktionen im Formular zu ermöglichen.

• Aktion – Wählen Sie die Aktion aus, die die Schaltfläche ausführen soll:

  • Absenden – sendet das Formular und führt den Block „Do “ aus.
  • Klicken – führt den Klickvorgang aus und führt den Block „Do “ aus.
  • Formular zurücksetzen – setzt die Formularfelder zurück.
  • Ereignis – Wenn ein Benutzer auf die Schaltfläche klickt, wird ein bestimmtes Ereignis ausgeführt. Wenn Sie Ereignis auswählen, müssen Sie das Ereignis in das Feld Schaltflächenereignis eingeben .
• Daten aus dem Block „Do“ zurücksetzen (Reset Data from DO Block ) – Wenn die Option „ Click type“-Schaltflächen aktiviert ist, werden die Daten festgelegt, die vom Block „Do “ empfangen werden. Hilft, die Leistung zu steigern, wenn sich die auf anderen Seiten gefundenen Daten 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.
• Schaltfläche „Blockieren“ – erstreckt sich auf die volle Breite des umgebenden Containers.
• Linkes/rechtes Symbol – Fügen Sie die vollständige Zeichenfolge der Symbolklasse hinzu, um ein bestimmtes Symbol anzuzeigen. Sie können beispielsweise fa fa-plushinzufügen.

Erweiterte Komponenten

HTML-Element

Sie können das HTML-Element verwenden, um ein einzelnes HTML-Element in Ihrem Formular anzuzeigen und es basierend auf Ihrem Anwendungsfall zu konfigurieren.

Hinweis: Aktivieren Sie die Eigenschaft Disable Sanitize in der Aktivität Create Form , um alle unsicheren Inhalte in einem HTML-Elementanzuzeigen.

• HTML-Tag – Das Tag des HTML-Elements.
• CSS-Klasse – Die CSS-Klasse, die für dieses HTML-Elementhinzugefügt werden kann. Sie können mehrere Klassen eingeben, indem Sie sie durch einzelne Leerzeichen trennen.
• Attribute – Die Attribute für das HTML-Element. Nur sichere Attribute sind zulässig, z. B.: src, hrefund title.
• Inhalt – der Inhalt des HTML-Elements.
• Bei Änderung aktualisieren – rendert das HTML-Element neu, wenn sich ein Wert im Formular ändert.

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

• Anzeigen von Bildern.
• Anzeigen von PDF-Dateien.

Inhalt

Sie können die Inhaltskomponente verwenden, um Informationen in Ihrem Formular hinzuzufügen, die schreibgeschützt sind. Der Wert der Komponente wird nicht an den Server zurückgesendet.

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

E-Mail

Sie können die Komponente E-Mail verwenden, um ein Feld für die Eingabe von E-Mail-Adressen hinzuzufügen.

Telefonnummer

Sie können die Komponente Telefonnummer verwenden, um ein Feld für die Eingabe von Telefonnummern hinzuzufügen.

• Eingabemaske – Stellt ein vordefiniertes Format für die Telefonnummer bereit. Für das Telefonnummernfeld ist das Standardformat [phone].
• 9 – numerisch
• a - alphabetisch
• \* – alphanumerisch
• Eingabemaske Platzhalterzeichen – Sie können ein Zeichen als Platzhalter im Feld verwenden.

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

Datum/Uhrzeit

Sie können die Date/Time -Komponente verwenden, um Datums- und Uhrzeitangaben oder beides einzugeben.

• Format – das Format, das zum Anzeigen des Datetime-Werts verwendet wird.
• Datumseingabe aktivieren – Ermöglicht Benutzern die Eingabe von Daten für dieses Feld.
• Eingabe verwenden, um moment.js für minDate hinzuzufügen – ermöglicht es dem Benutzer, eine Eingabe für die Momentfunktion minDate anstelle eines Kalenders zu verwenden.
• Kalender zum Festlegen von minDate verwenden – Ermöglicht dem Benutzer die Verwendung eines Kalenders zum Festlegen des minDate.
• Eingabe verwenden, um moment.js für maxDate hinzuzufügen – ermöglicht es dem Benutzer, eine Eingabe für die Momentfunktion maxDate anstelle eines Kalenders zu verwenden.
• Kalender zum Festlegen von maxDate verwenden – Ermöglicht dem Benutzer die Verwendung eines Kalenders zum Festlegen des maxDate.
• Bestimmte Daten oder Daten nach Bereich deaktivieren – Fügen Sie Daten hinzu, die Sie sperren möchten. Beispiel: 2027-08-11.
• Benutzerdefinierte deaktivierte Daten – Ermöglicht Ihnen das Sperren bestimmter Daten mit einer benutzerdefinierten Funktion.
• Wochenenden deaktivieren – Ermöglicht das Sperren von Wochenenden.
• Wochentage deaktivieren – Ermöglicht Ihnen das Sperren von Wochentagen.
• Zeiteingabe aktivieren – Ermöglicht Benutzern die Eingabe der Zeit für dieses Feld.
• Stundenschrittgröße – Die Anzahl der Stunden, die in der Zeitauswahl erhöht oder verringert werden müssen.
• Minutenschrittgröße – Die Anzahl der Minuten, die in der Zeitauswahl erhöht oder verringert werden müssen.
• 12-Stunden-Zeit (AM/PM) – Zeigt die Zeit in 12-Stunden-Zeiträumen mit AM oder PM an.
• Standarddatum – legt den Standardwert mithilfe von Moment.js- Funktionen auf ein bestimmtes Datum fest. Sie können beispielsweise die folgende Funktion verwenden: moment().substract(10, 'days').
  
  

  

  
  

Tag

Mit der Komponente Day können Sie Eingaben für Day, Monthund Year anfordern, entweder über ein Feld vom Typ Zahl oder ein Feld vom Typ Auswahl.

• Typ/Typ der Eingabe – Geben Sie eine Eingabe für Tag, Monat oder Jahr an, indem Sie entweder eine Zahl eingeben oder Optionen aus einer Dropdownliste auswählen.

Minimum/Maximum Year (Minimum/Maximum Year) – Wählen Sie das minimale/maximale Jahr aus, das eingegeben werden kann.

• Tag erforderlich – Das Feld Tag muss ausgefüllt werden, bevor das Formular gerendert wird.
• Monat erforderlich – Das Feld Monat muss ausgefüllt werden, bevor das Formular gerendert wird.
• Jahr erforderlich – das Feld Jahr muss ausgefüllt werden, bevor das Formular gerendert wird.
• Maximum/Minimum Day (Maximum/Minimum Day) – Wählen Sie einen minimalen/maximalen Tag aus, der eingegeben werden kann. Sie können auch Moment.js- Funktionen verwenden. Sie können beispielsweise moment().add(10, 'days')verwenden.
  
  

  

  
  

Zeit

Sie können die Zeitkomponente verwenden, um die Zeit in verschiedenen Formaten einzugeben.

• Eingabetyp – Wählen Sie den Widget-Typ aus, den Sie für die Zeiteingabe verwenden möchten: HTML5-Zeiteingabe (Benutzer können die Zeit aus einem bestimmten Panel auswählen) oder Texteingabe mit Maske (Benutzer können die Zeit manuell eingeben).

Währung

Sie können die Komponente Währung verwenden, um Finanzbeträge in einer bestimmten Währung anzuzeigen. Die Komponente verfügt über eine Eingabemaske, die das Währungssymbol anzeigt und automatisch Kommas basierend auf der vom Benutzer eingegebenen Zahl hinzufügt. Die Komponente lässt zwei Dezimalwerte zu.

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

Umfrage

Sie können die Umfragekomponente verwenden, um Benutzern die Beantwortung mehrerer Fragen zu ermöglichen, indem Sie nur einen Wert aus einer Liste auswählen.

• Fragen – Fügen Sie die Fragen hinzu, die die Benutzer beantworten sollen.
• Werte – Fügen Sie die Optionen hinzu, die der Benutzer pro Frage auswählen kann.

Layoutkomponenten

Spalten

Sie können die Komponente Spalten verwenden, um andere Komponenten in einer Zeile anzuzeigen und sie als Spalten zu gruppieren.

• Spalteneigenschaften – Fügen Sie Spalten zur Komponente hinzu und konfigurieren Sie sie, indem Sie deren Breite, Versatz, Push- und Pull-Eigenschaften anpassen. Nachdem Sie das Layout der Spalten konfiguriert haben, können Sie andere Komponenten per Drag-and-Drop in die Spaltenkomponente ziehen.
• Spalten automatisch anpassen – passt Spalten automatisch an, wenn ausgeblendete verschachtelte Komponenten vorhanden sind.

Bereich

Sie können die Panel -Komponente verwenden, um Komponenten zu gruppieren und sie innerhalb eines benannten Panels hinzuzufügen.

• Thema – Wählen Sie das Thema des Panels aus der Dropdownliste aus. Die Bootstrap-Klasse wird dem Wrapper-Div hinzugefügt.
• Reduzierbar – Ermöglicht Ihnen, das Panel zu reduzieren.
• Anfänglich reduziert – Die Eigenschaft ist nur verfügbar, wenn Reduzierbar aktiviert ist. Reduziert den Bereich, wenn das Formular geladen wurde.

Tabelle

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

• Anzahl der Zeilen/Spalten – Geben Sie die Anzahl der Zeilen oder Spalten ein, die in der Tabelle angezeigt werden sollen.
• Zeilenkomponenten klonen – Klont die Komponenten innerhalb von Zeilen und fügt sie auch in die verbleibenden Zeilen ein. Sie können es verwenden, wenn Sie Tabellen mit mehreren Zeilen erstellen, die denselben Inhalt enthalten.
• Zellenausrichtung– Wählen Sie die horizontale Ausrichtung der Zellen in der Tabelle aus.
• Gestreift – fügt Zeilen eine gestreifte Schattierung hinzu.
• Mit Rahmen –Fügt der Tabelle sichtbare Rahmen hinzu.
• Hover (Hover) – hebt die Zeile hervor, wenn der Mauszeiger darüber bewegt wird.
• Condensed (Kondensiert) – verdichtet die Größe der Tabelle.

Registerkarten

Sie können die Komponente Registerkarten verwenden, um Komponenten in Registerkarten zu gruppieren. Wenn das Formular gerendert wird, können Sie jeweils eine Registerkarte anzeigen.

Mit der Einstellung Registerkarten können Sie Registerkarten hinzufügen, konfigurieren, neu anordnen und entfernen.

Daten

Ausgeblendet

Sie können die Hidden -Komponente verwenden, um eine Ressourceneigenschaft zu erstellen, die in einem Formular benutzerdefiniert festgelegt werden kann. Es wird nicht in gerenderten Formularen angezeigt.

Container

Sie können die Container -Komponente verwenden, um einen Satz von Feldern in ein Objekt mit einem Containerschlüssel einzuschließen. Ein Container mit dem Schlüssel financialPerformance wird übermittelt als:

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

Datenraster

Sie können die Data Grid- Komponente verwenden, um mehrere Datenzeilen zu rendern, ähnlich wie bei einer Datentabelle. Sie können mehrere Komponenten per Drag-and-drop in das Datenraster ziehen, um sie Ihrem Anwendungsfall anzupassen.

Im Fenster Form Renderer können die Zeilen innerhalb der Data Grid- Komponente hinzugefügt oder entfernt werden.

• Hinzufügen/Entfernen von Zeilen deaktivieren – Blendet die Schaltflächen aus, die das Hinzufügen oder Entfernen von Zeilen beim Rendern des Formulars ermöglichen.
• Neuanordnen zulassen – Ordnen Sie Zeilen neu an, indem Sie sie ziehen und ablegen.
• Gleiche Spaltenbreite – macht die Breiten der Spalten gleich.
• Zeilengruppen aktivieren – Ermöglicht das Trennen 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 bei der Initialisierung keine sichtbaren Zeilen.

Bearbeitungsraster

Sie können die Edit Grid -Komponente verwenden, um mehrere Datenzeilen zu rendern, ähnlich wie bei einer Datentabelle. Sie können mehrere Formularkomponenten per Drag & Drop in das Edit Gridziehen, um viele Daten zu erfassen.

Wenn das Formular gerendert wird, können Sie ein Duplikat des Edit Gridhinzufügen, indem Sie auf Weitereshinzufügen klicken.

• Erste Zeile öffnen, wenn leer – Öffnet die erste Zeile, wenn das Bearbeitungsraster leer ist.
• Hinzufügen/Entfernen von Zeilen deaktivieren – Blendet die Schaltflächen aus, die das Hinzufügen oder Entfernen von Zeilen beim Rendern des Formulars ermöglichen.
• Einen weiteren Text hinzufügen – ändert den Namen der Schaltfläche „Weiteren hinzufügen“.
• Zeilentext speichern – Ändert den Text der Schaltfläche Zeile speichern .
• Zeilentext entfernen – ändert den Text der Schaltfläche Zeile entfernen .

Die Registerkarte Vorlagen ist nur für die Komponente Raster bearbeiten spezifisch. Mit den Vorlagen Header, Rowund Footer können Sie das Raster mit JavaScript anpassen. Sie können ändern, welche Art von Komponenten in den Zeilen innerhalb eines Rasters oder das Aussehen der Kopf-/Fußzeile angezeigt werden.

Kopfzeilenvorlage

Dies ist die Lodash-Vorlage, die zum Rendern des Headers der Edit Grid -Komponente verwendet wird.

Wichtig: Die Header-Vorlage funktioniert nicht mit Actions.

Es sind zwei Variablen verfügbar:

• value – das Array der Zeilendaten.
• Komponenten - das Array der Komponenten im Raster.

Zeilenvorlage

Dies ist die Lodash-Vorlage, die zum Rendern jeder Zeile der Edit Grid -Komponente verwendet wird.

Wichtig: Die Zeilenvorlage funktioniert nicht mit Actions.

Es sind drei Variablen verfügbar:

• row - Objekt der Daten einer Zeile.
• Komponenten - das Array der Komponenten im Raster.
• state – Status der aktuellen Zeile (Entwurf/gespeichert).

Um Click -Ereignisse hinzuzufügen, fügen Sie den Elementen die folgenden Klassen hinzu: editRow und removeRow.

Fußzeilenvorlage

Dies ist die Lodash-Vorlage, die zum Rendern der Fußzeile der Edit Grid -Komponente verwendet wird.

Es sind zwei Variablen verfügbar:

• value – das Array der Zeilendaten.
• Komponenten - das Array der Komponenten im Raster.

Raster

Sie können die Grid -Komponente verwenden, um mehrere Datenzeilen zu rendern, ähnlich wie bei einer Datentabelle. Grid ist eine schreibgeschützte Komponente, mit der Sie große Datenmengen anzeigen können. Sie können mehrere Formularkomponenten per Drag-and-drop in die Grid -Komponente ziehen.

• Sortierbar – Sortiert Daten innerhalb von Spalten in aufsteigender oder absteigender Reihenfolge. Sie sortieren die Daten zur Laufzeit im Form Renderer.
• Filterbar – Filtert Daten innerhalb jeder Spalte. Filtern Sie die Daten zur Laufzeit im Form Renderer.
• Spalte(n) Größenveränderbar – Ändern Sie die Breite der Spalten zur Laufzeit im Form Renderer. Mit der Funktion Spaltengröße ändern können Sie die Daten in Spalten besser sehen.

• Paginierung – Zeigt die Daten der Komponente Raster (Vorschau) auf nummerierten Seiten an. Die Paginierungsfunktion umfasst auch das Festlegen der Anzahl der Elemente pro Seite.

  
  

  

  
  

Weitere Informationen zur Verwendung der Raster- Komponente 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