Een volledig nieuwe app makenCreate an app from scratch

Maak een volledig nieuwe app met een van de vele gegevensbronnen, en voeg later meer bronnen toe indien nodig.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. Bepaal het uiterlijk en gedrag van elk UI-element om de resultaten te optimaliseren voor uw specifieke doelstellingen en werkstroom.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. Deze benadering kost veel meer tijd dan automatisch een app genereren, maar ervaren app-makers kunnen zo de beste app voor hun wensen maken.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Notitie

Dit onderwerp is geschreven voor PowerApps Studio voor Windows, maar de stappen zijn vergelijkbaar als u werkt met PowerApps in een browser.This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Wanneer u deze zelfstudie volgt, maakt u een app met twee schermen.By following this tutorial, you'll create an app that contains two screens. In een scherm kunnen gebruikers bladeren door een set records:On one screen, users can browse through a set of records:

Scherm waarin een gebruiker kan bladeren door een gegevensset

In het andere scherm kunnen gebruikers een record maken, een of meer velden in een record bijwerken of een hele record verwijderen:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Scherm waarin een gebruiker gegevens kan toevoegen of bijwerken

VereistenPrerequisites

In deze zelfstudie kunt u alleen de algemene concepten doorlezen, of u kunt de zelfstudie precies volgen door de stappen te voltooien.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Kopieer deze gegevens en plak ze in een Excel-bestand.Copy this data, and then paste it into an Excel file.

    Start DayStart Day Start TimeStart Time Volunteer 1Volunteer 1 Volunteer 2Volunteer 2
    SaturdaySaturday 10am-noon10am-noon VasquezVasquez KumashiroKumashiro
    SaturdaySaturday noon-2pmnoon-2pm IceIce SinghalSinghal
    SaturdaySaturday 2pm-4-pm2pm-4-pm MykMyk MuellerMueller
    SundaySunday 10am-noon10am-noon LiLi AdamsAdams
    SundaySunday 10am-noon10am-noon SinghSingh MorganMorgan
    SundaySunday 10am-noon10am-noon BatyeBatye NguyenNguyen
  2. Maak deze gegevens op als tabel met de naam Schedule, zodat de gegevens kunnen worden geparseerd door PowerApps.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Zie Een Excel-tabel maken in een werkblad voor meer informatie.For more information, see Create an Excel table in a worksheet.

  3. Sla het bestand op onder de naam eventsignup.xls en upload het naar een cloudopslagaccount, zoals OneDrive.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.

  4. Als PowerApps nieuw voor u is:If you're new to PowerApps:

Een lege app maken en verbinding maken met gegevensCreate a blank app, and connect to data

  1. Klik of tik in PowerApps Studio op Nieuw in het menu Bestand (aan de linkerkant van het scherm).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    Optie Nieuw in het menu Bestand

  2. Klik of tik onder Lege app op Telefoonindeling.On the Blank app tile, click or tap Phone layout.

    Optie voor het maken van een app op basis van gegevens

  3. Volg wanneer u daarom wordt gevraagd de rondleiding, om te begrijpen wat de hoofdgebieden van PowerApps zijn (of klik of tik op Skip).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    Korte rondleiding

    U kunt de rondleiding altijd later nog volgen door eerst op het vraagtekenpictogram in de rechterbovenhoek en vervolgens op Take the intro tour te klikken of tikken.You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. Klik of tik op een pictogram in de rechterbovenhoek van de linkernavigatiebalk om over te schakelen naar de miniatuurweergave.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Schakelen tussen weergaven

  5. Klik of tik in het rechterdeelvenster op Gegevensbron toevoegen.In the right-hand pane, click or tap Add data source.

    Gegevensbron toevoegen

  6. Voer een van de volgende stappen uit:Perform either of these steps:

    • Als u al een verbinding met uw cloudopslagaccount hebt, klikt of tikt u daarop.If you already have a connection to your cloud-storage account, click or tap it.
    • Als u nog geen verbinding hebt met uw cloudopslagaccount, klikt of tikt u op Add connection, klikt of tikt u op uw accounttype, klikt of tikt u op Connect en geeft u vervolgens (wanneer u daarom wordt gevraagd) uw referenties op.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. Klik of tik onder Choose an Excel file op eventsignup.xlsx.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    Het Excel-bestand opgeven dat u wilt gebruiken

  8. Selecteer onder Choose a table het selectievakje Schedule en klik of tik op Connect.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    De Excel-tabel opgeven die u wilt gebruiken

    Op het tabblad Data sources in het rechter deelvenster worden de gegevensbronnen weergegeven die u hebt toegevoegd aan uw app.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Verbonden gegevensbronnen weergeven

    Voor deze zelfstudie is slechts één gegevensbron nodig, maar u kunt er later meer toevoegen.This tutorial requires only one data source, but you can add more data sources later.

