Formular-Designer-Elemente

Formular-Designer-Elemente


In diesem Handbuch finden Sie die erforderlichen Informationen zum Hinzufügen von Elementen zu Form mithilfe des Formular-Designers.



Hinzufügen von Grundelementen

Nach dem Hinzufügen des Containers kann der Benutzer Elemente zum gewünschten Container hinzufügen. Jedes Element hat seine eigenen Elementeinstellungen, seinen eigenen Stil, seine eigene Steuerung und die Möglichkeit, Verbindungen zu verwenden. 

Allgemeine Optionen der Grundelemente
Element-Einstellungen

Die Elementeinstellungen hängen vom Elementtyp ab und werden jeweils in den folgenden Absätzen erläutert.

Element-Stil

Die Optionen der Elementstile sind für alle Elementtypen außer dem Textelement identisch. Die folgenden Stile sind verfügbar. 

Alle Elemente außer text-Element:

Screenshot 2024-05-21 164602.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Element: Ausrichtung

Die Ausrichtung des Elements kann innerhalb der Zelle in rechts, zentriert, links oder gestreckt geändert werden. 

2

Schriftgrad

Mit CSS-Code kann dem Label ein beliebiger Stil zugewiesen werden. Mögliche Beispiele font-size.

3

Schriftstärke

Mit CSS-Code kann dem Label ein beliebiger Stil zugewiesen werden. Mögliche Beispiele font-weight.

4

Schriftstil

Mit CSS-Code kann dem Label ein beliebiger Stil zugewiesen werden. Mögliche Beispiele font-style.

5

Schriftfarbe (CSS)

Die Farbe der Schriftart kann in verschiedene Farben geändert werden.

6

Unterstreichung: Farbe (CSS)

Die Farbe der Unterstreichung kann in andere Farben geändert werden.

 

Text-Element:

Screenshot 2024-05-21 164643.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

6

Element: Ausrichtung

Die Ausrichtung des Textelements kann innerhalb der Zelle in rechts, zentriert, links oder gestreckt geändert werden. 

7

Schriftgröße (in %)

Die Schriftgröße eines Textes beträgt standardmäßig 100 %. Wenn der Prozentsatz erhöht wird, wird die Schrift vergrößert und wenn sie verkleinert wird, wird die Schrift entsprechend verkleinert.

8

Schriftstärke

Normal ist die Standardschriftstärke. Es kann in hell oder fett geändert werden. 

9

Schriftschnitt

Normal ist der Standardschriftstil. Sie kann in Kursivschrift umgewandelt werden. 

10

Schriftfarbe (CSS)

Standardmäßig ist die Schriftfarbe schwarz. Er kann individuell geändert werden. Die CSS-Farbnamen und die Formate Hex, RGB und HSL werden unterstützt. 

11

Unterstreichen

Standardmäßig ist keine Unterstreichung ausgewählt. Der Text kann dünn, mittel und fett unterstrichen werden.

12

Unterstreichungsfarbe (CSS)

Wenn ein Unterstreichungsstil ausgewählt ist, ist die Standardfarbe Schwarz. Er kann individuell geändert werden. Die CSS-Farbnamen und die Formate Hex, RGB und HSL werden unterstützt. 

 

Element-Steuerung

Für jedes Element kann definiert werden, ob es lesbar, beschreibbar oder erforderlich sein soll. Wenn kein Elementsteuerelement angegeben ist, erbt dieses Element das Elementsteuerelement vom Container. 

Screenshot 2024-05-21 164718.png

 

Verbinder

Jedes Element kann auch Informationen von Konnektoren anzeigen. Weitere Informationen zur Verwendung und Implementierung von Konnektoren finden Sie im Kapitel Verbinder.

Screenshot 2024-05-21 164758.png

Einfügen eines Textelements

Ein Textelement wird verwendet, um einen Titel, eine Überschrift oder einen einfachen Text zu deklarieren, der im Formular angezeigt wird. Der Inhalt des Textes wird über die Elementeinstellungen geändert. Um ein Textelement hinzuzufügen, kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Textelemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 164832.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Name

Hier kann dem Textfeld ein individueller Name gegeben werden

2

Text

Hier kann der vom Textfeld angezeigte Text eingegeben werden

 

Einfügen eines Eingabefelds

Der Benutzer kann Daten in ein Eingabefeld eingeben. Das Eingabefeldelement kann auf verschiedene Arten dargestellt werden. In der Regel besteht es aus einer Beschriftung und einem Eingabebereich. Zum Hinzufügen eines Eingabefeldelements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Eingabefeldelemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 164905.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes Eingabefeld wird ein eindeutiger Variablenname benötigt. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.

