Tworzenie aplikacji kanwy do zarządzania projektami

Uwaga

Ten artykuł jest częścią serii samouczków dotyczących używania usług Power Apps, Power Automate i Power BI razem z usługą SharePoint Online. Najpierw zapoznaj się z wprowadzeniem do tej serii, aby uzyskać ogólny obraz oraz powiązane pliki do pobrania.

W tym zadaniu będziemy kompilować aplikację kanwy od podstaw. Ta aplikacja umożliwia użytkownikowi przypisywanie menedżera do projektów i aktualizowanie szczegółów projektu. Zobaczysz niektóre z tych samych kontrolek i formuł, które zostały użyte w pierwszej aplikacji, ale tym razem utworzysz większą część aplikacji samodzielnie. Proces jest bardziej złożony, ale też nauczysz się więcej, więc uważamy to za sprawiedliwe podejście.

Krótki przegląd terminologii programu Power Apps Studio

Program Power Apps Studio ma trzy okienka oraz wstążkę, co sprawia, że tworzenie aplikacji odbywa się podobnie jak tworzenie pokazu slajdów w programie PowerPoint:

  1. Lewy pasek nawigacyjny, który pokazuje hierarchiczny widok wszystkich ekranów i kontrolek aplikacji, a także miniatur ekranów
  2. Okienko środkowe zawierające ekran aplikacji, w którym pracujesz
  3. Okienko po prawej stronie, w którym określane są opcje, takie jak układ i źródła danych
  4. Lista rozwijana Właściwość służąca do wybierania właściwości, do których stosowane są formuły
  5. Pasek formuły, w którym dodawane są formuły (jak w programie Excel) określające zachowanie aplikacji
  6. Wstążka służąca do dodawania kontrolek i dostosowywania elementów projektu

Power Apps Studio.

Krok 1. Tworzenie ekranów

Po zakończeniu przeglądu zajmijmy się tworzeniem aplikacji.

Tworzenie aplikacji

Utwórz pustą aplikację kanwy o nazwie „Aplikacja zarządzania projektem” Telefon.

Dodawanie czterech ekranów do aplikacji

W tym kroku utworzymy cztery puste ekrany dla aplikacji. Użyjemy różnych układów ekranów w zależności od przeznaczenia ekranu. W kolejnych krokach będziemy dodawać elementy do tych ekranów.

Ekran Przeznaczenie
SelectTask Ekran powitalny; przechodzenie do innych ekranów
AssignManager Przypisywanie menedżera do zatwierdzonego projektu
ViewProjects Wyświetlanie listy projektów z podsumowaniem
UpdateDetails Wyświetlanie i aktualizowanie szczegółów projektu
  1. Na karcie Narzędzia główne kliknij lub naciśnij przycisk Nowy ekran, a następnie wybierz opcję Ekran przewijany.

    Ekran przewijany.

  2. Zmień nazwę ekranu na SelectTask.

    Zmiana nazwy ekranu.

  3. Utwórz dodatkowe ekrany i zmień ich nazwy:

    1. Kliknij lub naciśnij pozycję Nowy ekran, a następnie wybierz polecenie Ekran przewijany. Zmień nazwę ekranu na AssignManager.
    2. Kliknij lub naciśnij pozycję Nowy ekran, a następnie wybierz polecenie Ekran listy. Zmień nazwę ekranu na ViewProjects.
    3. Kliknij lub naciśnij pozycję Nowy ekran, a następnie wybierz polecenie Ekran formularza. Zmień nazwę ekranu na UpdateDetails.
  4. Wybierz wielokropek (. . .) obok ekranu Screen1, a następnie kliknij lub naciśnij opcję Usuń.

    Usuwanie ekranu.

Aplikacja powinna teraz wyglądać tak, jak na poniższej ilustracji.

Wszystkie ekrany aplikacji.

Krok 2: Połącz się z listą utworzoną za pomocą list Microsoft

