Erstellen einer App zum Verwalten von ProjektenCreate an app to manage projects

Hinweis

Dieser Artikel ist Teil einer Reihe von Tutorials zur Verwendung von PowerApps, Microsoft Flow und Power BI mit SharePoint Online.This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. Lesen Sie unbedingt die Einführung zur Reihe durch, um sich einen allgemeinen Überblick zu verschaffen und auf die zugehörigen Downloads zuzugreifen.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

In dieser Aufgabe wird eine App von Grund auf neu erstellt.In this task, we'll build an app from scratch. Mithilfe dieser App kann ein Benutzer Projekten einen Manager zuweisen und Projektdetails aktualisieren.This app allows a user to assign a manager to projects and to update project details. Sie werden feststellen, dass teilweise die gleichen Steuerelemente und Formeln wie in der ersten App verwendet werden. Dieses Mal erstellen Sie jedoch selbstständig einen größeren Teil der App.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. Der Prozess mag zwar komplexer sein, Sie werden jedoch mehr lernen – unserer Meinung nach ist dies ein guter Kompromiss.The process is more complex, but you'll learn more, so we think it's a fair trade-off.

Tipp

Das Downloadpaket für dieses Szenario enthält eine vollständige Version dieser App: „project-details-app.msapp“.The download package for this scenario includes a finished version of this app: project-details-app.msapp.

Kurzübersicht über PowerApps StudioQuick review of PowerApps Studio

In der letzten Aufgabe haben Sie PowerApps Studio für Web verwendet, wir möchten jedoch sichergehen, dass Sie alle Teile verstehen, bevor wir fortfahren.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. Sie können weiterhin in PowerApps Studio für Web arbeiten, Sie können aber auch PowerApps Studio für Windows verwenden.You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

PowerApps Studio enthält drei Bereiche und ein Menüband, durch die das Erstellen einer App mit dem Erstellen einer Foliengruppe in PowerPoint vergleichbar ist:PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

  1. Auf der linken Navigationsleiste werden eine hierarchische Ansicht sämtlicher Bildschirme und Steuerelemente der App sowie Vorschauminiaturen der Bildschirme angezeigt.Left navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. Der mittlere Bereich enthält den App-Bildschirm, in dem Sie derzeit arbeiten.Middle pane, which contains the app screen you are working on
  3. Im rechten Bereich können Sie Optionen wie Layout und Datenquellen festlegen.Right-hand pane, where you set options like layout and data sources
  4. In der Dropdownliste „Eigenschaft“ wählen Sie die Eigenschaften aus, auf die Formeln angewendet werden.Property drop-down list, where you select the properties that formulas apply to
  5. Auf der Bearbeitungsleiste fügen Sie Formeln (wie in Excel) hinzu, mit denen das App-Verhalten definiert wird.Formula bar, where you add formulas (like in Excel) that define app behavior
  6. Über das Menüband fügen Sie Steuerelemente hinzu und passen Designelemente an.Ribbon, where you add controls and customize design elements

PowerApps Studio

Schritt 1: Erstellen von BildschirmenStep 1: Create screens

Lassen Sie uns nun nach dem kurzen Überblick mit dem Erstellen einer App beginnen.With that review out of the way, let's start building an app.

Erstellen und Speichern der AppCreate and save the app

  1. Klicken oder tippen Sie in PowerApps Studio auf Neu, und klicken oder tippen Sie unter Leere App auf Telefonlayout.In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    Leere App – Telefonlayout

  2. Klicken oder tippen Sie auf Datei. Das Dialogfeld wird mit der Registerkarte App-Einstellungen geöffnet. Geben Sie den Namen „Project Management app“ (Projektverwaltungs-App) ein.Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    Name der App

  3. Klicken oder tippen Sie auf Speichern unter, vergewissern Sie sich, dass die App in der Cloud gespeichert wird, und klicken Sie in der rechten unteren Ecke auf Speichern.Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    Speichern in der Cloud

  4. Klicken oder tippen Sie aufClick or tap Symbol „Zurück zur App“ um zur App zurückzukehren.to go back to the app.

Hinzufügen von vier Bildschirmen zur AppAdd four screens to the app

In diesem Schritt erstellen wir vier leere Bildschirme für die App.In this step, we'll create four blank screens for the app. Dabei verwenden wir je nach Zweck des jeweiligen Bildschirms unterschiedliche Bildschirmlayouts.We'll use different screen layouts, depending on the screen's purpose. Diese werden den Bildschirmen in späteren Schritten hinzugefügt.We'll add to these screens in later steps.

BildschirmScreen ZweckPurpose
SelectTaskSelectTask Begrüßungsbildschirm; Navigation zu anderen BildschirmenOpening screen; navigate to other screens
AssignManagerAssignManager Zuweisen eines Managers zu einem genehmigten ProjektAssign a manager to an approved project
ViewProjectsViewProjects Anzeigen einer Liste von Projekten mit ZusammenfassungsinformationenView a list of projects, with summary information
UpdateDetailsUpdateDetails Anzeigen und Aktualisieren der Details für ein ProjektView and update the details for a project
  1. Klicken oder tippen Sie auf der Registerkarte Start auf NewScreen und anschließend auf Scrollbarer Bildschirm.On the Home tab, click or tap NewScreen, then Scrollable screen.

    Scrollbarer Bildschirm

  2. Benennen Sie den Bildschirm in SelectTask um.Rename the screen to SelectTask.

    Umbenennen des Bildschirms

  3. Erstellen und Umbenennen weiterer Bildschirme:Create and rename additional screens:

    1. Klicken oder tippen Sie auf NewScreen und anschließend auf Scrollbarer Bildschirm.Click or tap NewScreen, then Scrollable screen. Benennen Sie den Bildschirm in AssignManager um.Rename the screen to AssignManager.
    2. Klicken oder tippen Sie auf NewScreen und anschließend auf Listenbildschirm.Click or tap NewScreen, then List screen. Benennen Sie den Bildschirm in ViewProjects um.Rename the screen to ViewProjects.
    3. Klicken oder tippen Sie auf NewScreen und anschließend auf Formularbildschirm.Click or tap NewScreen, then Form screen. Benennen Sie den Bildschirm in UpdateDetails um.Rename the screen to UpdateDetails.
  4. Wählen Sie die Auslassungspunkte (. . .) neben Screen1 aus, und klicken oder tippen Sie auf Löschen.Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    Bildschirm löschen

Die App sollte nun wie in der folgenden Abbildung aussehen.The app should now look like the following image.

Alle App-Bildschirme

Schritt 2: Verbinden mit einer SharePoint-ListeStep 2: Connect to a SharePoint list

In diesem Schritt stellen wir eine Verbindung mit der SharePoint-Liste Product Details (Produktdetails) her.In this step, we'll connect to the Product Details SharePoint list. Wir verwenden in dieser App lediglich eine Liste, Sie könnten jedoch auch problemlos eine Verbindung mit beiden herstellen, wenn Sie die App erweitern möchten.We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. Klicken oder tippen Sie in der linken Navigationsleiste auf den Bildschirm SelectTask.In the left navigation bar, click or tap the SelectTask screen.
  2. Klicken oder tippen Sie im rechten Bereich auf Datenquelle hinzufügen.In the right pane, click or tap Add data source.

    Herstellen einer Datenverbindung

  3. Klicken oder tippen Sie auf Neue Verbindung.Click or tap New connection.

    Neue Verbindung

  4. Klicken oder tippen Sie auf SharePoint.Click or tap SharePoint.

    SharePoint-Verbindung

  5. Wählen Sie Direkte Verbindung (Clouddienste) aus, und klicken oder tippen Sie dann auf Erstellen.Select Connect directly (cloud services), then click or tap Create.

    Direkte Verbindung (Clouddienste)

  6. Geben Sie eine SharePoint-URL ein, und klicken oder tippen Sie auf Starten.Enter a SharePoint URL, then click or tap Go.

    SharePoint-URL für Verbindung

  7. Wählen Sie die Liste Project Details (Projektdetails) aus, und klicken oder tippen Sie auf Verbinden.Select the Project Details list, then click or tap Connect.

    Auswählen der Liste „Project Details“ (Projektdetails)

    Auf der Registerkarte Datenquellen im rechten Bereich wird nun die erstellte Verbindung angezeigt.The Data sources tab in the right pane now shows the connection that you have created.

    Registerkarte „Datenquellen“

Schritt 3: Erstellen des Bildschirms „SelectTask“Step 3: Build the SelectTask screen

In diesem Schritt richten wir eine Möglichkeit der Navigation zu den anderen Bildschirmen in der App ein. Dabei arbeiten wir mit einigen der Steuerelemente, Formeln und Formatierungsoptionen in 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.

