Smartform

Smartform-Grundlagen

Smartforms sind HTML-Formulare und enthalten alle für die Verarbeitung des Prozesses erforderlichen Daten. Diese Formulare sind an eine Prozessdefinition angehängt. In einer gestarteten Instanz kann jederzeit ein Smartformular eingesehen und Daten eingegeben und geändert werden. 

.HTML

HTML steht für Hyper Text Markup Language und ist die Standard-Auszeichnungssprache zum Erstellen von Websites. In Kombination mit anderen Sprachen wie Cascading Style Sheets (CSS) und JavaScript ist HTML die Grundlage der Webentwicklung. Daher wird HTML verwendet, um die Struktur von Websites zu bestimmen. HTML ist keine Programmier-, sondern eine Auszeichnungssprache und somit leicht zu erlernen. 

Im Folgenden werden einige nützliche HTML-Elemente für die Smartform-Erstellung vorgestellt. Eine ausführliche Dokumentation sowie verschiedene Tutorials finden Sie unter w3schools.

Hier finden Sie eine detaillierte Beschreibung, wie Sie ein Smartformular mit HTML implementieren: Erstellen einer Smartform

.CSS

CSS oder Cascading Style Sheets werden verwendet, um das Design oder die Präsentation von Websites zu beeinflussen, die mit HTML erstellt wurden. CSS dient dazu, Struktur und Darstellung einer Website zu trennen. Normalerweise werden die Stile in separaten .css Dateien definiert. 

Die User Experience wird neben der Funktionalität stark von einem ansprechenden Design beeinflusst. Die visuelle Bearbeitung mit CSS ist ein wichtiger Bestandteil des Smartform-Designs. 

Eine ausführliche Dokumentation sowie verschiedene Tutorials finden Sie unter w3schools.

Hier finden Sie eine detaillierte Beschreibung zum Hinzufügen von Stilattributen zu einem Smartformular mit CSS: Erstellen einer Smartform

Handhabung von Abschnitten

Welcher Benutzer bestimmte Teile (sogenannte Abschnitte) innerhalb des Smartforms sehen darf, wird durch das Abschnittshandling festgelegt. Diese Einschränkungen können entweder in einem ganzen Prozess oder auf einer bestimmten Ebene im Laufe des Prozesses gelten. Die folgenden Berechtigungen können erteilt oder widerrufen werden:

• Schreibberechtigung

• Leseberechtigung

Hier finden Sie eine detaillierte Beschreibung zur Implementierung eines Section Handling.

Javascript (JavaScript)

JavaScript ist eine clientseitige Programmiersprache, die im Browser ausgeführt wird. Während HTML und CSS den statischen Inhalt der Website darstellen, kann die Benutzerinteraktion mit JavaScript reagiert werden. Darüber hinaus können Funktionalitäten wie Berechnung oder Autovervollständigung implementiert werden. 

Eine ausführliche Dokumentation sowie verschiedene Tutorials finden Sie unter w3schools.

Hier finden Sie eine detaillierte Beschreibung, wie Sie JavaScript in ein Smartformular integrieren können: JavaScript integrieren.

Planung 

Vor der Implementierung eines Smartforms sollten Struktur, Design und Funktionalitäten sorgfältig geplant werden. Smartforms stellen einen Prozess mit den notwendigen Informationen bereit. Ein guter Ausgangspunkt für die Planung ist, welche Informationen an welcher Stelle im Prozessablauf benötigt werden. Dies sind funktionale Anforderungen. 

Wenn die funktionalen Anforderungen klar sind, müssen sie in einem benutzerfreundlichen Design umgesetzt werden. Zu beachten ist, welche Benutzer mit dem Smartformular arbeiten müssen. Eine ansprechende Benutzeroberfläche erleichtert die Arbeit mit dem Smartform. Die Funktionalitäten sollten jedoch immer vor der Ästhetik stehen. 

Bei der Planung eines smartfrom kann die Verwendung eines Papierprototyps oder Mockups nützlich sein. Entwürfe können mit Endbenutzern diskutiert und auch geändert werden. Um ein Mockup oder einen Prototyp zu erstellen, gibt es viele hilfreiche Tools wie Balsamiq oder Skizzieren.

Verwenden von Frameworks 

Um die Webentwicklung komfortabler zu gestalten, wurden verschiedene HTML-, CSS- und JavaScript-Frameworks entwickelt. Wir verwenden regelmäßig Urlader oder Kube. Beide Frameworks bieten vordefinierte CSS-Klassen, die die Entwicklung eines ansprechenden und responsiven Smartform-Designs ermöglichen. Neben Bootstrap- und Kube-Bibliotheken wie Polymer an Popularität gewinnen.

Zusätzlich ist die JavaScript-Bibliothek jQuery ist ein wichtiger Bestandteil der SmartForm-Entwicklung. Die umfangreiche API bietet verschiedene Funktionen, wie z.B. Benutzereingaben abzufangen. 

Für sehr komplexe Smartforms mit komplizierten Berechnungen oder Anfragen wird das Framework AngularJS, entwickelt von Google, ist sehr nützlich. 

Selbstverständlich ist es möglich, die eigenen Frameworks sowohl innerhalb des HTML-Codes der smartform als auch innerhalb der benutzerdefinierten.js Datei zu integrieren.

Redakteur

Ein Smartformular kann in einem einfachen Texteditor erstellt werden. Editoren für Programmierer haben jedoch viele Vorteile, wie Zeileneinrückung, Codehervorhebung oder Autovervollständigung.

Beliebte Redakteure sind z.B. Notepad ++, Visual Studio-Code, Klammern oder Erhabener Text.