Tworzenie aplikacji do zarządzania projektamiCreate an app to manage projects

Uwaga

Ten artykuł jest częścią serii samouczków dotyczących używania usług PowerApps, Microsoft Flow i Power BI z usługą SharePoint Online.This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. Najpierw zapoznaj się z wprowadzeniem do tej serii, aby uzyskać ogólny obraz oraz powiązane pliki do pobrania.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

W tym zadaniu będziemy tworzyć aplikację od podstaw.In this task, we'll build an app from scratch. Ta aplikacja umożliwia użytkownikowi przypisywanie menedżera do projektów i aktualizowanie szczegółów projektu.This app allows a user to assign a manager to projects and to update project details. 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.You will see some of the same controls and formulas you saw in the first app, but you will build more of the app yourself this time. Proces jest bardziej złożony, ale też nauczysz się więcej, więc uważamy to za sprawiedliwe podejście.The process is more complex, but you'll learn more, so we think it's a fair trade-off.

Porada

Pakiet pobierania dotyczący tego scenariusza zawiera ukończoną wersję tworzonej aplikacji: project-details-app.msapp.The download package for this scenario includes a finished version of this app: project-details-app.msapp.

Szybki przegląd programu PowerApps StudioQuick review of PowerApps Studio

Program PowerApps Studio dla sieci Web był już używany w ostatnim zadaniu, ale chcemy upewnić się, że rozumiesz wszystkie części, zanim przejdziemy dalej.You used PowerApps Studio for web in the last task, but we want to make sure you understand all the parts before we move on. Możesz nadal pracować w programie PowerApps Studio dla sieci Web lub możesz użyć programu PowerApps Studio dla systemu Windows.You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

Program PowerApps Studio ma trzy okienka oraz wstążkę, co sprawia, że tworzenie aplikacji odbywa się podobnie jak tworzenie pokazu slajdów w programie PowerPoint:PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

  1. Lewy pasek nawigacyjny, który pokazuje hierarchiczny widok wszystkich ekranów i kontrolek aplikacji, a także miniatur ekranówLeft navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. Okienko środkowe zawierające ekran aplikacji, w którym pracujeszMiddle pane, which contains the app screen you are working on
  3. Okienko po prawej stronie, w którym określane są opcje, takie jak układ i źródła danychRight-hand pane, where you set options like layout and data sources
  4. Lista rozwijana Właściwość służąca do wybierania właściwości, do których stosowane są formułyProperty drop-down list, where you select the properties that formulas apply to
  5. Pasek formuły, w którym dodawane są formuły (jak w programie Excel) określające zachowanie aplikacjiFormula bar, where you add formulas (like in Excel) that define app behavior
  6. Wstążka służąca do dodawania kontrolek i dostosowywania elementów projektuRibbon, where you add controls and customize design elements

PowerApps Studio

Krok 1. Tworzenie ekranówStep 1: Create screens

Po zakończeniu przeglądu zajmijmy się tworzeniem aplikacji.With that review out of the way, let's start building an app.

Tworzenie i zapisywanie aplikacjiCreate and save the app

  1. W programie PowerApps Studio kliknij lub naciśnij pozycję Nowy, a następnie w obszarze Pusta aplikacja kliknij lub naciśnij polecenie Układ telefonu.In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    Pusta aplikacja — układ telefonu

  2. Kliknij lub naciśnij pozycję Plik, co spowoduje otwarcie karty Ustawienia aplikacji. Wprowadź nazwę „Project Management app”.Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    Nazwa aplikacji

  3. Kliknij lub naciśnij pozycję Zapisz jako, upewnij się, że aplikacja zostanie zapisana w chmurze, a następnie kliknij przycisk Zapisz w prawym dolnym rogu.Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    Zapisywanie w chmurze

  4. Kliknij lub naciśnij ikonęClick or tap Ikona powrotu do aplikacji w celu powrotu do aplikacji.to go back to the app.

Dodawanie czterech ekranów do aplikacjiAdd four screens to the app

W tym kroku utworzymy cztery puste ekrany dla aplikacji.In this step, we'll create four blank screens for the app. Użyjemy różnych układów ekranów w zależności od przeznaczenia ekranu.We'll use different screen layouts, depending on the screen's purpose. W kolejnych krokach będziemy dodawać elementy do tych ekranów.We'll add to these screens in later steps.

EkranScreen CelPurpose
SelectTaskSelectTask Ekran powitalny; przechodzenie do innych ekranówOpening screen; navigate to other screens
AssignManagerAssignManager Przypisywanie menedżera do zatwierdzonego projektuAssign a manager to an approved project
ViewProjectsViewProjects Wyświetlanie listy projektów z podsumowaniemView a list of projects, with summary information
UpdateDetailsUpdateDetails Wyświetlanie i aktualizowanie szczegółów projektuView and update the details for a project
  1. Na karcie Narzędzia główne kliknij lub naciśnij przycisk Nowy ekran, a następnie wybierz opcję Ekran przewijany.On the Home tab, click or tap NewScreen, then Scrollable screen.

    Ekran przewijany

  2. Zmień nazwę ekranu na SelectTask.Rename the screen to SelectTask.

    Zmiana nazwy ekranu

  3. Utwórz dodatkowe ekrany i zmień ich nazwy:Create and rename additional screens:

    1. Kliknij lub naciśnij pozycję Nowy ekran, a następnie wybierz polecenie Ekran przewijany.Click or tap NewScreen, then Scrollable screen. Zmień nazwę ekranu na AssignManager.Rename the screen to AssignManager.
    2. Kliknij lub naciśnij pozycję Nowy ekran, a następnie wybierz polecenie Ekran listy.Click or tap NewScreen, then List screen. Zmień nazwę ekranu na ViewProjects.Rename the screen to ViewProjects.
    3. Kliknij lub naciśnij pozycję Nowy ekran, a następnie wybierz polecenie Ekran formularza.Click or tap NewScreen, then Form screen. Zmień nazwę ekranu na UpdateDetails.Rename the screen to UpdateDetails.
  4. Wybierz wielokropek (. . .) obok ekranu Screen1, a następnie kliknij lub naciśnij opcję Usuń.Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    Usuwanie ekranu

Aplikacja powinna teraz wyglądać tak, jak na poniższej ilustracji.The app should now look like the following image.

Wszystkie ekrany aplikacji

Krok 2. Łączenie z listą programu SharePointStep 2: Connect to a SharePoint list

W tym kroku nawiążemy połączenie z listą Product Details programu SharePoint.In this step, we'll connect to the Product Details SharePoint list. 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ę.We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran SelectTask.In the left navigation bar, click or tap the SelectTask screen.
  2. W okienku po prawej stronie kliknij lub naciśnij pozycję Dodaj źródło danych.In the right pane, click or tap Add data source.

    Łączenie z danymi

  3. Kliknij lub naciśnij pozycję Nowe połączenie.Click or tap New connection.

    Nowe połączenie

  4. Kliknij lub naciśnij pozycję SharePoint.Click or tap SharePoint.

    Połączenie programu SharePoint

  5. Wybierz opcję Połącz bezpośrednio (usługi w chmurze), a następnie kliknij lub naciśnij pozycję Utwórz.Select Connect directly (cloud services), then click or tap Create.

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

  6. Wprowadź adres URL programu SharePoint, a następnie kliknij lub naciśnij polecenie Przejdź.Enter a SharePoint URL, then click or tap Go.

    Adres URL programu SharePoint umożliwiający połączenie

  7. Wybierz listę Project Details, a następnie kliknij lub naciśnij pozycję Połącz.Select the Project Details list, then click or tap Connect.

    Wybór listy Project Details

    Karta Źródła danych w okienku po prawej stronie pokazuje teraz utworzone połączenie.The Data sources tab in the right pane now shows the connection that you have created.

    Karta Źródła danych

Krok 3. Tworzenie ekranu SelectTaskStep 3: Build the SelectTask screen

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ę PowerApps.In this step, we'll provide a way to navigate to the other screens in the app - working with some of the controls, formulas, and formatting options that PowerApps provides.

Aktualizacja tytułu i wstawianie tekstu wprowadzającegoUpdate the title and insert introductory text

  1. Na lewym pasku nawigacyjnym wybierz ekran SelectTask.In the left navigation bar, select the SelectTask screen.
  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”.In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    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.On the Insert tab, click or tap Label, then drag the label down below the top banner.

    Dodawanie etykiety

  4. Na pasku formuły ustaw następujące właściwości dla etykiety:In the formula bar, set the following properties for the label:

    • Właściwość Color = DarkGrayColor property = DarkGray

    • Właściwość Size = 18Size property = 18

    • Właściwość Text = „Kliknij lub naciśnij zadanie, aby kontynuować...”Text property = "Click or tap a task to continue..."

      Aktualizowanie tekstu etykiety

Dodawanie dwóch przycisków nawigacjiAdd two navigation buttons

  1. Na karcie Wstawianie kliknij lub naciśnij pozycję Przycisk, a następnie przeciągnij przycisk pod etykietę.On the Insert tab, click or tap Button, then drag the button below the label.

    Dodawanie przycisku

  2. Na pasku formuły ustaw następujące właściwości dla przycisku:In the formula bar, set the following properties for the button:

    • Właściwość OnSelect = Navigate(AssignManager, Fade).OnSelect property = Navigate(AssignManager, Fade). Po uruchomieniu aplikacji i kliknięciu tego przycisku można przejść do drugiego ekranu w aplikacji z zanikaniem pomiędzy ekranami.When you run the app and click this button, you navigate to the second screen in the app, with a fade transition between the screens.

    • Właściwość Text = „Przypisz menedżera”Text property = "Assign Manager"

  3. Zmień rozmiar przycisku, aby pomieścić tekst.Resize the button to accommodate the text.

    Aktualizowanie tekstu przycisku

  4. Wstaw kolejny przycisk z następującymi właściwościami:Insert another button with the following properties:

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

    • Właściwość Text = „Aktualizuj szczegóły”Text property = "Update Details"

      Aktualizowanie tekstu przycisku

      Uwaga

      Ten przycisk ma etykietę Aktualizuj szczegóły, ale najpierw należy przejść do ekranu ViewProjects, aby wybrać projekt do zaktualizowania.The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

Uruchamianie aplikacjiRun the app

Aplikacja jeszcze nie robi zbyt dużo, ale jeśli chcesz, możesz ją uruchomić:The app doesn't do a lot yet, but you can run it if you like:

  1. Kliknij lub naciśnij ekran SelectTask (aplikacja zawsze uruchamia się od wybranego ekranu w trybie podglądu w programie PowerApps Studio).Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).

  2. Kliknij lub naciśnij ikonęClick or tap Ikona uruchamiania aplikacji w prawym górnym rogu, aby uruchomić aplikację.in the upper right corner to run the app.

  3. Kliknij lub naciśnij jeden z przycisków, aby przejść do kolejnego ekranu.Click or tap one of the buttons to navigate to another screen.

  4. Kliknij lub naciśnij ikonęClick or tap Ikona zamykania podglądu aplikacji w prawym górnym rogu, aby zamknąć aplikację.in the upper right corner to close the app.

Krok 4. Tworzenie ekranu AssignManagerStep 4: Build the AssignManager screen

W tym kroku użyjemy galerii do wyświetlenia wszystkich projektów, które zostały zatwierdzone, ale jeszcze nie mają menedżera.In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. Dodamy inne kontrolki umożliwiające przypisanie menedżera.We'll add other controls, so you can assign a manager.

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.We'll build a page later in the app that allows you to edit all fields for a project (including the manager field), but we thought it would be cool to build a screen like this one as well.

  1. Zapisz zmiany wprowadzone do tej pory.Save the changes you've made so far.

  2. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran AssignManager.In the left navigation bar, click or tap the AssignManager screen.

Aktualizacja tytułu i wstawianie tekstu wprowadzającegoUpdate the title and insert introductory text

  1. Zmień wartość [Tytuł] na Przypisywanie menedżera.Change [Title] to Assign Manager.

  2. Dodaj etykietę o następujących właściwościach:Add a label with the following properties:

    • Właściwość Color = DarkGrayColor property = DarkGray

    • Właściwość Size = 18Size property = 18

    • Właściwość Text = „Wybierz projekt, a następnie przypisz menedżera”Text property = "Select a project, then assign a manager"

      Układ przypisywania menedżera

Dodawanie strzałki wstecz umożliwiającej powrót do ekranu SelectTaskAdd a back arrow to return to the SelectTask screen

  1. Kliknij lub naciśnij niebieski pasek u góry ekranu.Click or tap the blue bar at the top of the screen.

  2. Na karcie Wstawianie kliknij lub naciśnij pozycję Ikony, a następnie kliknij lub naciśnij pozycję Lewa.On the Insert tab, click or tap Icons, then click or tap Left.

    Wstawianie strzałki w lewo

  3. Przenieś strzałkę na lewą stronę niebieskiego paska i ustaw następujące właściwości:Move the arrow to the left side of the blue bar, and set the following properties:

    • Właściwość Color = WhiteColor property = White

    • Właściwość Height = 40Height property = 40

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

    • Właściwość Width = 40Width property = 40

      Dodawanie przycisku Wstecz

  1. Na karcie Wstawianie kliknij lub naciśnij pozycję Galeria, a następnie wybierz opcję Pionowa.On the Insert tab, click or tap Gallery, then Vertical.

    Dodawanie pionowej galerii

  2. Wybierz opcję Tytuł, podtytuł i treść z menu Układ w okienku po prawej stronie.Select Title, subtitle, and body from the Layout menu in the right pane.

    Zmienianie układu galerii

    Galeria ma teraz odpowiedni układ, ale nadal zawiera domyślny tekst przykładowy.The gallery now has the right layout, but it still has the default sample text. Zajmiemy się tym teraz.We'll fix that next.

    Galeria z tekstem domyślnym

  3. Ustaw następujące właściwości galerii:Set the following properties for the gallery:

    • Właściwość BorderThickness = 1BorderThickness property = 1

    • Właściwość BorderStyle = DottedBorderStyle property = Dotted

    • Właściwość Items = Filter('Project Details', PMAssigned="Unassigned").Items property = Filter('Project Details', PMAssigned="Unassigned"). W galerii są uwzględniane wyłącznie projekty bez przypisanego menedżera.Only projects with no manager assigned are included in the gallery.

      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ą:In the right pane, update the fields to match the following list:

    • Data zatwierdzeniaApprovedDate

    • StatusStatus

    • TitleTitle

      Pola galerii

  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).Resize labels in the gallery as appropriate, and remove the arrow from the first gallery item (we don't need to navigate anywhere from this gallery).

    Usuwanie ikony strzałki

    Ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.The screen should now look like the following image.

    Sformatowana galeria

Zmiana koloru elementu w przypadku jego zaznaczeniaChange the color of an item if it's selected

  1. Wybierz galerię, a następnie ustaw właściwość TemplateFill na If (ThisItem.IsSelected=true, Orange, White).Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).

  2. Wybierz element w galerii.Select an item in the gallery. Ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.The screen should now look like the following image.

    Galeria z wybranym elementem

Dodawanie etykiety, tekstu i przycisku OK umożliwiającego przesłanie przydziałów menedżeraAdd a label, text input, and OK button to submit manager assignments

  1. Kliknij lub naciśnij poza galerią, z którą pracowano.Click or tap outside the gallery you've been working on.

  2. Na karcie Wstawianie kliknij lub naciśnij pozycję Etykieta.On the Insert tab, click or tap Label. Przeciągnij etykietę pod galerię po lewej stronie.Drag the label below the gallery, to the left. Ustaw następujące właściwości etykiety:Set the following properties for the label:

    • Właściwość Size = 20Size property = 20

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

    Dodawanie etykiety menedżera

  3. Na karcie Wstawianie kliknij lub naciśnij pozycję Tekst, a następnie wybierz opcję Wprowadzanie tekstu.On the Insert tab, click or tap Text, then Text input. Przeciągnij wprowadzony tekst na środek poniżej galerii.Drag the text input below the gallery, in the center. Ustaw następujące właściwości listy rozwijanej:Set the following properties for the drop down:

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

    • Właściwość Height = 60Height property = 60

    • Właściwość Size = 20Size property = 20

    • Właściwość Width = 250Width property = 250

    Dodawanie kontrolki wprowadzania tekstu

  4. Na karcie Wstawianie kliknij lub naciśnij pozycję Przycisk.On the Insert tab, click or tap Button. Przeciągnij przycisk pod galerię po prawej stronie.Drag the button below the gallery, to the right. Ustaw następujące właściwości przycisku:Set the following properties for the button:

    • Właściwość Height = 60Height property = 60

    • Właściwość OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}).OnSelect property = 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.For more information, see Formula deep-dive.

    • Ta formuła aktualizuje listę Szczegóły projektu, ustawiając wartość dla pola PMAssigned.This formula updates the Project Details list, setting a value for the PMAssigned field.

    • Właściwość Size = 20Size property = 20

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

    • Właściwość Width = 80Width property = 80

    Dodawanie przycisku OK