Aktualisieren des Titels und Einfügen von EinführungstextUpdate the title and insert introductory text

  1. Wählen in der linken Navigationsleiste den Bildschirm SelectTask aus.In the left navigation bar, select the SelectTask screen.
  2. Wählen Sie im mittleren Bereich den standardmäßigen [Title] (Titel) aus, und aktualisieren Sie anschließend in der Bearbeitungsleiste die Text-Eigenschaft auf den Wert „Contoso Project Management“.In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    Text-Eigenschaft in der Bearbeitungsleiste

  3. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Bezeichnung, und ziehen Sie die Bezeichnung unter das oberste Banner.On the Insert tab, click or tap Label, then drag the label down below the top banner.

    Bezeichnung hinzufügen

  4. Legen Sie in der Bearbeitungsleiste die folgenden Eigenschaften für die Bezeichnung fest:In the formula bar, set the following properties for the label:

    • Color-Eigenschaft = DarkGrayColor property = DarkGray

    • Size-Eigenschaft = 18Size property = 18

    • Text-Eigenschaft = "Click or tap a task to continue..." (Klicken oder tippen Sie auf eine Aufgabe, um fortzufahren ...)Text property = "Click or tap a task to continue..."

      Aktualisieren des Bezeichnungstexts

Hinzufügen von zwei NavigationsschaltflächenAdd two navigation buttons

  1. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Schaltfläche, und ziehen Sie die Schaltfläche unter die Bezeichnung.On the Insert tab, click or tap Button, then drag the button below the label.

    Hinzufügen einer Schaltfläche

  2. Legen Sie in der Bearbeitungsleiste die folgenden Eigenschaften für die Schaltfläche fest:In the formula bar, set the following properties for the button:

    • OnSelect-Eigenschaft = Navigate(AssignManager, Fade).OnSelect property = Navigate(AssignManager, Fade). Wenn Sie die App ausführen und auf diese Schaltfläche klicken, wechseln Sie zum zweiten Bildschirm in der App, mit einem Ausblendübergang zwischen den Bildschirmen.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.

    • Text-Eigenschaft = "Assign Manager"Text property = "Assign Manager"

  3. Ändern Sie die Größe der Schaltfläche, um sie an den Text anzupassen.Resize the button to accommodate the text.

    Aktualisieren des Schaltflächentexts

  4. Einfügen einer weiteren Schaltfläche mit den folgenden Eigenschaften:Insert another button with the following properties:

    • OnSelect-Eigenschaft = Navigate(ViewProjects, Fade).OnSelect property = Navigate(ViewProjects, Fade).

    • Text-Eigenschaft = "Update Details"Text property = "Update Details"

      Aktualisieren des Schaltflächentexts

      Hinweis

      Die Schaltfläche ist mit Update Details (Details aktualisieren) beschriftet, zunächst wechseln wir jedoch zum Bildschirm ViewProjects, um ein zu aktualisierendes Projekt auszuwählen.The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

Ausführen der AppRun the app

Noch ist der Funktionsumfang der App recht begrenzt, Sie können sie jedoch trotzdem ausführen:The app doesn't do a lot yet, but you can run it if you like:

  1. Klicken oder tippen Sie auf die Anzeige SelectTask (die App wird immer mit der Anzeige gestartet, die im Vorschaumodus in PowerApps Studio ausgewählt ist).Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).

  2. Klicken oder tippen Sie aufClick or tap Symbol „App ausführen“ in der rechten oberen Ecke, um die App auszuführen.in the upper right corner to run the app.

  3. Klicken oder tippen Sie auf eine der Schaltflächen, um zu einem anderen Bildschirm zu wechseln.Click or tap one of the buttons to navigate to another screen.

  4. Klicken oder tippen Sie aufClick or tap Symbol „App-Vorschau schließen“ in der rechten oberen Ecke, um die App zu schließen.in the upper right corner to close the app.

Schritt 4: Erstellen des Bildschirms „AssignManager“Step 4: Build the AssignManager screen

In diesem Schritt zeigen wir mit einem Katalog alle Projekte an, die genehmigt wurden, denen jedoch noch kein Manager zugewiesen wurde.In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. Wir fügen weitere Steuerelemente hinzu, sodass Sie einen Manager zuweisen können.We'll add other controls, so you can assign a manager.

Hinweis

