Een app maken om projecten te beherenCreate an app to manage projects

Opmerking: dit artikel maakt deel uit van een reeks zelfstudies over het gebruik van PowerApps, Microsoft Flow en Power BI met SharePoint Online.Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. Lees de inleiding tot de reeks zodat u een idee van het geheel krijgt en van de betreffende downloads.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

In deze taak gaan we een volledig nieuwe app bouwen.In this task, we'll build an app from scratch. Met deze app kan een gebruiker een manager toewijzen aan projecten en kunnen de details van een project worden bijgewerkt.This app allows a user to assign a manager to projects and to update project details. U ziet enkele zelfde besturingselementen en formules die u in de eerste app hebt gezien, maar u gaat deze keer zelf meer van de app bouwen.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. Het proces is wat ingewikkelder, maar u leert ook meer, dus dat lijkt een goed compromis.The process is more complex, but you'll learn more, so we think it's a fair trade-off.

Tip: het downloadpakket voor dit scenario omvat een voltooide versie van deze app: project-details-app.msapp.Tip: The download package for this scenario includes a finished version of this app: project-details-app.msapp.

Kort overzicht van PowerApps StudioQuick review of PowerApps Studio

In de laatste taak hebt u PowerApps Studio voor internet gebruikt, maar voor we verdergaan moet u eerst een goede indruk hebben van alle onderdelen.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. U kunt doorgaan met werken in PowerApps Studio voor internet, maar u kunt ook PowerApps Studio voor Windows gebruiken.You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

PowerApps Studio heeft drie deelvensters en een lint waardoor het maken van apps lijkt op het maken van een PowerPoint-presentatie:PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

  1. Linkernavigatiebalk, met een hiërarchische weergave van alle schermen en besturingselementen van de app, evenals de miniaturen op de schermenLeft navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. Middelste deelvenster, met het app-scherm waaraan u werktMiddle pane, which contains the app screen you are working on
  3. Rechterdeelvenster, waar u opties instelt, zoals indeling en gegevensbronnenRight-hand pane, where you set options like layout and data sources
  4. Vervolgkeuzelijst voor eigenschappen, waar u de eigenschappen selecteert waarop de formules betrekking hebbenProperty drop-down list, where you select the properties that formulas apply to
  5. Formulebalk, waar u formules toevoegt (zoals in Excel) die het app-gedrag bepalenFormula bar, where you add formulas (like in Excel) that define app behavior
  6. Lint, waar u besturingselementen toevoegt en ontwerpelementen aanpastRibbon, where you add controls and customize design elements

PowerApps Studio

Stap 1: Schermen makenStep 1: Create screens

Nu we de stof hebben herhaald, gaan we een app bouwen.With that review out of the way, let's start building an app.

De app maken en opslaanCreate and save the app

  1. Klik of tik in PowerApps Studio op Nieuw en vervolgens onder Lege app op Telefoonindeling.In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    Lege app: telefoonindeling

  2. Klik of tik op Bestand, waarna dit wordt geopend als het tabblad App-instellingen. Voer de naam 'App Projectbeheer' in.Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    Naam van app

  3. Klik of tik op Opslaan als, controleer of de app in de cloud wordt opgeslagen en klik vervolgens linksonder op Opslaan.Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    Opslaan in de cloud

  4. Klik of tik opClick or tap Pictogram Terug naar app om naar de app terug te gaan.to go back to the app.

Vier schermen aan de app toevoegenAdd four screens to the app

In deze stap maken we vier schermen voor de app.In this step, we'll create four blank screens for the app. We gebruiken verschillende indelingen, afhankelijk van de functie van het scherm.We'll use different screen layouts, depending on the screen's purpose. Later werken we verder met de schermen.We'll add to these screens in later steps.