W tym kroku nawiążemy połączenie z listą Product Details. Używamy tylko jednej listy w tej aplikacji, ale z łatwością możesz nawiązać połączenie z obiema listami, jeśli chcesz rozszerzyć aplikację.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran SelectTask.

  2. W okienku po prawej stronie kliknij lub naciśnij pozycję Dodaj źródło danych.

    Łączenie z danymi.

  3. Kliknij lub naciśnij pozycję Nowe połączenie.

    Nowe połączenie.

  4. Kliknij lub naciśnij SharePoint.

    Połączenie SharePoint.

  5. Wybierz opcję Połącz bezpośrednio (usługi w chmurze), a następnie kliknij lub naciśnij pozycję Utwórz.

    Połącz bezpośrednio (usługi w chmurze).

  6. Wprowadź adres URL programu SharePoint, a następnie kliknij lub naciśnij polecenie Przejdź.

    Adres URL programu SharePoint dla połączenia.

  7. Wybierz listę Project Details, a następnie kliknij lub naciśnij pozycję Połącz.

    Wybieranie listy Project Details.

    Karta Źródła danych w okienku po prawej stronie pokazuje teraz utworzone połączenie.

    Karta Źródła danych.

Krok 3. Tworzenie ekranu SelectTask

W tym kroku zapewnimy sposób przechodzenia do innych ekranów w aplikacji — pracując z niektórymi kontrolkami, formułami i opcjami formatowania zapewnianymi przez usługę Power Apps.

Aktualizacja tytułu i wstawianie tekstu wprowadzającego

  1. Na lewym pasku nawigacyjnym wybierz ekran SelectTask.

  2. W środkowym okienku wybierz domyślny element [Tytuł], a następnie na pasku formuły zaktualizuj właściwość Text na „Zarządzanie projektami Contoso”.

    Właściwość Text na pasku formuły.

  3. Na karcie Wstawianie kliknij lub naciśnij pozycję Etykieta, a następnie przeciągnij etykietę w dół pod górny nagłówek.

    Dodawanie etykiety.

  4. Na pasku formuły ustaw następujące właściwości dla etykiety:

    • Właściwość Color = DarkGray

    • Właściwość Size = 18

    • Właściwość Text = „Kliknij lub naciśnij zadanie, aby kontynuować...”

      Aktualizowanie tekstu etykiety.

Dodawanie dwóch przycisków nawigacji

  1. Na karcie Wstawianie kliknij lub naciśnij pozycję Przycisk, a następnie przeciągnij przycisk pod etykietę.

    Przycisk Dodaj.

  2. Na pasku formuły ustaw następujące właściwości dla przycisku:

    • Właściwość OnSelect = Navigate(AssignManager, Fade). Po uruchomieniu aplikacji i kliknięciu tego przycisku można przejść do drugiego ekranu w aplikacji z zanikaniem pomiędzy ekranami.

    • Właściwość Text = „Przypisz menedżera”

  3. Zmień rozmiar przycisku, aby pomieścić tekst.

    Przycisk Zmiana rozmiaru.

  4. Wstaw kolejny przycisk z następującymi właściwościami:

    • Właściwość OnSelect = Navigate(ViewProjects, Fade).

    • Właściwość Text = „Aktualizuj szczegóły”

      Aktualizowanie tekstu przycisku.

      Uwaga

      Ten przycisk ma etykietę Aktualizuj szczegóły, ale najpierw należy przejść do ekranu ViewProjects, aby wybrać projekt do zaktualizowania.

Uruchom aplikację

Aplikacja jeszcze nie robi zbyt dużo, ale jeśli chcesz, możesz ją uruchomić:

  1. Kliknij lub naciśnij ekran SelectTask (aplikacja zawsze uruchamia się od wybranego ekranu w trybie podglądu w programie Power Apps Studio).

  2. Kliknij lub naciśnij Ikona uruchamiania aplikacji. w prawym górnym rogu, aby uruchomić aplikację.

  3. Kliknij lub naciśnij jeden z przycisków, aby przejść do kolejnego ekranu.

  4. Kliknij lub naciśnij Ikona zamykania podglądu aplikacji. w prawym górnym rogu, aby zamknąć aplikację.