Wir erstellen später in der App eine Seite, auf der Sie sämtliche Felder für ein Projekt (einschließlich des Felds für den Manager) bearbeiten können, es erschien uns jedoch angebracht, auch diesen Bildschirm zu erstellen.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. Speichern Sie die bisher vorgenommenen Änderungen.Save the changes you've made so far.

  2. Klicken oder tippen Sie in der linken Navigationsleiste auf den Bildschirm AssignManager.In the left navigation bar, click or tap the AssignManager screen.

Aktualisieren des Titels und Einfügen von EinführungstextUpdate the title and insert introductory text

  1. Ändern Sie den Text [Title] (Titel) in Assign Manager (Manager zuweisen).Change [Title] to Assign Manager.

  2. Fügen Sie eine Bezeichnung mit den folgenden Eigenschaften hinzu:Add a label with the following properties:

    • Color-Eigenschaft = DarkGrayColor property = DarkGray

    • Size-Eigenschaft = 18Size property = 18

    • Text-Eigenschaft = "Select a project, then assign a manager" (Projekt auswählen, anschließend einen Manager zuweisen)Text property = "Select a project, then assign a manager"

      Layout von „Assign Manager“ (Manager zuweisen)

Hinzufügen eines Rückwärtspfeils, um zum Bildschirm „SelectTask“ zurückzukehrenAdd a back arrow to return to the SelectTask screen

  1. Klicken oder tippen Sie auf die blaue Leiste am oberen Bildschirmrand.Click or tap the blue bar at the top of the screen.

  2. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Symbole, und klicken oder tippen Sie auf Left (Nach links).On the Insert tab, click or tap Icons, then click or tap Left.

    Einfügen eines Pfeils nach links

  3. Verschieben Sie den Pfeil auf die linke Seite der blauen Leiste, und legen Sie die folgenden Eigenschaften fest:Move the arrow to the left side of the blue bar, and set the following properties:

    • Color-Eigenschaft = WhiteColor property = White

    • Height-Eigenschaft = 40Height property = 40

    • OnSelect-Eigenschaft = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)

    • Width-Eigenschaft = 40Width property = 40

      Hinzufügen einer Schaltfläche „Zurück“

  1. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Katalog und anschließend auf Vertikal.On the Insert tab, click or tap Gallery, then Vertical.

    Hinzufügen eines vertikalen Katalogs

  2. Wählen Sie im Menü Layout im rechten Bereich die Option Titel, Untertitel und Text aus.Select Title, subtitle, and body from the Layout menu in the right pane.

    Ändern des Kataloglayouts

    Der Katalog verfügt nun über das richtige Layout, weist jedoch immer noch den standardmäßigen Beispieltext auf.The gallery now has the right layout, but it still has the default sample text. Dies korrigieren wir im nächsten Schritt.We'll fix that next.

    Katalog mit Standardtext

  3. Legen Sie die folgenden Eigenschaften für den Katalog fest:Set the following properties for the gallery:

    • BorderThickness-Eigenschaft = 1BorderThickness property = 1

    • BorderStyle-Eigenschaft = DottedBorderStyle property = Dotted

    • Items-Eigenschaft = Filter('Project Details', PMAssigned="Unassigned").Items property = Filter('Project Details', PMAssigned="Unassigned"). Im Katalog sind nur Projekte enthalten, denen kein Manager zugewiesen ist.Only projects with no manager assigned are included in the gallery.

      Katalog mit Text aus der Liste

  4. Aktualisieren Sie im rechten Bereich die Felder entsprechend der folgenden Liste:In the right pane, update the fields to match the following list:

    • ApprovedDateApprovedDate

    • StatusStatus

    • TitleTitle

      Katalogfelder

  5. Passen Sie die Größe der Bezeichnungen im Katalog entsprechend an, und entfernen Sie den Pfeil vom ersten Katalogelement (dieser Katalog wird nicht mehr verlassen).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).

    Entfernen des Pfeilsymbols

    Der Bildschirm entspricht nun etwa dem in der folgenden Abbildung.The screen should now look like the following image.

    Formatierter Katalog

Ändern der Farbe eines Elements, wenn dieses ausgewählt istChange the color of an item if it's selected

  1. Wählen Sie den Katalog aus, und legen Sie anschließend die TemplateFill-Eigenschaft auf If (ThisItem.IsSelected=true, Orange, White) fest.Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).

  2. Wählen Sie ein Element im Katalog aus.Select an item in the gallery. Der Bildschirm entspricht nun etwa dem in der folgenden Abbildung.The screen should now look like the following image.

    Katalog mit ausgewähltem Element

