Rozdział 3: Tworzenie prototypu z małą ilością kodu

Uwaga

Rozdział 2 zawiera odwołanie do aplikacji mobilnej używanej przez pracowników serwisu i inżynierów terenowych oraz do aplikacji stacjonarnej używanej przez lokalnych pracowników. W poniższych rozdziałach skupiliśmy się na projektowaniu, wdrażaniu i stosowaniu aplikacji mobilnych zbudowanych w Power Apps. Aplikacje desktopowe zostawiamy jako ćwiczenie dla czytelnika.

Kiana jest sceptyczna co do rozwiązań niskokodowych i Power Apps. Jednak Kiana i Maria postanowiły razem utworzyć aplikację, aby pomóc pracownikom terenowym sprawdzić stany magazynowe (i w razie potrzeby zamówić części), zapytać bazę wiedzy i sprawdzić ich następny termin, kiedy są poza biurem, pracując w terenie. Kariusz i Maria planują skorzystać z tego doświadczenia w celu poznać sposób dodawania formantów i używania formuł w Power Apps.

Mimo że tworzenie wstępnego, niskokodowego prototypu to zwykle zadanie dewelopera obywatelskiego, Kiana z reguły decyduje się poświęcić uwagę na ten proces, aby poznać sposób tworzenia aplikacji. Kiana potrzebuje tych informacji, aby pomóc Marii zintegrować z rzeczywistymi źródłami danych, interfejsami API sieci Web i innymi wymaganymi usługami.

Pozycja 1: Zarządzanie zapasami w terenie

Początkowym celem Marii jest zbudowanie aplikacji canvas, która wyświetla listę części i umożliwia użytkownikowi przeglądanie szczegółów każdej z nich. Docelowo użytkownik powinien mieć również możliwość zamawiania części, jednak ta wstępna wersja aplikacji będzie jedynie prototypem i nie będzie jeszcze podłączona do back-endu. Po uzyskaniu opinii Caleba, technika terenowego potencjalnego klienta, Maria będzie pracować z Kianą nad integracją aplikacji kanwy z systemem magazynowym uruchomionym lokalnie.

Maria jest dobrze zaznajomiona z istniejącym systemem zarządzania zapasami i rozumie zawarte w nim informacje. Maria zaczyna od utworzenia skoroszytu programu Excel zawierającego tabele zawierające dane ze szczegółami dla niektórych przykładowych części. Pola w tabeli to Identyfikator, Nazwa, CategoryID, Cena, Przegląd, NumberInStock i Obraz (adres URL, który odwołuje się do obrazu części). Ten skoroszyt może służyć do tworzenia i testowania aplikacji kanwy, aby zapewnić poprawne wyświetlanie wymaganych danych. Maria przechowuje ten skoroszyt na koncie OneDrive o nazwie BoilerParts.xlsx.

Uwaga

Kopię tego skoroszytu można znaleźć w folderze Zasoby w repozytorium Git Informacje o tym przewodniku.

Jeśli jesteś projektantem relacyjnych baz danych, zauważysz, że skoroszyt Excela prezentuje zdenormalizowany widok danych. Na przykład w relacyjnej bazie danych identyfikator CategoryID będzie najprawdopodobniej identyfikatorem numerycznym zawierającym osobną tabelę zawierającą szczegółowe informacje o kategorii wraz z nazwą.

Uwaga

Adresy URL w kolumnie Obraz to obecnie tylko symbole zastępcze. W zakończonej aplikacji te adresy URL zostaną zastąpione adresami rzeczywistych plików obrazów.

Wykonaj te kroki, aby utworzyć aplikację z Power Apps.

1. Zaloguj się do usługi Power Apps.

2. Na stronie Głównej w obszarze Rozpocznij od danych wybierz opcję Excel Online.

   

3. Na stronie Połączenia wybierz opcję OneDrive dla Firm, a następnie wybierz opcję Utwórz.

   

4. Na stronie OneDrive dla Firm wybierz plik BoilerParts.xlsx.

   

5. Wybierz tabelę w pliku programu Excel (Maria utworzyła tabelę, używając domyślnej nazwy, Table1), a następnie wybierz opcję Połącz.

   

6. Poczekaj, aż Power Apps wygeneruje aplikację.

   

7. Po wygenerowaniu aplikacji zostanie wyświetlony ekran przeglądania, na którym będą wyświetlane pola CategoryID, Identyfikator i Obraz z każdego wiersza tabeli części w skoroszycie.

   

8. Obecnie wyświetlane pola nie są zbyt użyteczne, aby pomóc inżynierowi w zakresie wybierania produktu. W okienku wyświetlanym na ekranie przeglądania wybierz etykietę Wymiennik ciepła w pierwszym wierszu danych. Na pasku formuł wybierz właściwość Tekst z listy rozwijanej. Zmień wartość tej właściwości na ThisItem.Name. Tekst w pierwszym polu każdego wiersza zostanie przełączyć się w celu wyświetlenia nazwy części.

   Uwaga

   Na poniższym obrazie etykieta Wymiennik ciepła wyświetlana pierwotnie w formularzu zmieniła się na nazwę produktu 3,5 W/S grzejnik.

   

9. Powtórz poprzednią czynność w przypadku etykiet identyfikatorów i obrazów. W polu Identyfikator należy zmienić właściwość Tekst pola Identyfikator na CategoryID, a właściwość Tekst pola Obraz na Przegląd. Ekran przeglądania powinien wyglądać następująco: inżynier terenowy prawdopodobnie znajdzie użyteczne do wybierania części.

   

10. Funkcja wyszukiwania na ekranie przeglądania domyślnie korzysta z pól wybranych pierwotnie podczas generowania ekranu—w tym przypadku: CategoryID, Identyfikator i Obraz. Wyniki są sortowane według CategoryID. Należy przełączać się między polami Nazwa, CategoryID i Przegląd, a wyniki zostaną posortowane według Nazwy. Zaznacz formant BrowseGagiy1 w okienku widoku drzewa. Na liście rozwijanej po lewej stronie paska formuł wybierz właściwość Elementy. Przeciągnij dolny krawędź paska formuł w dół, aby formuła była w całości widoczna. Formuła zawiera następujące wyrażenie:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    

11. Zmień wyrażenie Wyszukiwanie, aby odwoływać się do pól Nazwa, CategoryID i Przegląd, używając następującego formuły:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    

12. Tytuł w nagłówku formularza nie jest pomocny, a domyślny motyw nie pasuje do korporacyjnego wyglądu i stylu VanArsdela. Na ekranie przeglądania wybierz etykietę Table1 i na pasku Formuły zmień właściwość etykiety Tekst na „Przeglądaj części” (należy w wartości uwzględnić cudzysłów).

13. Na pasku narzędzi wybierz opcję Motyw (może być konieczne rozwinięcie paska narzędzi, aby wyświetlić więcej elementów), a następnie wybierz motyw Las. Kolory i wygląd ekranu przeglądania zmienią się w celu dopasowania do motywu.

    

Bardziej użyteczny ekran Szczegółów

Utworzono podstawową aplikację i zmodyfikowaliśmy ekran przeglądania, aby wyświetlać pola, których inżynier może użyć do zidentyfikowania części. Aplikacja zawiera również ekran Szczegóły, na którym są widać wszystkie informacje z wybranej części. Pola na tym ekranie nie są obecnie wyświetlane w kolejności logicznej, dlatego należy zmienić ich kolejność. Możesz także usunąć pole identyfikatora z tego ekranu, ponieważ te informacje są dla inżyniera.

1. W okienku widoku drzewa przewiń w dół i wybierz DetailScreen1. Na tym ekranie są wyświetlane szczegółowe informacje o części wybranej przez użytkownika na ekranie przeglądania.

   

2. W nagłówku ekranu Szczegóły w środkowej okienku wybierz etykietę Table1. W prawym okienku na karcie Właściwości zmień właściwość Tekst na Szczegóły części.

   Uwaga

   W wielu przypadkach takie same wyniki można osiągnąć, używając paska formuł co okienka Właściwości. Jednak niektóre właściwości dostępne za pośrednictwem okienka Właściwości.

   

3. W okienku widoku drzewa pod DetailScreen1 wybierz DetailForm1. W prawym okienku na karcie Właściwości okienka po prawej stronie wybierz pozycję Edytuj pola obok Pola. W środkowej okienku zaznacz i przeciągnij pola w taki sposób, aby były wyświetlane w następującej kolejności od początku do dołu:

   • Nazwa/nazwisko
   • CategoryID
   • Omówienie
   • Cena
   • NumberInStock
   • Obraz
   • IDENTYFIKATOR

   

4. Wybierz pole Identyfikatora, wybierz wielokropek wyświetlany po prawej stronie pola, a następnie wybierz polecenie Usuń z wyświetlanego menu rozwijanego. Ta akcja powoduje usunięcie z formularza pola Identyfikatora.

   

5. W okienku widoku drzewa pod DetailForm1 wybierz CategoryID_DataCard1. Ten element to formant DataCard wyświetlacy nazwę pola (nazywanego kluczem) i jego wartość.

   

   W prawym okienku na karcie Zaawansowane wybierz Odblokuj, aby zmienić właściwości.. W sekcji Dane zmień pole DisplayName na "Kategoria" (uwzględnij cudzysłowy).

   Uwaga

   Podobnie jak w przypadku karty Właściwości, wiele właściwości na karcie Zaawansowane jest dostępnych za pośrednictwem paska formuł. Aby ustawić te właściwości, w razie preferencji można użyć paska formuł.

   

6. Powtórz poprzednią czynność, aby zmienić klucz NumberInStock_DataCard1 na "Number in Stock" (dołączyć cudzysłów).

7. W celu wyświetlenia danych jako wartości waluty należy dostosować formatowanie pola Cena. W okienku widoku drzewa pod DetailForm1 pod Price_DataCard1 wybierz DataCardValue7. To jest pole, w którym jest wyświetlana wartość pola Cena. W okienku DataCardValue7 po prawej stronie na karcie Zaawansowane zmień właściwość Tekst na Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Wyrażenie Parent.Default odwołuje się do elementu danych, z którym formant nadrzędny (DataCard) jest powiązany w tym przypadku—kolumną Cena. Funkcja Tekst formatuje tę wartość przy użyciu formatu określonego jako drugi argument. W tym przykładzie jest to waluta lokalna z dwoma miejscami dziesiętnym.

8. Na karcie danych obrazu powinien być wyświetlany obraz części, a nie adres URL pliku obrazu. W okienku widoku Drzewa w obszarze DetailForm1 w obszarze Obraz_DataCard1 wybierz opcję DataCardValue3, a następnie wybierz opcję Usuń, aby usunąć tę kontrolkę.

9. Wybierz Image_DataCard1. W lewym okienku nawigacji, wybierz + wstaw. W okienku Wstaw rozwiń opcję Media, a następnie wybierz opcję Obraz.

   

10. Powróć do okienka widoku drzewa i sprawdź, czy formant tekstu Image1 został dodany do kontrolki Obraz_DataCard1.

    

11. W widoku drzewa wybierz Image_DataCard1. W prawym okienku na karcie Zaawansowane zmień wysokość na 500, aby zapewnić miejsce na wyświetlaniu obrazu.

    

12. W widoku drzewa wybierz Image1. Określ następujące właściwości:

    • Obraz: Parent.Default
    • Położenie obrazu: ImagePosition.Fit
    • Szerokość: 550
    • Wysokość: 550

    Uwaga

    Wyświetlany obraz jest obecnie pusty, ponieważ adres URL w skoroszycie programu Excel jest tylko symbolem zastępczym. Po rozwiązaniu tego problemu i pobraniu rzeczywistego adresu URL aplikacja zostanie połączna z interfejsem API sieci Web w późniejszym rozdziale.

Aplikacja zawiera również ekran Edytowania, który umożliwia użytkownikowi zmianę informacji dotyczących części. Inżynier nie powinien mieć możliwości zmiany szczegółów części, tworzenia nowych części ani usuwania części z katalogu.

1. W widoku drzewa wybierz EditScreen1. Zaznacz przycisk wielokropka, a następnie wybierz Usuń, aby usunąć ekran.

   

2. W widoku drzewa wybierz DetailsScreen1. Należy zauważyć, że Power Apps Studio wyświetla komunikat o błędzie na tym ekranie. Ten błąd występuje, ponieważ DetailsScreen1 zawiera odwołanie do ekranu EditScreen1, który już nie istnieje.

3. W nagłówku DetailsScreen1 wybierz ikonę ołówka (IconEdit1). Właściwość OnSelect dla tego formantu zawiera wyrażenie EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Po wybraniu ikony Edycja to wyrażenie jest uruchamiane i próbuje przejść na ekran EditScreen1.

   

4. W okienku widoku drzewa wybierz opcję IconEdit1, a następnie wybierz opcję Usuń. Ta ikona nie jest już wymagana.

5. Wybierz opcję IconDelete1, a następnie wybierz opcję Usuń. Ta ikona służy do usuwania bieżącej części i nie jest to wymagane.

   

6. Zwróć uwagę, że tekst Szczegółów części zniknął z nagłówka ekranu i zamiast tego w Power Apps Studio jest wyświetlany komunikat o błędzie. Wynika to z tego, że jest obliczana szerokość formantu etykiety, w którym jest wyświetlany tekst. W widoku drzewa wybierz LblAppName2. Sprawdź właściwość Szerokość. Wartość tej właściwości jest wynikiem wyrażenia Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Zmień wyrażenie dla właściwości Szerokość na Parent.Width - Self.X. Błąd powinien zniknąć, a w nagłówku ekranu powinien się znaleźć tekst Szczegóły części.

8. W widoku drzewa wybierz BrowseScreen1. Na tym ekranie będzie również wyświetlany komunikat o błędzie. Ikona + na pasku narzędzi (IconNewItem1) umożliwia użytkownikowi dodanie nowej części. Właściwość OnSelect dla tej ikony odwołuje się do ekranu EditSelect1.

   

9. Wybierz opcję IconNewItem1, a następnie wybierz opcję Usuń. Jak dotychczas, znika tekst w nagłówku ekranu, a zostanie wyświetlony komunikat o błędzie z tego samego powodu.

10. W okienku widoku drzewa pod BrowseScreen1 wybierz LblAppName1. Zmodyfikuj wyrażenie właściwości Szerokość, usuwając odwołanie do obiektu IconNewItem1.Width. Nowe wyrażenie powinno mieć ikony Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Nadal występuje problem z nagłówkiem. Mimo że tekst przeglądania części został odświeżony, wyświetlany jest błąd, a ikony odświeżania i sortowania znajdują się w złym miejscu. W widoku drzewa wybierz IconSortUpDown1. Znajdź właściwość X dla tego formantu. Ta właściwość określa poziome położenie ikony w nagłówku. Jest on aktualnie obliczany na podstawie szerokości formantu IconNewItem1.

    

12. Zmień wyrażenie dla właściwości X na Parent.Width - Self.Width.

13. W widoku drzewa wybierz IconRefresh1. Zmień wyrażenie dla właściwości X na Parent.Width - IconSortUpDown1.Width - Self.Width. Te błędy powinny zniknąć.

Zapisz i przetestuj aplikację

Teraz możesz zapisać i przetestować aplikację.

1. Wybierz Plik > Zapisz jako.

2. W obszarze Zapisz jako wybierz nazwę Chmura, wprowadź nazwę VanArsdelApp, a następnie wybierz opcję Zapisz.

   

3. Wybierz strzałkę Wstecz, aby wrócić do ekranu głównego.

   

4. Wybierz opcję F5, aby wyświetlić podgląd aplikacji. Na stronie Przeglądanie części wybierz odpowiedni przycisk (>)prawo od dowolnej części. Zostanie wyświetlony ekran Szczegóły części.

   

5. Wybierz lewą chybę ( <) w nagłówku ekranu Szczegóły, aby powrócić do ekranu Przeglądania.

6. Na ekranie Przeglądaj części wprowadź tekst w polu Wyszukaj. Po wpisaniu elementy będą filtrowane tak, aby były wyświetlane tylko te, które zawierają pasujące teksty w polach Nazwa, CategoryID lub Przegląd.

   

7. Zamknij okno podglądu i wróć do okna Power Apps Studio.

Element 2: Aplikacja Baza wiedzy w terenie

Aby uzyskać dostęp do bazy wiedzy, Maria i Caleb (technik) przewidują prosty interfejs, w którym użytkownik wprowadza wyszukiwane hasło, a aplikacja wyświetla wszystkie artykuły bazy wiedzy, w których występuje ten termin. Maria wie, że ten proces obejmie wyszukiwanie funkcji Azure Cognitive Search, ale nie musi lub—nawet nie chce—zrozumieć, jak działa ten proces. Dlatego Maria zdecydowała się udostępnić podstawowy interfejs użytkownika i pracować z Kianą później, aby dodać rzeczywistą funkcjonalność.

Maria zdecydowała się utworzyć nowy ekran na podstawie szablonu Listy dostępnego w programie Power Apps Studio.

1. Na pasku narzędzi Power Apps Studio na ekranie głównym wybierz opcję Nowy ekran, a następnie wybierz opcję Lista.

   

2. W nagłówku ekranu wybierz etykietę, w którym jest wyświetlany tekst [Title]. Zmień właściwość Tekst na "Zapytanie" (należy dołączyć cudzysłowy).

   

3. W nagłówku ekranu wybierz znak plus ( +), a następnie wybierz opcję Usuń. Ta + ikona ma na celu umożliwienie użytkownikowi dodawania kolejnych elementów do listy. Baza wiedzy jest dostępna tylko do kwerendy, więc ta funkcja nie jest potrzebna.

   

   Należy pamiętać, że usunięcie tej ikony powoduje błąd w nagłówku z powodu sposobu obliczania lokalizacji i szerokości innych elementów. Wcześniej było widać to na ekranie zarządzania zapasami, a rozwiązanie jest takie same, jak w poniższych krokach.

4. W okienku widoku drzewa przewiń w dół do sekcji Screen1 i wybierz opcję LblAppName3. Zmień właściwość Szerokość na formułę Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. W widoku drzewa wybierz IconSortUpDown2. Zmodyfikuj właściwość X na formułę Parent.Width - IconSortUpDown2.Width.

6. W widoku drzewa wybierz IconRefresh2. Zmodyfikuj właściwość X na formułę Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Powinno to rozwiązać wszystkie błędy ekranem.

7. Wybierz Plik > Zapisz.

8. W polu Notatka o wersji wprowadź tekst Dodany interfejs użytkownika bazy wiedzy, a następnie wybierz opcję Zapisz.

9. Powróć do ekranu głównego i wybierz opcję F5 w celu wyświetleniu podglądu nowego ekranu. Powinien wyglądać jak na poniższym obrazku.

   

   Należy zauważyć, że wybór ikony > obok dowolnego fikcyjnego wpisy oznacza, że funkcja szczegółów nie działa obecnie. Ta funkcja zostanie rozwiązana później, gdy usługa Azure Cognitive Search zostanie zintegrowana z aplikacją.

10. Zamknij okno podglądu i wróć do okna Power Apps Studio.

Element 3: Planowanie w terenie i notatki

Maria we współpracy z Malikem, recepcjonistą biura, projektuje interfejs dla funkcji planowania pól i terminów w aplikacji. Malik udostępnia skoroszyt programu Excel z przykładowymi danymi, których Maria może użyć do utworzenia ekranu spotkań. Skoroszyt zawiera tabelę zawierającą następujące kolumny:

• ID (identyfikator spotkania)
• Identyfikator klienta (unikatowy identyfikator klienta)
• Nazwa klienta
• Adres klienta
• Szczegóły problemu (opis tekstu problemu, który występuje klienta)
• Numer kontaktowy
• Stan
• Termin wizyty
• Godzina terminu
• Notatki (opis tekstu z notatkami dodanymi przez inżyniera)
• Obraz (a w zdumieniu inżyniera: w warunku pracy po naprawie lub jako ilustracja w notatkach inżyniera)

Uwaga

Podobnie jak w przypadku danych zarządzania zapasami pól ten skoroszyt przedstawia zdeznoryzowany widok danych. W istniejącym systemie terminów te dane są przechowywane w oddzielnych tabelach przechowywanych w danych terminów i danych klientów.

Maria przechowuje ten plik na koncie OneDrive o nazwie Terminy.xlsx. Pamiętając, że wcześniej w skoroszycie była używana domyślna nazwa tabeli i tytuł trzeba było zmienić na różnych wygenerowanych ekranach, Maria zmienia nazwę tabeli w skoroszycie na Terminy.

Uwaga

Skoroszyt można znaleźć w folderze Zasoby w repozytorium Git Informacje o tym przewodniku.

Maria chce utworzyć sekcję terminów aplikacji bezpośrednio z pliku programu Excel. Maria zdecydowała się na podobne podejście do funkcji zarządzania zapasami terenowymi, ale tym razem inżynier będzie mógł tworzyć i edytować terminy.

Maria zdecydowała się na wstępne tworzenie ekranów terminów jako oddzielnej aplikacji. W ten sposób Maria może używać Power Apps Studio, by automatycznie generować wiele aplikacji. Power Apps Studio obecnie nie może tworzyć dodatkowych ekranów na podstawie połączenia danych w istniejącej aplikacji. Po utworzeniu i przetestowaniu ekranów Maria kopiuje je do magazynu pól i aplikacji w Bazie wiedzy.

Uwaga

Alternatywnym rozwiązaniem jest dodanie tabeli Terminy w pliku programu Excel jako drugiej źródło danych do istniejącej aplikacji i ręczne tworzenie ekranów dla terminów. Maria zdecydowała się na wygenerowanie nowych ekranów z skoroszytu i skopiowanie ekranów. Obecnie Maria jest bardziej zaznajomiona z pojęciami kopiowania i wklejania niż ręcznego tworzenie ekranów. Dowie się, jak tworzyć ekrany od podstaw w trakcie tworzenia tej aplikacji.

Aby utworzyć aplikację Terminy

1. W menu Power Apps Studio wybierz pozycję Plik.

   

2. W lewym okienku nawigacji, wybierz Nowe. W okienku głównym zaznacz pole OneDrive dla Firm — układ telefonu.

   

3. W okienku Połączenia wybierz Terminy.xlsx.

   

4. W pliku programu Excel wybierz tabelę Terminy, a następnie wybierz opcję Połącz.

   

5. Poczekaj, aż aplikacja zostanie wygenerowana. Gdy nowa aplikacja zostanie wyświetlona, będzie on zawierać ekran przeglądania, ekran Szczegóły oraz ekran edytowania w motywie domyślnym.

   

6. W okienku widoku drzewa w sekcji BrowseScreen1 w obszarze BrowseGallery1 wybierz opcję Image1, a następnie wybierz opcję Usuń. Na ekranie przeglądania powinny się po prostu znaleźć terminy z listą, a nie wszystkie związane z nimi obrazy.

   

   Należy pamiętać, że usunięcie formantu Image1 powoduje kilka błędów na ekranie, ponieważ szerokość i lokalizacja formantu Tytuł1 oba odwołują się do formantu Obraz. Te problemy należy rozwiązać w kolejnym kroku.

7. W okienku widoku drzewa pod BrowseGallery1 wybierz Title1. Zmień wartość w właściwości X na 16. Zmień formułę we właściwości Szerokość na Parent.TemplateWidth - 104. Powinno to rozwiązać wszystkie błędy ekranem.

8. W okienku widoku drzewa pod BrowseGallery1 wybierz Body1. W tym kontrolce są obecnie wyświetlane szczegóły telefonu kontaktu klienta. Zmień wartość we właściwości tekstowej na ThisItem.'Customer Name' (uwzględniaj pojedyncze cudzysłowy).

   

   Szczegółowe informacje na ekranie przeglądania będą teraz wyświetlane jako nazwa klienta.

9. W widoku drzewa wybierz BrowseGallery1. Używając paska formuł, należy sprawdzić wyrażenie we właściwości Elementy. Kontrolka wyszukuje terminy na pomocą daty, godzin i numeru kontaktu. Zmień tę formułę, aby wyszukać nazwę klienta, a nie numer kontaktu:

   SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
   

   Terminy są uporządkowane według daty i godziny (wyświetlane są pierwsze dwa pola).

10. W widoku drzewa wybierz IconNewItem1. Tylko lokalny mogą zarezerwować nowe terminy dla inżynierów i pracowników serwisu. Należy zauważyć, że ta akcja powoduje błędy w formularzu, ponieważ szerokość i położenie innych formantów w nagłówku odwołuje się do właśnie usuniętej ikony.

11. W widoku drzewa wybierz LblAppName1. Zmień formułę dla właściwości Szerokość. na Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. W widoku drzewa wybierz IconRefresh1. Zmień wyrażenie dla właściwości X na Parent.Width - IconSortUpDown1.Width - Self.Width.

13. W widoku drzewa wybierz iconSortUpDown1. Zmień wyrażenie dla właściwości X na Parent.Width - Self.Width.

14. W okienku widoku drzewa wybierz opcję BrowseScreen1, a następnie wybierz przycisk z wielokropek (...). W wyświetlonym menu rozwijaym wybierz polecenie Zmień nazwę ekranu i zmień nazwę ekranu na BrowseAppointments.

    

15. Używając tej samej technik, zmień nazwę formantu BrowseGallery1 na BrowseAppointmentsGallery.

Tak to kończy się ekran przeglądania.

Aby utworzyć ekran szczegółów

Teraz możesz zwrócić uwagę na ekran Szczegóły.

1. W okienku widoku drzewa przewiń w dół i wybierz DetailsScreen1. Można zobaczyć, że szczegóły są wyświetlane w porządku alfabetycznym według nazw pól, a niektóre użyteczne bity informacji—takie jak pole Notatki—nie są w ogóle wyświetlane.

   

2. W widoku drzewa wybierz DetailForm1. W prawym okienku na karcie Właściwości okienka po prawej stronie wybierz pozycję Edytuj pola obok Pola. W środkowej okienku wybierz każde z poniższych pól, a następnie wybierz opcję Usuń:

   • Termin wizyty
   • Godzina terminu
   • Identyfikator klienta
   • IDENTYFIKATOR

3. Wybierz opcję + Dodaj pole i dodaj następujące pola:

   • Notatki
   • Szczegóły problemu
   • Stan

   

4. Przeciągnij wszystkie pola, aby były wyświetlane w następującej kolejności od początku do dołu:

   • Nazwa klienta
   • Adres klienta
   • Numer kontaktowy
   • Szczegóły problemu
   • Stan
   • Notatki
   • Obraz

5. W widoku drzewa wybierz Notes_DataCard1. Zmień właściwość Wysokość na 320.

   

6. W widoku drzewa wybierz IconDelete1. Inżynierowie nie powinni mieć możliwości usuwania terminów z systemu.

7. Wybierz LblAppName2 i zmień właściwość Width na Parent.Width - Self.X - IconEdit1.Width.

8. Korzystając z opisanej wcześniej technik, zmień nazwę pliku DetailsScreen1 na AppointmentDetails.

Edycja ekranu edycji

Ostatnim ekranem, który należy sprawdzić, jest teraz ekran Edycja.

1. W widoku drzewa wybierz EditScreen1.

2. W okienku widoku drzewa w sekcji EditScreen1 wybierz opcję EditForm1. W prawym okienku na karcie Właściwości okienka po prawej stronie wybierz pozycję Edytuj pola obok Pola.

3. Usuwanie następujących pól:

   • Adres klienta
   • IDENTYFIKATOR
   • Identyfikator klienta
   • Termin wizyty
   • Godzina terminu

4. Dodawanie następujących pól:

   • Szczegóły problemu
   • Stan
   • Notatki

5. Przeciągnij wszystkie pola, aby były wyświetlane w następującej kolejności od początku do dołu:

   • Nazwa kontaktu
   • Numer klienta
   • Szczegóły problemu
   • Stan
   • Notatki
   • Obraz

6. Zaznacz pole Nazwa klienta i rozwiń je, aby wyświetlić jego właściwości. Zmień Typ kontrolki na Wyświetlanie tekstu. Ta zmiana powoduje, że formant jest tylko do odczytu. Warto zobaczyć nazwisko klienta na ekranie edycji, ale inżynier nie powinien mieć możliwości zmiany.

   

7. Zaznacz pole Numer kontaktowy klienta i rozwiń je, aby wyświetlić jego właściwości. Zmień Typ kontrolki na Wyświetlanie tekstu. To pole powinno być również tylko do odczytu.

8. Zaznacz pole Notatki, rozwiń je i zmień Typ kontrolki na Edytowanie tekstu wielo wiersza. To ustawienie umożliwia inżynierowi dodanie szczegółowych notatek mogącego obejmować kilka wierszy.

9. Zaznacz pole Stan, rozwiń je i zmień typ formantu na Edytowanie tekstu wielo Dozwolone wartości.

10. W widoku drzewa wybierz Status_DataCard5. W prawym okienku na karcie Właściwości wybierz Odblokuj, aby zmienić właściwości. Przewiń w dół do właściwości AllowedValues i zmień tekst na ["Stałe", "Part Ordered", "Nierozpoznane"] (obejmuje kwadratowe nawiasy). Inżynier terenowy może ustawić dla stanu tylko jedną z tych zdefiniowanych wartości.

    

11. W okienku widoku drzewa zmień nazwę edytowania EditIczne1 na EditAppointment.

Możesz teraz zapisać i przetestować aplikację.

1. Wybierz Plik > Zapisz jako.

2. W obszarze Zapisz jako wybierz nazwę Chmura, wprowadź nazwę VanArsdelAppointments, a następnie wybierz opcję Zapisz.

3. Wybierz strzałkę Wstecz na pasku Power Apps Studio, aby wrócić do ekranu głównego.

4. Wybierz opcję F5, aby wyświetlić podgląd aplikacji. Na stronie Terminy zaznacz > ikonę obok dowolnego terminu. Zostanie wyświetlony ekran Szczegóły terminu. W nagłówku wybierz opcję Edytuj, aby zaktualizować termin. Sprawdź następujące:

   • Pola nazwy klienta i numeru kontaktu są tylko do odczytu.
   • Pole stanu ogranicza się do wartości na liście rozwijanej.
   • Można wprowadzać notatki obejmujące kilka wierszy.
   • Plik ze zdjęciem można przekazać do pola obrazu.

   Uwaga

   Ulepszenie, które dodasz później, pozwoli zrobić obraz na telefonie z poziomu aplikacji i dodać go do pola obrazu.

   

Łączenie ekranów w jedną aplikację

Maria skompilowała dwie aplikacje, ale chce połączyć je w jedną. W tym celu Maria kopiuje ekrany dla aplikacji terminów do aplikacji zarządzanie zapasami terenowymi i w aplikacji Bazy wiedzy w następujący sposób:

1. Otwórz nowe okno przeglądarki i zaloguj się do Power Apps Studio, zmieniając dane swojego konta.

2. W lewym okienku wybierz pozycję Aplikacje, wybierz VanArdselApp, a następnie wybierz opcję Edytuj.

   

3. Na karcie Narzędzia główne wybierz pozycję Nowy ekran, a następnie wybierz pozycję Pusty. Ta akcja spowoduje dodanie nowego ekranu do aplikacji, do którego zostaną skopiowane formanty ekranu przeglądania aplikacji VanArsdelAppointments.

   

4. Nowy ekran będzie miał nazwę Screen2. W okienku widoku drzewa zmień nazwę edytowania na BrowseAppointments.

5. Powtórz poprzednią czynność jeszcze dwa razy, aby dodać kolejne dwa puste ekrany (Screen3 and Screen4).

6. Zmień nazwę Screen3 na AppointmentDetails i zmień nazwę screen4 na EditAppointment.

7. Na lewym pasku narzędzi Power Apps Studio wybierz ikonę Dane. W okienku Dane wybierz opcję Dodaj dane. Na liście rozwijanej wybierz źródło danych rozwijaną, w polu Wyszukaj wprowadź OneDrive, a następnie wybierz opcję OneDrive for Business..

   

8. W pliku Appointments.xlsxprogramu Excel wybierz tabelę Terminy, a następnie wybierz opcję Połącz.

9. Przejdź do okna przeglądarki, w których jest pokazana aplikacja VanArsdelAppointments.

10. Na pasku narzędzi wybierz opcję Motyw (może być konieczne rozwinięcie paska narzędzi, aby wyświetlić więcej elementów), a następnie wybierz motyw Las. Jest to ten sam motyw używany przez aplikację VanArsdel.

11. Na lewym pasku narzędzi wybierz ikonę widoku drzewa, wybierz ekran BrowseAppointments, a następnie wybierz klawisze Ctrl+A. Ta akcja wybiera wszystkie formanty na ekranie.

12. Aby skopiować te formanty do Schowka, wybierz klawisze Ctrl+C.

13. Przejdź do okna przeglądarki, w których jest pokazana aplikacja VanArsdelApp.

14. Na lewym pasku narzędzi wybierz ikonę widoku drzewa, wybierz ekran BrowseAppointments.

15. Użyj Ctrl + V, aby wkleić formanty na zaznaczonym ekranie.

    Uwaga

    Czasami nagłówek ekranu jest nieco zbyt niskie. Aby rozwiązać ten problem, należy wybrać IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1, i RectQuickActionBar1_1 w okienku widoku drzewa (przytrzymać klawisz Shift podczas klikania w celu zaznaczania kilku formantów jednocześnie), a następnie przenieść je w okienku widoku projektu za pomocą myszy lub strzałek.

16. Przejdź wstecz do okna przeglądarki, w którym jest pokazana aplikacja VanArsdelAppointments, a następnie wybierz i skopiuj formanty z ekranu AppointmentDetails do schowka (Ctrl+A , a następnie Ctrl+C).

17. Wróć do okna przeglądarki, w których jest pokazana aplikacja VanArsdelApp, wybierz ekran AppointmentDetails, a następnie wklej formanty (Ctrl+V). W razie potrzeby dostosuj pozycję formantów w nagłówku ekranu.

    Uwaga

    Zobaczysz komunikat o błędzie zgłaszany w nagłówku ekranu AppointmentDetails. Ten błąd występuje, ponieważ formanty odwołania do ekranu w ekranie EditAppointment, które nie zostały jeszcze skopiowane. Następne kroki powinny rozwiązać ten błąd.

18. Przejdź wstecz do okna przeglądarki, w którym jest pokazana aplikacja VanArsdelAppointments, a następnie wybierz i skopiuj formanty z ekranu EditAppointment do schowka.

19. Wróć do okna przeglądarki, w których jest pokazana aplikacja VanArsdelApp, wybierz ekran EditAppointment, a następnie wklej formanty. W razie potrzeby ponownie przenieś formanty w nagłówku ekranu.

20. W okienku widoku Drzewo wybierz ekran AppointmentDetails i sprawdź, czy podany wcześniej błąd zniknął.

21. W widoku drzewa wybierz BrowseScreen1. Zmień nazwę tego ekranu na BrowseParts.

22. Zmień nazwę ekranu DetailsScreen1 na PartDetails.

23. Zmień nazwę ekranu Screen1 na Baza wiedzy.

    Uwaga

    Dobrym rozwiązaniem jest zmiana nazw ekranów w celu odzwierciedlenia ich funkcji, a nie używania domyślnych nazw generowanych przez użytkowników Power Apps Studio, zwłaszcza jeśli aplikacja zawiera kilka ekranów. Może to pomóc w uniknięciu nieporozumień w późniejszym czasie, jeśli aplikacja zostanie zmodyfikowana przez innego dewelopera.

Dodawanie ekranu głównego do aplikacji

Ostatnim etapem jest dodanie do aplikacji ekranu głównego. Ekran główny umożliwi inżynierowi przechodzenie między różnymi częściami aplikacji (zarządzanie zapasami, bazą wiedzy i terminami).

1. W VanArsdelApp na pasku narzędzi wybierz opcję Nowy ekran, a następnie wybierz opcję Puste.

2. W okienku widoku Drzewa zmień nazwę Screen2 na Home.

3. Na pasku narzędzi wybierz Wstaw. Na liście formantów rozwiń pozycję Multimedia, a następnie wybierz opcję Obraz. Kontrolka zostanie dodany do ekranu.

   

4. Ustaw pozycję X formantu na 16, a Y na 22. Zmień szerokość na 605, a wysokość na 127. Zmień pozycję Obraz na Wypełnij.

   

5. Na karcie Właściwości na liście rozwijanej Obraz należy wybrać opcję + Dodać plik obrazu, a następnie przekazać do formantu obraz VanArsdelLogo.png.

   Uwaga

   Obraz można znaleźć w folderze Zasoby w repozytorium Git Informacje o tym przewodniku.

   

6. Na liście formantów dodaj cztery formanty etykiet tekstowych do formularza i umieść je w taki sposób, aby były kumulowane pod logo Tych elementów.

   

7. Wybierz formant etykiety tekstu najwyższego. W prawym okienku na karcie Właściwości zmień właściwość Tekst na Nowy termin. Ustaw rozmiar czcionki na 30 i użyj s wyboru kolorów w celu ustawienia koloru zielonego (zgodnego z logo).

   

8. Wybierz f drugiormant etykiety tekstu najwyższego. Zmień wartość we właściwości tekstowej na First(Appointments).'Customer Name' (uwzględniaj pojedyncze cudzysłowy). Ta formuła pobiera nazwę klienta z pierwszego wiersza w tabeli terminów.

   

   Uwaga

   Obecnie ta formuła działa tylko jako symbol zastępczy. Etykieta zostanie zmodyfikowana później, aby pobrać następny termin dla inżyniera, zamiast zawsze wyświetlać pierwszy.

9. Wybierz trzeci formant Etykieta tekstu, a następnie ustaw właściwość Text na First(Appointments).'Appointment Date'.

10. Wybierz właściwość Text czwartej etykiety, a następnie ustaw właściwość na First(Appointments).'Appointment Time'. Ustaw właściwość rozmiar czcionki na 30.

11. Z listy formantów dodaj formant Prostokąt. Ustaw następujące właściwości kontrolki:

    • Tryb wyświetlania: Widok
    • X: 0
    • Y: 632
    • Szerokość: 635
    • Wysokość: 1

    Ten formant działa jako separator graficzny po środku ekranu.

12. Dodaj trzy formanty przycisków do ekranu, rozmieszczone w pionowych odstępach i równomiernie pod separatorem. Dla przycisku Tekst dla górnego przycisku ustaw wartość Terminy, właściwość Tekst środkowej przycisku na Części, a we właściwości Tekst dla dolnej części przycisku KnowledgeBase.

    

13. Wybierz przycisk Terminy. Zmień wyrażenie w akcji OnSelect na formułę Navigate(BrowseAppointments, ScreenTransition.Fade). Ta akcja powoduje wyświetlenie na ekranie terminów, gdy użytkownik wybierze przycisk.

    

14. Ustaw akcję OnSelect dla przycisku Części na wartość Navigate(BrowseParts, ScreenTransition.Fade).

15. Ustaw akcję OnSelect dla przycisku Knowledgebase na wartość Navigate(Knowledgebase, ScreenTransition.Fade).

Oprócz przechodzenia z ekranu głównego na inne ekrany w systemie ekrany Terminy, Części i Baza wiedzy muszą umożliwiać użytkownikowi powrót do ekranu głównego . Maria zdecydowała się dodać do tych ekranów przyciski wstecz.

1. W widoku drzewa wybierz BrowseParts.

2. Zaznacz formant RectQuickActionBar1, aby nadać mu fokus.

3. Wybierz menu Wstaw i wybierz ikonę Dodaj. Przenieś ikonę na lewo od formantu RectQuickActionBar1. Należy pamiętać, że ikona będzie stanowiła część etykiety przeglądania części.

   

4. W menu widoku drzewa zmień nazwę formantu nowej ikony na IconReturn1.

5. Zmień wyrażenie w akcji OnSelect na formułę Back(BrowseAppointments, ScreenTransition.Fade). Funkcja Wstecz powoduje przejście użytkownika do poprzedniego ekranu, na który był odwiedzany.

6. Na karcie Właściwości zmień właściwość Ikona na < Left.

7. W nagłówku ekranu wybierz etykietę Przeglądaj części. Zmień wartość X w właściwości IconReturn1.Width + 20. Etykieta części przeglądania nie powinna już być częściowo przechowana.

   

8. W trakcie procesu opisanego w krokach 16–22 dodaj ikonę o nazwie IconReturn2 do formantu RectQuickActionBar3 na ekranie bazy wiedzy.

9. Podobnie dodaj ikonę o nazwie IconReometr3 do formantu RectQuickActionBar1_1 na ekranie BrowseAppointments.

10. W widoku drzewa wybierz Aplikacja. Zmień właściwość StartScreen na wyrażenie Strona główna. Ta akcja zapewnia, że Strona główna jest wyświetlane przy każdym uruchamiania aplikacji:

    

    Uwaga

    Jeśli nie określisz, który ekran ma być wyświetlany podczas uruchamiania aplikacji, zostanie użyty ekran wyświetlany u góry okienka widoku drzewa. Aby przenieść ekran na początek listy, kliknij go prawym przyciskiem myszy w okienku widoku drzewa i wybierz polecenie Przenieś w górę, aż stanie się u góry.

Na koniec możesz przetestować aplikację.

1. Wybierz Plik > Zapisz. W polu Notatki o wersji wprowadź pełną wersję z ekranem głównym i wybierz opcję Zapisz.

2. Wybierz strzałkę wstecz, aby powrócić do ekranu głównego, a następnie wybierz opcję F5, aby uruchomić aplikację.

3. Sprawdź, czy zostanie wyświetlony ekran główny aplikacji.

4. Wybierz Terminy. Zostanie wyświetlony ekran terminów.

5. Wybierz strzałkę Wstecz, aby wrócić do ekranu głównego.

6. Wybierz Części. Przeglądarka części powinna zostać wyświetlone.

7. Wybierz strzałkę Wstecz, aby wrócić do ekranu głównego.

8. Wybierz pozycję Baza wiedzy. Zostanie wyświetlony ekran zapytania z bazy wiedzy.

9. Wybierz strzałkę Wstecz, aby wrócić do ekranu głównego.

10. Zamknij okno podglądu i wróć do okna Power Apps Studio.

Prototypowa aplikacja została ukończona.

Poprzedni Następny