Ukończony ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.The completed screen should now look like the following image.

Ukończony ekran przypisywania menedżera

Krok 5. Tworzenie ekranu ViewProjectsStep 5: Build the ViewProjects screen

W tym kroku zmienimy właściwości galerii na ekranie ViewProjects.In this step, we'll change properties for the gallery on the ViewProjects screen. Ta galeria wyświetla elementy z listy Project Details.This gallery displays items from the Project Details list. Na tym ekranie należy wybrać element, a następnie należy edytować szczegóły na ekranie UpdateDetails.You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran ViewProjects.In the left navigation bar, click or tap the ViewProjects screen.

  2. Zmień wartość [Tytuł] na „Przeglądanie projektów”.Change [Title] to "View Projects".

  3. Na lewym pasku nawigacyjnym kliknij lub naciśnij pozycję BrowserGallery1 w sekcji ViewProjects.In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.

  4. Wybierz opcję Tytuł, podtytuł i treść z menu Układ w okienku po prawej stronie.Select Title, subtitle, and body from the Layout menu in the right pane.

    Zmienianie układu galerii

    Galeria ma teraz odpowiedni układ i zawiera domyślny tekst przykładowy.The gallery now has the right layout, with the default sample text.

    Galeria z tekstem domyślnym

  5. Wybierz przycisk odświeżenia (Ikona odświeżenia) i ustaw jego właściwość OnSelect na wartość Refresh('Project Details').Select the refresh button Refresh icon, and set its OnSelect property to 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).Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Dodawanie strzałki wstecz umożliwiającej powrót do ekranu SelectTaskAdd a back arrow to return to the SelectTask screen

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran AssignManager.In the left navigation bar, click or tap the AssignManager screen.

  2. Wybierz strzałkę wstecz dodaną w tym miejscu i skopiuj ją.Select the back arrow you added there, and copy it.

  3. Wklej strzałkę na ekranie ViewProjects i umieść ją po lewej stronie przycisku odświeżania.Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    Przycisk Wstecz

    Wszystkie właściwości również zostaną skopiowane, w tym właściwość OnSelect o wartości Navigate(SelectTask, Fade).All its properties come along with it, including the OnSelect property of 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)).Select the BrowseGallery1 gallery, and set the Items property of the gallery to 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.This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. Wybierz ikonę Ikona strzałki szczegółów w pierwszym elemencie galerii i ustaw właściwość OnSelect na wartość Navigate(UpdateDetails, None).Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="d9aa4-322">Galeria ekranu Przeglądanie projektów — wybrany pierwszy element</span><span class="sxs-lookup"><span data-stu-id="d9aa4-322">View Projects gallery - first item selected</span></span>

  3. W okienku po prawej stronie zaktualizuj pola w taki sposób, aby były zgodne z następującą listą:In the right pane, update the fields to match the following list:

    • StanStatus

    • PMAssignedPMAssigned

    • TytułTitle

      Pola galerii

      Ukończony ekran powinien teraz wyglądać tak, jak na poniższej ilustracji.The completed screen should now look like the following image.

      Ukończony ekran Przeglądanie projektów

Krok 6. Tworzenie ekranu UpdateDetailsStep 6: Build the UpdateDetails screen

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.In this step, we'll connect the edit form on the UpdateDetails screen to our data source, and we'll make some property and field changes. Na tym ekranie edytuje się szczegóły projektu wybranego na ekranie Przeglądanie projektów.On this screen, you edit details for a project that you selected on the View Projects screen.

  1. Na lewym pasku nawigacyjnym kliknij lub naciśnij ekran UpdateDetails.In the left navigation bar, click or tap the UpdateDetails screen.

  2. Zmień wartość [Tytuł] na „Aktualizacja szczegółów”.Change [Title] to "Update Details".

  3. Na lewym pasku nawigacyjnym kliknij lub naciśnij pozycję EditForm1 w sekcji UpdateDetails.In the left navigation bar, click or tap EditForm1 under UpdateDetails.

  4. Ustaw następujące właściwości formularza:Set the following properties for the form:

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

    • Właściwość Item = BrowseGallery1.SelectedItem property = 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:With the form still selected, in the right pane click or tap the checkbox for the following fields, in the order shown:

    • TitleTitle

    • PMAssignedPMAssigned

    • StatusStatus

    • ProjectedStartDateProjectedStartDate

    • ProjectedEndDateProjectedEndDate

    • ProjectedDaysProjectedDays

    • ActualDaysActualDays

      Edycja pól formularza

  6. Wybierz przycisk anulowania (Ikona anulowania) i ustaw jego właściwość OnSelect na wartość ResetForm(EditForm1); Back().Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().

  7. Wybierz przycisk zapisu (Ikona zapisu — znacznik wyboru) i sprawdź formułę OnSelectSubmitForm(EditForm1).Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). Ponieważ używamy kontrolki formularza edycji, możemy użyć formuły Submit() zamiast Patch(), której używaliśmy poprzednio.Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

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).The completed screen should now look like the following image (if the fields are blank, make sure you select an item on the View Projects screen).