Hinzufügen einer Bezeichnung, einer Texteingabe und einer Schaltfläche „OK“ für das Übermitteln von ManagerzuweisungenAdd a label, text input, and OK button to submit manager assignments

  1. Klicken Sie oder tippen Sie auf eine Stelle außerhalb des Katalogs, an dem Sie gearbeitet haben.Click or tap outside the gallery you've been working on.

  2. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Bezeichnung.On the Insert tab, click or tap Label. Ziehen Sie die Bezeichnung unter den Katalog auf die linke Seite.Drag the label below the gallery, to the left. Legen Sie die folgenden Eigenschaften für die Bezeichnung fest:Set the following properties for the label:

    • Size-Eigenschaft = 20Size property = 20

    • Text-Eigenschaft = "Manager:"Text property = "Manager:"

    Hinzufügen der Bezeichnung „Manager“

  3. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Text und anschließend auf Texteingabe.On the Insert tab, click or tap Text, then Text input. Ziehen Sie die Texteingabe mittig unter den Katalog.Drag the text input below the gallery, in the center. Legen Sie die folgenden Eigenschaften für das Dropdown fest:Set the following properties for the drop down:

    • Default-Eigenschaft = ""Default property = ""

    • Height-Eigenschaft = 60Height property = 60

    • Size-Eigenschaft = 20Size property = 20

    • Width-Eigenschaft = 250Width property = 250

    Hinzufügen einer Texteingabe

  4. Klicken oder tippen Sie auf der Registerkarte Einfügen auf Schaltfläche.On the Insert tab, click or tap Button. Ziehen Sie die Schaltfläche unter den Katalog auf die rechte Seite.Drag the button below the gallery, to the right. Legen Sie die folgenden Eigenschaften für die Schaltfläche fest:Set the following properties for the button:

    • Height-Eigenschaft = 60Height property = 60

    • OnSelect-Eigenschaft = 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}). Weitere Informationen finden Sie unter Detaillierte Erläuterungen zu Formeln.For more information, see Formula deep-dive.

    • Mit dieser Formel wird die Liste Project Details (Projektdetails) aktualisiert, und es wird ein Wert für das Feld „PMAssigned“ festgelegt.This formula updates the Project Details list, setting a value for the PMAssigned field.

    • Size-Eigenschaft = 20Size property = 20

    • Text-Eigenschaft = "OK"Text property = "OK"

    • Width-Eigenschaft = 80Width property = 80

    Hinzufügen der Schaltfläche „OK“

Der fertige Bildschirm sollte nun etwa dem in der folgenden Abbildung entsprechen.The completed screen should now look like the following image.

Fertiger Bildschirm „Assign Manager“ (Manager zuweisen)

Schritt 5: Erstellen des Bildschirms „ViewProjects“Step 5: Build the ViewProjects screen

