Checkware Designer
Benutzerhandbuch
Dokument Informationen:
Erstellungsdatum:05.04.2016
Letzte Änderung: 30.05.2021
Version:1.5.1 Inhaltsverzeichnis
1. Checkware Designer-Oberfläche
1.1 Controls (Steuerelemente)
Layout:
Form:
2. Checklisten-Vorlage aufbauen
2.1 Neue Checklisten-Vorlage erstellen
2.2 Vorhandene Checklisten-Vorlage bearbeiten
Mit Hilfe des Checkware Designers ist es möglich, per Drag & Drop Checklisten-Vorlagen für Checkware zu erstellen. Das spätere Ausfüllen einer Checkliste basiert immer auf einer Checklisten-Vorlage. Der Designer ist grundsätzlich in drei Bereiche aufgeteilt:
Auf der linken Seite sind alle Controls (Steuerelemente) aufgelistet, die in einer Checkliste verwendet werden können (Textboxen, Checkboxen etc.). Im mittleren Bereich der Anwendung wird die Checklisten-Vorlage bearbeitet. Auf der rechten Seite findet sich das „Properties"-Panel (Eigenschaften), auf dem alle Einstellungen für eine Control vorgenommen werden, nachdem es auf der Checkliste-Vorlage ausgewählt wurde.
Zusätzlich dazu gibt es im oberen Bereich eine Menüleiste mit folgenden Funktionen:
| Hier gibt es die Auswahl zwischen einer leeren Checkliste und mehreren bereits erstellten Vorlagen. |
| Öffnet eine vorhandene Checklisten-Vorlage, um diese zu bearbeiten. |
| Zeigt die Checklisten-Vorlage im Designmodus zur Bearbeitung an. |
|
|
| Zeigt die Vorschau einer Checkliste an, wie sie zum Ausfüllen im Browser dargestellt wird. |
| Öffnet einen Dialog in dem ein Name vergeben werden kann, dann wird die Checklisten-Vorlage als HTML-Dokument generiert und initiiert einen Datei-Download im Browser. |
| Hier kann zwischen den Sprachen Englisch und Deutsch gewählt werden. |
| Zeigt Infos über Copyright und Version. |
Im Design-Modus können Controls von der linken Seite per Drag & Drop in die Checklisten-Vorlage gezogen werden. Controls können nur in einem dafür vorgesehenen Container („Column" (Spalte), „Div container" oder „Row" (Zeile)) platziert werden. Sobald man eine Control „zieht", werden auf der Checkliste alle gültigen und ungültigen Ziele für dieses Element angezeigt. Gültige Ziele werden grün markiert, ungültige rot.
Controls werden mit blauem Hintergrund und Beschriftung dargestellt, wenn Sie die Maus darüber bewegen. Somit kann man einfach erkennen, um welchen Typ es sich handelt. Im Gegensatz zum Preview-Modus werden im Design-Modus alle Controls etwas größer und mit einer Umrandung dargestellt.
Wenn Sie mit der Maus auf eine eingefügte Control klicken, werden Ihnen folgende Optionen angezeigt:
| Löschen | Löscht die Control |
| Kopieren | Kopiert die Control und alle darin enthaltenen Elemente |
| Verschieben (hoch) | Verschiebt die Control nach oben |
| Verschieben (runter) | Verschiebt die Control nach unten |
| Drag & Drop | Verschiebt die Control mittels Drag & Drop |

Controls sind in die Kategorien Layout und Form eingeteilt. Layout-Controls sind in der Checkliste nicht sichtbar. Sie dienen als Container, in denen die Form-Controls der Checklisten-Vorlage angeordnet werden. Die Form-Controls hingegen sind sichtbar. Sie sind die Elemente, die der Benutzer der Checkliste ausfüllen wird.
Folgende Controls stehen zur Verfügung:
| Bevor man Spalten oder Form-Controls einfügen kann, muss eine Zeile eingefügt werden. | ||
Eigenschaften: | |||
Line spacing (Zeilenabstand) | Gibt an, ob ein Abstand zwischen den einzelnen Zeilen entstehen soll. | ||
Visible condition (sichtbar, wenn) | Hier können Formeln hinterlegt werden, die angeben,wann dieses Feld sichtbar sein soll. Dabei kann auch auf Inhalte anderer Felder oder Matchcodes zugegriffen werden. Ein paar Beispiele: | ||
| Um Form-Controls einfügen zu können, werden Spalten benötigt. Es können maximal Spalten nebeneinander in einer Zeile platziert werden. Spalten werden außerdem dazu verwendet, um Checklisten responsiv an die jeweilige Display-Größe anzupassen. | ||
Eigenschaften: | |||
Width (Breite) LG | Gibt die Breite auf großen Bildschirmen an (z. B. PC). | ||
Width (Breite) MD | Gibt die Breite auf mittleren Bildschirmen an (z. B. Tablet Querformat). | ||
Width (Breite) SM | Gibt die Breite auf mittleren Bildschirmen an (z. B. Tablet Hochformat). | ||
Width (Breite) XS | Gibt die Breite auf kleinen Bildschirmen an. (z. B. Smartphones). | ||
Die Breite wird immer in Prozent bzw. Zahlenwerten angegeben. Dabei entspricht eine Zeile immer 100 % bzw. der Breite 12. An einer Spalte stellt man also ein, wie breit diese im Verhältnis zur Zeile sein soll, in der sie sich befindet. | |||
Start Row Modus | Mit dieser Eigenschaft stellt man ein, ab welcher Gerätegröße die Spalte ggf. umbricht und sich dann wie eine Zeile (inkl. Abstand) verhalten soll. | ||
Text alignment | Ausrichtung des Textes innerhalb der Spalte (links, rechts oder mittig). | ||
Visible condition | Siehe Row. |
| Hiermit kann in der Checkware-App ein Barcode fotografiert werden, um die Daten dieser Anlage in die Checkliste zu laden. | ||
Eigenschaften: | |||
Color (Farbe) | Farbe des Buttons. | ||
Matchcode | Name der Checkbox, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Visible Condition | Siehe Row. | ||
| Ein Button, mit dem weitere Funktionen implementiert werden können. (Für erfahrene Entwickler.) | ||
Eigenschaften: | |||
Color (Farbe) | Farbe des Buttons. | ||
Button Text / HTML | Der Text des Buttons. HTML-Tags sind zulässig. | ||
Margin (Abstand) | Abstand (oben, unten, rechts, links). | ||
Visible Condition | Siehe Row. | ||
click | Zusätzlich auszuführende Code, wenn der Button geklickt wird. Hiermit können beispielsweise per benutzerdefiniertem Code Felder geleert oder die Checkliste zurückgesetzt werden. | ||
| Mit dieser Control kann man durch Abhaken eine Ja-/Nein-Auswahl treffen. | ||
Eigenschaften: | |||
Matchcode | Name der Checkbox, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Label | Zugehöriges Label zur Checkbox. | ||
Margin (Abstand) | Abstand (oben, unten, rechts, links). | ||
Visible Condition | Siehe Row. | ||
| Zeigt Text auf der Checkliste an. (Ähnlich wie Label) | ||
Eigenschaften: | |||
Text | Text den das Feld anzeigt. | ||
Style | Hier kann zwischen fett (B) und kursiv (I) gewählt werden. Wenn keines von beidem ausgewählt ist, wird der Text normal dargestellt. | ||
Visible Condition | Siehe Row. | ||
| Mit diesem Button kann die Checkliste abgeschlossen werden. | ||
Eigenschaften: | |||
Validate Checklist | Wenn aktiviert, wird die Checkliste durch den click auf den Button überprüft. | ||
Color (Farbe) | Farbe des Buttons. | ||
Text | Beschriftung des Buttons. | ||
Visible Condition | Siehe Row. | ||
| Eine Textbox für Datumseingaben. | ||
Eigenschaften: | |||
Matchcode | Name des Feldes, darf keine Leer- oder Sonderzeichen enthalten. | ||
Visible Condition | Siehe Row. | ||
| In einer Gallery erscheinen die Bilder, die mit der Picture-Control erstellt wurden (siehe unten). Die Bilder werden über die Matchcodes der Gallery- und der Picture-Control(s) verknüpft. | ||
Eigenschaften: | |||
Matchcode | Name des Feldes, darf keine Leer- oder Sonderzeichen enthalten. | ||
Visible Condition | Siehe Row. | ||
| Ein Label mit größerer Schriftgröße. Regulieren Sie die Schriftgröße entweder durch das Feld „Heading Size" oder durch das Feld „Font Size", wenn Sie die Schriftgröße verändern wollen. | ||
Eigenschaften: | |||
Heading Size | Hiermit lässt sich die Schriftgröße durch Standardwerte regulieren. 1 (groß) bis 6 (klein). | ||
Text | Hier wird der Text für das Beschriftungsfeld angegeben. | ||
Font Size | Hiermit lässt sich die Schriftgröße durch die Pixelhöhe definieren. | ||
Text alignment | Ausrichtung des Textes innerhalb der Spalte (links, rechts oder mittig). | ||
Font Color | Verändert die Schriftfarbe. | ||
Visible Condition | Siehe Row. | ||
| Diese Datei zeigt eine Bilddatei an. | ||
Eigenschaften: | |||
File | Hier kann das Bild per Drag & Drop eingefügt werden. | ||
Presentation | Hier kann die Darstellung des Bildes angepasst werden. (Runde Ecken, rund etc.) Wird erst in der Vorschau sichtbar! | ||
Width | Breite des Bildes. Wenn kein Wert angegeben wird, automatisch festgelegt. | ||
Height | Höhe des Bildes. Wenn kein Wert angegeben wird, automatisch festgelegt. | ||
Alignment | Verändert die Ausrichtung des Bildes innerhalb seiner Spalte (linksseitig oder rechtsseitig). | ||
Visible Condition | Siehe Row. | ||
| Diese Control zeigt einen Infodialog mit beliebigem Text an. | ||
Eigenschaften: | |||
Dialog text | Hier kann ein beliebiger Text eingefügt werden. | ||
Background Color | Hier kann die Farbe des Buttons angepasst werden. | ||
Button Text /HTML | Hier kann der Text des Buttons angepasst werden. | ||
Margin | Abstand (oben, unten, rechts, links). | ||
Visible Condition | Siehe Row. | ||
click | Hier wird die Funktion angegeben, die der Button aufruft. | ||
| Ein Beschriftungsfeld, das i.d.R. Informationen zu einer Textbox beinhaltet. | ||
Eigenschaften: | |||
Text | Hier kann der Text für das Feld angegeben werden. | ||
Font Size | Hiermit lässt sich die Schriftgröße durch die Pixelhöhe definieren. | ||
Text alignment | Ausrichtung des Textes innerhalb der Spalte (links, rechts oder mittig). | ||
Style | Hier kann zwischen fett (B) und kursiv (I) gewählt werden. Wenn keines von beiden ausgewählt ist, wird der Text normal dargestellt. Hier kann zwischen fett (B) und kursiv (I) gewählt werden. Wenn keines von beiden ausgewählt ist, wird der Text normal dargestellt. | ||
Font Color | Verändert die Schriftfarbe. | ||
Visible Condition | Siehe Row. | ||
| Liest die Geokoordinaten des benutzten Geräts aus und platziert sie im Matchcode. (benötigt JavaScript-Code zur richtigen Ausführung). | ||
Eigenschaften: | |||
Background Color (Farbe) | Farbe des Buttons. | ||
Matchcode | Name des Feldes, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Text | Hier kann der Text für das Feld angegeben werden. | ||
Visible Condition | Siehe Row. | ||
| Durch diese Control können über die Kamera des benutzten Mobilgeräts Bilder fotografiert werden. | ||
Eigenschaften: | |||
Matchcode | Name der Checkbox, darf keine Leer- oder Sonderzeichen enthalten. | ||
Picture Caption | Die Beschriftung der Abbildung. | ||
Background Color (Hintergrundarbe) | Farbe des Buttons. | ||
Text | Hier kann der Text für das Feld angegeben werden. | ||
Visible Condition | Siehe Row. | ||
| Bietet eine eindeutige Auswahl zwischen mehreren Optionen (keine Mehrfachauswahl). | ||
Eigenschaften: | |||
Matchcode | Name der Checkbox, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Label | Zugehöriges Label zu den Radio-Buttons. | ||
Value | Wert, der zurückgegeben und unter dem Matchcode gespeichert wird, wenn der Radio-Button ausgewählt wird. | ||
| Farbe, die der Button annimmt, wenn er ausgewählt wurde. | ||
Visible Condition | Siehe Row. | ||
Mandatory field | Wenn aktiviert, ist dieses Optionsfeld ein Pflichtfeld. | ||
| Eine Dropdown-Liste, mit der verschiedene Elemente ausgewählt werden können. | ||
Eigenschaften: | |||
Matchcode | Name der Checkbox, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Elements | Die Elemente, die in der Auswahl erscheinen. Durch Klicken auf die Plus-Schaltfläche neben „New Element", wird ein neues Element eingefügt. | ||
Width | Breite der Textbox in Pixel. | ||
Visible Condition | Siehe Row. | ||
| Zum Unterschreiben der Checkliste. Die Signature-Control ist immer so breit wie die übergeordnete Spalte. | ||
Eigenschaften: | |||
Signature Matchcode | Name des Matchcode-Feldes der Signatur, darf keine Leer- oder Sonderzeichen enthalten. | ||
Date Matchcode | Name des Matchcode-Feldes für das Datum, darf keine Leer- oder Sonderzeichen enthalten. Wichtig: Geben Sie hier nur dann einen Wert ein, wenn Sie das Datum explizit speichern möchten. In diesem Fall müssen Sie auch ein Date-Feld mit passendem Matchcode einfügen! | ||
Name Matchcode | Name des Feldes für den Matchcode-Namen des Ausfüllenden, darf keine Leer- oder Sonderzeichen enthalten. Wichtig: Geben Sie hier nur dann einen Wert ein, wenn Sie den Namen des Unterschreibenden explizit speichern möchten. In diesem Fall müssen Sie auch ein Textbox-Feld o. ä. mit passendem Matchcode einfügen! | ||
Label | Zugehöriges Label, das unter dem Trennstrich erscheint. | ||
Button Label | Der Text der Schaltfläche, mit der die Signatur gesetzt wird. | ||
Complete Checklist | Wenn aktiviert, wird die Checkliste durch das Setzen der Signatur abgeschlossen. | ||
Validate Checklist | Wenn aktiviert, wird die Checkliste durch das Setzen der Signatur überprüft. | ||
Text alignment | Ausrichtung des Labels innerhalb des Feldes (links, rechts oder mittig). | ||
Visible Condition | siehe Row. | ||
| Feld, in das der Anwender beim Ausfüllen der Checkliste Text eingibt. Zeilenumbrüche sind bei dieser Control möglich. | ||
Eigenschaften: | |||
Matchcode | Name des Textfeldes, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Field type | Mit diesem Dropdown-Menü wird der Datentyp des Felds bestimmt. Die Auswahl ist: Text, Number (Zahl), JSON, Date (Datum), Bool (true/false) (wahr/falsch), Image (Bild). | ||
Text alignment | Ausrichtung des Textes innerhalb der Spalte (links, rechts oder mittig). | ||
Width | Breite der Textbox in Pixel. | ||
Rows | Wie groß der Textbereich ist bzw. wie viele Zeilen des Textbereiches gezeigt werden soll. Wenn der Text so lang wird, dass er nicht mehr in den Textbereich passt, wird eine Bildlaufleiste eingeblendet. | ||
Visible | siehe Row. | ||
| Feld, in das der Anwender beim Ausfüllen der Checkliste Text eingibt. Zeilenumbrüche sind bei dieser Control nicht möglich. | ||
Eigenschaften: | |||
Placeholder | Belegt das Feld mit einem Standardwert, bis es anderweitig gefüllt wird. | ||
Background Color | Hier kann die Farbe des Feldes angepasst werden. | ||
Matchcode | Name des Textfeldes, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Field type | Mit diesem Dropdown-Menü wird der Datentyp des Felds bestimmt. Die Auswahl ist: Text, Number (Zahl), JSON, Date (Datum), Bool (true/false) (wahr/falsch), Image (Bild). | ||
Text alignment | Ausrichtung des Textes innerhalb der Spalte (links, rechts oder mittig). | ||
Width | Breite der Textbox in Pixel. | ||
Visible | siehe Row. | ||
| Eine Textbox für Zeitstempel. | ||
Eigenschaften: | |||
Matchcode | Name des Textfeldes, darf keine Leer- oder Sonderzeichen enthalten. Mit dieser Bezeichnung werden in Checkware später statistische Auswertungen über ausgefüllte Checklisten ermöglicht. | ||
Visible | siehe Row. | ||
![]()
Über das Symbol zum Editieren einer Control ( ), welches sich links über einer ausgewählten Control befindet, lässt sich zusätzlich der Code einer Control direkt bearbeiten. (Nur für erfahrene Entwickler empfohlen.)
Eine Checkliste muss zunächst mit Zeilen und Spalten in ein Raster eingeteilt werden, bevor man Form-Controls auf der Checkliste platzieren kann. Eine Zeile kann entweder auf oberster Ebene (im Hauptcontainer) oder in einer Spalte eingefügt werden. Eine Spalte hingegen kann nur in Zeilen platziert werden. Somit lassen sich Zeilen und Spalten beliebig tief verschachteln.
2.Spalte
ZeileTextbox
1.SpalteLabel
In dem Beispiel befindet sich das Label innerhalb der Zeile in der 1. Spalte. In der 2. Spalte daneben befindet sich die zugehörige Textbox. Im Vorschau-Modus sieht obige Checkliste wie folgt aus:
So bauen Sie die Checklisten-Vorlage Zeile für Zeile auf.
Wenn Sie mit der Bearbeitung Ihrer Checklisten-Vorlage fertig sind, können Sie diese als HTML-Datei generieren, indem Sie auf den Button „Speichern" klicken. Hier öffnet sich der Dialog zum Speichern der Checkliste, in dem ein beliebiger Name vergeben werden kann.
Anschließend wird ein Browser-Download ausgeführt und die erstellte Checkliste wird heruntergeladen.
Um eine bestehende Checkliste zu bearbeiten, klicken Sie im Menü auf „Open" (Öffnen). Anschließend können Sie eine auf Ihrem Computer vorhandene Checklisten-Vorlage auswählen.
Nachdem Sie die Datei geöffnet haben, wird die Vorlage in den Designer geladen und das Checklisten-Layout kann wie gewohnt bearbeitet werden.