Wygląd: edytor, układ i kontrolki

Budujemy wygląd formularza — wszystkie pola wniosku o nieobecność, na razie bez danych.

Edytor formularza

• Po lewej — paleta komponentów, czyli wszystko, co możesz wstawić na formularz.
• Na środku, szare tło — obszar roboczy, w którym układasz pola.
• Poniżej, białe tło — podgląd na żywo. Każda zmiana jest widoczna od razu, więc możesz ją od razu przetestować.
• Komponenty warto podzielić na dwie grupy:
  • układ — sekcja, siatka (grid), kolumny i wiersze; decydują, jak formularz wygląda,
  • pola z wartościami — tekst, liczba, data, lista wyboru itp.
• Komponent wstawiasz metodą przeciągnij i upuść.

Klucz i właściwości

• Każdy komponent ma klucz — techniczny identyfikator, niewidoczny dla użytkownika. Z kluczy budujemy później ścieżkę do pola, żeby odczytać albo zmienić jego wartość.
• Właściwości (settings) otwierasz z prawego górnego rogu komponentu. Zależnie od typu jest ich od kilku do kilkunastu. Np. sekcja dostaje tytuł „Request of Absence” — to już widzi użytkownik.

Budowa formularza

• Siatka (grid) z 2 kolumnami i 4 wierszami. Każdy wiersz musi mieć dokładnie tyle komórek, ile jest kolumn.
• W siatce: pracownik (Full name, lista wyboru), rodzaj nieobecności (Type of request, lista wyboru), dwie daty (From, To), liczba dni (Number of days), status (Status, lista wyboru) i uwagi (Details, pole tekstowe wielowierszowe).
• Pola z wartościami mają dużo więcej właściwości niż sekcja czy siatka: m.in. wymagane, tylko do odczytu, wartość domyślna. Większość poznasz w kolejnych lekcjach.
• Opcje list wyboru można wczytywać dynamicznie albo wpisać ręcznie (wartość + tekst). Na start wpisujemy je ręcznie.
• Przykłady ograniczeń:
  • maksymalna długość tekstu (np. 500 znaków) — interfejs nie pozwoli wpisać więcej,
  • minimum dla liczby dni = 1 — przy złej wartości formularz od razu pokazuje błąd,
  • wymagane — daty i pracownik.
• Prawie każdą właściwość ustawisz na dwa sposoby: wartością stałą (jak w tej lekcji) albo wyrażeniem (expression), które liczy ją dynamicznie — o tym od lekcji 6.

Zapamiętaj

Formularz już wygląda jak trzeba, ale nie wie nic o danych — skąd je wziąć przy otwarciu i gdzie oddać przy zapisie. Tym zajmujemy się w następnej lekcji.