In diesem Schritt ändern wir die Eigenschaften des Katalogs im Bildschirm ViewProjects.In this step, we'll change properties for the gallery on the ViewProjects screen. In diesem Katalog werden Elemente aus der Liste Project Details (Projektdetails) angezeigt.This gallery displays items from the Project Details list. Sie wählen zunächst in diesem Bildschirm ein Element aus, dann bearbeiten Sie die Details im Bildschirm UpdateDetails.You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. Klicken oder tippen Sie in der linken Navigationsleiste auf den Bildschirm ViewProjects.In the left navigation bar, click or tap the ViewProjects screen.

  2. Ändern Sie [Title] (Titel) in „View Projects“ (Projekte anzeigen).Change [Title] to "View Projects".

  3. Klicken oder tippen Sie in der linken Navigationsleiste unter ViewProjects auf BrowserGallery1.In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.

  4. Wählen Sie im Menü Layout im rechten Bereich die Option Titel, Untertitel und Text aus.Select Title, subtitle, and body from the Layout menu in the right pane.

    Ändern des Kataloglayouts

    Der Katalog verfügt nun über das richtige Layout, weist aber immer noch den standardmäßigen Beispieltext auf.The gallery now has the right layout, with the default sample text.

    Katalog mit Standardtext

  5. Wählen Sie die Aktualisierungsschaltfläche Aktualisierungssymbol aus, und legen Sie ihre OnSelect-Eigenschaft auf Refresh('Project Details') fest.Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').

  6. Wählen Sie die Schaltfläche für neue Elemente Neues Element hinzufügen aus, und legen Sie ihre OnSelect-Eigenschaft auf NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None) fest.Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Hinzufügen eines Rückwärtspfeils, um zum Bildschirm „SelectTask“ zurückzukehrenAdd a back arrow to return to the SelectTask screen

  1. Klicken oder tippen Sie in der linken Navigationsleiste auf den Bildschirm AssignManager.In the left navigation bar, click or tap the AssignManager screen.

  2. Wählen Sie den hier hinzugefügten Rückwärtspfeil aus, und kopieren Sie ihn.Select the back arrow you added there, and copy it.

  3. Fügen Sie den Pfeil im Bildschirm ViewProjects ein, und positionieren Sie ihn links von der Aktualisierungsschaltfläche.Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    Schaltfläche „Zurück“

    Alle Eigenschaften werden mit übernommen, einschließlich der OnSelect-Eigenschaft mit dem Wert Navigate(SelectTask, Fade).All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

  1. Wählen Sie den Katalog BrowseGallery1 aus, und legen Sie die Items-Eigenschaft des Katalogs auf SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)) fest.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)).

    Dadurch wird die Datenquelle des Katalogs auf die Liste Project Details (Projektdetails) festgelegt, und für Such- und Sortiervorgänge wird das Feld Title (Titel) verwendet.This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. Wählen Sie das Details-Pfeilsymbol im ersten Katalogelement aus, und legen Sie die OnSelect-Eigenschaft auf Navigate(UpdateDetails, None) fest.Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="98500-322">Katalog „Projekte anzeigen“ – erstes Element ausgewählt</span><span class="sxs-lookup"><span data-stu-id="98500-322">View Projects gallery - first item selected</span></span>

  3. Aktualisieren Sie im rechten Bereich die Felder entsprechend der folgenden Liste:In the right pane, update the fields to match the following list:

    • StatusStatus

    • PMAssignedPMAssigned

    • TitleTitle

      Katalogfelder

      Der fertige Bildschirm sollte nun etwa dem in der folgenden Abbildung entsprechen.The completed screen should now look like the following image.

      Fertiger Bildschirm „View Project“ (Projekte anzeigen)

Schritt 6: Erstellen des Bildschirms „UpdateDetails“Step 6: Build the UpdateDetails screen

In diesem Schritt verbinden wir das Bearbeitungsformular im Bildschirm UpdateDetails mit der Datenquelle, zudem nehmen wir einige Änderungen an Eigenschaften und Feldern vor.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. In diesem Bildschirm bearbeiten Sie Details für ein Projekt, das Sie im Bildschirm View Projects (Projekte anzeigen) ausgewählt haben.On this screen, you edit details for a project that you selected on the View Projects screen.

  1. Klicken oder tippen Sie in der linken Navigationsleiste auf den Bildschirm UpdateDetails.In the left navigation bar, click or tap the UpdateDetails screen.

  2. Ändern Sie [Title] (Titel) in „Details aktualisieren“.Change [Title] to "Update Details".

  3. Klicken oder tippen Sie in der linken Navigationsleiste unter UpdateDetails auf EditForm1.In the left navigation bar, click or tap EditForm1 under UpdateDetails.

  4. Legen Sie die folgenden Eigenschaften für das Formular fest:Set the following properties for the form:

    • DataSource-Eigenschaft = 'Project Details'DataSource property = 'Project Details'

    • Item-Eigenschaft = BrowseGallery1.SelectedItem property = BrowseGallery1.Selected

  5. Lassen Sie das Formular ausgewählt, und klicken oder tippen Sie auf das Kontrollkästchen für die folgenden Felder. Beachten Sie dabei die angegebene Reihenfolge: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

      Bearbeiten der Felder des Formulars

  6. Klicken Sie auf die Schaltfläche zum Abbrechen Symbol „Abbrechen“, und legen Sie ihre OnSelect-Eigenschaft auf ResetForm(EditForm1); Back() fest.Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().

  7. Wählen Sie die Schaltfläche zum Speichern Häkchensymbol „Speichern“ aus, und probieren Sie die OnSelect-Formel aus – SubmitForm(EditForm1).Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). Da wir das Steuerelement zum Bearbeiten von Formularen verwenden, können wir Submit() und nicht wie früher Patch() verwenden.Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