Krok 4. Tworzenie ekranu AssignManager

W tym kroku użyjemy galerii do wyświetlenia wszystkich projektów, które zostały zatwierdzone, ale jeszcze nie mają menedżera. Dodamy inne kontrolki umożliwiające przypisanie menedżera.

Uwaga

Później utworzymy w aplikacji stronę, która umożliwia edytowanie wszystkich pól projektu (w tym pola menedżera), ale pomyśleliśmy, że nieźle będzie też utworzyć taki ekran.

  1. Zapisz zmiany wprowadzone do tej pory.

  2. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran AssignManager.

Aktualizacja tytułu i wstawianie tekstu wprowadzającego

  1. Zmień wartość [Tytuł] na Przypisywanie menedżera.

  2. Dodaj etykietę o następujących właściwościach:

    • Właściwość Color = DarkGray

    • Właściwość Size = 18

    • Właściwość Text = „Wybierz projekt, a następnie przypisz menedżera”

      Układ przypisywania menedżera.

Dodawanie strzałki wstecz umożliwiającej powrót do ekranu SelectTask

  1. Kliknij lub naciśnij niebieski pasek u góry ekranu.

  2. Na karcie Wstawianie kliknij lub naciśnij pozycję Ikony, a następnie kliknij lub naciśnij pozycję Lewa.

    Wstawianie strzałki w lewo.

  3. Przenieś strzałkę na lewą stronę niebieskiego paska i ustaw następujące właściwości:

    • Właściwość Color = White

    • Właściwość Height = 40

    • Właściwość OnSelect = Navigate(SelectTask, Fade)

    • Właściwość Width = 40

      Dodawanie przycisku Wstecz.

  1. Na karcie Wstawianie kliknij lub naciśnij pozycję Galeria, a następnie wybierz opcję Pionowa.

    Dodaj pionową galerię.

  2. Wybierz opcję Tytuł, podtytuł i treść z menu Układ w okienku po prawej stronie.

    Zmienianie układu galerii.

    Galeria ma teraz odpowiedni układ, ale nadal zawiera domyślny tekst przykładowy. Zajmiemy się tym teraz.

    Galeria z tekstem domyślnym.

  3. Ustaw następujące właściwości galerii:

    • Właściwość BorderThickness = 1

    • Właściwość BorderStyle = Dotted

    • Właściwość Items = Filter('Project Details', PMAssigned="Unassigned"). W galerii są uwzględniane wyłącznie projekty bez przypisanego menedżera.

      Galeria z tekstem z listy.

  4. W okienku po prawej stronie zaktualizuj pola w taki sposób, aby były zgodne z następującą listą:

    • Data zatwierdzenia

    • Status

    • Stanowisko

      Galeria.

  5. Zmień rozmiar etykiet w galerii zgodnie z potrzebami i usuń strzałkę z pierwszego elementu galerii (nie musimy przechodzić do żadnego miejsca z tej galerii).

    Usuwanie ikony strzałki.

    Ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.

    Sformatowana galeria.

Zmiana koloru elementu w przypadku jego zaznaczenia

  1. Wybierz galerię, a następnie ustaw właściwość TemplateFill na If (ThisItem.IsSelected=true, Orange, White).

  2. Wybierz element w galerii. Ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.

    Galeria z wybranym elementem.

Dodawanie etykiety, tekstu i przycisku OK umożliwiającego przesłanie przydziałów menedżera

  1. Kliknij lub naciśnij poza galerią, z którą pracowano.

  2. Na karcie Wstawianie kliknij lub naciśnij pozycję Etykieta. Przeciągnij etykietę pod galerię po lewej stronie. Ustaw następujące właściwości etykiety:

    • Właściwość Size = 20

    • Właściwość Text = „Menedżer:”

    Dodawanie etykiety menedżera.

  3. Na karcie Wstawianie kliknij lub naciśnij pozycję Tekst, a następnie wybierz opcję Wprowadzanie tekstu. Przeciągnij wprowadzony tekst na środek poniżej galerii. Ustaw następujące właściwości listy rozwijanej:

    • Właściwość Default = „”

    • Właściwość Height = 60

    • Właściwość Size = 20

    • Właściwość Width = 250

    Dodawanie kontrolki wprowadzania tekstu.

  4. Na karcie Wstawianie kliknij lub naciśnij pozycję Przycisk. Przeciągnij przycisk pod galerię po prawej stronie. Ustaw następujące właściwości przycisku:

    • Właściwość Height = 60

    • Właściwość OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Aby uzyskać więcej informacji, zobacz Formuła — szczegółowe omówienie.

    • Ta formuła aktualizuje listę Szczegóły projektu, ustawiając wartość dla pola PMAssigned.

    • Właściwość Size = 20

    • Właściwość Text = „OK”

    • Właściwość Width = 80

    Dodawanie przycisku OK.

Ukończony ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.

Ukończony ekran przypisywania menedżera.

Krok 5. Tworzenie ekranu ViewProjects

W tym kroku zmienimy właściwości galerii na ekranie ViewProjects. Ta galeria wyświetla elementy z listy Project Details. Na tym ekranie należy wybrać element, a następnie należy edytować szczegóły na ekranie UpdateDetails.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran ViewProjects.

  2. Zmień wartość [Tytuł] na „Przeglądanie projektów”.

  3. Na lewym pasku nawigacyjnym kliknij lub naciśnij pozycję BrowserGallery1 w sekcji ViewProjects.

  4. Wybierz opcję Tytuł, podtytuł i treść z menu Układ w okienku po prawej stronie.

    Zmienianie układu galerii.

    Galeria ma teraz odpowiedni układ i zawiera domyślny tekst przykładowy.

    Galeria z właściwym układem.

  5. Wybierz przycisk odświeżenia (Ikona odświeżenia.) i ustaw jego właściwość OnSelect na wartość Refresh('Project Details').

  6. Wybierz przycisk nowego elementu (Ikona dodawania nowego elementu.) i ustaw jego właściwość OnSelect na wartość NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Dodawanie strzałki wstecz umożliwiającej powrót do ekranu SelectTask

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran AssignManager.

  2. Wybierz strzałkę wstecz dodaną w tym miejscu i skopiuj ją.

  3. Wklej strzałkę na ekranie ViewProjects i umieść ją po lewej stronie przycisku odświeżania.

    Przycisk Wstecz.

    Wszystkie właściwości również zostaną skopiowane, w tym właściwość OnSelect o wartości Navigate(SelectTask, Fade).

  1. Wybierz galerię BrowseGallery1 i ustaw właściwość Items galerii na wartość SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Spowoduje to ustawienie źródła danych galerii na listę Project Details i użycie pola Title do wyszukiwania i sortowania.

  2. Wybierz ikonę strzałki Szczegóły. I ustawić właściwość OnSelect na wartość Navigate(UpdateDetails, None).

     Galeria ekranu Przeglądanie projektów — wybrany pierwszy element.

  3. W okienku po prawej stronie zaktualizuj pola w taki sposób, aby były zgodne z następującą listą:

    • Status

    • PMAssigned

    • Stanowisko

      Pola galerii.

      Ukończony ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.

      Ukończony ekran Przeglądanie projektów.

Krok 6. Tworzenie ekranu UpdateDetails

