Opmerking: dit artikel maakt deel uit van een reeks zelfstudies over het gebruik van PowerApps, Microsoft Flow en Power BI met SharePoint Online. Lees de inleiding tot de reeks zodat u een idee van het geheel krijgt en van de betreffende downloads.

In deze taak gaan we een volledig nieuwe app bouwen. Met deze app kan een gebruiker een manager toewijzen aan projecten en kunnen de details van een project worden bijgewerkt. 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. Het proces is wat ingewikkelder, maar u leert ook meer, dus dat lijkt een goed compromis.

Tip: het downloadpakket voor dit scenario omvat een voltooide versie van deze app: project-details-app.msapp.

Kort overzicht van 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. U kunt doorgaan met werken in PowerApps Studio voor internet, maar u kunt ook PowerApps Studio voor Windows gebruiken.

PowerApps Studio heeft drie deelvensters en een lint waardoor het maken van apps lijkt op het maken van een PowerPoint-presentatie:

  1. Linkernavigatiebalk, met een hiërarchische weergave van alle schermen en besturingselementen van de app, evenals de miniaturen op de schermen

  2. Middelste deelvenster, met het app-scherm waaraan u werkt

  3. Rechterdeelvenster, waar u opties instelt, zoals indeling en gegevensbronnen

  4. Vervolgkeuzelijst voor eigenschappen, waar u de eigenschappen selecteert waarop de formules betrekking hebben

  5. Formulebalk, waar u formules toevoegt (zoals in Excel) die het app-gedrag bepalen

  6. Lint, waar u besturingselementen toevoegt en ontwerpelementen aanpast

PowerApps Studio

Stap 1: Schermen maken

Nu we de stof hebben herhaald, gaan we een app bouwen.

De app maken en opslaan

  1. Klik of tik in PowerApps Studio op Nieuw en vervolgens onder Lege app op Telefoonindeling.

    Lege app: telefoonindeling

  2. Klik of tik op Bestand, waarna dit wordt geopend als het tabblad App-instellingen. Voer de naam 'App Projectbeheer' in.

    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.

    Opslaan in de cloud

  4. Klik of tik op Pictogram Terug naar app om naar de app terug te gaan.

Vier schermen aan de app toevoegen

In deze stap maken we vier schermen voor de app. We gebruiken verschillende indelingen, afhankelijk van de functie van het scherm. Later werken we verder met de schermen.

Scherm Functie
SelectTask Scherm openen; navigeren naar andere schermen
AssignManager Manager toewijzen aan een goedgekeurd project
ViewProjects Een lijst met projecten weergeven, met beknopte informatie
UpdateDetails De details van een project weergeven en bijwerken
  1. Klik op het tabblad Start op NewScreen en vervolgens op Doorscrolbaar scherm.

    Doorscrolbaar scherm

  2. Wijzig de naam van het scherm in SelectTask.

    Naam van scherm wijzigen

  3. Maak aanvullende schermen en geef deze een andere naam:

    1. Klik of tik op NewScreen en vervolgens op Doorscrolbaar scherm. Wijzig de naam van het scherm in AssignManager.
    2. Klik of tik op NewScreen en vervolgens op Lijstscherm. Wijzig de naam van het scherm in ViewProjects.
    3. Klik of tik op NewScreen en vervolgens op Formulierscherm. Wijzig de naam van het scherm in UpdateDetails.
  4. Selecteer het beletselteken (. . .) naast Scherm1 en klik of tik op Verwijderen.

    Scherm verwijderen

De app moet er nu uitzien zoals in de volgende afbeelding.

Alle app-schermen

Stap 2: Verbinding maken met een SharePoint-lijst

In deze stap gaan we verbinding maken met de SharePoint-lijst Productdetails. In deze app gebruiken we slechts één lijst, maar u kunt gemakkelijk met beide lijsten verbinding maken als u de app wilt uitbreiden.

  1. Klik of tik in de linkernavigatiebalk op het scherm SelectTask.

  2. Klik of tik in het rechterdeelvenster op Gegevensbron toevoegen.

    Verbinding maken met gegevens

  3. Klik of tik op Nieuwe verbinding.

    Nieuwe verbinding

  4. Klik of tik op SharePoint.

    SharePoint-verbinding

  5. Selecteer Rechtstreeks verbinding maken (cloudservices) en klik of tik op Maken.

    Rechtstreeks verbinding maken (cloudservices)

  6. Voer een SharePoint-URL in en klik of tik op Start.

    SharePoint-URL voor verbinding

  7. Selecteer de lijst Projectdetails en klik of tik op Verbinding maken.

    Lijst Projectdetails selecteren

    Het tabblad Gegevensbronnen in het rechterdeelvenster toont de verbinding die u hebt gemaakt.

    Tabblad Gegevensbronnen