Der fertige Bildschirm sollte nun wie der in der unten stehenden Abbildung aussehen (wenn die Felder leer sind, müssen Sie im Bildschirm Projekte anzeigen ein Element auswählen).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).

Fertiger Bildschirm „Update Details“

Schritt 7: Ausführen der AppStep 7: Run the app

Die App ist nun fertig gestellt – führen wir sie aus, um ihre Funktionsweise zu überprüfen.Now that the app is complete, let's run it to see how it works. Wir fügen auf der SharePoint-Website einen Link zur App hinzu.We'll add a link on the SharePoint site to the app. Sie können die App dann im Browser ausführen, Sie müssen die App jedoch ggf. für andere Personen freigeben, damit sie von diesen ausgeführt werden kann.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. Weitere Informationen finden Sie unter Freigeben von Apps.For more information, see Share your apps.

  1. Klicken oder tippen Sie im Office 365-App-Startfeld auf PowerApps.In the Office 365 app launcher, click or tap PowerApps.

    PowerApps im App-Startfeld von Office 365

  2. Klicken oder tippen Sie in PowerApps auf die Auslassungspunkte (. . .) für die Project Management app (Projektverwaltungs-App) und anschließend auf Öffnen.In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Auswählen der Projektverwaltungs-App

  3. Kopieren Sie die Adresse (URL) für die App in den Browser.Copy the address (URL) for the app in the browser.

    Kopieren der App-URL

  4. Klicken oder tippen Sie in SharePoint auf VERKNÜPFUNG BEARBEITEN.In SharePoint, click or tap EDIT LINKS.

    Bearbeiten von Links auf der SharePoint-Website

  5. Klicken oder tippen Sie auf (+) Verknüpfung.Click or tap (+) link.

    Hinzufügen einer App-Verknüpfung zur SharePoint-Website

  6. Geben Sie „Projektverwaltungs-App“ ein, und fügen Sie die Adresse für die App ein.Enter "Project Management app", and paste in the address for the app.

    Bearbeiten der Verknüpfungseigenschaften

  7. Klicken oder tippen Sie auf OK und anschließend auf Speichern.Click or tap OK, then Save.

    Speichern der Änderungen an der Verknüpfung

Zuweisen eines Managers zu einem ProjektAssign a manager to a project

Nun ist die App auf der SharePoint-Website vorhanden, und wir übernehmen die Rolle des Projektgenehmigers. Wir suchen nach allen Projekten, denen kein Manager zugewiesen ist, und weisen einem der Projekte einen Manager zu.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. Anschließend übernehmen wir die Rolle des Projektmanagers und fügen einige Informationen über ein Projekt hinzu, das uns zugewiesen wurde.Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. Betrachten wir zunächst die Liste Project Details (Projektdetails) in SharePoint.First, let's look at the Project Details list in SharePoint. Zwei Projekte weisen in der Spalte PMAssigned den Wert Unassigned auf.Two projects have a value of Unassigned in the PMAssigned column. Diese sehen wir in der App.We will see these in the app.

    Nicht zugewiesene Projekte in der SharePoint-Liste

  2. Klicken oder tippen Sie auf den Link, den Sie für die App erstellt haben.Click or tap the link that you created to the app.

  3. Klicken oder tippen Sie im ersten Bildschirm auf Assign Manager (Manager zuweisen).On the first screen, click or tap Assign Manager.

    Begrüßungsbildschirm der App

  4. Im Bildschirm Assign Manager (Manager zuweisen) werden die beiden nicht zugewiesenen Projekte aus der Liste angezeigt.On the Assign Manager screen, you see the two unassigned projects from the list. Wählen Sie das Projekt New BI software (Neue BI-Software) aus.Select the New BI software project.

    Katalog mit ausgewähltem Element

  5. Geben Sie im Textfeld Manager den Namen „Joni Sherman“ ein, und klicken Sie dann auf OK.In the Manager text input, enter "Joni Sherman", then click OK.

    Die Änderung wird auf die Liste angewendet, und der Katalog wird aktualisiert, sodass nur das noch nicht zugewiesene Projekt angezeigt wird.The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    Manager dem Projekt zuweisen

  6. Wechseln Sie zurück zur SharePoint-Liste, und aktualisieren Sie die Seite.Go back to the SharePoint list and refresh the page. Sie werden feststellen, dass der Projekteintrag mit dem Namen des Projektmanagers aktualisiert wurde.You'll see that the project entry is now updated with the project manager name.

    Zugewiesener Projektmanager in der SharePoint-Liste