SchermScreen FunctiePurpose
SelectTaskSelectTask Scherm openen; navigeren naar andere schermenOpening screen; navigate to other screens
AssignManagerAssignManager Manager toewijzen aan een goedgekeurd projectAssign a manager to an approved project
ViewProjectsViewProjects Een lijst met projecten weergeven, met beknopte informatieView a list of projects, with summary information
UpdateDetailsUpdateDetails De details van een project weergeven en bijwerkenView and update the details for a project
  1. Klik op het tabblad Start op NewScreen en vervolgens op Doorscrolbaar scherm.On the Home tab, click or tap NewScreen, then Scrollable screen.

    Doorscrolbaar scherm

  2. Wijzig de naam van het scherm in SelectTask.Rename the screen to SelectTask.

    Naam van scherm wijzigen

  3. Maak aanvullende schermen en geef deze een andere naam:Create and rename additional screens:

    1. Klik of tik op NewScreen en vervolgens op Doorscrolbaar scherm.Click or tap NewScreen, then Scrollable screen. Wijzig de naam van het scherm in AssignManager.Rename the screen to AssignManager.
    2. Klik of tik op NewScreen en vervolgens op Lijstscherm.Click or tap NewScreen, then List screen. Wijzig de naam van het scherm in ViewProjects.Rename the screen to ViewProjects.
    3. Klik of tik op NewScreen en vervolgens op Formulierscherm.Click or tap NewScreen, then Form screen. Wijzig de naam van het scherm in UpdateDetails.Rename the screen to UpdateDetails.
  4. Selecteer het beletselteken (. . .) naast Scherm1 en klik of tik op Verwijderen.Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    Scherm verwijderen

De app moet er nu uitzien zoals in de volgende afbeelding.The app should now look like the following image.

Alle app-schermen

Stap 2: Verbinding maken met een SharePoint-lijstStep 2: Connect to a SharePoint list

In deze stap gaan we verbinding maken met de SharePoint-lijst Productdetails.In this step, we'll connect to the Product Details SharePoint list. In deze app gebruiken we slechts één lijst, maar u kunt gemakkelijk met beide lijsten verbinding maken als u de app wilt uitbreiden.We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. Klik of tik in de linkernavigatiebalk op het scherm SelectTask.In the left navigation bar, click or tap the SelectTask screen.
  2. Klik of tik in het rechterdeelvenster op Gegevensbron toevoegen.In the right pane, click or tap Add data source.

    Verbinding maken met gegevens

  3. Klik of tik op Nieuwe verbinding.Click or tap New connection.

    Nieuwe verbinding

  4. Klik of tik op SharePoint.Click or tap SharePoint.

    SharePoint-verbinding

  5. Selecteer Rechtstreeks verbinding maken (cloudservices) en klik of tik op Maken.Select Connect directly (cloud services), then click or tap Create.

    Rechtstreeks verbinding maken (cloudservices)

  6. Voer een SharePoint-URL in en klik of tik op Start.Enter a SharePoint URL, then click or tap Go.

    SharePoint-URL voor verbinding

  7. Selecteer de lijst Projectdetails en klik of tik op Verbinding maken.Select the Project Details list, then click or tap Connect.

    Lijst Projectdetails selecteren

    Het tabblad Gegevensbronnen in het rechterdeelvenster toont de verbinding die u hebt gemaakt.The Data sources tab in the right pane now shows the connection that you have created.

    Tabblad Gegevensbronnen

Stap 3: Scherm SelectTask makenStep 3: Build the SelectTask screen

In deze stap gaan we een manier vinden om naar de andere schermen in de app te navigeren en werken we met een aantal besturingselementen, formules en opmaakopties 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.

Titel bijwerken en inleidende tekst invoegenUpdate the title and insert introductory text

  1. Selecteer in de linkernavigatiebalk het scherm SelectTask.In the left navigation bar, select the SelectTask screen.
  2. Selecteer in het middelste venster de standaardwaarde [Title] en werk vervolgens in de formulebalk de eigenschap Text bij naar 'Contoso-projectbeheer'.In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    Eigenschap Tekst in formulebalk

  3. Klik of tik op het tabblad Invoegen op Label en sleep het label onder de bovenste banner.On the Insert tab, click or tap Label, then drag the label down below the top banner.

    Label toevoegen

  4. Stel in de formulebalk de volgende eigenschappen voor het label in:In the formula bar, set the following properties for the label:

    • Eigenschap Color = DarkGrayColor property = DarkGray
    • Eigenschap Size = 18Size property = 18
    • Eigenschap Text = Klik of tik op een taak om door te gaan...Text property = "Click or tap a task to continue..."

      Labeltekst bijwerken

