Een canvas-app maken om projecten te beheren

In deze taak gaat u een volledig nieuwe canvas-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 van dezelfde besturingselementen en formules die u in de eerste app hebt gezien, maar u gaat deze keer zelf een groter deel van de app bouwen. Het proces is wat ingewikkelder, maar u leert ook meer, dus dat lijkt een goed compromis.

Kort overzicht van Power Apps Studio

Power Apps 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

Stap 1: schermen maken

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

De app maken

Maak een lege canvas-app met de indeling Telefoon en de naam "Projectbeheer-app".

Vier schermen aan de app toevoegen

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

1. Klik of tik op het tabblad Start op NewScreen en vervolgens op Doorscrolbaar scherm.

   

2. Wijzig de naam van het scherm in SelectTask.

   

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.

   

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

Stap 2: Verbinding maken met een lijst die is gemaakt met Microsoft Lijsten

In deze stap gaan we verbinding maken met de lijst Projectdetails. 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.

   

3. Klik of tik op Nieuwe verbinding.

   

4. Klik of tik op SharePoint.

   

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

   

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

   

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

   

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

   

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 Power Apps.

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-projectmanagement'.

   

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

   

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

     

Twee navigatieknoppen toevoegen

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

   

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.

   

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

   • Eigenschap OnSelect = Navigate(ViewProjects, Fade).

   • Eigenschap Text = Details bijwerken

     

     Notitie

     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 Power Apps Studio).

2. Klik of tik op 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 in de rechterbovenhoek om de app te sluiten.

Stap 4: 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.

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"

     

Een pijl-terug 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.

   

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

     

Galerie toevoegen en wijzigen

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

   

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

   

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

   

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.

     

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

   • ApprovedDate

   • -Status

   • Titel

     

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

   

   Het scherm moet nu lijken op de volgende afbeelding.

   

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.

   

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:"

   

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

   

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

   

Het voltooide scherm moet nu lijken op de volgende afbeelding.

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 heeft nu de juiste indeling, met de standaardvoorbeeldtekst.

   

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

6. Selecteer de knop over het nieuwe item en stel de eigenschap OnSelect in op NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Een pijl-terug 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.

   

   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 de in het eerste galerij-item en stel de eigenschap OnSelect in op Navigeren (UpdateDetails, Geen).

   

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

   • -Status

   • PMAssigned

   • Titel

     

     Het voltooide scherm moet nu lijken op de volgende afbeelding.

     

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:

   • Titel

   • PMAssigned

   • Status

   • ProjectedStartDate

   • ProjectedEndDate

   • ProjectedDays

   • ActualDays

     

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

7. Selecteer de knop . en bekijk de formule voor OnSelect - 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).

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 app delen voor meer informatie.

Een koppeling aan de app toevoegen

1. Klik of tik in de Office 365-startfunctie voor apps op Power Apps.

   

2. Klik of tik in Power Apps op het beletselteken (. . .) voor Projectmanagement-app en vervolgens op Openen.

   

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

   

4. Klik of tik in SharePoint op KOPPELINGEN BEWERKEN.

   

5. Klik of tik op (+) koppeling.

   

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

   

7. Klik of tik op OK en vervolgens op 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.

   

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.

   

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

   

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.

   

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

   

Details bijwerken voor het project

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

   

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

   

3. Klik voor het item Nieuwe BI-software.

   

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

   • Het veld ProjectedStartDate = "3/6/2017"

   • Het veld ProjectedEndDate = "3/24/2017"

   • Het veld ProjectedDays = "15"

   

5. Klik of tik op om de wijziging op de 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.

   

De formule nader bekeken

Dit is de tweede optionele sectie over Power Apps-formules. In de eerste sectie hebben we gekeken naar een van de formules die Power Apps 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 Patch-functie wijzigt een of meer records in een gegevensbron.

• De LookUp-functie 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.

Zie ook

• Scenario's voor SharePoint-integratie