PowerApps – nawigacja w oparciu o komponenty

#Office 365, #SharePoint, #PowerApps, #Flow, #MS Graph, #Webcon BPS, #Running & #Technology

PowerApps – nawigacja w oparciu o komponenty

Nawigacja pomiędzy Ekranami w PowerApps do niedawna mogła sprawiać pewne problemy. Jeżeli chciałem mieć ujednoliconą nawigację dostępną na każdym ekranie aplikacji, np. w formie górnego paska menu, musiałem składające się na nią kontrolki osadzić na każdym ekranie. Gdy chciałem zmienić kolejność kontrolek tworzących nawigację nie było tak źle, ponieważ kontrolki mogą dziedziczyć po sobie właściwości, więc wystarczyło o tym pamiętać i stosować w praktyce. Wówczas zmiana właściwości kontrolki na pierwszym ekranie była od razu widoczna na pozostałych kontrolkach, które te właściwości dziedziczyły. Gorzej gdy chciałem np. dodać nowy lub usunąć istniejący, w większości przypadków sprowadzało się to do edycji każdego ekranu.

Żeby uprościć tworzenie nawigacji w PowerApps można sięgnąć po komponenty.

Jedna istotna uwaga – komponenty są wciąż w grupie „Experimental features” co oznacza, że Microsoft może je zmienić lub nawet w najgorszym przypadku całkowicie z nich zrezygnować. Dlatego też nie powinno się stosować ich na produkcji lub robić to świadomie.

A teraz jak szybko zbudować nawigację w oparciu o komponenty. W mojej aplikacji mam 4 ekrany, pomiędzy którymi chciałbym się łatwo i szybko przełączać.

Po pierwsze w ustawieniach aplikacji należy aktywować komponenty.

Dzięki temu w PowerApps designerze w Tree View pojawi się nowa zakładka – „Components”. Tworzę w niej nowy komponent i nazywam go „TopNavigation”.

Na początek ustawiam podstawowe właściwości komponentu takiej jak szerokość (powinien być tej samej szerokości co aplikacja), wysokość, kolor tła.

Teraz muszę zdefiniować nową właściwość mojego komponentu. Będzie to tabela zdefiniowana w taki sposób jak na poniższym screenie:

Wartość utworzonej właściwości „MenuItems” ustawiam w poniższy sposób, jako tabelę o 3 kolumnach (ID, labal oraz scren).

W następnym kroku do mojego komponentu dodaję pustą galerię (nazwaną „gal_Navigation”) w układzie horyzontalnym, a w niej dodaję etykietę (lbl_Item).

Wartość „Items” galerii ustawiam na wartości pochodzące z tabeli z właściwości „MenuItems” .

Dla etykiety lbl_Item w OnSelect definiuję funkcję Navigate, która powinna przenieść mnie na ekran zdefiniowany w kolumnie screen w galerii.

Teraz przechodzę do aplikacji, w której definiuję kolekcję zawierającą id, wartość wyświetloną w etykiecie oraz nazwę ekranu. Kolekcja ta ma być tworzona za każdym razem, gdy uruchamiana jest aplikacja.

Teraz na każdym ekranie dodaję komponent „TopNavigation” i zamieniam domyślną wartość właściwości „MenuItem” na kolekcję „NavigationItems” i nawigacja jest gotowa.

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *