Ćwiczenie — dodawanie źródła danych do aplikacji kanwy i projektowanie funkcjonalnych stron

  • 8 min

W usłudze Power Apps możesz połączyć dane z już istniejącą aplikacją lub aplikacją, którą tworzysz od podstaw. Aplikacja może łączyć się z programem SharePoint, usługą Microsoft Dataverse, usługą Salesforce, usługą OneDrive lub dowolnym innym źródłem danych.

Użyjemy programu SharePoint jako podstawowego źródła danych dla tej aplikacji. Możesz nawiązać połączenie z witryną programu SharePoint, aby automatycznie wygenerować aplikację na podstawie listy niestandardowej, utworzyć połączenie przed dodaniem danych do istniejącej aplikacji lub utworzyć aplikację od podstaw.

Tworzenie witryny programu SharePoint

  1. Zaloguj się do portalu SharePoint przy użyciu poświadczeń organizacji Microsoft.

  2. Wybierz pozycję + Utwórz witrynę na stronie początkowej SharePoint, aby utworzyć witrynę SharePoint.

    Zrzut ekranu przedstawiający tworzenie witryny na stronie początkowej programu SharePoint.

  3. Na stronie startowej programu SharePoint znajdziesz następujące informacje:

    • Wybierz typ witryny; wybór to witryna komunikacyjna lub witryna zespołu . Wybierz witrynę komunikacji.

    • Wprowadź odpowiednią nazwę witryny; na przykład Easy Sales.

    • Dodaj opis witryny w razie potrzeby (opcjonalnie).

    • Wybierz preferowany język z listy rozwijanej.

  4. Wybierz pozycję Zakończ, aby utworzyć witrynę programu SharePoint na potrzeby ładowania danych.

    Zrzut ekranu przedstawiający aktualizowanie szczegółów witryny.

Nowoczesna witryna programu SharePoint jest tworzona i gotowa do użycia w sekundach. Teraz możesz utworzyć listę, bibliotekę dokumentów, stronę itd. w nowo utworzonej witrynie.

Notatka

W przypadku wybrania witryny zespołu, zostanie również utworzona grupa Microsoft 365.

Tworzenie listy programu SharePoint

Lista programu SharePoint zbiera dane ze strukturą podobną do tabeli, arkusza kalkulacyjnego lub prostej bazy danych. Może zawierać wiele różnych typów informacji, takich jak liczby, tekst, załączniki, a nawet obrazy.

W przypadku naszej aplikacji Easy Sales utworzymy listę zawierającą szczegóły wszystkich kategorii produktów: Sofy, krzesła , Tablesi Carpets.

  1. W nowo utworzonej witrynie programu SharePoint pod nazwą Easy Saleswybierz menu rozwijane + Nowy, a następnie wybierz pozycję Lista, aby utworzyć swoją listę w programie SharePoint.

    Zrzut ekranu przedstawiający wybieranie listy.

  2. W oknie tworzenie listy wybierz pozycję Pusta lista, aby utworzyć listę programu SharePoint od podstaw.

    Zrzut ekranu przedstawiający wybieranie pustej listy.

  3. Skonfiguruj okienko tworzenie w następujący sposób:

    • Wprowadź odpowiednią nazwę listy; na przykład Easy Sales.

    • Wprowadź opis, jeśli jest to wymagane (opcjonalnie).

    • Pozostaw zaznaczone pole wyboru Pokaż w obszarze nawigacji witryny.

    • Wybierz pozycję Utwórz.

      zrzut ekranu przedstawiający okienko tworzenia.

Dodawanie danych do listy programu SharePoint