Gegevens weergevenShow the data

  1. Ga naar het tabblad Start en klik of tik op Nieuw scherm en vervolgens op Lijstscherm.In the Home tab, click or tap New screen and then click or tap List screen.

    Een indeling toevoegen met elementen voor een koptekst, ondertitel en hoofdtekst

    Er wordt een scherm toegevoegd met verschillende standaardbesturingselementen, zoals een zoekvak en een besturingselement Galerie.A screen is added with several default controls, such as a search box and a Gallery control. De galerie vult het volledige scherm onder het zoekvak.The gallery covers the entire screen under the search box.

  2. Klik op of tik op een willekeurige plaats in de galerie (behalve op een pijl), bijvoorbeeld vlak onder het zoekvak.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Galerie selecteren

  3. Open in het rechterdeelvenster de lijst Indelingen en klik of tik vervolgens op de optie voor een titel, een ondertitel en hoofdtekst.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    Galerie selecteren

  4. Klik of tik in de lijst met eigenschappen op Items, kopieer deze formule en plak die in de formulebalk:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Als u niet zeker weet waar u de eigenschappenlijst vindt, raadpleegt u Besturingselementen toevoegen en configureren.If you're not sure where the property list is, see Add and configure controls.

    Notitie

    Kolomnamen met spaties in gegevensbronnen van Excel of SharePoint worden in PowerApps vervangen door ‘_x0020_’.For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". In dit voorbeeld wordt de kolom 'Volunteer 1' in een formule weergegeven als 'Volunteer_x0020_1'.In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Deze galerie laat de gegevens uit de tabel Schedule zien.This gallery shows the data from the Schedule table.

    De standaardweergave van de Schedule-gegevens in de galerie

    Met het zoekvak kan een filter worden toegepast op de galerie, op basis van de tekst die de gebruiker typt.A search box can filter the gallery based on text that the user types. Als een gebruiker ten minste één letter in het zoekvak typt, geeft de galerie alleen de records weer waarin het veld Volunteer 1 de tekst bevat die de gebruiker heeft getypt.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    Met de sorteerknop kunnen de records worden gesorteerd op basis van de gegevens in de kolom Volunteer 1.The sort button can sort the records based on data in the Volunteer 1 column. Wanneer een gebruiker op deze knop klikt of tikt, verandert de sorteervolgorde van oplopend naar aflopend of omgekeerd.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    Deze formule bevat de functies Sort, If, IsBlank, Filter en Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Voor meer informatie over deze en andere functies raadpleegt u de naslaginformatie over formulesFor more information about these and other functions, see the formula reference

  5. Typ een i in het zoekvak en klik of tik eenmaal (of een oneven aantal malen) op de knop Sorteren.Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    De resultaten worden weergegeven in de galerie.The gallery shows these results.

    De galerie sorteren en filteren

    Meer informatie over Sorteren, Filteren en andere functiesMore information about the Sort, Filter, and other functions

  6. Selecteer het besturingselement Label boven aan het scherm door erop te klikken of tikken.Select the Label control at the top of the screen by clicking or tapping the control.

    Titelbalk selecteren

  7. Klik of tik in de lijst met eigenschappen op Text, kopieer deze tekst en plak die in de formulebalk:In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "Records weergeven""View Records"

    Titelbalk wijzigen

Het ChangeScreen en de banner makenCreate the ChangeScreen and its banner

  1. Verwijder Screen1 en wijzig de naam van Screen2 in ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Naam van scherm wijzigen

  2. Voeg een scherm toe en noem het ChangeScreen.Add a screen, and rename it ChangeScreen.

    Scherm toevoegen en de naam wijzigen

  3. Ga naar het tabblad Invoegen en klik of tik op Tekst en vervolgens op Label.On the Insert tab, click or tap Text, and then click or tap Label.

  4. Configureer het besturingselement Label dat u zojuist hebt toegevoegd:Configure the Label control that you just added:

    • Stel de eigenschap Text in op deze formule:Set its Text property to this formula:
      "Record wijzigen""Change record"

    • Stel de eigenschap Fill in op deze formule:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1).RGBA(62, 96, 170, 1).

    • Stel de eigenschap Color in op deze formule:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • Stel de eigenschap Align in op Center.Set its Align property to Center.

    • Stel de eigenschap X in op 0.Set its X property to 0.

    • Stel de eigenschap Width in op 640.Set its Width property to 640. Uw wijzigingen wordt toegepast op het besturingselement Label.The Label control reflects your changes.

      ChangeScreen met banner