W tym kroku połączymy formularz edycji na ekranie UpdateDetails z naszym źródłem danych, a następnie wprowadzimy pewne zmiany we właściwościach i polach. Na tym ekranie edytuje się szczegóły projektu wybranego na ekranie Przeglądanie projektów.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran UpdateDetails.

  2. Zmień wartość [Tytuł] na „Aktualizacja szczegółów”.

  3. Na lewym pasku nawigacyjnym kliknij lub naciśnij pozycję EditForm1 w sekcji UpdateDetails.

  4. Ustaw następujące właściwości formularza:

    • Właściwość DataSource = „Project Details”

    • Właściwość Item = BrowseGallery1.Selected

  5. Przy wybranym formularzu w okienku po prawej stronie kliknij lub naciśnij pola wyboru dla następujących pól w podanej kolejności:

    • Tytuł

    • PMAssigned

    • Stan

    • ProjectedStartDate

    • ProjectedEndDate

    • ProjectedDays

    • ActualDays

      Edycja pól formularza.

  6. Wybierz przycisk anulowania (Ikona anulowania.) i ustaw jego właściwość OnSelect na wartość ResetForm(EditForm1); Back().

  7. Wybierz przycisk Zapisz przycisk Automatyczne zapisywanie. I zapoznaj się z formułą OnSelectSubmitForm(EditForm1). Ponieważ używamy kontrolki Formularz edycji, możemy użyć formuły Submit() zamiast Patch(), której używaliśmy poprzednio.

Ukończony ekran powinien wyglądać teraz tak, jak na poniższej ilustracji (jeśli pola są puste, upewnij się, że wybrano element na ekranie Przeglądanie projektów).

Ukończony ekran Aktualizacja szczegółów.

Krok 7. Uruchamianie aplikacji

Teraz, gdy aplikacja jest ukończona, uruchom ją i sprawdź, jak działa. Dodamy link do aplikacji w witrynie programu SharePoint. Można uruchomić aplikację w przeglądarce, ale może też być konieczne udostępnienie aplikacji, aby inne osoby mogły ją uruchamiać. Aby uzyskać więcej informacji, zobacz Udostępnianie aplikacji.

  1. W funkcji do uruchamiania aplikacji usługi Office 365 kliknij lub naciśnij ikonę Power Apps.

    Usługa Power Apps w funkcji uruchamiania aplikacji usługi Office 365.

  2. W usłudze Power Apps kliknij lub naciśnij wielokropek (. . .) dla aplikacji Project Management, a następnie wybierz opcję Otwórz.

    Wybieranie aplikacji Project Management.

  3. Skopiuj adres (URL) aplikacji w przeglądarce.

    Kopiuj adres URL aplikacji.

  4. W programie SharePoint kliknij lub naciśnij pozycję EDYTUJ LINKI.

    Edytowanie linków witryny programu SharePoint.

  5. Kliknij lub naciśnij link (+).

    Dodawanie linku aplikacji do witryny programu SharePoint.

  6. Wprowadź nazwę „Aplikacja Project Management” i wklej adres aplikacji.

    Edycja właściwości linku.

  7. Kliknij lub naciśnij pozycję OK, a następnie Zapisz.

    Zapisywanie zmian dotyczących linku.

Przypisywanie menedżera do projektu

Teraz, gdy nasza aplikacja znalazła się w witrynie programu SharePoint, przyjmiemy rolę osoby zatwierdzającej projekt — będziemy szukać wszelkich projektów, które nie mają przydzielonego menedżera, a następnie przypiszemy menedżera do jednego z projektów. Następnie przyjmiemy rolę menedżera projektu i dodamy informacje dotyczące przypisanego projektu.

  1. Najpierw przyjrzyj się liście Szczegóły projektu w programie SharePoint. Dwa projekty mają wartość Nieprzypisane w kolumnie PMAssigned. Zostaną one wyświetlone w aplikacji.

    Nieprzypisane projekty na liście.

  2. Kliknij lub naciśnij utworzony link do aplikacji.

  3. Na pierwszym ekranie kliknij lub naciśnij pozycję Przypisz menedżera.

    Ekran wprowadzenia do aplikacji.

  4. Na ekranie Przypisywanie menedżera są wyświetlane dwa nieprzypisane projekty z listy. Wybierz projekt New BI software.

    Galeria z wybranym elementem.

  5. W kontrolce wprowadzania tekstu Manager wpisz „Joni Sherman”, a następnie kliknij przycisk OK.

    Po zastosowaniu zmiany i odświeżeniu galerii wyświetlany jest tylko nieprzypisany projekt.

    Przypisywanie menedżera do projektu.

  6. Wróć do listy i odśwież stronę. Wpis dotyczący projektu został zaktualizowany o imię i nazwisko menedżera projektu.

    Menedżer projektu przypisany na liście.

