Page Comparison

...

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.

Code Block

language	xml

<form>
</form>

...

Klasse und Name für das Formular

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

Code Block

language	xml

<form class="classname" name ="formname">
</form>

...

Formular für alle Systembenutzer sichtbar machen

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

Code Block

language	xml

<form class="classname" name ="formname" security="all">
</form>

...

Erstellen einer Tabelle

...

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

...

Code Block

language	xml

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

Code Block

language	xml

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

...

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.

...

Code Block

language	xml

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

Code Block

language	xml

<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>
			  <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>column3 row2</td>
		</tr>
		<tr>
			<td>column1 row3</td>
			<td>column2 row3</td>
			<td>column3 row3</td>
		</tr>
	</table>
</form>

...

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.

Code Block

language	xml

<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>
			  <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>column1 row3</td>
			<td>column2 row3</td>
			<td>column3 row3</td>
		</tr>
	</table>
</form>

...

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.

Code Block

language	xml

<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>
			  <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>column2 row3</td>
			<td>column3 row3</td>
		</tr>
	</table>
</form>

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.

Code Block

language	xml

<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>
			  <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>column3 row3</td>
		</tr>
	</table>
</form>

Formatierung in Textbereichen

...

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

...

Code Block

language	xml

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

...

Code Block

language	xml

<form data-bootstrap="true">									
	<input type="text" id="datepicker_field" name="datepicker_field" class="datepicker"></input>									
</form>

...

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.

...

Code Block

language	xml

<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

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

...

Code Block

language	xml

<select>
   <option dafault="default">Please select</option>
   <option>Value1</option>
   ...
</select>

...

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 Filter, sorting and customize views.

...

Info

Datum in Indexfeldern:

Wenn ein Datum in einer Prozessvariablen als Zeichenfolge gespeichert wurde 10.02.2015, kann es nur alphabetisch sortiert werden (0-9 für jede Ziffer). Wenn das Datum jedoch im Format 2015-02-10T0:0:0kann eine korrekte Sortierung für das Datum erreicht werden. Der Datepicker des Systems speichert die Datumsangaben automatisch in diesem Format (einfach hinzufügen class="datepicker" B. im input-Element). Die Clients zeigen das saubere Datumsformat an 10.02.2015 (abhängig von den Sprach-/Kultureinstellungen im Browser) statt 2015-02-10T0:0:0. Siehe: Valid Date-Time Formats

Versions Compared

Old Version 4

New Version Current

Key

Erstellen eines Formulars

Klasse und Name für das Formular

Formular für alle Systembenutzer sichtbar machen

Erstellen einer Tabelle

Bild (Logo) integrieren

Auswahlfeld (Radiobuttons)

Auswahlfeld (Checkboxen)

Auswahlfeld (Auswahlfeld)

Eingabefelder

Einzeiliges Texteingabefeld

Mehrzeiliges Texteingabefeld (Textareas)

Formatierung in Textbereichen

Datepicker (Kalender)

Stylesheets (CSS) hinzufügen

Pflichtfelder beim Instanzstart

Indexfelder