Twee navigatieknoppen toevoegenAdd two navigation buttons

  1. Klik of tik op het tabblad Invoegen op Knop en sleep de knop onder het label.On the Insert tab, click or tap Button, then drag the button below the label.

    De knop toevoegen

  2. Stel in de formulebalk de volgende eigenschappen voor de knop in:In the formula bar, set the following properties for the button:

    • Eigenschap OnSelect = Navigate(AssignManager, Fade).OnSelect property = Navigate(AssignManager, Fade). Als u de app uitvoert en op deze knop klikt, navigeert u naar het tweede scherm in de app, waarbij de overgang tussen de schermen vervaagt.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.
    • Eigenschap Text = Manager toewijzenText property = "Assign Manager"
  3. Wijzig de grootte van de knop om de tekst in te kunnen passen.Resize the button to accommodate the text.

    Knoptekst bijwerken

  4. Voeg een andere knop in met de volgende eigenschappen:Insert another button with the following properties:

    • Eigenschap OnSelect = Navigate(ViewProjects, Fade).OnSelect property = Navigate(ViewProjects, Fade).
    • Eigenschap Text = Details bijwerkenText property = "Update Details"

      Knoptekst bijwerken

      Opmerking: de knop heeft het label Details bijwerken, maar eerst navigeren we naar het scherm ViewProjects om een bij te werken project te selecteren.Note: The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

De app uitvoerenRun the app

De app doet nog niet veel, maar u kunt de app al wel uitvoeren:The app doesn't do a lot yet, but you can run it if you like:

  1. Klik of tik op het scherm SelectTask (de app wordt altijd gestart vanuit het geselecteerde scherm in de Preview-modus in PowerApps Studio).Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).
  2. Klik of tik opClick or tap Pictogram App uitvoeren in de rechterbovenhoek om de app uit te voeren.in the upper right corner to run the app.
  3. Klik of tik op een van de knoppen om naar een ander scherm te navigeren.Click or tap one of the buttons to navigate to another screen.
  4. Klik of tik opClick or tap Pictogram App-overzicht sluiten in de rechterbovenhoek om de app te sluiten.in the upper right corner to close the app.

Stap 4: Het scherm AssignManager bouwenStep 4: Build the AssignManager screen

In deze stap gebruiken we een galerie om alle projecten weer te geven die zijn goedgekeurd maar nog geen manager hebben.In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. We voegen ook andere besturingselementen toe, zodat u een manager kunt toewijzen.We'll add other controls, so you can assign a manager.

Opmerking: later bouwen we een pagina in de app waarmee u alle velden voor een project kunt bewerken (inclusief het managersveld). Het leek ons wel leuk om ook een scherm zoals dit te bouwen.Note: 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. Sla uw wijzigingen op.Save the changes you've made so far.
  2. Klik of tik in de linkernavigatiebalk op het scherm AssignManager.In the left navigation bar, click or tap the AssignManager screen.

Titel bijwerken en inleidende tekst invoegenUpdate the title and insert introductory text

  1. Wijzig [Title] in Manager toewijzen.Change [Title] to Assign Manager.
  2. Voeg een label toe met de volgende eigenschappen:Add a label with the following properties:

    • Eigenschap Color = DarkGrayColor property = DarkGray
    • Eigenschap Size = 18Size property = 18
    • Eigenschap Text = Selecteer een project en wijs vervolgens een manager toeText property = "Select a project, then assign a manager"

      Indeling Manager toewijzen

Een pijl-terug toe toevoegen om terug te gaan naar het scherm SelectTaskAdd a back arrow to return to the SelectTask screen

  1. Klik of tik op de blauwe balk bovenaan het scherm.Click or tap the blue bar at the top of the screen.
  2. Klik of tik op het tabblad Invoegen op Pictogrammen en vervolgens op Links.On the Insert tab, click or tap Icons, then click or tap Left.

    Pijl-links invoegen

  3. Verplaats de pijl naar de linkerkant van de blauwe balk en stel de volgende eigenschappen in:Move the arrow to the left side of the blue bar, and set the following properties:

    • Eigenschap Color = WhiteColor property = White
    • Eigenschap Height = 40Height property = 40
    • Eigenschap OnSelect = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)
    • Eigenschap Width = 40Width property = 40

      Knop Terug toevoegen

  1. Klik of tik op het tabblad Invoegen op Galerie en vervolgens op Verticaal.On the Insert tab, click or tap Gallery, then Vertical.

    Verticale galerie toevoegen

  2. Selecteer in het rechterdeelvenster, in het menu Indeling, de optie Titel, subtitel en hoofdtekst.Select Title, subtitle, and body from the Layout menu in the right pane.

    De galerie-indeling wijzigen

    De galerie heeft nu de juiste indeling, maar bevat nog wel de standaardvoorbeeldtekst.The gallery now has the right layout, but it still has the default sample text. Daar gaan we nu iets aan doen.We'll fix that next.

    Galerie met standaardtekst

  3. Stel de volgende eigenschappen voor de galerie in:Set the following properties for the gallery:

    • Eigenschap BorderThickness = 1BorderThickness property = 1
    • Eigenschap BorderStyle = DottedBorderStyle property = Dotted
    • Eigenschap Items = Filter('Projectdetails', PMAssigned="Niet toegewezen").Items property = Filter('Project Details', PMAssigned="Unassigned"). Allen projecten waaraan geen manager is toegewezen, worden in de galerie opgenomen.Only projects with no manager assigned are included in the gallery.

      Galerie met tekst uit lijst

  4. Werk in het rechterdeelvenster de velden bij zodat ze overeenkomen met de volgende lijst:In the right pane, update the fields to match the following list:

    • ApprovedDateApprovedDate
    • StatusStatus
    • TitleTitle

      Galerievelden

  5. Pas de grootte van de labels naar wens aan en verwijder de pijl van het eerste galerie-item (vanuit deze galerie hoeven we nergens heen te navigeren).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).

    Picogram Pijl verwijderen

    Het scherm moet nu lijken op de volgende afbeelding.The screen should now look like the following image.

    Opgemaakte galerie

De kleur van een item wijzigen als dit wordt geselecteerdChange the color of an item if it's selected

  1. Selecteer de galerie en stel vervolgens de eigenschap TemplateFill in op If (ThisItem.IsSelected=true, Orange, White).Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).
  2. Selecteer een item in de galerie.Select an item in the gallery. Het scherm moet nu lijken op de volgende afbeelding.The screen should now look like the following image.

    Galerie met geselecteerd item

Een label, tekstinvoer en knop OK toevoegen om managertoewijzingen in te dienenAdd a label, text input, and OK button to submit manager assignments

  1. Klik of tik buiten de galerie waaraan u hebt gewerkt.Click or tap outside the gallery you've been working on.
  2. Klik of tik op het tabblad Invoegen op Label.On the Insert tab, click or tap Label. Sleep het label onder de galerie, naar de linkerkant.Drag the label below the gallery, to the left. Stel de volgende eigenschappen voor het label in:Set the following properties for the label:

    • Eigenschap Size = 20Size property = 20
    • Eigenschap Text = "Manager:"Text property = "Manager:"

    Label Manager toevoegen

  3. Klik of tik op het tabblad Invoegen op Tekst en vervolgens op Tekstinvoer.On the Insert tab, click or tap Text, then Text input. Sleep de tekstinvoer onder de galerie, in het midden.Drag the text input below the gallery, in the center. Stel de volgende eigenschappen voor de vervolgkeuzelijst in:Set the following properties for the drop down:

    • Eigenschap Default = ""Default property = ""
    • Eigenschap Height = 60Height property = 60
    • Eigenschap Size = 20Size property = 20
    • Eigenschap Width = 250Width property = 250

    Tekstinvoer toevoegen

  4. Klik of tik op het tabblad Invoegen op Knop.On the Insert tab, click or tap Button. Sleep de knop onder de galerie, naar de rechterkant.Drag the button below the gallery, to the right. Stel de volgende eigenschappen voor de knop in:Set the following properties for the button:

    • Eigenschap Height = 60Height property = 60
    • Eigenschap OnSelect = Patch('Projectdetails', LookUp('Projectdetails', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}).OnSelect property = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Zie De formule nader bekeken voor meer informatie.For more information, see Formula deep-dive.
    • Met deze formule wordt de lijst Projectdetails bijgewerkt door een waarde voor het veld PMAssigned in te stellen.This formula updates the Project Details list, setting a value for the PMAssigned field.
    • Eigenschap Size = 20Size property = 20
    • Eigenschap Text = "OK"Text property = "OK"
    • Eigenschap Width = 80Width property = 80

    Knop OK toevoegen