Po utworzeniu listy nadszedł czas, aby dodać dane. W tym miejscu "dane" oznaczają szczegóły każdego konkretnego produktu. Szczegóły produktu obejmują następujące informacje: Nazwa, Obraz, Cena, Wymiary, Waga, Kolor, Materiał podstawowy, Obszar, Wysokość i Obraz 3D produktu, który ma być wyświetlany w rzeczywistości mieszanej.

  1. Na utworzonej liście Easy sales wybierz + Dodaj kolumnę, aby dodać kolumnę określonego typu. Poniższa lista zawiera kolumny, które należy utworzyć, z nazwami i typami w tym formacie: Nazwa kolumny — typ kolumny.

    • Nazwa: pojedynczy wiersz tekstu
    • ImageLink: pojedynczy wiersz tekstu
    • Cena: pojedynczy wiersz tekstu
    • Wymiary: pojedynczy wiersz tekstu
    • Waga: pojedynczy wiersz tekstu
    • Color: jednolinijkowy tekst
    • PrimaryMaterial: pojedynczy wiersz tekstu
    • Wysokość: Liczba
    • głębokość: liczba
    • szerokość: liczba
    • Cena/cm2: Liczba
    • ProductCategory: pojedynczy wiersz tekstu
    • FileType: pojedynczy wiersz tekstu

    Wybierz typ kolumny z listy rozwijanej; na przykład wybierz pozycję Pojedynczy wiersz tekstu.

    Zrzut ekranu przedstawiający wybieranie pojedynczego wiersza tekstu.

    Wprowadź szczegóły kolumny na karcie Utwórz kolumnę i wybierz Zapisz.

    zrzut ekranu przedstawiający tworzenie kolumny.

    Powtórz tę samą procedurę dla pozostałych kolumn na powyższej liście.

    Notatka

    Po utworzeniu listy programu SharePoint zostanie utworzona domyślna kolumna Title, której nazwę można zmienić na Name.

  2. Po dodaniu kolumn musimy dodać rzeczywiste dane w tych kolumnach. Zacznij dodawać dane do kolumn, pobierając folder niestandardowy zawierający wszystkie szczegóły produktu dla wszystkich czterech list. Aby uzyskać dostęp do danych, wybierz poniższy link, wybierz przycisk Więcej akcji plików (...) w prawym górnym rogu strony, a następnie wybierz pozycję Pobierz.

    folder niestandardowy usługi Power Apps

  3. Wybierz pozycję + Nowy, aby dodać element, a następnie wypełnij wymagane szczegóły, jak podano w pobranym pliku programu Excel. Wybierz pozycję Zapisz, aby zapisać wprowadzone szczegóły.

    Zrzut ekranu przedstawiający wybieranie pozycji Nowy lub Edytuj w widoku siatki w celu dodania nowego elementu.

    Notatka

    Widok siatki umożliwia swobodne dodawanie informacji do różnych wierszy lub kolumn.

  4. Zacznij dodawać dane w odpowiednich kolumnach, jak pokazano na rysunku:

    Zrzut ekranu przedstawiający listę programu SharePoint z dodanymi szczegółami

    Notatka

    Jeśli chcesz dołączyć własne obrazy, możesz dodać linki do obrazów publicznych dostępnych w Internecie w kolumnie ImageLink. Linki do obrazów można uzyskać, klikając prawym przyciskiem myszy i wybierając opcję Kopiuj adres obrazu.

    Notatka

    Nie potrzebujesz wartości wysokości, głębokości i szerokości dla listy kategorii Carpet. Kategoria produktu przetworzy wartość obszaru zmierzoną podczas pomiaru w sesji MR i poda cenę dywanu na podstawie obliczonego obszaru. Dodaliśmy jednak kolumnę Price/cm2, aby ułatwić proces obliczania.

Tworzenie połączenia

Teraz, gdy wszystkie dane wymagane dla aplikacji są przechowywane na liście programu SharePoint, ustanowimy połączenie w usłudze Power Apps. Po nawiązaniu połączenia można łatwo uzyskać dostęp do danych programu SharePoint za pośrednictwem aplikacji.

  1. Aby rozpocząć tworzenie połączenia, zaloguj się do usługi Power Apps i wybierz pozycję Połączenia na pasku nawigacyjnym po lewej stronie. Następnie wybierz pozycję + Nowe połączenie w lewym górnym rogu.

  2. Wybierz programu SharePoint. Wybieramy programu SharePoint, ponieważ przechowujemy wymagane dane na listach programu SharePoint.

    Zrzut ekranu przedstawiający wybieranie programu SharePoint.

  3. Aby nawiązać połączenie z usługą SharePoint Online, wybierz pozycję Połącz bezpośrednio (usługi w chmurze), a następnie wybierz pozycję Utwórz, a następnie, jeśli zostanie wyświetlony monit, podaj poświadczenia.

    Zrzut ekranu przedstawiający wybieranie pozycji Utwórz.

  4. Połączenie jest tworzone i można utworzyć aplikację od podstaw.

    Notatka

    Nawet jeśli połączenie zostało utworzone, nadal można dodawać, edytować i usuwać dane przechowywane na liście programu SharePoint. Wszystkie zmiany zostaną odzwierciedlone w aplikacji za pośrednictwem połączenia.