Aktualisieren der Details für das ProjektUpdate details for the project

  1. Klicken oder tippen Sie auf Symbol „Zurück“, um zum ersten Bildschirm zurückzukehren, und klicken oder tippen Sie dann auf Update Details (Details aktualisieren).Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    Begrüßungsbildschirm der App

  2. Geben Sie im Bildschirm View Projects (Projekte anzeigen) im Suchfeld „Neu“ ein.On the View Projects screen, enter "New" in the search box.

    Durchsuchen des App-Katalogs

  3. Klicken Sie auf Pfeilsymbol „Details“ für das Element New BI software (Neue BI-Software).Click Details arrow icon for the New BI software item.

    Ausgewähltes Katalogelement

  4. Legen Sie im Bildschirm Update Details (Details aktualisieren) die folgenden Werte fest:On the Update Details screen, set the following values:

    • Das Feld ProjectedStartDate = "3/6/2017"The ProjectedStartDate field = "3/6/2017"

    • Das Feld ProjectedEndDate = "3/24/2017"The ProjectedEndDate field = "3/24/2017"

    • Das Feld ProjectedDays = "15"The ProjectedDays field = "15"

    Aktualisieren der Elementdetails

  5. Klicken oder tippen Sie aufClick or tap Häkchensymbol , um die Änderung auf die SharePoint-Liste anzuwenden.to apply the change to the SharePoint list.

  6. Schließen Sie die App, und kehren Sie zur Liste zurück.Close the app, and go back to the list. Sie stellen fest, dass der Projekteintrag mit den Datums- und Tagesanzahländerungen aktualisiert wurde.You see that the project entry is now updated with the date and day changes.

    Aktualisierte SharePoint-Liste

Detaillierte Erläuterung zu FormelnFormula deep-dive

Dies ist der zweite optionale Abschnitt für PowerApps Formeln.This is the second optional section on PowerApps formulas. In der ersten detaillierten Erläuterung haben wir eine der Formeln betrachtet, die von PowerApps für den durchsuchbaren Katalog in einer App mit drei Bildschirmen generiert wird.In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app. In dieser detaillierten Erläuterung betrachten wir eine Formel, die wir für den Bildschirm AssignManager der zweiten App verwenden.In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. Die Formel lautet wie folgt: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} )

Welche Aktionen führt diese Formel aus?What does this formula do? Wenn Sie ein Element im Katalog auswählen und auf die Schaltfläche OK klicken, aktualisiert die Formel die Liste Project Details (Projektdetails), wobei die Spalte PMAssigned auf den Wert festgelegt wird, der in der Texteingabe angegeben ist.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. Die Formel führt ihre Aufgaben mithilfe von Funktionen aus:The formula uses functions to do its work:

  • Die Patch-Funktion ändert einen oder mehrere Datensätze einer Datenquelle.The Patch function modifies one or more records of a data source.

  • Die LookUp-Funktion sucht den ersten Datensatz in einer Tabelle, der eine Formel erfüllt.The LookUp function finds the first record in a table that satisfies a formula.

Folgendes geschieht, wenn Sie die Funktionen in der Formel kombinieren:When you put the functions together in the formula, here's what happens:

  1. Wenn Sie auf die Schaltfläche OK klicken, wird die Patch-Funktion aufgerufen, um die Liste Project Details (Projektdetails) zu aktualisieren.When you click the OK button, the Patch function is called to update the Project Details list.

  2. Innerhalb der Patch-Funktion ermittelt die LookUp-Funktion, welche Zeile der Liste Project Details (Projektdetails) aktualisiert werden muss.Within the Patch function, the LookUp function identifies which row of the Project Details list to update. Dazu wird die ID des ausgewählten Katalogelements mit der ID in der Liste verglichen.It does this by comparing the ID of the selected gallery item to the ID in the list. Die ID 12 bedeutet beispielsweise, dass der Eintrag New BI software (Neue BI-Software) aktualisiert werden muss.For example, an ID of 12 means that the entry for New BI software should be updated.

  3. Wenn die Patch-Funktion über die richtige ID verfügt, aktualisiert sie das Feld PMAssigned mit dem Wert in TextInput1.Text.Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

Nächste SchritteNext steps

Der nächste Schritt in diesem Tutorial besteht im Erstellen eines Power BI-Berichts zum Analysieren von Projekten.The next step in this tutorial series is to create a Power BI report to analyze projects.