Stworzenie jakiejkolwiek strony internetowej lub aplikacji internetowej jest prawie nie do pomyślenia bez nawigacji. Użytkownicy muszą poruszać się między stronami, otwierać różne sekcje witryny i otrzymywać różne informacje.
Dane strony
Zanim jednak przyjrzymy się samej nawigacji, warto zrozumieć, jakie informacje można uzyskać o stronie w ogóle i z czego może składać się adres URL. Aby to zrobić, można użyć bloku Get Current Page i zobaczyć, jakie dane produkuje.
- URL - adres strony w zwykłej postaci. Na przykład - https://vdjyien-app.apms.io/admin/someurl/
- Page - wewnętrzny identyfikator strony, który jest używany w procesach biznesowych AppMaster. Składa się on z 22 znaków, losowego zestawu liter i cyfr.
- Title - tytuł strony. Jej nazwa w formie czytelnej dla człowieka.
- URL Params. Strona może być stworzona tak, że jej adres nie jest ściśle ustalony, ale zawiera również wartości zmienne. Na przykład strona może wyświetlać listę artykułów w określonym dziale, a identyfikator tego działu jest po prostu wskazany w adresie URL jako parametr.
- Query Params. Dodatkowe parametry zapytania zapisywane są na końcu adresu URL po znaku "?". Na przykład dla strony z listą artykułów parametry "?_limit=12&lang=pl" mogą wskazywać, że wymagane jest tylko 12 artykułów w języku angielskim.
Na przykład wyobraź sobie stronę, która wyświetla listę artykułów z bloga. Jej adres URL jest podany jako "/blog/:theme/:author". Symbol ":" wskazuje, że podana po nim wartość jest parametrem. Jako parametry przyjmuje identyfikatory tematu artykułu (theme) i jego autora (author).
Aby nawigować do tej strony, należy użyć bloku Navigate w procesie biznesowym.
Parametry odpowiadają tym, które zostały przetworzone wcześniej w Get Current Page bloku. W tym przypadku rzeczywisty tytuł strony nie ma znaczenia dla nawigacji, ponieważ sama strona jest określona jako wewnętrzny identyfikator (można ją wybrać z listy stron).
Jeżeli strona nie ma żadnych parametrów, to nawigacja może być bardzo prosta; wystarczy wybrać żądaną stronę z podanej listy. Ale w tym przykładzie istnieją parametry, które muszą być przekazane do Navigate blok.
Tworzenie strony źródłowej dla nawigacji
Rozważ użycie parametrów na konkretnym przykładzie. Aby to zrobić, stworzymy osobną stronę, z której w przyszłości będziemy musieli przejść do strony docelowej. Dodajmy dwa Select elementy do tej strony (jeden do wyboru z listy tematów, drugi do listy autorów) i wypełnijmy je wartościami testowymi.
Następnie należy skonfigurować przepływ pracy dla przycisku Navigate po kliknięciu którego ma działać nawigacja do strony docelowej. Proces ten rozpoczyna się od pobrania wybranych wartości z Select bloków.
Kolejnym krokiem jest wypełnienie Key-Value wirtualnych modeli. Ich tablica służy do przekazania niezbędnych parametrów do Navigate bloku. Sam model składa się z klucza (Key), który jest nazwą parametru (w tym przykładzie temat, oraz autor), a także jego wartości (Value, bezpośredniej nazwy wybranego tematu, lub nazwiska autora).
Należy pamiętać, że w adresie URL nie można używać wielu znaków, w tym znaku spacji. Dlatego nazwa zapisana jako "Frank Paulsen" w adresie URL zostanie automatycznie zamieniona na "Frank%20Paulsen". URL Encode i URL Decode bloki mogą być używane do kodowania i dekodowania do standardów URL. W tym przykładzie, dla większej jasności i piękna adresu URL, używamy Replace string blok i niezależnie zastępujemy spację znakiem "-", prezentując nazwę jako "Frank-Paulsen".
Ostatnim krokiem jest połączenie wygenerowanych par klucz-wartość w jedną tablicę, aby przekazać ją jako parametr do Navigate block.
Teraz, gdy klikniesz przycisk, przejdziesz do strony https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/.
Możesz sprawdzić, że jej adres URL składa się zarówno z części stałej (https://vdjyien-app.apms.io/admin/blog/), jak i zmiennej (No-code/Frank-Paulsen/), która została utworzona z wartości wybranych na poprzedniej stronie.
Wykorzystanie parametrów URL do zarządzania treścią
Kolejnym zadaniem jest wykorzystanie otrzymanych parametrów URL do zmiany zawartości strony. Parametry te mogą być użyte np. do utworzenia GET do utworzenia żądania do bazy danych, ale w naszym przykładzie po prostu wyświetlimy ich wartość na stronie. Aby to zrobić, dodajmy do strony dwa kontenery z odpowiednimi Label.
Skonfigurujmy proces biznesowy w oparciu o onShow w jednym z kontenerów Label. Jego zadaniem będzie parsowanie adresu URL, pobranie jego parametrów i wyświetlenie ich na stronie. Aby to zrobić, wykorzystamy blok Get Current Page i w pętli pobieramy wartość każdego parametru.
Następnie, poprzez Switch otrzymujemy wartość parametru i wyświetlamy ją w odpowiednim bloku Label. Jednocześnie dla parametru Author odwrotnie zamienimy "-" na spację.
Teraz podczas nawigacji do danej strony będzie wykorzystywany nie tylko jej statyczny adres, ale również parametry URL, które wpływają na faktyczne wyświetlanie treści na stronie.
Wykorzystanie parametrów zapytania
W niemal identyczny sposób można dodawać parametry zapytań (Query Params). Ich kluczową różnicą w stosunku do parametrów URL jest to, że są one opcjonalne. W tym przykładzie adres URL koniecznie zawiera wskazanie, jakie informacje powinny być wyświetlane na stronie (jaki dział tematyczny i jaki autor), a dodatkowe parametry wprowadzają niezbędne uściślenia. Na przykład za pomocą parametrów limit i offset można zorganizować paginację i ustawić dokładnie, ile rekordów ma być odpytywanych z bazy danych i od którego rekordu ma się rozpocząć wyjście.
Dodajmy dwa nowe pola do strony startowej -. Input (Integer). Zapiszemy w nich parametry limit i offset.
Dokonajmy niezbędnych uzupełnień w procesie biznesowym przycisku nawigacyjnego. Utwórzmy tablicę o nazwie Query Params z wartościami limit i offset.
Ostatnim krokiem jest dodanie elementów z informacjami z parametrów zapytania, a także uzupełnienie procesu biznesowego dla strony docelowej.
Efektem powinien być adres URL taki jak:
https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/?offset=0&limit=12
Aplikacja implementuje nawigację z parametrami URL i parametrami zapytania oraz dynamicznie określa zawartość strony docelowej w zależności od tych parametrów.
