--- title: "Exemplarische Vorgehensweise: Erstellen eines Dateneingabeformulars " slug: "walkthrough-build-a-data-entry-form" updated: 2025-05-27T14:52:11Z published: 2025-05-27T14:52:11Z canonical: "support.tulip.co/walkthrough-build-a-data-entry-form" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.tulip.co/llms.txt > Use this file to discover all available pages before exploring further. # Exemplarische Vorgehensweise: Erstellen eines Dateneingabeformulars **In dieser exemplarischen Vorgehensweise werden Sie:*** **ein Eingabeformular in einem Schritt mithilfe von Eingabe-Widgets erstellen*** **Eingabedaten in Variablen und einer Tabelle speichern*** **Tabellensätze in einem Schritt überprüfen** In dieser exemplarischen Vorgehensweise lernen Sie, wie Sie Daten in einer Anwendung speichern und Eingabedaten aus einer Anwendung in einer Tabelle speichern können. Am Ende der beiden Übungen werden Sie eine Dateneingabe-App haben, die wie folgt aussieht:![ex first data entry app walkthrough](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20app%20walkthrough.gif) ## Übung 1: Eingabedaten in der App speichern In dieser Übung werden Sie einen einfachen Schritt erstellen, der Eingabedaten in Variablen speichert. ### Erstellen Sie eine neue App 1. Klicken Sie auf der Registerkarte **Apps** auf **Apps**.![Apps tab](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Apps%20tab.png) 2. Klicken Sie auf **+ App erstellen** in der oberen rechten Ecke. 3. Nennen Sie die App "Dateneingabeformular - Beispiel". Optional können Sie eine Beschreibung hinzufügen, damit andere Benutzer wissen, wofür diese App gedacht ist.![ex data entry create new app](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20data%20entry%20create%20new%20app.png) 4. Klicken Sie auf **+ Erstellen**. Auf der Seite mit den App-Details können Sie entweder oben rechts auf **Bearbeiten** klicken, oder Sie klicken auf den Namen des **unbenannten Schritts**, um den App-Editor zu öffnen. ### Eingabe-Widgets mit variablen Datenquellen hinzufügen 1. Klicken Sie auf die Registerkarte **Eingaben** und wählen Sie **Kontrollkästchen**. 2. Benennen Sie im **Seitenbereich** das **Label**: "Arbeitsauftrag abgeschlossen". 3. Klicken Sie unter **Datenquelle** auf das leere Feld und dann auf **+** **Variable hinzufügen**. 4. Nennen Sie die Variable "Arbeitsauftrag abgeschlossen" und ändern Sie den **Standardwert** in **nein**. Klicken Sie auf **+ Erstellen**.![ex data entry work order completed variable](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20data%20entry%20work%20order%20completed%20variable.png) Die Konfiguration des Widgets sieht dann so aus: ![ex first data entry Input widget side pane config](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20Input%20widget%20side%20pane%20config.png) 1. Fügen Sie auf der **Registerkarte Eingaben** ein **Datumsauswahl-Widget** hinzu. 2. Benennen Sie im **Seitenbereich** das **Label**: "Datum abgeschlossen". 3. Klicken Sie unter **Datenquelle** auf das leere Feld und dann auf **+** **Variable hinzufügen**. 4. Nennen Sie die Variable "Datum abgeschlossen" und klicken Sie auf **+ Erstellen**. Die Konfiguration des Widgets sieht dann so aus:![ex first data entry input widget config2](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20input%20widget%20config2.png) ### Erstellen Sie einen Auslöser zum Speichern der Eingabedaten 1. Klicken Sie auf die Registerkarte **Schaltflächen** und wählen Sie **Absenden**. 2. Klicken Sie im **Seitenbereich** auf das **Pluszeichen +** neben **Triggers**. 3. Betiteln Sie den Auslöser "App-Daten speichern". 4. Wählen Sie unter dem Abschnitt **Then** die **App** aus dem Dropdown-Menü. Wählen Sie dann **Alle App-Daten speichern**. Klicken Sie auf **Speichern**.![ex first data entry save app data trigger](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20save%20app%20data%20trigger.png) Jetzt haben Sie einen grundlegenden Dateneingabeschritt, der Variablen zum Speichern von Werten verwendet. Hier sehen Sie, wie die Anwendung aussieht, wenn Sie sie im Entwicklermodus **testen**:![ex first data entry exercise 1 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20exercise%201%20test.gif) Beachten Sie, dass die Variablen in Vervollständigungsdaten gespeichert werden, die Sie unterhalb des Schrittbildschirms sehen können. ## Übung 2: Eingabedaten in einer Tabelle speichern In order to follow this walkthrough, you must first complete the exercises in [Build Your First Table](/r230/docs/walkthrough-build-your-first-table). In dieser Übung werden Sie einen Dateneingabeschritt erstellen, der Werte in einer Tabelle für Arbeitsaufträge speichert. Sie werden auch in der Lage sein, die Datensätze in der Tabelle von dem App-Schritt aus zu betrachten.1. Fügen Sie einen **neuen Schritt** hinzu und nennen Sie ihn "Übung 2". ### Fügen Sie die Tabelle zur App hinzu 1. Klicken Sie auf die Registerkarte **Datensätze** und wählen Sie **+ Tabelle hinzufügen**. 2. Wählen Sie die Tabelle " **Arbeitsaufträge** " und klicken Sie dann auf " **Hinzufügen**".![ex first data entry add table](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20add%20table.gif) 3. Klicken Sie auf das Symbol **+** neben **Datensatzplatzhalter**. 4. Benennen Sie den Datensatzplatzhalter: "Aktuelle Arbeitsaufträge". Klicken Sie auf **Datensatzplatzhalter hinzufügen**. ![ex first data entry record placeholder](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20record%20placeholder.png) ### Erstellen Sie die Datenformulareingaben 1. Klicken Sie auf **Eingaben** und wählen Sie die **Einzelauswahl**. 2. Beschriften Sie das Widget im Seitenbereich: "Produkt". 3. Klicken Sie unter **Datenoptionen** auf das leere Feld **Datenquelle** und dann auf **+ Variable hinzufügen**. 4. Nennen Sie die Variable "Produkt" und klicken Sie dann auf **+ Erstellen**.![ex first data entry product input data source](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20product%20input%20data%20source.gif) 5. Fügen Sie unter **Auswahloptionen** die folgenden Optionen hinzu: 6. Fahrradrahmen 7. Rad 8. Antriebsstrang ![ex first data entry product selection options](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20product%20selection%20options.png) 1. Fügen Sie ein **Zahleneingabe-Widget** zu dem Schritt hinzu. 2. Benennen Sie das Label: "Menge". 3. Klicken Sie unter **Datenoptionen** auf das leere Feld **Datasource** und dann auf **+ Variable hinzufügen**. 4. Benennen Sie die Variable "Produkt" und klicken Sie dann auf **+ Erstellen**.![ex first data entry quantity config](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20quantity%20config.png) 5. Klicken Sie unter **Validierungsregeln** auf **+**, um eine Regel hinzuzufügen. 6. Wählen Sie " **Größer als"** und geben Sie "0" als statischen Wert ein. ![ex first data entry validate quantity input](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20validate%20quantity%20input.gif) ### Schaltflächenauslöser erstellen, um Eingabewerte zu speichern 1. Fügen Sie eine **Schaltfläche** zu dem Schritt hinzu. 2. Fügen Sie im Seitenbereich Text hinzu: "Arbeitsauftrag erstellen". 3. Klicken Sie unter **Auslöser** auf **+**. 4. Benennen Sie den Auslöser: "Eingabewerte in neuem Arbeitsauftragsdatensatz speichern". 5. Fügen Sie dem Trigger die folgenden Aktionen hinzu: 6. Tabelle Datensätze → Datensatz erstellen → Ausdruck: `RANDOMSTRING()` → Aktuelle Arbeitsaufträge 7. Datenmanipulation → Speichern → Variable → Produkt → Tabellensatz → Aktuelle Arbeitsaufträge → Produkt 8. Datenmanipulation → Speichern → Variable → Menge → Tabellensatz → Aktuelle Aufträge → Menge ![ex first data entry trigger actions](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20trigger%20actions.png) ### Tabelle der Arbeitsaufträge im Schritt anzeigen 1. Klicken Sie auf **Einbetten** und wählen Sie **Interaktive Tabelle**. 2. Wählen Sie im **Seitenbereich** unter **Datasource** die Option **Tulip Table**. 3. Wählen Sie in der nächsten Auswahlliste die Tabelle **Work Orders**. 4. Wählen Sie unter **Linked Placeholder** die Option **Current Work Orders**.![ex first data entry interactive table datasource](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20interactive%20table%20datasource.png) 5. Fügen Sie unter Felder die folgenden Felder hinzu: 6. ID 7. Produkt 8. Menge 9. Erstellungsdatum 10. Status 11. Farbe ![ex first data entry interactive table fields](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20interactive%20table%20fields.png) 1. Klicken und ziehen Sie die Quadrate um das Widget herum, um die Abmessungen anzupassen und alle Felder zu sehen.![ex first data entry adjust interactive table](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20adjust%20interactive%20table.gif) Jetzt haben Sie ein Dateneingabeformular, das Variablen in einem Datensatzplatzhalter speichert und einen Tabellendatensatz aus dem aktuellen Platzhalter erstellt. Hier sehen Sie, wie der Schritt aussieht, wenn Sie ihn im Entwicklermodus testen: ![ex first data entry exercise 2 test](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20exercise%202%20test.gif) Wenn Sie bei der Menge "0" eingeben, wird eine Fehlermeldung angezeigt, die den Benutzer auffordert, einen akzeptablen Wert einzugeben. Dies ist durch die **Validierungsregel** möglich, die Sie für das Widget festgelegt haben.![ex first data entry number widget error message](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/ex%20first%20data%20entry%20number%20widget%20error%20message.png) ## Nächste Schritte Nachdem Sie nun ein Dateneingabeformular erstellt haben, können Sie sich mit der Erstellung von Anwendungen oder der Visualisierung von Daten befassen: - [Komplettlösung: Erstellen Ihrer ersten App](/r230/docs/walkthrough-build-your-first-app) - [Komplettlösung: Erstellen Sie Ihre erste Analyse](/r230/docs/walkthrough-create-your-first-analysis)