Een app genereren om projectaanvragen af te handelenGenerate an app to handle project requests

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.

De SharePoint-lijsten zijn gereed, dus we kunnen onze eerst app gaan maken en aanpassen.Now that the SharePoint lists are in place, we can build and customize our first app. PowerApps is geïntegreerd met SharePoint, dus het is eenvoudig om rechtstreeks vanuit een lijst een eenvoudige app met drie schermen te genereren.PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. Met deze app kunt u zowel overzichten als gedetailleerde informatie voor elk lijstitem bekijken, bestaande lijstitems bijwerken en nieuwe lijstitems maken.This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. Als u een app rechtstreeks vanuit een lijst maakt, wordt de app als een weergave voor die lijst weergegeven.If you create an app directly from a list, the app appears as a view for that list. U kunt de app vervolgens in een browser uitvoeren, en tevens op een mobiele telefoon.You can then run that app in a browser, as well as on a mobile phone.

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

Stap 1: Een app genereren op basis van een SharePoint-lijstStep 1: Generate an app from a SharePoint list

  1. Klik of tik in de lijst Projectaanvragen die u hebt gemaakt op PowerApps en vervolgens op App maken.In the Project Requests list you created, click or tap PowerApps, then Create an app.

    Een app maken

  2. Geef de app een naam, bijvoorbeeld Projectaanvraag-app, en klik of tik op Create.Give the app a name, like "Project Requests app", then click or tap Create. Als de app klaar is, wordt deze geopend in PowerApps Studio voor internet.When the app is ready, it opens in PowerApps Studio for web.

    Een naam opgeven voor de app

Stap 2: De app in PowerApps Studio controlerenStep 2: Review the app in PowerApps Studio

  1. In PowerApps Studio toont het linker navigatiedeelvenster standaard een hiërarchische weergave van de schermen en besturingselementen van de app.In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    PowerApps Studio met hiërarchische weergave

  2. Klik of tik op het miniatuurpictogram om weergaven te schakelen.Click or tap the thumbnail icon to switch views.

    Weergaveselectie van PowerApps Studio

  3. Klik of tik op een scherm om het in het middelste deelvenster te bekijken.Click or tap each screen to view it in the middle pane. Er zijn drie schermen:There are three screens:

    1. Het bladerscherm: voor het bladeren in, sorteren en filteren van gegevens die uit de lijst zijn opgehaald.The browse screen, where you browse, sort, and filter the data pulled in from the list.
    2. Het detailscherm: voor het weergeven van meer informatie over een item.The details screen, where you view more detail about an item.
    3. Het scherm voor bewerken/maken: waar u een bestaand item bewerkt of een nieuw item maakt.The edit/create screen, where you edit an existing item or create a new one.

      PowerApps Studio met miniatuurweergave

Stap 3: Het bladerscherm van de app aanpassenStep 3: Customize the app's browse screen

  1. Klik of tik op het bladerscherm.Click or tap the browse screen.

    Het scherm heeft een indeling met een galerie voor het weergeven van lijstitems en andere besturingselementen, zoals een zoekbalk en een sorteerknop.This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. Selecteer de galerie BrowseGallery1 door op een record te klikken of tikken, behalve de eerste record.Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    Bladergalerie

  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:

    • RequestDateRequestDate
    • DescriptionDescription
    • TitleTitle
    • RequestorRequestor

      Galerievelden

  4. Selecteer de eigenschap Items, waarbij BrowseGallery1 nog steeds is geselecteerd.With BrowseGallery1 still selected, select the Items property.

    Eigenschap Items

  5. Wijzig de formule in SortByColumns(Filter('Projectaanvragen', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).Change the formula to SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Formulebalk

    Hiermee kunt u op het veld Title sorteren en zoeken in plaats van op de uitgekozen standaardwaarde.This allows you to sort and search by the Title field, instead of the default that PowerApps picked. Zie De formule nader bekeken voor meer informatie.See Formula deep-dive for more information.

  6. Klik of tik op Bestand en vervolgens op Opslaan.Click or tap File, then Save. Klik of tik op Pictogram Terug naar app om naar de app terug te gaan.Click or tap Back to app icon to go back to the app.

Stap 4: Het detailscherm en het scherm voor bewerken van de app aanpassenStep 4: Customize the app's details screen and edit screen

  1. Klik of tik op het detailscherm.Click or tap the details screen.

    Dit scherm heeft een andere indeling. Het bevat een weergaveformulier om de details te tonen van een in de galerie geselecteerd item.This screen has a different layout that contains a display form to show the details for an item selected in the gallery. Het bevat besturingselementen om items te bewerken en verwijderen en om terug te gaan naar het bladerscherm.It has controls to edit and delete items, and to go back to the browse screen.

  2. Selecteer het weergaveformulier DetailForm1.Select the DetailForm1 display form.

    Weergaveformulier met details

  3. Sleep in het rechterdeelvenster het veld Title naar boven.In the right pane, drag the Title field to the top.

    Veld Title

  4. Klik of tik op het scherm voor bewerken.Click or tap the edit screen.

    Dit scherm bevat een bewerkingsformulier waar u het geselecteerde item kunt bewerken of een nieuw item kunt maken (als u hier rechtstreeks vanuit het bladerscherm terechtkomt).This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). Het bevat besturingselementen om wijzigingen op te slaan of te negeren.It has controls to save or discard changes.

  5. Selecteer het bewerkingsformulier EditForm1.Select the EditForm1 edit form.

    Bewerkingsformulier

  6. Sleep het veld Title naar boven, net zoals u dat zo-even hebt gedaan.As above, drag the Title field to the top.

    Veld Title