Aktualizacja szczegółów dotyczących projektu

  1. Kliknij lub dotknij ikonę Wstecz. , aby wrócić do pierwszego ekranu, a następnie kliknąć lub nacisnąć opcję Aktualizuj szczegóły.

    Szczegółowe informacje dotyczące aktualizacji.

  2. W polu wyszukiwania na ekranie Przeglądanie projektów wprowadź wyraz „New”.

    Wyszukiwanie w galerii aplikacji.

  3. Kliknij ikonę strzałki Szczegóły. Dla elementu oprogramowania New BI.

    Wybrany element galerii.

  4. Na ekranie Aktualizacja szczegółów wprowadź następujące wartości:

    • Pole ProjectedStartDate = „3/6/2017”

    • Pole ProjectedEndDate = „3/24/2017”

    • Pole ProjectedDays = „15”

    Aktualizacja szczegółów elementu.

  5. Kliknij lub naciśnij Ikona znacznika wyboru. w celu zastosowania zmian na liście.

  6. Zamknij aplikację i wróć do listy. Wpis dotyczący projektu został zaktualizowany o zmienioną datę i dzień.

    Zaktualizowana lista.

Formuła — szczegółowe omówienie

Jest to druga opcjonalna sekcja dotycząca formuł usługi Power Apps. W pierwszym szczegółowym omówieniu przyjrzeliśmy się jednej z formuł, które usługa Power Apps generuje w celu przeglądania galerii w aplikacji z trzema ekranami. W tym szczegółowym omówieniu przyjrzymy się formule, której używamy w przypadku ekranu AssignManager naszej drugiej aplikacji. Oto formuła:

Patch( 'Project Details', LookUp( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

Jak działa ta formuła? Po wybraniu elementu w galerii i kliknięciu przycisku OK formuła aktualizuje listę Project Details, ustawiając kolumnę PMAssigned na wartość określoną w kontrolce wprowadzania tekstu. Aby formuła spełniała swoje zadanie, używa odpowiednich funkcji:

  • Funkcja Patch służy do modyfikowania co najmniej jednego rekordu źródła danych.

  • Funkcja LookUp znajduje pierwszy rekord w tabeli spełniający warunki formuły.

Oto, co się dzieje po umieszczeniu tych funkcji razem w formule:

  1. Po kliknięciu przycisku OK funkcja Patch zostaje wywołana w celu zaktualizowania listy Project Details.

  2. W ramach funkcji Patch funkcja LookUp identyfikuje wiersz na liście Project Details, który ma zostać zaktualizowany. W tym celu porównuje ona identyfikator wybranego elementu w galerii z identyfikatorem na liście. Na przykład identyfikator 12 oznacza, że ma zostać zaktualizowany wpis dla pozycji New BI software.

  3. Teraz, gdy funkcja Patch ma odpowiedni identyfikator, aktualizuje pole PMAssigned do wartości zawartej w elemencie TextInput1.Text.

Następne kroki

Kolejny krok w tej serii samouczków to utworzenie raportu usługi Power BI w celu analizowania projektów.

Zobacz także

Uwaga

Czy możesz poinformować nas o preferencjach dotyczących języka dokumentacji? Wypełnij krótką ankietę. (zauważ, że ta ankieta jest po angielsku)

Ankieta zajmie około siedmiu minut. Nie są zbierane żadne dane osobowe (oświadczenie o ochronie prywatności).