Stap 3: Scherm SelectTask maken

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.

Titel bijwerken en inleidende tekst invoegen

  1. Selecteer in de linkernavigatiebalk het scherm SelectTask.

  2. Selecteer in het middelste venster de standaardwaarde [Title] en werk vervolgens in de formulebalk de eigenschap Text bij naar 'Contoso-projectbeheer'.

    Eigenschap Tekst in formulebalk

  3. Klik of tik op het tabblad Invoegen op Label en sleep het label onder de bovenste banner.

    Label toevoegen

  4. Stel in de formulebalk de volgende eigenschappen voor het label in:

    • Eigenschap Color = DarkGray
    • Eigenschap Size = 18
    • Eigenschap Text = Klik of tik op een taak om door te gaan...

    Labeltekst bijwerken

Twee navigatieknoppen toevoegen

  1. Klik of tik op het tabblad Invoegen op Knop en sleep de knop onder het label.

    De knop toevoegen

  2. Stel in de formulebalk de volgende eigenschappen voor de knop in:

    • Eigenschap OnSelect = 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.
    • Eigenschap Text = Manager toewijzen
  3. Wijzig de grootte van de knop om de tekst in te kunnen passen.

    Knoptekst bijwerken

  4. Voeg een andere knop in met de volgende eigenschappen:

    • Eigenschap OnSelect = Navigate(ViewProjects, Fade).
    • Eigenschap Text = Details bijwerken

    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.

De app uitvoeren

De app doet nog niet veel, maar u kunt de app al wel uitvoeren:

  1. Klik of tik op het scherm SelectTask (de app wordt altijd gestart vanuit het geselecteerde scherm in de Preview-modus in PowerApps Studio).

  2. Klik of tik op Pictogram App uitvoeren in de rechterbovenhoek om de app uit te voeren.

  3. Klik of tik op een van de knoppen om naar een ander scherm te navigeren.

  4. Klik of tik op Pictogram App-overzicht sluiten in de rechterbovenhoek om de app te sluiten.

Stap 4: Het scherm AssignManager bouwen

In deze stap gebruiken we een galerie om alle projecten weer te geven die zijn goedgekeurd maar nog geen manager hebben. We voegen ook andere besturingselementen toe, zodat u een manager kunt toewijzen.

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.

  1. Sla uw wijzigingen op.

  2. Klik of tik in de linkernavigatiebalk op het scherm AssignManager.

Titel bijwerken en inleidende tekst invoegen

  1. Wijzig [Title] in Manager toewijzen.

  2. Voeg een label toe met de volgende eigenschappen:

    • Eigenschap Color = DarkGray
    • Eigenschap Size = 18
    • Eigenschap Text = Selecteer een project en wijs vervolgens een manager toe

    Indeling Manager toewijzen

Een pijl-terug toe toevoegen om terug te gaan naar het scherm SelectTask

  1. Klik of tik op de blauwe balk bovenaan het scherm.

  2. Klik of tik op het tabblad Invoegen op Pictogrammen en vervolgens op Links.

    Pijl-links invoegen

  3. Verplaats de pijl naar de linkerkant van de blauwe balk en stel de volgende eigenschappen in:

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

    Knop Terug toevoegen

Galerie toevoegen en wijzigen

  1. Klik of tik op het tabblad Invoegen op Galerie en vervolgens op Verticaal.

    Verticale galerie toevoegen

  2. Selecteer in het rechterdeelvenster, in het menu Indeling, de optie Titel, subtitel en hoofdtekst.

    De galerie-indeling wijzigen

    De galerie heeft nu de juiste indeling, maar bevat nog wel de standaardvoorbeeldtekst. Daar gaan we nu iets aan doen.

    Galerie met standaardtekst

  3. Stel de volgende eigenschappen voor de galerie in:

    • Eigenschap BorderThickness = 1
    • Eigenschap BorderStyle = Dotted
    • Eigenschap Items = Filter('Projectdetails', PMAssigned="Niet toegewezen"). Allen projecten waaraan geen manager is toegewezen, worden in de galerie opgenomen.

    Galerie met tekst uit lijst

  4. Werk in het rechterdeelvenster de velden bij zodat ze overeenkomen met de volgende lijst:

    • ApprovedDate
    • Status
    • Title

    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).

    Picogram Pijl verwijderen

    Het scherm moet nu lijken op de volgende afbeelding.

    Opgemaakte galerie

De kleur van een item wijzigen als dit wordt geselecteerd

  1. Selecteer de galerie en stel vervolgens de eigenschap TemplateFill in op If (ThisItem.IsSelected=true, Orange, White).

  2. Selecteer een item in de galerie. Het scherm moet nu lijken op de volgende afbeelding.

    Galerie met geselecteerd item

