Erstellen einer Smartform

In den folgenden Abschnitten wird Schritt für Schritt erläutert, wie Sie ein Smartformular erstellen. 

Erstellen eines Formulars

Zum Erstellen eines Smartforms werden ein öffnendes <form> und ein schließendes </form> - Tag benötigt. Diese beiden Tags markieren den Anfang und das Ende des Smartforms. Der anzuzeigende Inhalt befindet sich zwischen diesen beiden Tags.

Klasse und Name für das Formular

Ein Formular benötigt eine Klasse und einen Namen. Diese werden innerhalb der öffnenden <form> Tags definiert. 

Formular für alle Systembenutzer sichtbar machen

Das Attribut security="all" berechtigt jeden Systembenutzer, dieses Formular anzuzeigen. 

Erstellen einer Tabelle

Open

Die Eröffnung Tisch -Tag gibt den Anfang einer Tabelle an. Innerhalb der folgenden colgroup Die Breite für jede Spalte wird angegeben. 

In diesem Fall ist eine Tabelle mit 3 Spalten, jeweils 200 Pixel Breite und einem Rahmen um jede Zelle zu erstellen. 

Das Tr -Tag ist der Ausgangspunkt für eine neue Zeile innerhalb einer Tabelle, während die Td -Tag beginnt eine neue Spalte. Innerhalb der Td -Tag Es wird genau definiert, in welcher Zeile und Spalte sich der Benutzer befindet, und der gewünschte Inhalt kann hier eingegeben werden.

Bild (Logo) integrieren

Open

Um ein Bild zu integrieren, wird das Tag img ist erforderlich. Das Attribut src=".." (hier ist der Pfad zum gewünschten Bild angegeben) und das Attribut alt=".." (dies wird angezeigt, wenn das Bild nicht geladen werden kann) muss diesem gegeben werden. In diesem Beispiel sollte sich das Bild in der ersten Spalte befinden. Da das Bild zu groß wäre, kann es durch das zusätzliche Attribut verkleinert werden. Breite. Dies definiert die Breite des Bildes in Pixeln. Das Attribut colspan="2" verbindet eine Tabellenzelle mit der folgenden Tabellenzelle (rechts).

Auswahlfeld (Radiobuttons)

Optionsfelder sind Auswahlfelder, die immer gruppiert sind. Aus dieser Gruppe kann nur eine Auswahl getroffen werden. Dazu wird dem "in-sich-schließenden" - Element der Typ 'Radio' zugeordnet <input> . Um mehrere Radiobuttons zu einer Gruppe zu konsolidieren, muss ihr das gleiche 'name'-Attribut zugewiesen werden. Ist beim Öffnen des Smartforms bereits ein Radiobutton angekreuzt, muss diesem das Attribut 'checked="checked' zugeordnet werden. BITTE BEACHTEN! Dieses Attribut kann nur ein Optionsfeld für jede Optionsfeldgruppe haben. Für alle <input> - Elemente die Prozessvariablen sind auf 'id' gesetzt, nur für Radiobuttons wird die Prozessvariable auf das Attribut 'name' gesetzt. 

Ist die Auswahl eines Radiobuttons auch durch Klick auf das zugehörige Label möglich, muss das Label von einem öffnenden <label> - und einem schließenden </label> - Tag umschlossen werden. Dies wird mit dem Attribut 'for=""' über die 'id' der jeweiligen <input>-Elemente adressiert. Mit einem <br /> - Element (Umbruch) wird eine neue Zeile erzeugt.

Auswahlfeld (Checkboxen)

Checkboxen sind ebenfalls Auswahlboxen, können aber einzeln und unabhängig voneinander angeklickt werden. Ansonsten gelten die gleichen Regeln wie für <radio> Schaltflächen.

Auswahlfeld (Auswahlfeld)

Zum Erstellen einer Selectbox sind ein öffnendes <select> und ein schließendes </select> - Tag notwendig. Um Optionen für die Auswahl hinzuzufügen, können Sie eine beliebige Anzahl von Optionen kann zwischen den <select> - -Tags hinzugefügt werden. Jede Option benötigt das Attribut 'value=""', dessen Inhalt vom Text zwischen den <option> - Tags abweichen kann und nicht angezeigt wird. Mit dem 'value=""' - Attribut werden Prozessvariablen gesetzt und im System abgefragt.