Ukończony ekran Aktualizacja szczegółów

Krok 7. Uruchamianie aplikacjiStep 7: Run the app

Teraz, gdy aplikacja jest ukończona, uruchom ją i sprawdź, jak działa.Now that the app is complete, let's run it to see how it works. Dodamy link do aplikacji w witrynie programu SharePoint.We'll add a link on the SharePoint site to the app. Można uruchomić aplikację w przeglądarce, ale może też być konieczne udostępnienie aplikacji, aby inne osoby mogły ją uruchamiać.You will be able to run the app in the browser, but you might need to share the app for other people to run it. Aby uzyskać więcej informacji, zobacz Udostępnianie aplikacji.For more information, see Share your apps.

  1. W module uruchamiania aplikacji usługi Office 365 kliknij lub naciśnij pozycję PowerApps.In the Office 365 app launcher, click or tap PowerApps.

    Usługa PowerApps w module uruchamiania aplikacji usługi Office 365

  2. W usłudze PowerApps kliknij lub naciśnij wielokropek (. . .) dla aplikacji Project Management app, a następnie wybierz opcję Otwórz.In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Wybieranie aplikacji Project Management app

  3. Skopiuj adres (URL) aplikacji w przeglądarce.Copy the address (URL) for the app in the browser.

    Kopiowanie adresu URL aplikacji

  4. W programie SharePoint kliknij lub naciśnij polecenie EDYTUJ LINKI.In SharePoint, click or tap EDIT LINKS.

    Edycja linków witryny programu SharePoint

  5. Kliknij lub naciśnij pozycję (+) link.Click or tap (+) link.

    Dodawanie linku do aplikacji do witryny programu SharePoint

  6. Wprowadź nazwę „Project Management app” i wklej adres aplikacji.Enter "Project Management app", and paste in the address for the app.

    Edycja właściwości linku

  7. Kliknij lub naciśnij pozycję OK, a następnie Zapisz.Click or tap OK, then Save.

    Zapisywanie zmian dotyczących linku

Przypisywanie menedżera do projektuAssign a manager to a project

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.Now that we have the app in our SharePoint site, we'll assume the role of the project approver - we'll look for any projects that don't have a manager assigned, and assign a manager to one of the projects. Następnie przyjmiemy rolę menedżera projektu i dodamy informacje dotyczące przypisanego projektu.Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. Najpierw przyjrzyj się liście Szczegóły projektu w programie SharePoint.First, let's look at the Project Details list in SharePoint. Dwa projekty mają wartość Nieprzypisane w kolumnie PMAssigned.Two projects have a value of Unassigned in the PMAssigned column. Zostaną one wyświetlone w aplikacji.We will see these in the app.

    Nieprzypisane projekty na liście programu SharePoint

  2. Kliknij lub naciśnij utworzony link do aplikacji.Click or tap the link that you created to the app.

  3. Na pierwszym ekranie kliknij lub naciśnij pozycję Przypisz menedżera.On the first screen, click or tap Assign Manager.

    Ekran wprowadzenia do aplikacji

  4. Na ekranie Przypisywanie menedżera są wyświetlane dwa nieprzypisane projekty z listy.On the Assign Manager screen, you see the two unassigned projects from the list. Wybierz projekt New BI software.Select the New BI software project.

    Galeria z wybranym elementem

  5. W kontrolce wprowadzania tekstu Manager wpisz „Joni Sherman”, a następnie kliknij przycisk OK.In the Manager text input, enter "Joni Sherman", then click OK.

    Po zastosowaniu zmiany i odświeżeniu galerii wyświetlany jest tylko nieprzypisany projekt.The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    Przypisywanie menedżera do projektu

  6. Wróć do listy programu SharePoint i odśwież stronę.Go back to the SharePoint list and refresh the page. Wpis dotyczący projektu został zaktualizowany o imię i nazwisko menedżera projektu.You'll see that the project entry is now updated with the project manager name.

    Menedżer projektu przypisany na liście programu SharePoint