Zacznijmy kompilować aplikację Easy Sales na podstawie danych programu SharePoint, a następnie dodajmy dane z innych źródeł, jeśli chcesz. Wykonując tę procedurę, będzie można zaprojektować niektóre strony główne aplikacji. Na przykład dowiesz się, jak zaprojektować ekran powitalny, stronę produktu i stronę listy produktów. Będziemy również uzyskiwać dostęp do danych przechowywanych na liście programu SharePoint za pośrednictwem kontrolki galerii usługi Power Apps.

Otwieranie pustej aplikacji

  1. Przejdź do strony głównej usługi Power Apps, a następnie wybierz opcję Utwórz w menu po lewej stronie. Wybierz pozycję Pusta aplikacja, a następnie wybierz pozycję Utwórz w sekcji Pusta aplikacja kanwy.

    Zrzut ekranu przedstawiający wybieranie aplikacji kanwy z pustego.

  2. Określ nazwę aplikacji; na przykład Easy-Sales. Wybierz Phone, a następnie wybierz Utwórz.

    Zrzut ekranu przedstawiający określanie nazwy aplikacji i wybieranie pozycji Utwórz.

    Program Power Apps Studio tworzy pustą aplikację dla telefonów.

    Notatka

    Chociaż możesz zaprojektować aplikację od podstaw dla różnych urządzeń, ten temat koncentruje się na projektowaniu aplikacji dla telefonów.

  3. Jeśli zostanie otwarte okno dialogowe Zapraszamy do Power Apps Studio, wybierz pozycję Pomiń.

    Zrzut ekranu przedstawiający wybieranie opcji pominięcia.

Nawiązywanie połączenia z danymi

Aby uwzględnić dane w aplikacji Power App, musisz połączyć się z danymi za pośrednictwem łączników w aplikacji. Ponieważ wszystkie dane są przechowywane na liście programu SharePoint, wybierzemy programu SharePoint jako jeden z łączników.

  1. Po lewej stronie w Power Apps Studio, wybierz opcję Dane.

  2. Po otwarciu okienka Dane wybierz przycisk Dodaj dane, aby nawiązać połączenie z danymi.

  3. W oknie Wybierz źródło danych rozwiń sekcję Łączniki i wybierz opcję SharePoint.

    Zrzut ekranu przedstawiający wybieranie opcji dodawania danych i programu SharePoint.

  4. W poprzednim ćwiczeniu utworzyliśmy już połączenie. Wybierz utworzone połączenie, aby dodać dane do aplikacji. Wybierz witrynę programu SharePoint utworzoną pod nazwą Easy Sales.

    Zrzut ekranu przedstawiający wybieranie pozycji Łatwa sprzedaż.

  5. Po wybraniu witryny Easy Sales SharePoint zostaną wyświetlone wszystkie listy utworzone w tej witrynie. Następnie wybierz listę programu SharePoint utworzoną dla aplikacji i kliknij pozycję Połącz.

    Zrzut ekranu przedstawiający wybieranie listy.

  6. Wszystkie wymagane dane są połączone i gotowe do użycia w aplikacji. Teraz możesz rozpocząć tworzenie aplikacji.

