Przewodnik: Tworzenie formularza wprowadzania danych

W tym przewodniku:* Utwórz formularz wejściowy w kroku przy użyciu widżetów wejściowych* Zapisz dane wejściowe w zmiennych i tabeli* Przejrzyj rekordy tabeli w kroku

W tym przewodniku dowiesz się, jak przechowywać dane w aplikacji, a także zapisywać dane wejściowe z aplikacji w tabeli.

Pod koniec obu ćwiczeń będziesz mieć aplikację do wprowadzania danych, która będzie wyglądać następująco:

Ćwiczenie 1: Zapisywanie danych wejściowych w aplikacji

W tym ćwiczeniu utworzysz podstawowy krok, który zapisuje dane wejściowe do zmiennych.

Utwórz nową aplikację

1. W zakładce Apps kliknij Apps.
2. Kliknij + Create App w prawym górnym rogu.
3. Nazwij aplikację "Formularz wprowadzania danych - przykład". Opcjonalnie możesz dodać opis, aby inni użytkownicy wiedzieli, do czego służy ta aplikacja.
4. Kliknij przycisk + Utwórz.

Na stronie szczegółów aplikacji możesz kliknąć Edytuj w prawym górnym rogu lub kliknąć nazwę kroku bez tytułu, aby przejść do Edytora aplikacji.

Dodawanie widżetów wejściowych ze zmiennymi źródłami danych

1. Kliknij kartę Inputs i wybierz Checkbox.
2. W panelu bocznym nadaj nazwę Label: "Work order completed".
3. W obszarze Datasource kliknij puste pole, a następnie + Add variable.
4. Nazwij zmienną "Work order completed" i zmień wartość Default na no. Kliknij + Create.

Konfiguracja widżetu będzie wyglądać następująco:

1. Dodaj widżet Date picker z zakładki Inputs.
2. W panelu bocznym nadaj nazwę Label: "Date completed".
3. W obszarze Datasource kliknij puste pole, a następnie + Dodaj zmienną.
4. Nazwij zmienną "Date completed" i kliknij + Create.

Konfiguracja widżetu będzie wyglądać następująco:

Utwórz wyzwalacz, aby zapisać dane wejściowe

1. Kliknij zakładkę Buttons i wybierz Submit.
2. W panelu bocznym kliknij znak + plus obok Triggers.
3. Nadaj wyzwalaczowi tytuł "Zapisz dane aplikacji".
4. W sekcji Then wybierz App z listy rozwijanej. Następnie wybierz Zapisz wszystkie dane aplikacji. Kliknij Zapisz.

Teraz masz podstawowy krok wprowadzania danych, który wykorzystuje zmienne do przechowywania wartości. Oto jak wygląda aplikacja po przetestowaniu jej w trybie deweloperskim:

Zauważ, że zmienne przechowują dane uzupełnień, które można zobaczyć poniżej ekranu kroku.

Ćwiczenie 2: Przechowywanie danych wejściowych w tabeli

W tym ćwiczeniu utworzysz krok wprowadzania danych, który zapisuje wartości w tabeli Work Orders. Będziesz także mógł przeglądać rekordy w tabeli z poziomu kroku aplikacji.1. Dodaj nowy krok i nazwij go "Ćwiczenie 2".

Dodaj tabelę do aplikacji

1. Kliknij kartę Rekordy i wybierz opcję + Dodaj tabelę.
2. Wybierz tabelę Work Orders, a następnie kliknij Add.
3. Kliknij ikonę + obok pozycji Record Placeholder.
4. Nazwij symbol zastępczy rekordu: "Current Work Orders". Kliknij Dodaj symbol zastępczy rekordu.

Utwórz dane wejściowe formularza danych

1. Kliknij Inputs i wybierz Single select.
2. W panelu bocznym nadaj widżetowi etykietę: "Product".
3. W obszarze Opcje danych kliknij puste pole Źródło danych, a następnie + Dodaj zmienną.
4. Nazwij zmienną "Product", a następnie kliknij + Create.
5. W sekcji Opcje wyboru dodaj następujące opcje:
6. Rama roweru
7. Koło
8. Układ napędowy

1. Dodaj widżet Number Input do kroku.
2. Nazwij etykietę: "Quantity".
3. W obszarze Opcje danych kliknij puste pole Źródło danych, a następnie + Dodaj zmienną.
4. Nazwij zmienną "Product", a następnie kliknij + Create.
5. W sekcji Reguły walidacji kliknij +, aby dodać regułę.
6. Wybierz Greater Than i wpisz "0" jako wartość statyczną.

Utwórz wyzwalacz przycisku do przechowywania wartości wejściowych

1. Dodaj przycisk do kroku.
2. W panelu bocznym dodaj tekst: "Utwórz zlecenie".
3. W sekcji Wyzwalacze kliknij przycisk +.
4. Nazwij wyzwalacz: "Store input values to new Work order record".
5. Dodaj następujące akcje do trigera:
6. Rekordy tabeli → Utwórz rekord → Wyrażenie: RANDOMSTRING() → Bieżące zlecenia pracy
7. Manipulacja danymi → Store → Variable → Product → Rekord tabeli → Current Work Orders → Product
8. Manipulacja danymi → Store → Variable → Quantity → Table record→ Current Work Orders → Quantity

Wyświetlanie tabeli zleceń w kroku

1. Kliknij Embed i wybierz Interactive Table.
2. W panelu bocznym pod Datasource wybierz Tulip Table.
3. Z następnej listy rozwijanej wybierz tabelę Work Orders.
4. W sekcji Linked Placeholder wybierz Current Work Orders.
5. W sekcji Pola dodaj następujące pola:
6. ID
7. Produkt
8. Ilość
9. Data utworzenia
10. Status
11. Kolor

1. Kliknij i przeciągnij kwadraty wokół widżetu, aby dostosować wymiary i zobaczyć wszystkie pola.

Teraz masz formularz wprowadzania danych, który przechowuje zmienne w symbolu zastępczym rekordu i tworzy rekord tabeli z bieżącego symbolu zastępczego. Oto jak wygląda ten krok po przetestowaniu go w trybie dewelopera:

Jeśli wpiszesz "0" w ilości, zauważysz komunikat o błędzie, który poprosi użytkownika o wprowadzenie akceptowalnej wartości. Jest to możliwe dzięki regule walidacji ustawionej na widżecie.

Następne kroki

Teraz, gdy utworzyłeś formularz wprowadzania danych, dowiedz się więcej o tworzeniu aplikacji lub wizualizacji danych:

• Przewodnik: Tworzenie pierwszej aplikacji
• Przewodnik: Tworzenie pierwszej analizy