Aktualizacja szczegółów dotyczących projektuUpdate details for the project

  1. Kliknij lub naciśnij ikonę Ikona Wstecz, aby powrócić do pierwszego ekranu, a następnie kliknij lub naciśnij przycisk Aktualizuj szczegóły.Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    Ekran wprowadzenia do aplikacji

  2. W polu wyszukiwania na ekranie Przeglądanie projektów wprowadź wyraz „New”.On the View Projects screen, enter "New" in the search box.

    Wyszukiwanie w galerii aplikacji

  3. Kliknij ikonę Ikona strzałki szczegółów dla pozycji New BI software.Click Details arrow icon for the New BI software item.

    Galeria z wybranym elementem

  4. Na ekranie Aktualizacja szczegółów wprowadź następujące wartości:On the Update Details screen, set the following values:

    • Pole ProjectedStartDate = „3/6/2017”The ProjectedStartDate field = "3/6/2017"

    • Pole ProjectedEndDate = „3/24/2017”The ProjectedEndDate field = "3/24/2017"

    • Pole ProjectedDays = „15”The ProjectedDays field = "15"

    Aktualizacja szczegółów elementu

  5. Kliknij lub naciśnij ikonęClick or tap Ikona znacznika wyboru w celu zastosowania zmian na liście programu SharePoint.to apply the change to the SharePoint list.

  6. Zamknij aplikację i wróć do listy.Close the app, and go back to the list. Wpis dotyczący projektu został zaktualizowany o zmienioną datę i dzień.You see that the project entry is now updated with the date and day changes.

    Zaktualizowana lista programu SharePoint

Formuła — szczegółowe omówienieFormula deep-dive

Jest to druga opcjonalna sekcja dotycząca formuł usługi PowerApps.This is the second optional section on PowerApps formulas. W pierwszym szczegółowym omówieniu przyjrzeliśmy się jednej z formuł, które usługa PowerApps generuje w celu przeglądania galerii w aplikacji z trzema ekranami.In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app. W tym szczegółowym omówieniu przyjrzymy się formule, której używamy w przypadku ekranu AssignManager naszej drugiej aplikacji.In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. Oto formuła:Here's the formula:

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

Jak działa ta formuła?What does this formula do? 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.When you select an item in the gallery and click the OK button, the formula updates the Project Details list, setting the PMAssigned column to the value that you specify in the text input. Aby formuła spełniała swoje zadanie, używa odpowiednich funkcji:The formula uses functions to do its work:

  • Funkcja Patch służy do modyfikowania co najmniej jednego rekordu źródła danych.The Patch function modifies one or more records of a data source.

  • Funkcja LookUp znajduje pierwszy rekord w tabeli spełniający warunki formuły.The LookUp function finds the first record in a table that satisfies a formula.

Oto, co się dzieje po umieszczeniu tych funkcji razem w formule:When you put the functions together in the formula, here's what happens:

  1. Po kliknięciu przycisku OK funkcja Patch zostaje wywołana w celu zaktualizowania listy Project Details.When you click the OK button, the Patch function is called to update the Project Details list.

  2. W ramach funkcji Patch funkcja LookUp identyfikuje wiersz na liście Project Details, który ma zostać zaktualizowany.Within the Patch function, the LookUp function identifies which row of the Project Details list to update. W tym celu porównuje ona identyfikator wybranego elementu w galerii z identyfikatorem na liście.It does this by comparing the ID of the selected gallery item to the ID in the list. Na przykład identyfikator 12 oznacza, że ma zostać zaktualizowany wpis dla pozycji New BI software.For example, an ID of 12 means that the entry for New BI software should be updated.

  3. Teraz, gdy funkcja Patch ma odpowiedni identyfikator, aktualizuje pole PMAssigned do wartości zawartej w elemencie TextInput1.Text.Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

Następne krokiNext steps

Kolejny krok w tej serii samouczków to utworzenie raportu usługi Power BI w celu analizowania projektów.The next step in this tutorial series is to create a Power BI report to analyze projects.