Utwórz ekran startowy

  1. Wybierz opcję widoku drzewa po lewej stronie Power Apps Studio. W programie Power Apps Studio powinien być już pusty ekran. Jeśli nie, na karcie Strona główna wybierz strzałkę w dół obok pozycji Nowy ekran, który otwiera listę typów ekranu. Następnie wybierz pozycję Puste, aby utworzyć pusty ekran.

    Zrzut ekranu przedstawiający tworzenie nowego ekranu.

  2. Zmień nazwę ekranu na ekran powitalny, klikając ikonę trzech kropek (...) znajdującą się obok nazwy ekranu, a następnie wybierz opcję Zmień nazwę.

    Zrzut ekranu przedstawiający zmianę nazwy ekranu.

  3. Wybierz nowo utworzony ekran, aby zmienić jego właściwości na karcie właściwości po prawej stronie ekranu.

  4. Aby dodać obraz do ekranu, wybierz listę rozwijaną obok właściwości Obraz tła. Wybierz pozycję + Dodaj plik obrazu, aby wybrać pobrany plik logo.

    Zrzut ekranu przedstawiający dodawanie łatwego logo sprzedaży.

  5. Ustaw położenie obrazu na Dopasuj, aby cały obraz mieścił się w określonym rozmiarze. Opcja Dopasuj skaluje obraz proporcjonalnie i nie przycina obrazu.

    Zrzut ekranu przedstawiający dodawanie logo Easy Sales do ekranu powitalnego.

  6. Na karcie Wstaw rozwiń listę rozwijaną Wejściowe i wybierz czasomierz . Następnie przeciągnij przycisk na ekranie i umieść go wszędzie tam, gdzie chcesz.

    Zrzut ekranu przedstawiający dodawanie czasomierza.

  7. Aby edytować niektóre właściwości czasomierza, możesz użyć listy rozwijanej właściwości w lewym górnym rogu lub użyć okienka właściwości . Ustaw następujące właściwości:

    • AutoStart: true

    • czas trwania: 2000

    • Visible: false

      Zrzut ekranu przedstawiający aktualizowanie właściwości czasomierza.

      Notatka

      Domyślnie czas trwania jest mierzony w milisekundach. Od 1 sekundy = 1000 milisekund, wprowadzamy wartość 2000 jako wartość czasu trwania.

  8. Chcemy, aby ekran powitalny był widoczny tylko przez dwie sekundy, a następnie przechodzi do strony głównej. Utwórz ekran Puste, tak jak w poprzednim kroku, i zmień jego nazwę na Strona Główna. Później wybierz przycisk czasomierza dodany do ekranu Splash i skonfiguruj właściwość OnTimerEnd . Zastąp false następującą zawartością:

    Navigate('Home Page',ScreenTransition.Fade)

    Zrzut ekranu przedstawiający konfigurowanie właściwości OnTimerEnd.

  9. Zapisz aplikację, przechodząc do File>Save. Następnie wybierz opcję Chmura i opcję Zapisz.

Tworzenie strony głównej

  1. Wybierz utworzoną wcześniej stronę główną. Aby wstawić cztery przyciski, przejdź do karty Wstaw i wybierz opcję Przycisk, aby dodać przyciski do ekranu. Dostosuj rozmiar i położenie tych przycisków zgodnie z potrzebami. Zmień ich nazwy na Sofas_button, Chairs_button, Tables_buttoni Carpets_button, odpowiednio.

    Zrzut ekranu przedstawiający dodawanie przycisków.

  2. Zmień tekst wyświetlany przycisków, aby wskazać kategorie produktów, takie jak sofy , krzesła, stoły i dywany.

    Zrzut ekranu przedstawiający edytowanie tekstu wyświetlanego.

  3. Użyjemy tych przycisków, aby przejść do listy produktów w różnych kategoriach. W tym celu należy odfiltrować produkty z listy programu SharePoint na podstawie kategorii produktów. Utwórz dwa nowe ekrany Puste i zmień ich nazwy na Produkty i Dywany.

    Zrzut ekranu przedstawiający dodawanie nowych ekranów.

  4. Wybierz nowo utworzony przycisk Sofas_button i skonfiguruj właściwość OnSelect. Po wybraniu przycisku należy przejść do strony listy produktów utworzonej w poprzednim kroku. Zastąp false następującym kodem:

    Navigate(Products,ScreenTransition.Cover, {ID:1});

    Zrzut ekranu przedstawiający nawigację na stronie z sofami

    Notatka

    Identyfikator jest zmienną kontekstową z przypisaną wartością. Ta wartość jest przekazywana do strony docelowej wymienionej w funkcji Navigate. Wartość przypisana do zmiennej filtruje produkty na podstawie kategorii produktów.

  5. Powtórz tę samą procedurę dla pozostałych trzech przycisków. Ponownie upewnij się, że w funkcji Navigate podajesz odpowiednie nazwy ekranów; na przykład, aby skonfigurować właściwość OnSelect przycisków Krzesła, Stołyi Dywany, użyj funkcji Navigate w następujący sposób:

    Navigate(Products,ScreenTransition.Cover, {ID:2});

    Navigate(Products,ScreenTransition.Cover, {ID:3});

    Navigate(Carpets,ScreenTransition.Cover)

    Napiwek

    Aby zapisać postęp, wybierz kartę Plik u góry i wybierz opcję Zapisz. Możesz również użyć Ctrl+S, aby zapisać postęp.

    Notatka

    Domyślna składnia funkcji Navigate to: Navigate(Screen [, Transition [, UpdateContextRecord]])

    • Ekran: wymagane. Ekran do wyświetlenia.
    • Przejście: Opcjonalne. Przejście wizualne między bieżącym a następnym ekranem. Wartość domyślna to Brak.
    • UpdateContextRecord: opcjonalne. Rekord zawierający nazwę co najmniej jednej kolumny i wartość dla każdej kolumny. Ten rekord aktualizuje zmienne kontekstowe nowego ekranu tak, jakby zostały przekazane do funkcji UpdateContext.

    Napiwek

    Aplikację można przetestować, naciskając F5 na klawiaturze lub klikając przycisk Odtwórz w prawym górnym rogu programu Power Apps Studio.