Het voltooide scherm moet nu lijken op de volgende afbeelding.The completed screen should now look like the following image.

Voltooid scherm Manager toewijzen

Stap 5: scherm ViewProjects bouwenStep 5: Build the ViewProjects screen

In deze stap wijzigen we de eigenschappen voor de galerie in het scherm ViewProjects.In this step, we'll change properties for the gallery on the ViewProjects screen. Deze galerie toont items uit de lijst Projectdetails.This gallery displays items from the Project Details list. In dit scherm selecteert u een item en vervolgens bewerkt u de details ervan in het scherm UpdateDetails.You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. Klik of tik in de linkernavigatiebalk op het scherm ViewProjects.In the left navigation bar, click or tap the ViewProjects screen.
  2. Wijziging [Title] in Projecten weergeven.Change [Title] to "View Projects".
  3. Tik of klik in de linkernavigatiebalk op BrowserGallery1 onder ViewProjects.In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.
  4. Selecteer in het rechterdeelvenster, in het menu Indeling, de optie Titel, subtitel en hoofdtekst.Select Title, subtitle, and body from the Layout menu in the right pane.

    De galerie-indeling wijzigen

    De galerie heeft nu de juiste indeling, met de standaardvoorbeeldtekst.The gallery now has the right layout, with the default sample text.

    Galerie met standaardtekst

  5. Selecteer de vernieuwknop Pictogram Vernieuwen en stel de eigenschap OnSelect in op Refresh('Projectdetails').Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').
  6. Selecteer de knop over het nieuwe item Pictogram Nieuwe toevoegen en de stel de eigenschap OnSelect in op 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).

Een pijl-terug toe toevoegen om terug te gaan naar het scherm SelectTaskAdd a back arrow to return to the SelectTask screen

  1. Klik of tik in de linkernavigatiebalk op het scherm AssignManager.In the left navigation bar, click or tap the AssignManager screen.
  2. Selecteer de pijl-terug die u hier hebt toegevoegd en kopieer deze.Select the back arrow you added there, and copy it.
  3. Plak de pijl in het scherm ViewProjects en plaats deze aan de linkerkant van de vernieuwknop.Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    Knop Terug

    De pijl bezit nu alle eigenschappen, inclusief de eigenschap OnSelect van Navigate(SelectTask, Fade).All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

  1. Selecteer de galerie BrowseGallery1 en stel de eigenschap Items van de galerie in op SortByColumns(Filter('Projectdetails', StartsWith(Title, TextSearchBox1.Text)), "Titel", 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)).

    Hierdoor wordt de gegevensbron van de galerie ingesteld op de lijst Projectdetails. Er wordt gebruikgemaakt van het veld Titel om te zoeken en sorteren.This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. Selecteer het Pijlpictogram Details in het eerste galerie-item en stel de eigenschap OnSelect in op 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="b62ef-322">Galerie Projecten weergeven; eerste item geselecteerd</span><span class="sxs-lookup"><span data-stu-id="b62ef-322">View Projects gallery - first item selected</span></span>

  3. Werk in het rechterdeelvenster de velden bij zodat ze overeenkomen met de volgende lijst:In the right pane, update the fields to match the following list:

    • StatusStatus
    • PMAssignedPMAssigned
    • TitleTitle

      Galerievelden

      Het voltooide scherm moet nu lijken op de volgende afbeelding.The completed screen should now look like the following image.

      Voltooid scherm Projecten weergeven

Stap 6: Scherm UpdateDetails bouwenStep 6: Build the UpdateDetails screen

