Thema

• Ein Tabellenfeld zu Ihrem Formular hinzufügen
• Anlegen einer Tabelle mit verschiedenen Spaltentypen
• Daten zum Anlegen von Zeilen und Spalten eingeben
• Erstellen einer dynamischen Tabelle aus den Daten eines Google Tabellendokuments

Voraussetzungen

• Sie wissen bereits, wie Sie Ultradox Formulare zu Ihrer Automation hinzufügen und grundlegende Formularfeldtyp handhaben

Ziel

• Sie beherrschen alle Features der Tabellenfelder

Anleitung

In diesem Fall erstellen wir einen kleinen einfachen Online-Shop, in dem Ihre Kunden Produkte mit Mengenangabe bestellen können.

Formular erstellen

Um ein Formular zu erstellen ziehen Sie einen Formular-Baustein aus den Benutzerinteraktionen der Seitenleiste in Ihr Dokument und öffnen den Eingabeformular gestalten Dialog um ein Tabellenfeld in das Formular einzufügen.

Das Tabellenfeld

 Fügen Sie ein Tabellenfeld-Baustein aus der Auswahl der Seitenleiste hinzu und tragen Sie die Überschrift Produkte bestellen ein, den Name der Variable bestellungen und einen Hilfe-Text.

Spalten festlegen

Konfigurieren Sie nun den Aufbau der Tabelle um das entsprechende Format für Ihren Online Shop festzulegen. Geben Sie die Überschriften der Spalten ein und legen die Variablennamen, den Darstellungstyp und evtl. die Spezifikationen für jede Überschrift fest.

Überschrift

Für jede Spalte können Sie eine Überschrift angeben, die über der Spalte angezeigt wird.

In unserem Beispiel: Auswahl, Produkt, Anzahl, Preis.

Variable

Legen Sie für jede Spalte einen Variablennamen an und verwenden Sie einfache Variablennamen zB: auswahl, name, anzahl, preis.

Ultradox gibt diese Variablen in den Ausgangsvariablen Ihres Formular-Bausteins aus.

Wenn Sie bestellungen als Namen der Variable in dem Tabellenfeld gewählt haben, finden Sie diese Variablen in der Liste:

bestellungen[].auswahl

bestellungen[].name

bestellungen[].anzahl

bestellungen[].preis

Typ

Sie können für jede Überschrift und Spalte einen Darstellungstyp wählen. Die Spalte mit der Überschrift Auswahl erhält eine Checkbox (Ja / Nein), Anzahl ein Zahlenfeld (Zahl) und der Preis wird als rechtsbündiger Text dargestellt.

Wählen Sie einfach aus der Dropdown-Liste den gewünschten Typ aus.

Die Liste der verfügbaren Darstellungstyp finden Sie auch im Referenzteil dieses Handbuchs.

Spezifikationen^[a]

Einige Feldtypen wie z. B. der Text-Typ können über das Spezifikationen-Feld konfiguriert werden.

Um die möglichen Optionen für eine Liste festzulegen, müssen Sie den namen angeben, der dem Benutzer angezeigt wird, und die id, die in Ihrer Variablen gespeichert wird.

Als Beispiel geben wir zwei mögliche Optionen an, die als Priority delivery und Standard für den Benutzer angezeigt werden und entweder schnell oder langsam in der Variable products[].delivery  gespeichert werden.

{
"options": [
{ "name": "Priority delivery",
"id": "fast"
},
{
"name": "Standard",
"id": "slow"
}]
}

Inhalt der Tabelle

Sie haben nun festgelegt wie die Tabelle aussehen soll, nun kann der Inhalt in Ihre Tabelle eingeben werden. Nutzen Sie dafür das Eingabefeld für die Standard-Werte.

Hier können die Werte für die Spalten der resultierenden Tabelle eingegeben werden.

Da für jede Spalte der für den Darstellungstyp passende Wert eingetragen wird, sieht unsere erste Zeile wie folgt aus:

true,Katalog,1,0

Trennen Sie Spalten durch Komma und Zeilen durch Semikolons voneinander und verwenden Sie keine Leerzeichen. Für unser Beispiel könne Sie folgendes einfügen:

true,Katalog,1,0;false,Google Nexus,0,715;false,iPhone,0,699;false,Tablet A,0,195

Minimum und Maximum

Beschränken Sie zuletzt noch unsere Tabelle auf 4 Zeilen, indem Sie bei Minimum und Maximum 4 eingeben.

Klicken Sie nun auf Übernehmen um den Formular-Editor zu schließen. Die Tabelle sollte nun in Ihrem Formular erscheinen.

Benutzerinteraktion

Passen Sie abschließend die Benutzerinteraktion an, um Ihrem Kunden nach dem Ausfüllen des Formulars eine Nachricht anzuzeigen. Klicken Sie dazu im Titel des Formular-Baustein auf das Benutzerinteraktion Icon, um den Dialog zu öffnen.