3

Feld "Index"

Indexfelder werden verwendet, um Informationen aus einem Formular direkt in den Listen der Aufgaben und Prozessinstanzen anzuzeigen. Sie liefern erweiterte Informationen über die Prozessinstanz und können zum Hinzufügen von Filtern und Sortieren verwendet werden. Siehe auch Filter, Sortierung und Spaltenkonfiguration

4

Datentyp

Standardmäßig werden die Datentypen 'text' und 'number' zur Verfügung gestellt. Der Datentyp 'text' ist vorausgewählt. Im Reiter 'Datentypen' können weitere Datentypen angelegt werden (siehe Abschnitt 'Datentypen" für weitere Informationen).

5

Platzhalter

Dieses Attribut gibt einen kurzen Hinweis an, der den Erwartungswert eines Eingabefeldes beschreibt (z.B. einen Beispielwert oder eine kurze Beschreibung des erwarteten Formats). Der kurze Hinweis wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt.

6

Passwort

In diesem Feld können Sie das Passwortfeld aktivieren und deaktivieren

7

Ikone

Mit einem Dropdown ist ein Icon auswählbar, welches neben dem Eingabefeld angezeigt wird. Es kann ein '?' für Hilfe oder ein '!' für Info ausgewählt werden.

Symbol: Position

Hier kann die Position des Icons per Dropdown ausgewählt werden. Entweder befindet sich das Dropdown-Menü links oder rechts neben dem Eingabefeld. Standardmäßig befindet sich das Symbol rechts neben dem Eingabefeld.

Symbol: Text

Hier wird der Text eingegeben, der dem Benutzer angezeigt werden soll, wenn er beim Erledigen seiner Aufgaben mit der Maus über das Symbol fährt.

 

Einfügen einer Datumsauswahl

Um ein Datum aufzuzeichnen, wird das datepicker-Element verwendet. Das datepicker-Element stellt Benutzern einen Popup-Kalender zur Verfügung, in dem sie ein Datum oder ein Datum und eine Uhrzeit auswählen können. Wenn ein Benutzer die Sprache ändert, wird das Datum/Uhrzeit-Format automatisch in das Datum/Uhrzeit-Format konvertiert, das für die ausgewählte Sprache gültig ist. Siehe: Gültige Datums-/Uhrzeitformate. Zum Hinzufügen eines Datepicker-Elements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Datepicker-Elemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 164945.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes datepicker-Feld ist ein eindeutiger Variablenname erforderlich. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.

3

Feld "Index"

Indexfelder werden verwendet, um Informationen aus einem Formular direkt in den Listen der Aufgaben und Prozessinstanzen anzuzeigen. Sie liefern erweiterte Informationen über die Prozessinstanz und können zum Hinzufügen von Filtern und Sortieren verwendet werden. Siehe auch Filter, Sortierung und Spaltenkonfiguration

4

Art

Standardmäßig kann ein einzelnes Datum im Kalender-Popup ausgewählt werden. Es gibt aber auch die Möglichkeit, mehrere Daten oder einen Zeitraum einzugeben.

5

Zeitauswahl

Zusätzlich kann das Kalender-Popup um einen Timepicker zur Eingabe einer Uhrzeit erweitert werden.

6

Ikone

Mit einem Dropdown ist ein Icon auswählbar, welches neben dem Datepicker-Feld angezeigt wird. Es kann ein '?' für Hilfe oder ein '!' für Info ausgewählt werden.

Symbol: Position

Hier kann die Position des Icons per Dropdown ausgewählt werden. Entweder befindet sich das Dropdown-Menü links oder rechts neben dem Feld datepicker. Standardmäßig befindet sich das Symbol rechts neben dem Datepicker-Feld.

Symbol: Text

Hier wird der Text eingegeben, der dem Benutzer angezeigt werden soll, wenn er beim Erledigen seiner Aufgaben mit der Maus über das Symbol fährt.

 

Einfügen eines Optionsfelds

Radio Buttons sind Auswahlfelder, die immer gruppiert sind. Aus dieser Gruppe kann nur eine Auswahl getroffen werden. Zum Hinzufügen eines Radiobutton-Elements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Radiobutton-Elemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165033.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes Radiobutton-Feld ist ein eindeutiger Variablenname erforderlich. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.

3

Feld "Index"

Indexfelder werden verwendet, um Informationen aus einem Formular direkt in den Listen der Aufgaben und Prozessinstanzen anzuzeigen. Sie liefern erweiterte Informationen über die Prozessinstanz und können zum Hinzufügen von Filtern und Sortieren verwendet werden. Siehe auch Filter, Sortierung und Spaltenkonfiguration

4

Layout

Die Optionen des Radiobutton-Elements können untereinander als Liste oder in einer Zeile als Block angezeigt werden.

5

Ausführung wählen

Weitere Auswahloptionen können mit dem Plus-Symbol hinzugefügt werden. Mit einem Klick auf das Löschen-Symbol kann eine Option gelöscht werden.  

 

Einfügen eines Kontrollkästchens

Checkboxen sind ebenfalls Auswahlfelder, können aber einzeln und unabhängig voneinander angeklickt werden. Zum Hinzufügen eines Kontrollkästchen-Elements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Checkbox-Elemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165132.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes Kontrollkästchenfeld ist ein eindeutiger Variablenname erforderlich. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.

3

Feld "Index"

Indexfelder werden verwendet, um Informationen aus einem Formular direkt in den Listen der Aufgaben und Prozessinstanzen anzuzeigen. Sie liefern erweiterte Informationen über die Prozessinstanz und können zum Hinzufügen von Filtern und Sortieren verwendet werden. Siehe auch Filter, Sortierung und Spaltenkonfiguration

4

Text

Hier kann der Text der Checkbox geändert werden. Soll die Checkbox beim Öffnen des Formulars aktiviert sein, muss der Button 'Aktiv (aktiviert)' ausgewählt werden. 

5

Ikone

Mit einem Dropdown ist ein Icon auswählbar, welches neben dem Checkbox-Feld angezeigt wird. Es kann ein '?' für Hilfe oder ein '!' für Info ausgewählt werden.

Symbol: Position

Hier kann die Position des Icons per Dropdown ausgewählt werden. Entweder befindet sich das Dropdown-Menü links oder rechts neben dem Kontrollkästchen-Feld. Standardmäßig befindet sich das Symbol rechts neben dem Kontrollkästchenfeld.

Symbol: Text

Hier wird der Text eingegeben, der dem Benutzer angezeigt werden soll, wenn er beim Erledigen seiner Aufgaben mit der Maus über das Symbol fährt.

 

Einfügen einer Auswahl

Ein Auswahlelement wird verwendet, um Auswahloptionen in einem Dropdown-Menü oder einer Liste anzuzeigen. Zum Hinzufügen eines Select-Elements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Ausgewählte Elemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165213.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes Auswahlfeld ist ein eindeutiger Variablenname erforderlich. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.

3

Feld "Index"

Indexfelder werden verwendet, um Informationen aus einem Formular direkt in den Listen der Aufgaben und Prozessinstanzen anzuzeigen. Sie liefern erweiterte Informationen über die Prozessinstanz und können zum Hinzufügen von Filtern und Sortieren verwendet werden. Siehe auch Filter, Sortierung und Spaltenkonfiguration

4

Platzhalter

Dieses Attribut gibt einen kurzen Hinweis an, der den Erwartungswert eines Auswahlfeldes beschreibt (z.B. einen Beispielwert oder eine kurze Beschreibung des erwarteten Formats). Der kurze Hinweis wird im Auswahlfeld angezeigt, bevor der Benutzer einen Wert eingibt.

5

Art der Auswahl

Hier kann das Layout der Auswahl geändert werden. Der Benutzer kann zwischen Dropdown oder Listbox wählen und per Multiselect festlegen, ob mehr als eine Option ausgewählt werden darf.

6

Ausführung wählen

Optionen können mit dem Pluszeichen hinzugefügt werden. Mit einem Klick auf das Löschen-Symbol kann eine Option gelöscht werden.  

 

Einfügen eines Links

Links können verwendet werden, um auf andere Dokumente oder andere Anwendungen zu verweisen. Klickt ein Benutzer auf den Link, wird das Dokument oder die Anwendung geöffnet. Zum Hinzufügen eines Link-Elements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Verknüpfungselemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165259.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

URL (Englisch)

Hier wird die URL zu einem Dokument oder einer Anwendung angegeben. Die URL kann statisch sein oder Variablen enthalten (z. B. www.myCompany.dom/${myLinkVariable}, die zur Laufzeit ausgefüllt werden.

3

Link-Text

Der Linktext ersetzt die URL durch einen benutzerfreundlichen Namen.

4

Ikone

Mit einem Dropdown ist ein Icon auswählbar, welches neben dem Link-Element angezeigt wird. Es kann ein '?' für Hilfe oder ein '!' für Info ausgewählt werden.

Symbol: Position

Hier kann die Position des Icons per Dropdown ausgewählt werden. Entweder befindet sich das Dropdown-Menü links oder rechts neben dem Link-Element. Standardmäßig befindet sich das Symbol rechts neben dem Link-Element.

Symbol: Text

Hier wird der Text eingegeben, der dem Benutzer angezeigt werden soll, wenn er beim Erledigen seiner Aufgaben mit der Maus über das Symbol fährt.

 

Einfügen eines Bildes

Bilder können durch Angabe des Dateipfads in das Formular eingebettet werden. Um ein Bildelement hinzuzufügen, kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Bildelemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165336.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Quelle

Hier werden der Dateipfad und der Dateiname eines Bilds angegeben. Bilder im Stammordner der Ressource haben den Pfad /loom-portal/resource/.

Alternativ können Sie dort die Bildadresse von einem beliebigen Bild im Web kopieren.

Hinweis: Es werden nur Bilder akzeptiert. Nicht pdf, doc, etc..

2

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

 

Einfügen einer Trennwand

Trennlinien können verwendet werden, um einen Teil des Dokuments strikt von einem anderen zu trennen. Diese Trennlinie kann entweder eine horizontale Linie oder einfach ein großer Raum sein. Zum Hinzufügen eines Trennelements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Trennelemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165410.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Name

 Hier kann dem Trenner ein individueller Name gegeben werden

2

Linie

Sie können entweder eine Linie als Trennlinie anzeigen oder einfach eine optische Trennlinie nach Leerzeichen haben. Die Standardoption ist die Anzeige der Zeile.

 

Hinzufügen erweiterter Elemente

Einfügen eines Textbereichs

Textarea kann so verwendet werden, dass der Benutzer mehr Platz zum Eingeben von etwas hat als mit einem einfachen Eingabefeld. Z.B. einen zusammenhängenden Text. Um ein textarea-Element hinzuzufügen, kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Textarea-Elemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165441.png

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes Textfeldfeld ist ein eindeutiger Variablenname erforderlich. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.

3

Feld "Index"

Indexfelder werden verwendet, um Informationen aus einem Formular direkt in den Listen der Aufgaben und Prozessinstanzen anzuzeigen. Sie liefern erweiterte Informationen über die Prozessinstanz und können zum Hinzufügen von Filtern und Sortieren verwendet werden. Siehe auch Filter, Sortierung und Spaltenkonfiguration

4

Größe

Hier kann die Breite und die Höhe des Textbereichs festgelegt werden. Die Breite wird in Zeichen und die Höhe in Zeilen angegeben.

5

Platzhalter

Hier kann der Platzhaltertext des Kommentarfeldes hinzugefügt und bearbeitet werden.

6

Ikone

Mit einem Dropdown ist ein Icon auswählbar, welches neben dem Textfeldfeld angezeigt wird. Es kann ein '?' für Hilfe oder ein '!' für Info ausgewählt werden.

Symbol: Position

Hier kann die Position des Icons per Dropdown ausgewählt werden. Entweder befindet sich das Dropdown-Menü links oder rechts neben dem Textfeld. Standardmäßig befindet sich das Symbol rechts neben dem Textfeld.

Symbol: Text

Hier wird der Text eingegeben, der dem Benutzer angezeigt werden soll, wenn er beim Erledigen seiner Aufgaben mit der Maus über das Symbol fährt.

 

Einfügen eines Rich-Textes

Rich-Text kann verwendet werden, um dem Benutzer mehr Platz zum Tippen zu geben, genau wie der Textbereich, aber mit dem Vorteil, dass der Benutzer mehr Formatierungsoptionen für seinen Text hat, z. B. Größe, Farbe, Schriftart, Schriftstärke und Textausrichtung. Zum Hinzufügen eines Rich-Text-Elements kann der Benutzer das Element per Drag & Drop in einen bestimmten Container ziehen. Rich-Text-Elemente können über das Plus-Symbol kopiert und über das Löschen-Symbol entfernt werden.

Screenshot 2024-05-21 165518.png

 

 

Referenz

Attribut

Beschreibung

Referenz

Attribut

Beschreibung

1

Etikett

Hier kann der Text des Labels geändert werden. Optional kann das Label durch Aktivieren des Kontrollkästchens ausgeblendet werden. 

2

Variable

Für jedes Rich-Text-Feld ist ein eindeutiger Variablenname erforderlich. Standardmäßig wird die Variable automatisch gesetzt. Der Benutzer kann den Variablennamen manuell ändern oder über die Schaltfläche "Als Variablenname beschriften" einen Variablennamen aus dem Beschriftungstext generieren.