In deze stap verbinden we het bewerkingsformulier in het scherm UpdateDetails met de gegevensbron en brengen we enkele wijzigingen aan eigenschappen en velden aan.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 dit scherm bewerkt u de details van een project dat u hebt geselecteerd in het scherm Projecten weergeven.On this screen, you edit details for a project that you selected on the View Projects screen.

  1. Klik of tik in de linkernavigatiebalk op het scherm UpdateDetails.In the left navigation bar, click or tap the UpdateDetails screen.
  2. Wijzig [Title] in Details bijwerken.Change [Title] to "Update Details".
  3. Klik of tik in de linkernavigatiebalk op EditForm1 onder UpdateDetails.In the left navigation bar, click or tap EditForm1 under UpdateDetails.
  4. Stel de volgende eigenschappen voor het formulier in:Set the following properties for the form:

    • Eigenschap DataSource = 'Projectdetails'DataSource property = 'Project Details'
    • Eigenschap Item = BrowseGallery1.SelectedItem property = BrowseGallery1.Selected
  5. Terwijl u het formulier nog hebt geselecteerd, selecteert u in het rechterdeelvenster het selectievakje voor de volgende velden en in de aangegeven volgorde: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

      Formuliervelden bewerken

  6. Selecteer de annuleerknop Pictogram Annuleren en stel de eigenschap OnSelect in op ResetForm(EditForm1); Back().Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().
  7. Select de knop voor opslaan Pictogram met selectievakje voor opslaan en bekijk de OnSelect-formule: SubmitForm(EditForm1).Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). We gebruiken het besturingselement voor formulierbewerking, dus we kunnen gebruikmaken van Submit() in plaats van Patch(), zoals we eerder deden.Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

Het voltooide scherm moet er nu uitzien zoals in de volgende afbeelding (als de velden leeg zijn, selecteert u een item in het scherm Projecten weergeven).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).

Voltooid scherm Details bijwerken

Stap 7: De app uitvoerenStep 7: Run the app

De app is voltooid, dus we gaan de app uitvoeren om te zien hoe deze werkt.Now that the app is complete, let's run it to see how it works. We voegen een koppeling naar de app toe op de SharePoint-site.We'll add a link on the SharePoint site to the app. U kunt de app in de browser uitvoeren, maar mogelijk wilt u de app met anderen delen.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. Zie Uw apps delen voor meer informatie.For more information, see Share your apps.

  1. Klik of tik in het startprogramma voor Office 365-apps op PowerApps.In the Office 365 app launcher, click or tap PowerApps.

    PowerApps in startprogramma voor Office 365-apps

  2. Klik of tik in PowerApps op het beletselteken (. . .) voor Projectbeheer-app en vervolgens op Openen.In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Projectbeheer-app selecteren

  3. Kopieer het adres (URL) voor de app in de browser.Copy the address (URL) for the app in the browser.

    App-URL kopiëren

  4. Klik of tik in SharePoint op KOPPELINGEN BEWERKEN.In SharePoint, click or tap EDIT LINKS.

    SharePoint-sitekoppelingen bewerken

  5. Klik of tik op (+) koppeling.Click or tap (+) link.

    App-koppeling aan SharePoint-site toevoegen

  6. Voer 'Projectbeheer-app' in en plak het adres voor de app in.Enter "Project Management app", and paste in the address for the app.

    Eigenschappen van koppeling bewerken

  7. Klik of tik op OK en vervolgens op Opslaan.Click or tap OK, then Save.

    Wijzigingen aan koppeling opslaan

Een manager aan een project toewijzenAssign a manager to a project

We hebben de app aan de SharePoint-site toegevoegd en spelen nu de rol van projectfiatteur. We zoeken projecten waaraan nog geen manager is toegewezen en wijzen een manager toe aan een van die projecten.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. Vervolgens spelen we de rol van de projectmanager en voegen wat gegevens toe over een project dat aan ons is toegewezen.Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. Eerst kijken we naar de lijst Projectdetails in SharePoint.First, let's look at the Project Details list in SharePoint. Twee projecten hebben de waarde Unassigned in de kolom PMAssigned.Two projects have a value of Unassigned in the PMAssigned column. Die zien we in de app.We will see these in the app.

    Niet-toegewezen projecten in SharePoint-lijst

  2. Klik of tik op de koppeling die u in de app hebt gemaakt.Click or tap the link that you created to the app.
  3. Klik of tik in het eerste scherm op Manager toewijzen.On the first screen, click or tap Assign Manager.

    Introductiescherm van app

  4. In het scherm Manager toewijzen ziet u de twee niet-toegewezen projecten uit de lijst.On the Assign Manager screen, you see the two unassigned projects from the list. Selecteer het project Nieuw BI-software.Select the New BI software project.

    Galerie met geselecteerd item

  5. Voer in de tekstinvoer naast Manager 'Femke van Nuil' in en klik op OK.In the Manager text input, enter "Joni Sherman", then click OK.

    De wijziging wordt in de lijst doorgevoerd en de galerie wordt vernieuwd, dus alleen het resterende niet-toegewezen project wordt nog weergegeven.The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    Manager toewijzen aan project

  6. Ga terug naar de SharePoint-lijst en vernieuw de pagina.Go back to the SharePoint list and refresh the page. U ziet dat de projectvermelding nu is bijgewerkt met de naam van de projectmanager.You'll see that the project entry is now updated with the project manager name.

    Projectmanager toegewezen in SharePoint-lijst

