# #12 Nauka Power Platform | Kompleksowe rozwiazanie - Power Apps **Film YouTube:** https://www.youtube.com/watch?v=ERamhWQ0o0E --- Cześć. W ostatnich odcinkach przygotowaliśmy sobie pod system zgłoszeń IT listy źródłowe oraz przygotowaliśmy pierwsze dwa automaty w Power Automate do komunikacji mailowej o zmianie statusu zgłoszenia oraz do działu IT o tym, że nowe zgłoszenie się pojawiło. Dziś skupimy się na widokach PowerUpki. Zrobimy powerupkę dla działu IT do obsługi tych zgłoszeń. Żeby stworzyć aplikację, wchodzimy sobie w naszą solucję i w solucji u góry wybieramy new app i w naszym przypadku canvas app. układ tabletowy. Nazwiemy ją sobie system zgłoszeń IT i chwileczkę poczekamy. Okej, nasza aplikacja już istnieje. Zapiszemy ją sobie tak jak jest, żeby mieć już na czym pracować. W międzyczasie sprawdzimy sobie tylko w ustawieniach, czy mamy włączony auto saave, żeby po prostu aplikacja, wszystkie zmiany zapisywały nam się co dwie minutki automatycznie. Co będziemy chcieli przygotować w aplikacji? Będziemy chcieli przygotować widok listy zgłoszeń, który później sobie obrobimy w taki sposób, żeby były dedykowane widoki pod archiwalne zgłoszenia i pod takie w trakcie obsługi oraz nowe. Pozwolimy działowi AT wchodzić w konkretne zgłoszenia celem edycji bądź podglądu zgłoszenia i zmieniania danych w tym zgłoszeniu, czyli opisywania go, zmieniania statusów, priorytetów. Pomysł na tą aplikację mam taką, już stworzę sobie, jako że będzie to aplikacja do obsługi na komputerach, to stworzę sobie lewy pasek menu, w którym będą do wyboru widoki poszczególnych sfiltrowanych już zgłoszeń po statusach, a na środkowym centralnym ekranie będą wyświetlane listy takich listy tych zgłoszeń w zależności od danego widoku w odpowiednim statusie. Przygotuję zatem taki layout. Mamy już pierwszy screen i będziemy sobie budowali to wszystko na kontenerach. Żeby stworzyć taki widok. Górnego menu nie potrzebujemy górnego paska. Stworzymy sobie zatem tylko przestrzeń po lewej i po prawej. Więc stworzę sobie horyzontalny kontener. Na razie zajmę się tylko i wyłącznie układem kontenerów, czyli w ramach głównego kontenera. Ściągniemy go sobie na całą aplikację. W środku mamy dwa pomniejsze kontenery. Możemy podzielić to pewnymi porcjami. Powiedzmy, że sobie zrobimy to w skali 10 na 12. Lewe menu centralna przestrzeń. W lewym kontenerze dodamy sobie kolejne klocuszki i będziemy je układali już wertykalnie. Więc w ramach tego kontenera po prostu pododajemy sobie przyciski, porozciągamy sobie te przyciski na całość. będzie widok. Pierwszy widok będzie widok nowych zgłoszeń, drugi będzie widok w trakcie, trzeci będzie widok archiwalnych. Więc po lewej w menu będą trzy pozycje do wyboru. Na całym kontenerze możemy sobie ustawić odległość między poszczególnymi elementami. Zaraz sobie to doszlifujemy ładniej. Przycisk. O, możemy w taki sposób, ale powiedzmy, że to będzie tak. Pierwszy przycisk to będzie button new tickets. New tickets. Akurat w nomenklaturze IT posługujemy się tiketami. Nowe zgłoszenia. Tu będzie progress tickets w trakcie realizacji. Trzeci baton niech będzie ukończone, czyli dane. I nazwiemy to sobie archiwum. Okej. Jeszcze sobie musimy to powiększyć, więc tu też sobie zrobimy 80. Przestrzenie zrobimy mniejsze. To możemy sobie zmienić kolor tła całego kontenerka. No powiedzmy weźmiemy sobie jakąś barwę błękitną. Już to jakoś wygląda. Estetyką możemy się zająć później. Chciałbym się skupić na funkcjonalnościach. A w kontenerze centralnym tak naprawdę będzie nam potrzebny widok listy, więc wstawimy sobie tutaj wertykalną galerię. Będziemy się chcieli odnieść do Sharepointa. Skopiujemy sobie URL z listy zgłoszeń. Mamy jużnięte źródła danych. Możemy sobie teraz ustalić jak ma to wyglądać. Zostawmy sobie title and subtitle. i zmapujmy pola, czyli pole tytułu, niech to będzie temat, podtytuł niech będzie opis zgłoszenia. Statusy wynikają z lewych przycisków, więc zostawimy sobie tylko tyle tych informacji. W zasadzie wizualnie mamy wszystko, co nam potrzeba w takim szybkim systemie. Będziemy sobie to pewnie z czasem upiększać. Teraz zajmę się trochę namingiem. Staram się stosować nazwy znów bez spacji, bez polskich znaków, a przedrostkami nazywać dane elementy. Czyli jeśli mamy kontenery, to stosuję trzy trzyznakowy początek i w głąb tak samo. Potem staram się opisać co po co jest dany element, a na końcu do jakiego screena należy. To nam da pełną czytelność kodu. Tu sobie zrobimy left menu. Tu sobie nazwiemy ticket galery. Tutaj galeria tiketów, a w środku możemy sobie uporządkować parę rzeczy. To jest kształt prostokątu, czyli z serii shapów, kształtów shape left. I tu już sobie robię nazewnictwo zgodne z tym, gdzie ten kształt się znajduje, czyli znajduje się w galerii tiketów. To jest separator pod spodem, więc tu sobie zrobię shape bottom separator. To jest ikona strzałki, więc to jest right arrow gallery tickets. To jest labelka, więc to będzie label subtitle i label title. Teraz przygotujemy sobie filtry, czyli pod tymi przyciskami po lewej będziemy chcieli po każdym naciśnięciu przycisku, żeby odpowiednio wyświetlały nam się inne zgłoszenia na środku z innym statusem zgłoszenia. Celowo skopiowałem sobie to jedno zgłoszenie, które mamy w trzech różnych statusach, żeby móc sprawdzić, czy wszystko nam poprawnie działa. Jak to zrobić? Przede wszystkim musimy zdefiniować sobie jakąś zmienną na która będzie odpowiadała za nazwę statusu. Czyli będziemy sobie pobierać jedną z tych nazw statusów i korzystać z tego w zmiennej. Na przyciskach po kolei musimy sobie to dodać, czyli na properties on select na przycisku nowe zgłoszenia ustawimy sobie v nazwę sobie zmienną filtrowane statusy i tam będę chciał po naciśnięciu tego przycisku, żeby ta zmienna przyjęła nazwę nowe. Dla tego przycisku będę chciał przyjąć taką nazwę. A dla archiwum zakończone. Tutaj nic się nie zmieniło. Dalej w properties items, czyli elementów, które mają się wyświetlać, wyświetla się cały system zgłoszeń bez żadnych filtrów. Zrobimy to sobie tak. Jeżeli v filtered status jest równe pustemu tekstowi, to chcemy, żeby pobierało wszystkie wartości. Natomiast w przeciwnym razie chcemy, żeby pobierało tylko takie zgłoszenia, które przyjmują tą wartość. Zamykamy sobie nawiasy i zobaczmy. Teraz klikamy nowe realizacji w archiwum. Statusy się przełączają zgodnie z zmienną. Zgodnie ze zmienną. Teraz jest w trakcie realizacji. Mamy odpowiedni do tego, mamy odpowiednie do tego zgłoszenie. Będziemy teraz chcieli na widoku tych zgłoszeń troszeczkę to dopracować. I o ile tu mogliśmy sobie sami w danym elemencie wskazać te elementy i powiązać, to możemy też troszeczkę zrobić to ręcznie i możemy wyświetlić dowolny tekst w tym miejscu i zrobimy to sobie w taki sposób, że przede wszystkim dla IT ważne są takie rzeczy jak numery zgłoszeń, id zgłoszenia, na którym bazują. Więc zrobimy sobie tutaj dopisek z ID, żeby było wiadomo na czym pracujemy. Następnie informacją, która może być przydatna jest to, kto takie zgłoszenie zrobił. i też możemy sobie takie coś wyświetlić. Dodatkowo informacją przydatną jest również to, kiedy ktoś to zgłosił i też możemy taką informację wyświetlić. Myślę, że teraz z punktu widzenia mamy już sporo. Możemy sobie jeszcze dodać jedną linijkę. Skopiujemy sobie jedną z tych labelek. Ułożymy ją sobie tutaj pod spodem i w tej labelce przeniesiemy ją sobie troszeczkę niżej. Zmniejszymy czcionkę. Zmienimy sobie pogrubienie na normalne, ale w tym przypadku będziemy chcieli wskazać status zgłoszenia. Może sobie zrobimy to w taki sposób. żeby wszystkie przydatne dane były widoczne już z poziomu listy. priorytet i dodamy sobie jeszcze obsługującego. No w tym przypadku akurat jest pusty. Możemy sobie też cały ten szablon nieco powiększyć. żeby mieć trochę więcej przestrzeni na te dane. Sorki za krótką przerwę, ale jeżeli nadal oglądasz ten filmik, to mam nadzieję, że cię zainteresował i poproszę cię w tym momencie o subskrypcję. Muszę też wspomnieć, że oprócz tego, że tworzę te materiały, proponuję też kilka form współpracy. Jeżeli jesteś zainteresowany pomocą we wdrożeniu automatyzacji w twojej firmie albo jesteś osobą, która chce rozwijać się w kierunku nauki per platformy, koniecznie skontaktuj się ze mną. W opisie tego filmu znajdziesz wszystkie potrzebne dane kontaktowe. To wszystko. Nie przeszkadzam. Miłego oglądania. Teraz przygotujemy sobie widok do obsługi zgłoszeń, do podglądu obsługi zgłoszeń. Jak to zrobić najszybciej? Skopiujemy sobie list screena. Damy sobie tutaj details screen bądź item screen. Różnie to sobie możemy nazywać edit screen. Na tym widoku usuniemy sobie galerię z środka, bo ona nam nie będzie potrzebna. A tutaj usuniemy sobie przyciski i ten przycisk nazwiemy tym razem powrótne. Więc będziemy sobie teraz edytowali centralną część tego widoku, ale mamy już szablon gotowy. Ja teraz przez chwileczkę nadrobię, czego już nie będę pokazywał na żywo, trochę namingu, czyli pozmieniam te nazwy, które są na końcu każdego z elementów. I teraz już możemy zająć się dodawaniem formularza. Formularz możemy wyklikać pojedynczych elementów. Możemy skorzystać z gotowego szablonu. W tej wersji podstawowej skorzystamy z gotowego szablonu formularza, natomiast na pewno gdzieś w późniejszych odcinkach będę też pokazywał jak tworzyć customowe formularze. Wybieramy zatem kontrolkę formularza. Wskazujemy, co ma być źródłem danych do tego formularza i możemy określić też jaki jest tryb tego formularza. Poczekamy jeszcze jak nam się to wszystko załaduje. Okej, pojawiły nam się wszystkie kontrolki, jakie dotyczą tej listy źródłowej, bo wskazaliśmy sobie tą listę sharepointową. możemy zmieniać tryby tego formularza na edycję, nowy element i podgląd. W przypadku edycji i podglądu musimy dla takiego formularza wskazać jakiego elementu ma dotyczyć, czyli z jakiego elementu, z jakiego wiersza tej listy ma pobierać dane. Żeby to zrobić, będziemy sobie przekazywali taki element. Tutaj na razie sobie taką zmienną wpiszemy jako V selected item. wyświetli nam błąd, bo jeszcze nie wie co to jest. A z poziomu widoku list screen na tej strzałeczce na onselect zrobimy sobie właśnie ustawianie tego parametru, czyli set v selected item i pobierzemy sobie cały ten element do tej zmiennej. A dodatkowo przekierujemy funkcją navigate właśnie do tamtego formularza. Sprawdźmy jak to działa. Mamy ID3. Klikniemy sobie tutaj i jak widać w każde z tych pól, które jest wyświetlane i którym były jakieś dane, zostały one automatycznie już podstawione. Korzystając z takiej gotowej form kontrolki formularza, możemy bardzo szybko sobie to wszystko poukładać. Tu możemy ustalić w ilu kolumnach mają się mieścić wszystkie dane. Ustawimy to sobie w jednej. Będzie to od razu widok, tak jak widać scrollowany w dół, więc fajnie możemy sobie to zagospodarować. Ja od razu, jak już tak mamy to skonstruowane, to dodam sobie tutaj jeden kontenerek, ponieważ będziemy chcieli mieć całość dostępną również z jakimiś przyciskami pod spodem pod ten formularz. Więc wytniemy sobie ten formularz, wstawimy sobie do pierwszego takiego kontenerka, ułożymy sobie te kontenerki w taki sposób, że większość to będzie ten formularz. A tutaj będziemy mogli sobie dodać przycisk. Zmienimy sobie tylko układ na horyzontalny. Skopiujemy sobie do tego kontenerka przycisk. Powrót zmienimy nazwę. Możemy go zrobić nawet na całą długość ekranu. Zadbamy sobie od razu o naming i wrócimy troszeczkę do formularza, bo możemy w tym formularzu edytować pola. I tak title jest nam niepotrzebny, nie używamy tego. Pierwszy niech będzie temat jest okej. Możemy sobie też dodać datę, kiedy to zostało zgłoszone. Więc może zrobimy tak, że pewne dane, które się nie zmieniają, czyli utworzone kiedy i utworzone przez kogo damy sobie na początek. Temat nam się nie zmieni, opis nam się również nie zmieni. Cała reszta danych jest do zmiany. Zadbamy sobie teraz jeszcze o pojedyncze zmiany na tych polach. To znaczy tu on domyślił się, że to są ustawienia akurat tylko do podglądu, bo są niezmienialne. Temat możemy również zadbać sobie o display mode, tylko w przypadku formularza, jeśli chcemy dobrać się do poszczególnych kontrolek, to musimy wyłączyć blokadę dla całego formularza. I teraz możemy taką kontrolką podziałać sobie indywidualnie. Tu będziemy chcieli zrobić tylko view opis. Będziemy chcieli zrobić multiline, ale również będzie nas interesował tryb podglądu. Rozciągniemy sobie trochę to pole opisu. Ono będzie scrollowane przy większych opisach, no ale będzie raczej niezmienne. Priorytet sobie zostawiamy tak jak jest. Status też, bo będzie do zmiany. Obsługującego będziemy mogli sobie również wybrać z listy. Notatka. To pole też sobie zamienimy na multiline i damy troszeczkę więcej domyślnie miejsca. Przyczyna źródłowa problemu również podobnie. Zrobimy sobie multiline rozwiązanie również multiline i też sobie damy wysokość na dwie linijki, a stary status, całą kontrolkę sobie schowamy. Okej, mamy teraz więcej informacji na temat zgłoszeń. Mamy zatem gotowy formularz. Możemy jeszcze oczywiście edytować sobie później te labelki, czyli możemy wyłączać blokadę parametrów i zmieniać sobie domyślnie ustawione wartości na przykład tych nagłówków, żeby tutaj jednak wyświetlane były polskie litery. Ale powiedzmy, że jest to na tą chwilę sprawa drugorzędna. Mamy zatem informacje o wszystkim, czego potrzebujemy do zamknięcia zgłoszenia. I jedyne co teraz musimy zrobić to tak naprawdę zaprogramować, dodać funkcję zapisywania zmian na przycisku. Żeby to zrobić klikamy sobie na przycisk Zapisz zmianę properties on select, czyli co się ma dziać na wyborze tego przycisku. I najważniejszą funkcją będzie submit form. Tu wskazujemy po prostu nazwę formularza. Na tą chwilę mamy ją brzydką. jeszcze sobie potem poprawimy i to tak naprawdę by wystarczyło. Natomiast warto to wszystko jeszcze obwarować w pewne warunki, użyć funkcji ifror, która wyłapie błędy i je obsłuży. Czyli w przypadku, gdy wystąpi błąd z zapisem, to zrobimy sobie wyświetlenie komunikatu do użytkownika. Wystąpił błąd. Spróbuj ponownie i typ błędu error spowoduje czerwony kolorek. A w przypadku gdy mamy szczęście to napiszemy sobie poprawnie zapisano zmiany i damy sobie zielony kolorek. A dodatkowo po takim zapisaniu skierujemy użytkownika do i do kulisty i zamkniemy sobie funkcję. Tu możemy sobie też przeformatować taki tekst, żeby układ był bardziej czytelny. Zapiszmy sobie zmiany i sprawdźmy jak to zadziała. Zmienimy sobie status tego priorytet tego zgłoszenia na wysoki i z nowego na w trakcie realizacji w notatce zrobimy sobie testowa notatka. Klikamy zapisz zmiany i wyświetla nam się notify, że wszystko poprawnie się wykonało. Wróciliśmy do widoku listy. Wieszmy sobie ten widok. I to jest to zgłoszenie przeszło do trybu w trakcie realizacji i testowa notatka pojawiła się w opisie. Warto zadbać jeszcze w aplikacji o dwie rzeczy. W przypadku gdy używamy formularza, to warto na pewno ten formularz odpowiednio nazwać. W tym przypadku mamy tylko jeden formularz na całym widoku details screen, więc po prostu nazwiemy go sobie znowu skrótowo trzema literkami. Natomiast jak możemy zauważyć formularz tworzy cały zestaw różnych komponentów. I akurat w tym przypadku nie używamy odniesienia się do konkretnych, czyli na przykład tutaj mamy data card value 4, które jest tutaj. Nic nam to nie mówi. Gdybyśmy się odnosili w kodzie na przykład przy zapisywaniu tutaj do tych parametrów, byłoby to uciążliwe. Warto w przypadku formularza również takie pola, do których się odnosimy, z których korzystamy, zmienić ich naming. Natomiast tak jak mówię, w naszym przypadku nie stosujemy tego. Jedyne co jeszcze sobie tutaj zrobię to po prostu nazwę kontenerki zgodnie z namingiem. Tutaj mamy kontener na formularz. To sobie nazwiemy forms form detail screen. A tu sobie nazwę to submit form, bo tam będą przyciski. Tak naprawdę powinniśmy się jeszcze zaopiekować jedną rzeczą. Akurat w tym przypadku naszej aplikacji nie ma to większego znaczenia, ale warto o to zadbać w kontekście zmiany zmiennych. To znaczy w momencie, gdy obecnie przechodzimy do nowego ekranu z listy czy do do widoku podglądu, to przekazujemy do tej zmiennej pewną wartość. Warto taką wartość wyczyścić za każdym razem, gdy opuszczamy ekran, w którym korzystamy z tej wartości. I to możemy zrobić na ustawieniach całego screena na wartości on hidden, czyli w momencie gdy on zostanie ukryty, to będziemy chcieli wyczyścić tą zmienną, żeby po prostu było czysto. To jest obiekt. Więc tak to powinno wyglądać. Dodatkowo jeszcze w przycisku powrotu zapomnieliśmy tutaj o znawigowaniu, czyli znawigujemy do list screen i mamy wszystko. Tak utworzoną aplikację publikujemy. W zasadzie możemy wrócić już do poziomu solucji. Widzimy, że powstała tutaj aplikacja. To co możemy zrobić to tak naprawdę udostępnić ją szerzej. A w przypadku naszych testów deweloperskich mamy tutaj przycisk play, którym możemy się już posługiwać. Możemy przesłać ten przycisk dla zainteresowanych. I tak wygląda nasza aplikacja. U góry pojawia nam się paseczek, który wynika tylko z tego, że działam po prostu na środowisku deweloperskim. Więc jak widać wszystko ładnie działa. Przechodzimy sobie między widokami. Możemy sobie działać. Dzisiejszy odcinek był trochę dłuższy od pozostałych. Natomiast w ciągu tych trzech odcinków zbudowaliśmy kompleksowe rozwiązanie do obsługi zgłoszeń IT. Możemy je oczywiście rozwijać i będziemy je rozwijali o kolejne poznane elementy. Natomiast na tą chwilę takie rozwiązanie można spokojnie oddać już do użytków organizacji. Można pokusić się potem o dodanie kolejnej warstwy uprawnień, czyli żeby użytkownicy mogli również logować się przez aplikację i robić tam zgłoszenia. możemy dodać jeszcze pełną pewną automatyzację z użyciem AI w przypadku otrzymywania zgłoszeń przez email, żeby już kategoryzowało na przykład taki priorytet czy dopasowywało odpowiednio takie zgłoszenia. Możemy to oczywiście udoskonalać. Natomiast w takiej wersji, która może już pasować pod dany proces w organizacji, mamy naprawdę gotowe działające rozwiązanie zrobione bardzo szybko. Dzięki wielkie za dzisiaj. Do usłyszenia.