Een formulier toevoegen en configurerenAdd and configure a form

  1. Klik of tik op het tabblad Invoegen op Tekst en klik of tik vervolgens op Tekstvak.On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. Verplaats het formulier en wijzig de grootte zodat het vrijwel het gehele scherm vult.Move and resize the form to cover most of the screen.

    Een formulier toevoegen

    Het formulier heet standaard Form1, tenzij u al eerder een formulier hebt toegevoegd en weer verwijderd.The form is named Form1 by default unless you already added and removed a form. In dat gevel wijzigt u de naam van het formulier in Form1.In that case, rename the form to Form1.

  3. Stel de eigenschap DataSource van Form1 in op Schedule.Set DataSource property of Form1 to Schedule.

  4. Stel de eigenschap Item van Form1 in op deze expressie:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. Klik of tik in het rechterdeelvenster op het selectievakje voor elk veld om het weer te geven.In the right-hand pane, click or tap the checkbox for each field to show it.

    Velden weergeven in formulier

  6. Klik of tik onder aan het scherm op Een aangepaste kaart toevoegen.Near the bottom of the form, click or tap Add a custom card.

    Een aangepaste kaart toevoegen

  7. Voeg een besturingselement Label toe aan de nieuwe kaart.Add a Label control in the new card.

  8. Stel de eigenschap AutoHeight van het nieuwe besturingselement in op true en de eigenschap Text op deze formule:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    In het label worden eventuele fouten in het formulier weergegeven.The label will show any errors from the form.

  9. Klik of tik in de linkernavigatiebalk op de bovenste miniatuur om ChangeScreen te selecteren.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. Klik of tik op het tabblad Invoegen op Pictogrammen, klik of tik op de optie om een Pijl-terug toe te voegen en verplaats de pijl naar de linkerbenedenhoek van het scherm.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.

  11. Stel de eigenschap OnSelect van de pijl in op deze formule:Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    Wanneer de gebruiker op de pijl klikt of tikt, opent de functie Navigate het ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Voeg een besturingselement Button toe onder het formulier en stel de eigenschap Text van de knop in op ”Save”.Add a Button control under the form, and set the button's Text property to "Save".

    Een knop Save toevoegen

  13. Stel de eigenschap OnSelect van deze knop in op deze formule:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Wanneer de gebruiker op de knop klikt of tikt, slaat de functie SubmitForm alle wijzigingen in de gegevensbron op en wordt het ViewScreen opnieuw weergegeven.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. Voeg onderaan het scherm nog een knop toe, stel de eigenschap Text in op ”Remove” en stel de eigenschap OnSelect in op deze formule:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    Wanneer de gebruiker op de knop klikt of tikt, verwijdert de functie Remove de record en wordt het ViewScreen opnieuw weergegeven.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Stel de eigenschap Visible van de knop Remove in op deze formule:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Met deze stap verbergt u de knop Remove wanneer de gebruiker een record maakt.This step hides the Remove button when the user is creating a record.

    Het ChangeScreen komt overeen met dit voorbeeld:The ChangeScreen matches this example:

    Definitief ChangeScreen

Navigatie van ViewScreen instellenSet navigation from ViewScreen

  1. Klik of tik in de linkernavigatiebalk op de bovenste miniatuur voor het ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    ViewScreen openen

  2. Klik of tik op Pijl-vooruit voor de eerste record in de galerie.Click or tap the Next arrow for the first record in the gallery.

    Pijl-vooruit

  3. Stel de eigenschap OnSelect van de pijl in op deze formule:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. Klik of tik op het pluspictogram in de rechterbovenhoek.In the upper-right corner, click or tap the plus icon.

    Record toevoegen

  5. Stel de eigenschap OnSelect van het geselecteerde pictogram in op deze formule:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Wanneer de gebruiker op dit pictogram klikt of tikt, wordt het ChangeScreen weergegeven met lege velden, zodat de gebruiker eenvoudig een nieuwe record kan maken.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

De app uitvoerenRun the app

Tijdens het aanpassen van de app kunt u uw wijzigingen testen door de app uit te voeren in de Preview-modus, zoals de stappen in deze sectie laten zien.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. Klik of tik in de linkernavigatiebalk op de bovenste miniatuur om het ViewScreen te selecteren.In the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    ViewScreen selecteren

  2. Open de Preview-modus door op F5 te drukken (of klik of tik op het pictogram Preview rechtsboven).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Preview-modus openen

  3. Klik of tik op de pijl-vooruit voor een record om de details van de record weer te geven.Click or tap the Next arrow for a record to show details about that record.

  4. Wijzig in het ChangeScreen de informatie in een of meer velden, sla uw wijzigingen op door te klikken of tikken op Opslaan of verwijder de record door te klikken of tikken op Verwijderen.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.

  5. Sluit de Preview-modus door op Esc te drukken (of klik of tik op het pictogram sluiten onder de titelbalk).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Preview-modus sluiten

Volgende stappenNext steps

  • Druk op Ctrl+S om de app op te slaan in de cloud, zodat u deze op andere apparaten kunt uitvoeren.Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • Deel de app zodat anderen deze kunnen uitvoeren.Share the app so that other people can run it.
  • Meer informatie over galerieën, formulieren en formules.Learn more about galleries, forms, and formulas.