| Table of Contents |
|---|
...
In den folgenden Abschnitten wird Schritt für Schritt erläutert, wie Sie ein Smartformular 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.
| Code Block | ||
|---|---|---|
| ||
<form class="classname" name ="formname" security="all" initMethod="initFormSpecificFunctionName" validationMethod="initValidationFormSpecificFunctionName">
<table border="1">
<colgroup>
<col width="200px"/>
<col width="200px"/>
<col width="200px"/>
</colgroup>
<tr>
<td>column1 row1</td>
<td>column2 row1</td>
<td>column3 row1</td>
</tr>
<tr>
<td>column1 row2</td>
<td>column2 row2</td>
<td>column3 row2</td>
</tr>
<tr>
<td>column1 row3</td>
<td>column2 row3</td>
<td>column3 row3</td>
</tr>
</table>
</form> |
...
Bild (Logo) integrieren
...
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).
...
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.
| Code Block | ||
|---|---|---|
| ||
<form class="classname" name ="formname" security="all" initMethod="initFormSpecificFunctionName" validationMethod="initValidationFormSpecificFunctionName">
<table border="1">
<colgroup>
<col width="200px"/>
<col width="200px"/>
<col width="200px"/>
</colgroup>
<tr>
<td colspan=2>
<img src="logo.png" width="100" alt="logo">
</td>
<td>column3 row1</td>
</tr>
<tr>
<td>
<input type="radio" name="radiobuttongroup" value="1" id="radio_1" checked="checked" /> <label for="radio_1">Radiobuttonselection 1</label><br/>
<input type="radio" name="radiobuttongroup" value="2" id="radio_2"/> <label for="radio_2">Radiobuttonselection 2</label><br/>
<input type="radio" name="radiobuttongroup" value="3" id="radio_3"/> <label for="radio_3">Radiobuttonselection 3</label>
</td>
<td>column2 row2</td>
<td>column3 row2</td>
</tr>
<tr>
<td>column1 row3</td>
<td>column2 row3</td>
<td>column3 row3</td>
</tr>
</table>
</form> |
...
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.
...
Der Name der Variablen muss auch Rich-Text enthalten und Bootstrap muss geladen werden (data-bootstrap="true" in <form>).
| Code Block | ||
|---|---|---|
| ||
<form data-bootstrap=“true”>
<textarea class="richtext" id="richtext_variable_name"></textarea>
</form> |
...
Datepicker (Kalender)
Um einen sogenannten Datepicker zu einem Eingabefeld zu erstellen, wird nur die Klasse Datumsauswahl muss ihm gegeben werden.
...
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.
| Code Block | ||
|---|---|---|
| ||
<form class="classname" name ="formname" security="all" initMethod="initFormSpecificFunctionName" validationMethod="initValidationFormSpecificFunctionName">
<style type="text/css">
.background{
background-color:#FE2E64;
}
label{
color: green;
}
#firstRow{
background-color:#5882FA;
}
#table{
border-size:0px;
}
</style>
<table id="table">
<colgroup>
<col width="300px"/>
<col width="300px"/>
<col width="300px"/>
</colgroup>
<tr >
<td colspan="2">
<img src="logo.png" width="100" alt="logo">
</td>
<td id="firstRow">column3 row1</td>
</tr>
<tr>
<td>
<input type="radio" name="radiobuttongroup" value="1" id="radio_1" checked="checked" /> <label for="radio_1">Radiobuttonselection 1</label><br/>
<input type="radio" name="radiobuttongroup" value="2" id="radio_2"/> <label for="radio_2">Radiobuttonselection 2</label><br/>
<input type="radio" name="radiobuttongroup" value="3" id="radio_3"/> <label for="radio_3">Radiobuttonselection 3</label>
</td>
<td>
<input type="checkbox" name="check1" id="check1" value="true"/> <label for="check1">Checkbox 1</label><br/>
<input type="checkbox" name="check2" id="check2" value="true"/> <label for="check2">Checkbox 2</label><br/>
<input type="checkbox" name="check3" id="check3" value="true"/> <label for="check3">Checkbox 3</label>
</td>
<td >
<select id="Selection" name="Selection">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="inputField" name="inputField"></input>
</td>
<td>
<textarea id="textarea" name="textarea"></textarea>
</td>
<td class="background">column3 row3</td>
</tr>
</table>
</form> |
...
Pflichtfelder beim Instanzstart
...
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 DE Filter, sorting and customize views.
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.
...
| Info |
|---|
Datum in Indexfeldern: Wenn ein Datum in einer Prozessvariablen als Zeichenfolge gespeichert wurde |