Een label, tekstinvoer en knop OK toevoegen om managertoewijzingen in te dienen

  1. Klik of tik buiten de galerie waaraan u hebt gewerkt.

  2. Klik of tik op het tabblad Invoegen op Label. Sleep het label onder de galerie, naar de linkerkant. Stel de volgende eigenschappen voor het label in:

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

    Label Manager toevoegen

  3. Klik of tik op het tabblad Invoegen op Tekst en vervolgens op Tekstinvoer. Sleep de tekstinvoer onder de galerie, in het midden. Stel de volgende eigenschappen voor de vervolgkeuzelijst in:

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

    Tekstinvoer toevoegen

  4. Klik of tik op het tabblad Invoegen op Knop. Sleep de knop onder de galerie, naar de rechterkant. Stel de volgende eigenschappen voor de knop in:

    • Eigenschap Height = 60
    • Eigenschap OnSelect = Patch('Projectdetails', LookUp('Projectdetails', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Zie De formule nader bekeken voor meer informatie.
    • Met deze formule wordt de lijst Projectdetails bijgewerkt door een waarde voor het veld PMAssigned in te stellen.
    • Eigenschap Size = 20
    • Eigenschap Text = "OK"
    • Eigenschap Width = 80

    Knop OK toevoegen

Het voltooide scherm moet nu lijken op de volgende afbeelding.

Voltooid scherm Manager toewijzen

Stap 5: scherm ViewProjects bouwen

In deze stap wijzigen we de eigenschappen voor de galerie in het scherm ViewProjects. Deze galerie toont items uit de lijst Projectdetails. In dit scherm selecteert u een item en vervolgens bewerkt u de details ervan in het scherm UpdateDetails.

  1. Klik of tik in de linkernavigatiebalk op het scherm ViewProjects.

  2. Wijziging [Title] in Projecten weergeven.

  3. Tik of klik in de linkernavigatiebalk op BrowserGallery1 onder ViewProjects.

  4. Selecteer in het rechterdeelvenster, in het menu Indeling, de optie Titel, subtitel en hoofdtekst.

    De galerie-indeling wijzigen

    De galerie heeft nu de juiste indeling, met de standaardvoorbeeldtekst.

    Galerie met standaardtekst

  5. Selecteer de vernieuwknop Pictogram Vernieuwen en stel de eigenschap OnSelect in op Refresh('Projectdetails').

  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).

Een pijl-terug toe toevoegen om terug te gaan naar het scherm SelectTask

  1. Klik of tik in de linkernavigatiebalk op het scherm AssignManager.

  2. Selecteer de pijl-terug die u hier hebt toegevoegd en kopieer deze.

  3. Plak de pijl in het scherm ViewProjects en plaats deze aan de linkerkant van de vernieuwknop.

    Knop Terug

    De pijl bezit nu alle eigenschappen, inclusief de eigenschap OnSelect van Navigate(SelectTask, Fade).

De gegevensbron wijzigen voor de galerie BrowseGallery1

  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)).

    Hierdoor wordt de gegevensbron van de galerie ingesteld op de lijst Projectdetails. Er wordt gebruikgemaakt van het veld Titel om te zoeken en sorteren.

  2. Selecteer het Pijlpictogram Details in het eerste galerie-item en stel de eigenschap OnSelect in op Navigate(UpdateDetails, None).

     Galerie Projecten weergeven; eerste item geselecteerd

  3. Werk in het rechterdeelvenster de velden bij zodat ze overeenkomen met de volgende lijst:

    • Status
    • PMAssigned
    • Title

    Galerievelden

    Het voltooide scherm moet nu lijken op de volgende afbeelding.

    Voltooid scherm Projecten weergeven

Stap 6: Scherm UpdateDetails bouwen

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 dit scherm bewerkt u de details van een project dat u hebt geselecteerd in het scherm Projecten weergeven.

  1. Klik of tik in de linkernavigatiebalk op het scherm UpdateDetails.

  2. Wijzig [Title] in Details bijwerken.

  3. Klik of tik in de linkernavigatiebalk op EditForm1 onder UpdateDetails.

  4. Stel de volgende eigenschappen voor het formulier in:

    • Eigenschap DataSource = 'Projectdetails'
    • Eigenschap Item = 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:

    • Title
    • PMAssigned
    • Status
    • ProjectedStartDate
    • ProjectedEndDate
    • ProjectedDays
    • ActualDays

    Formuliervelden bewerken

  6. Selecteer de annuleerknop Pictogram Annuleren en stel de eigenschap OnSelect in op ResetForm(EditForm1); Back().

  7. Select de knop voor opslaan Pictogram met selectievakje voor opslaan en bekijk de OnSelect-formule: SubmitForm(EditForm1). We gebruiken het besturingselement voor formulierbewerking, dus we kunnen gebruikmaken van Submit() in plaats van Patch(), zoals we eerder deden.

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).