Stap 5: De app vanuit de lijst uitvoerenStep 5: Run the app from the list

  1. Klik of tik in de lijst Projectaanvragen op Alle items en vervolgens op App Projectaanvragen.In the Project Requests list, click or tap All Items, then Project Requests app.

    App Projectaanvragen weergeven

  2. Klik op Openen. Hiermee wordt de app in een nieuw browsertabblad geopend.Click Open, which opens the app in a new browser tab.

    App Projectaanvragen openen

  3. Klik of tik in de app opIn the app, click or tap Pictogram Naar details voor het eerste item in de bladergalerie.for the first item in the browse gallery.

    Eerste galerie-item

  4. Klik of tik opClick or tap Pictogram Pen (bewerken) om het item te bewerken.to edit the item.
  5. Werk het veld Description bij; wijzig het laatste woord ('groep') in 'team' en klik of tik vervolgens op vinkjeUpdate the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    Veld Description bijwerken

  6. Sluit het browsertabblad.Close the browser tab.
  7. Ga terug naar de lijst Projectaanvragen, klik of tik op App Projectaanvragen en vervolgens op Alle items.Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    Alle items bekijken

  8. Controleer de wijziging die u hebt gemaakt vanuit de app.Verify the change you made from the app.

    De bewerking controleren

Dit is een tamelijk eenvoudige app en we hebben slechts een paar eenvoudige aanpassingen gedaan. U ziet echter dat het mogelijk is snel iets leuks te maken.This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. We gaan door naar de volgende taak, maar bekijk rustig de app nog even om te zien hoe de besturingselementen en de formules samenwerken om de app te laten functioneren.We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

De formule nader bekekenFormula deep-dive

Deze sectie is optioneel, maar het biedt meer inzicht in de werking van de formules.This section is optional, but it will help you understand more about how formulas work. In stap 3 van deze taak hebben we de formule gewijzigd voor de eigenschap Items van BrowseGallery1.In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. We hebben met name de sorteer- en zoekfunctie gewijzigd zodat het veld Title kan worden gebruikt in plaats van het door PowerApps gekozen veld.Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. Hier ziet u de gewijzigde formule:Here's the modified formula:

SortByColumns ( Filter ( 'Projectaanvragen', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

Wat doet deze formule?But what does this formula do? De formule stelt de gegevensbron vast die in de galerie wordt weergegeven, filtert de gegevens die zijn gebaseerd op in het zoekvak ingevoerde tekst en sorteert de resultaten op basis van de sorteerknop in de app.It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. De formule maakt voor de uitvoering gebruik van functies.The formula uses functions to do its work. Functies gebruiken parameters (invoer), voeren een bewerking uit (bijvoorbeeld filteren) en geven een waarde als resultaat terug (uitvoer):Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • De functie SortByColumns sorteert een tabel die is gebaseerd op een of meer kolommen.The SortByColumns function sorts a table based on one or more columns.
  • De functie Filter zoekt de records in een tabel die aan een formule voldoen die u hebt opgegeven.The Filter function finds the records in a table that satisfy a formula that you specify.
  • De functie StartsWith test of een tekenreeks begint met een andere tekenreeks.The StartsWith function tests whether one text string begins with another.
  • De functie If retourneert een waarde als een voorwaarde waar is en retourneert een andere waarde als dezelfde voorwaarde onwaar is.The If function returns one value if a condition is true, and returns another value if the same condition is false.

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 tekst in het zoekvak invoert, vergelijkt de functie StartsWith de tekst met het begin van elke tekenreeks in de kolom Title van de lijst.If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith ( Title, TextSearchBox1.Text )StartsWith ( Title, TextSearchBox1.Text )

    Als u bijvoorbeeld 'app' in het zoekvak invoert, ziet u een aantal resultaten, waaronder items die beginnen met 'Apparaat' en 'App'.For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." De items met 'Mobiele apparaten' ziet u niet omdat deze niet beginnen met 'app'.You won't see all the "Mobile devices" items because those don't start with "de."

  2. De functie Filter geeft als resultaat rijen terug uit de tabel Projectaanvragen.The Filter function returns rows from the Project Requests table. Als het zoekvak geen tekst ter vergelijking bevat, geeft Filter alle rijen als resultaat terug.If there is no text in the search box to compare, Filter returns all rows.

    Filter ( 'Projectaanvragen', StartsWith ( Title, TextSearchBox1.Text )Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. De functie If kijkt of de variabele SortDescending1 is ingesteld op waar of onwaar (ingesteld door de sorteerknop in de app).The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). De functie geeft vervolgens de waarde Aflopend of Oplopend als resultaat terug.The function then returns a value of Descending or Ascending.

    If ( SortDescending1, Aflopend, Oplopend )If ( SortDescending1, Descending, Ascending )

  4. De functie SortByColumns kan de galerie nu sorteren.Now the SortByColumns function can sort the gallery. In dit geval wordt er gesorteerd op basis van het veld Title, maar dit kan een ander veld zijn dan het veld waarnaar u zoekt.In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

Als u dit nog allemaal kunt volgen, dan hebt u waarschijnlijk een beter idee van hoe de formule werkt en hoe u functies en andere elementen kunt combineren om uw apps naar wens te laten functioneren.If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. Zie Formuleverwijzingen voor PowerApps voor meer informatie.For more information, see Formula reference for PowerApps.

Volgende stappenNext steps

De volgende stap in deze reeks zelfstudies bestaat uit het maken van een stroom voor het beheren van projectgoedkeuringen.The next step in this tutorial series is to Create a flow to manage project approvals.