Eingabefelder

Es gibt verschiedene Arten von Eingabefeldern, in die Freitext geschrieben werden kann.

Einzeiliges Texteingabefeld

Für ein normales Textfeld wird das Tag Eingabe wird in Kombination mit dem Attribut type="text". Dies bildet ein einfaches Textfeld mit einer Zeile. 

Mehrzeiliges Texteingabefeld (Textareas)

Für die Erstellung eines Eingabefeldes (z.B. für Beschreibung) sind ein <textarea> öffnendes - und ein schließendes </textarea> - Tag notwendig. Dies kann vom Benutzer in der Größe geändert und mehrere Zeilen beschrieben werden.

Formatierung in Textbereichen

Um die Formatierungselemente kursiv, fett, unterstrichen, blau und rot in einem Textbereich anzubieten, wird die Klasse Richtext gegeben werden muss.

Der Name der Variablen muss auch Rich-Text enthalten und Bootstrap muss geladen werden (data-bootstrap="true" in <form>).

Datepicker (Kalender)

Um einen sogenannten Datepicker zu einem Eingabefeld zu erstellen, wird nur die Klasse Datumsauswahl muss ihm gegeben werden.

Die Javascript-Bibliothek JQuery, das automatisch in jedes Smartformular integriert wird, öffnet nun durch Anklicken eines Feldes einen Kalender, aus dem ein Datum ausgewählt werden kann, das dann in das Eingabefeld übernommen wird.

Stylesheets (CSS) hinzufügen

Um Elemente anzusprechen, die eine Klasse haben, muss der Klassenname mit einem Punkt davor hinzugefügt werden, z.B. .background. Innerhalb der folgenden Klammern kann definiert werden, wie das Element betroffen sein soll. Die Informationen zum Stil wirken sich auf alle Elemente aus, die eine Klasse mit diesem Namen haben.

Um ein Element mit einer bestimmten ID zu adressieren, muss die ID mit einem Rautenzeichen (#) davor hinzugefügt werden, z. #firstRow. Alle Elemente mit dieser ID fokussieren nun ihren Stil gemäß der folgenden Definition.

Wenn alle Elemente eines bestimmten Typs angesprochen werden sollen, muss nur das Tag des Elements hinzugefügt werden, z.B. label.

Anschließend für alle Etikett -Elemente, wird die Schriftfarbe auf grün geändert.
Alle Elemente mit der ID firstRow einen blauen Hintergrund und alle Elemente mit der ID erhalten Hintergrundfarbe Holen Sie sich einen roten Hintergrund.
Schließlich wird nun der Rahmen der Tabelle auf eine Breite von 0 Pixel eingestellt und verschwindet.

Pflichtfelder beim Instanzstart

Wenn ein Eingabefeld bereits beim Instanzstart als Pflichtfeld definiert sein muss, ist das Attribut "erforderlich" mit dem Wert "true" notwendig.

Wenn sich eine Auswahlbox in ein Pflichtfeld ändert und die Basisoption (z.B. "Bitte auswählen ...") als ungültiger Wert definiert werden soll, muss das Attribut default="default" dieser Option enthalten sein.

Indexfelder

Indexfelder werden verwendet, um Informationen aus einem Smartformular, z. B. Aufgaben, Instanzen usw., direkt in einer Liste anzuzeigen. Sie können gefiltert und sortiert werden. Siehe auch Filtern, sortieren, Ansichten anpassen.

Damit ein Indexfeld einen Wert anzeigt, muss dieser im Smartformular definiert werden. Als Indexfelder können die Felder "Eingabe" und "Auswählen" ausgewählt werden. Um einen Wert aus dem Smartformular in den Spalten anzuzeigen, muss das Attribut index="fieldX" dem entsprechenden Feld im Smartformular hinzugefügt werden. Dabei ist "X" der Wert der Indexfelder, also 1 bis 10.

Nun wird der Wert im Indexfeld Nummer 2 angezeigt, das im Smartformular im Textfeld "Name" eingetragen wurde.