Teraz, gdy dodaliśmy kategorie produktów, wyświetlimy listę produktów w każdej kategorii. W usłudze Power Apps używamy kontrolki Galeria, aby wyświetlić rekord danych.

  1. Na ekranie Products, na karcie Wstaw, wybierz pozycję Galeria>Pionowa, aby dodać kontrolkę galerii do ekranu.

    Zrzut ekranu przedstawiający dodawanie galerii

  2. Zmień jego nazwę na Gallery_products. Na karcie właściwości okienka po lewej stronie skonfiguruj właściwość Items w następujący sposób:

    If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))

    Zrzut ekranu przedstawiający łączenie programu SharePoint

    Filtrujemy produkty przechowywane na liście SharePoint na podstawie kategorii produktów . Zmienne kontekstowe są używane do procesu filtrowania.

  3. Skonfiguruj właściwość polagalerii > w okienku właściwości , wybierając pozycję Edytuj :

    • Przypisz Price do nagłówka Subtitle1.

    • Przypisz tytuł do nagłówka tytuł1.

      Zrzut ekranu przedstawiający konfigurowanie pól na stronie produktów

    Podczas przypisywania powyższych pól zobaczysz, że dane są odzwierciedlane w galerii .

  4. Dostosuj rozmiar Gallery_products zgodnie z potrzebami. Aby dodać ImageLink do nagłówka Image1, wybierz Image w galerii i skonfiguruj właściwość Image na karcie Właściwość, dodając następujący wiersz kodu:

    ThisItem.ImageLink

    Zrzut ekranu przedstawiający konfigurowanie właściwości obrazu na stronie produktu

  5. Teraz wstawimy etykietę w górnej części ekranu, wybierając opcję Etykieta. Następnie dostosuj położenie, kolor i wyświetlanie tekstu, jak pokazano na rysunku:

    Zrzut ekranu przedstawiający dodawanie etykiety na stronie produktów

  6. Dodaj ikonę Wstecz na wcześniej dodaną etykietę, aby pomóc użytkownikowi w nawigacji do strony głównej. Aby dodać ikonę Wstecz, rozwiń listę rozwijaną Ikony i wybierz ikonę Wstecz.

    Zrzut ekranu przedstawiający dodawanie ikony

  7. Umieść poprawnie ikonę Wstecz i zmień jego kolor wyświetlania, jeśli jest to wymagane. Skonfiguruj jej właściwość OnSelect, dodając następujące elementy:

    Navigate('Home Page',ScreenTransition.Cover)

    Zrzut ekranu przedstawiający konfigurowanie właściwości OnSelect

  8. Wykonaj tę samą procedurę na stronie Dywany. Skonfiguruj właściwość Items galerii dodanej do strony Dywanów w następujący sposób:

    Filter('Easy Sales',ProductCategory = "Carpet")

    Zrzut ekranu przedstawiający wykonanie tej samej procedury dla strony dywanów

    Napiwek

    Aby zapisać postęp, kliknij kartę Plik u góry, a następnie wybierz opcję Zapisz. Możesz również użyć Ctrl+S, aby zapisać postęp.

Po zaimplementowaniu powyższych kroków poniżej przedstawiono sposób, w jaki aplikacja musi wyglądać. Aplikacja będzie zawierać doskonały ekran powitalny , stronę główną i spis produktów do przeglądania produktów.

pokaz aplikacji po nawiązaniu połączenia ze źródłem danych.