Geben Sie den Titel, eine Beschreibung und die Mögliche Aktion Bestellen an.

Layout unserer Tabelle verbessern

Wenn Sie die Überschrift für eine Ihrer Spalten leer lassen, wird sich die Überschrift der vorherigen Spalte über die nachfolgenden Spalten erstrecken. Für unser verbessertes Layout  erstreckt sich nun die Überschrift Produkt über die ersten beiden Spalten und die Checkbox zur Auswahl ist in die Liste der Artikel integriert.

Dynamische Tabellen

Ultradox-Formulare zeichnen sich dadurch aus, dass zuvor geladenen Daten zum Aufbau von Tabellen verwenden werden können. Verknüpfen wir unsere Ultradox Automation also doch mit einer Bestandsliste der Produkte die auf Lager sind und in unseren kleinen Online Shop angeboten werden sollen. So können Sie die Artikel einfach in einem Google Tabellendokument auflisten und müssen nicht in dem Tabellenfeld des Formular-Bausteins eingegeben werden.

Erstellen einer Bestandsliste

Um zu sehen wie das funktioniert, fügen wir einen Lade Arbeitsblatt-Baustein aus Google Tabellen direkt vor unseren Formular-Baustein ein und wählen in dem Dialog Google Tabellendokument erstellen aus. Ultradox öffnet ein neues Google Tabellendokument in einem neuen Browser-Tab.

Benennen Sie die Datei um in  Bestand, das Arbeitsblatt in Preisliste und legen zwei Spalten für die Produkte in Spalte A und den Preis in Spalte B an.

Am Besten Sie löschen alle weiteren Spalten so dass nur Spalte A und B bleiben, denn Ultradox erzeugt Variablen pro Spalte.

Tragen Sie unsere Produkte Katalog, Google Nexus, iPhone und Tablet A und die jeweiligen Preise ein.

Wechseln Sie zu unsere Ultradox-Automation und aktualisieren ggfls. den Lade Arbeitsblatt Baustein, damit alle Daten aus dem Tabellendklument geladen werden.

Ultradox zeigt Ihnen in den Ausgangs-Variablen nun alle generierten Variablen an:

rows[].rowNumber

rows[].rowIndex

rows[].produkt

rows[].preis

Daten der Tabelle in das Formular laden

Klicken Sie auf den fett gesetzten Text im Formular Baustein, um den Formular-Editor erneut zu öffnen.

Wir ändern nun die Standard-Werte unseres Formulars, so dass eine Liste aus den Variablen unserer Bestandsliste konstruiert wird.

Dafür müssen wir eine foreach-Schleife erzeugen mit ; als Trennzeichen anstelle der Kommata. Geben Sie in die Standard-Werte folgendes ein:

${foreach rows row ;}false,,0,${row.preis;currency(op=EUR)}${end}

Zusätzlich ändern wir Minimum in 0 und Maximum in 99  um mehr als 4 Artikel auflisten zu können.

Klicken Sie auf Übernehmen um die Einstellungen zu speichern.

Logeintrag

Um zu überprüfen welche Werte Ultradox an unsere Liste übergibt, fügen wir einen Logeintrag Baustein aus den Kernkomponenten der Seitenleiste direkt nach dem Lade Arbeitsblatt Baustein ein.

Geben Sie als Kommentar die gleiche Anweisung ein, die wir auch in den Standard-Werten des Formulars eingefügt haben:

${foreach rows row ;}false,,0,${row.preis;currency(op=EUR)}${end}

 Wenn Sie nun die Ultradox Automation Ausführen und die Konsole des Ultradox-Editors öffnen sollte folgendes ausgegeben worden sein:

false,Katalog,0,EUR0.00;false,Google Nexus,0,EUR715.00;false,iPhone,0,EUR699.00;false,Tablet A,0,EUR195.00

Ultradox hat also die gleiche Zeile erzeugt, wie wir in unserem ersten einfachen Online Shop.

Wir können unseren Bestand bequem in einer Liste angeben und müssen ihn nicht in den Standard-Werten des Formular-Editors eingeben.

Try it

Konfigurieren und starten Sie die Automation als App um zu sehen, wie die Tabelle für den Benutzer der App angezeigt wird.

Die eingegebenen Daten können natürlich gesammelt und auch für weitere Aktionen in Ihrer Automation genutzt werden, wie beispielsweise die Weiterleitung der Bestellungen an die Versandabteilung.

Spalten Typ Referenz

Die folgende Tabelle zeigt die verfügbaren Spaltentypen:

Questions and Feedback

If you have any comments on this page, feel free to add suggestions right to the Google document that we are using to create this site.

If you are not yet member of the Ultradox community on Google+, please join now to get updates from our end or to provide feedback, bug reports or discuss with other users.

Last Updated: 9/5/19