Details bijwerken voor het projectUpdate details for the project

  1. Klik of tik op Pictogram Terug om naar het eerste scherm terug te gaan en klik of tik vervolgens op Details bijwerken.Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    Introductiescherm van app

  2. Voer in het scherm Projecten weergeven 'Nieuw' in het zoekvak in.On the View Projects screen, enter "New" in the search box.

    Zoeken in app-galerie

  3. Klik op Pijlpictogram Details voor het item Nieuwe BI-software.Click Details arrow icon for the New BI software item.

    Galerie-item geselecteerd

  4. Stel in het scherm Details bijwerken de volgende waarden in:On the Update Details screen, set the following values:

    • Het veld ProjectedStartDate = "3/6/2017"The ProjectedStartDate field = "3/6/2017"
    • Het veld ProjectedEndDate = "3/24/2017"The ProjectedEndDate field = "3/24/2017"
    • Het veld ProjectedDays = "15"The ProjectedDays field = "15"

    Itemdetails bijwerken

  5. Klik of tik opClick or tap Pictogram Vinkje om de wijziging op de SharePoint-lijst toe te passen.to apply the change to the SharePoint list.
  6. Sluit de app en ga terug naar de lijst.Close the app, and go back to the list. De projectvermelding is bijgewerkt met de wijzigingen voor de datum en de dag.You see that the project entry is now updated with the date and day changes.

    Bijgewerkte SharePoint-lijst

De formule nader bekekenFormula deep-dive

Dit is de tweede optionele sectie over PowerApps-formules.This is the second optional section on PowerApps formulas. In de eerste sectie hebben we gekeken naar een van de formules die PowerApps genereert voor de bladergalerie in een app met drie schermen.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 deze sectie kijken we naar een formule die we gebruiken voor het scherm AssignManager van de tweede app.In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. Dit is de formule:Here's the formula:

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

Wat doet deze formule?What does this formula do? Als u een item in de galerie selecteert en op de knop OK klikt, werkt de formule de lijst Projectdetails bij, waarbij de kolom PMAssigned wordt ingesteld op de waarde die u in de tekstinvoer opgeeft.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. De formule maakt voor de uitvoering gebruik van functies:The formula uses functions to do its work:

  • De functie Patch wijzigt een of meer records in een gegevensbron.The Patch function modifies one or more records of a data source.
  • De functie LookUp vindt de eerste record in een tabel die aan een formule voldoet.The LookUp function finds the first record in a table that satisfies a formula.

Als de functies samen in een formule worden gestopt, gebeurt het volgende:When you put the functions together in the formula, here's what happens:

  1. Als u op de knop OK klikt, wordt de functie Patch aangeroepen om de lijst Projectdetails bij te werken.When you click the OK button, the Patch function is called to update the Project Details list.
  2. Binnen de functie Patch identificeert de functie LookUp welke rij in de lijst Projectdetails moet worden bijgewerkt.Within the Patch function, the LookUp function identifies which row of the Project Details list to update. Hiertoe wordt de id van het geselecteerde galerie-item vergeleken met de id in de lijst.It does this by comparing the ID of the selected gallery item to the ID in the list. Bijvoorbeeld: een id van 12 betekent dat de vermelding voor Nieuwe BI-software moet worden bijgewerkt.For example, an ID of 12 means that the entry for New BI software should be updated.
  3. De functie Patch heeft de juiste id, dus het veld PMAssigned wordt bijgewerkt naar de waarde in TextInput1.Text.Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

Volgende stappenNext steps

De volgende stap in deze reeks zelfstudies gaat over het maken van een Power BI-rapport om projecten te analyseren.The next step in this tutorial series is to create a Power BI report to analyze projects.