Voltooid scherm Details bijwerken

Stap 7: De app uitvoeren

De app is voltooid, dus we gaan de app uitvoeren om te zien hoe deze werkt. We voegen een koppeling naar de app toe op de SharePoint-site. U kunt de app in de browser uitvoeren, maar mogelijk wilt u de app met anderen delen. Zie Uw apps delen voor meer informatie.

Een koppeling aan de app toevoegen

  1. Klik of tik in het startprogramma voor Office 365-apps op PowerApps.

    PowerApps in startprogramma voor Office 365-apps

  2. Klik of tik in PowerApps op het beletselteken (. . .) voor Projectbeheer-app en vervolgens op Openen.

    Projectbeheer-app selecteren

  3. Kopieer het adres (URL) voor de app in de browser.

    App-URL kopiëren

  4. Klik of tik in SharePoint op KOPPELINGEN BEWERKEN.

    SharePoint-sitekoppelingen bewerken

  5. Klik of tik op (+) koppeling.

    App-koppeling aan SharePoint-site toevoegen

  6. Voer 'Projectbeheer-app' in en plak het adres voor de app in.

    Eigenschappen van koppeling bewerken

  7. Klik of tik op OK en vervolgens op Opslaan.

    Wijzigingen aan koppeling opslaan

Een manager aan een project toewijzen

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. Vervolgens spelen we de rol van de projectmanager en voegen wat gegevens toe over een project dat aan ons is toegewezen.

  1. Eerst kijken we naar de lijst Projectdetails in SharePoint. Twee projecten hebben de waarde Unassigned in de kolom PMAssigned. Die zien we in de app.

    Niet-toegewezen projecten in SharePoint-lijst

  2. Klik of tik op de koppeling die u in de app hebt gemaakt.

  3. Klik of tik in het eerste scherm op Manager toewijzen.

    Introductiescherm van app

  4. In het scherm Manager toewijzen ziet u de twee niet-toegewezen projecten uit de lijst. Selecteer het project Nieuw BI-software.

    Galerie met geselecteerd item

  5. Voer in de tekstinvoer naast Manager 'Femke van Nuil' in en klik op OK.

    De wijziging wordt in de lijst doorgevoerd en de galerie wordt vernieuwd, dus alleen het resterende niet-toegewezen project wordt nog weergegeven.

    Manager toewijzen aan project

  6. Ga terug naar de SharePoint-lijst en vernieuw de pagina. U ziet dat de projectvermelding nu is bijgewerkt met de naam van de projectmanager.

    Projectmanager toegewezen in SharePoint-lijst

Details bijwerken voor het project

  1. Klik of tik op Pictogram Terug om naar het eerste scherm terug te gaan en klik of tik vervolgens op Details bijwerken.

    Introductiescherm van app

  2. Voer in het scherm Projecten weergeven 'Nieuw' in het zoekvak in.

    Zoeken in app-galerie

  3. Klik op Pijlpictogram Details voor het item Nieuwe BI-software.

    Galerie-item geselecteerd

  4. Stel in het scherm Details bijwerken de volgende waarden in:

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

    Itemdetails bijwerken

  5. Klik of tik op Pictogram Vinkje om de wijziging op de SharePoint-lijst toe te passen.

  6. Sluit de app en ga terug naar de lijst. De projectvermelding is bijgewerkt met de wijzigingen voor de datum en de dag.

    Bijgewerkte SharePoint-lijst

De formule nader bekeken

Dit is de tweede optionele sectie over PowerApps-formules. 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 deze sectie kijken we naar een formule die we gebruiken voor het scherm AssignManager van de tweede app. Dit is de formule:

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

Wat doet deze formule? 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. De formule maakt voor de uitvoering gebruik van functies:

  • De functie Patch wijzigt een of meer records in een gegevensbron.

  • De functie LookUp vindt de eerste record in een tabel die aan een formule voldoet.

Als de functies samen in een formule worden gestopt, gebeurt het volgende:

  1. Als u op de knop OK klikt, wordt de functie Patch aangeroepen om de lijst Projectdetails bij te werken.

  2. Binnen de functie Patch identificeert de functie LookUp welke rij in de lijst Projectdetails moet worden bijgewerkt. Hiertoe wordt de id van het geselecteerde galerie-item vergeleken met de id in de lijst. Bijvoorbeeld: een id van 12 betekent dat de vermelding voor Nieuwe BI-software moet worden bijgewerkt.

  3. De functie Patch heeft de juiste id, dus het veld PMAssigned wordt bijgewerkt naar de waarde in TextInput1.Text.

Volgende stappen

De volgende stap in deze reeks zelfstudies gaat over het maken van een Power BI-rapport om projecten te analyseren.