Een besturingselement toevoegen en configureren in PowerAppsAdd and configure a control in PowerApps

U kunt een groot aantal verschillende UI-elementen toevoegen aan uw app en vervolgens direct aspecten van hun uiterlijk en gedrag configureren. Dit kan via de werkbalk, in het tabblad Eigenschappen of de formulebalk.Add a variety of UI elements to your app, and configure aspects of their appearance and behavior directly, from the toolbar, in the Properties tab, or in the formula bar. Deze UI-elementen worden besturingselementen genoemd en de aspecten eigenschappen.These UI elements are called controls, and the aspects that you configure are called properties.

VereistenPrerequisites

  1. Registreer u voor PowerApps, installeer het, open het en meld u aan met dezelfde referenties die u hebt gebruikt om u te registreren.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.

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

    De optie Nieuw in het menu Bestand

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

    Een volledig nieuwe app maken

  4. Als u wordt voorgesteld de inleidende rondleiding te volgen, klikt of tikt u op Volgende om vertrouwd te raken met de belangrijkste gedeelten van de PowerApps-interface (of klik of tik op Overslaan).If you're prompted to take the intro tour, click or tap Next to get familiar with key areas of the PowerApps interface (or click or tap Skip).

    Scherm van de inleidende rondleiding openen

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

Een besturingselement toevoegenAdd a control

U kunt besturingselementen uit allerlei verschillende categorieën toevoegen door eerst op de werkbalk te klikken of tikken op het tabblad Invoegen. Klik of tik vervolgens op een categorie en klik of tik ten slotte op het gewenste besturingselement.You can add any control in a variety of categories by clicking or tapping the Insert tab of the toolbar, clicking or tapping a category, and then clicking or tapping the control that you want. Bekijk in deze sectie de besturingselementen uit elke categorie, zodat u bekend bent met de typen besturingselementen die u kunt toevoegen en waar u een bepaald type kunt vinden.In this section, review the controls in each category to get familiar with the types of controls that you can add and where you might find each type.

Klik of tik op het tabblad Invoegen op een van deze categorieën en klik of tik vervolgens op het besturingselement dat u wilt toevoegen:On the Insert tab, click or tap any of these categories, and then click or tap the control that you want to add:

Tekst: label, tekstinvoer, HTML-tekst, peninvoerText: Label, Text input, HTML Text, Pen input
Besturingselementen: knop, vervolgkeuzelijst, datumkiezer, selectievakje, keuzerondje, wisselknop, schuifregelaar, classificatie, timerControls: Button, Drop down, Date picker, List box, Check box, Radio, Toggle, Slider, Rating, Timer
Galerie: verticaal, horizontaal, flexibele hoogte, leeg verticaal, leeg horizontaal, leeg flexibele hoogteGallery: Vertical, Horizontal, Flexible height, Blank vertical, Blank horizontal, Blank flexible height
GegevenstabelData table
Formulieren: bewerken, weergeven, formulier voor entiteitForms: Edit, Display, Entity form
Media: afbeelding, camera, streepjescode, video, audio, microfoon, afbeelding toevoegenMedia: Image, Camera, Barcode, Video, Audio, Microphone, Add picture
Diagrammen: kolomdiagram, lijndiagram, cirkeldiagramCharts: Column chart, Line chart, Pie chart
PictogrammenIcons

Tip

Als u meer ruimte nodig hebt voor besturingselementen, voegt u nog een scherm toe.If you need more space for controls, add another screen.

Een besturingselement rechtstreeks configurerenConfigure a control directly

In deze procedure gaat u een besturingselement van het type Label toevoegen en configureren, maar de procedure is in grote lijnen ook geschikt voor veel andere besturingselementen.In this procedure, you'll add and configure a Label control, but you can apply many of the same principles to other controls.

  1. Klik of tik op het tabblad Invoegen en klik of tik vervolgens op Label.Click or tap the Insert tab, and then click or tap Label.

    Tabblad Invoegen

    Wanneer u een besturingselement toevoegt, wordt dit automatisch geselecteerd.When you add a control, it's selected by default. U kunt ook een bestaand besturingselement selecteren door erop te klikken of tikken.You can also select an existing control by clicking or tapping it. Als een besturingselement is geselecteerd, ziet u een selectiekader om het element. Andere gebieden van de gebruikersinterface worden aangepast, zodat u het geselecteerde besturingselement kunt configureren.When a control is selected, a selection box surrounds it, and other areas of the UI change so that you can configure the selected control. Een geselecteerd besturingselement van het type Label ziet er bijvoorbeeld uit zoals in deze afbeelding.For example, a selected Label control resembles this graphic.

    Een geselecteerde label

    Belangrijk

    Als er een besturingselement is geselecteerd op het moment dat u een ander besturingselement of een leeg gebied van het scherm selecteert, wordt de selectie van het eerste element ongedaan gemaakt.If a control is selected when you select another control or a blank area of the screen, the first element is no longer selected.

  2. Maak het besturingselement Label smaller door een greep aan de rechterkant van het selectiekader naar links te slepen.Make the Label control narrower by dragging a handle on the right edge of the selection box to the left. (De middelste greep wordt alleen weergegeven als u inzoomt.)(The middle handle appears only if you zoom in.)

    Een label waarvan het formaat is gewijzigd

    U kunt het formaat van een besturingselement ook wijzigen door de eigenschap Height of Width (of allebei) aan te passen. Dit wordt verderop beschreven.You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. Verplaats het besturingselement Label door het selectiekader zelf te slepen. U kunt ook de waarde voor X of Y (of allebei) aanpassen, zoals verderop in dit onderwerp wordt beschreven.Move the Label control by dragging the selection box itself (or by modifying the X, Y, or both properties, as this topic describes later).

  4. Klik of tik driemaal op de tekst die wordt weergegeven in het besturingselement Label en typ vervolgens Hallo, wereld.Triple-click the text that appears in the Label control, and then type Hello, world.

    Een label met aangepaste tekst

    U kunt deze tekst ook wijzigen door de eigenschap Text van dit besturingselement in te stellen, zoals verderop in dit onderwerp wordt beschreven.You can also modify this text by setting the Text property of this control, as this topic describes later.

Een besturingselement configureren via de werkbalkConfigure a control from the toolbar

Als u een besturingselement configureert via de werkbalk, kunt u uit meer opties kiezen dan bij een rechtstreekse configuratie van een besturingselement.By configuring a control from the toolbar, you can specify a wider variety of options than you can by configuring a control directly.

  1. Selecteer het besturingselement Label en klik of tik op het tabblad Start op de werkbalk.With the Label control selected, click or tap the Home tab of the toolbar.

    Tabblad Start

  2. Klik of tik op Opvullen, en klik of tik vervolgens op een kleur zoals Aquamarijn.Click or tap Fill, and then click or tap a color such as aquamarine.

    Optie Opvullen

    Uw selectie wordt toegepast op het besturingselement Label.The Label control reflects your selection.

    Een label opgevuld met de kleur aquamarijn

  3. Wijzig het lettertype en de grootte van de tekst (bijvoorbeeld in 18 puntsChange the font family and the size of the text (for example, to 18 pt. Georgia).Georgia).

    Lettertype-instellingen

    Uw selectie wordt toegepast op het besturingselement Label.The Label control reflects your selection.

    18 punts Georgia

  4. Klik of tik op het tabblad Label, klik of tik op Verticaal uitlijnen en klik of tik op Boven.Click or tap the Label tab, click or tap VerticalAlign, and then click or tap Top.

    Tabblad Tekstvak

    Uw selectie wordt toegepast op het besturingselement Label.The Label control reflects your selection.

    Een label met tekst uitgelijnd op de bovenzijde van het vak

Een besturingselement configureren via het tabblad EigenschappenConfigure a control from the Properties tab

Met behulp van het tabblad Eigenschappen kunt u een besturingselement configureren zonder een formule te schrijven.By using the Properties tab, you can configure a control without writing a formula. In deze procedure gaat u een ander besturingselement van het type Label toevoegen en configureren, maar de procedure is in grote lijnen ook geschikt voor veel andere besturingselementen.In this procedure, you'll add and configure another Label control, but you can apply many of the same principles to other controls.

  1. Voeg een ander besturingselement Label toe zoals eerder in dit onderwerp beschreven.Add another Label control as described earlier in this topic.

  2. Selecteer het nieuwe besturingselement en klik of tik in het rechterdeelvenster op het tabblad Eigenschappen.With the new control selected, click or tap the Properties tab in the right-hand pane.

    Paneel Eigenschappen

  3. Typ in het Tekstvak Tabblad Eigenschappen.In the Text box, type Properties tab.

    Paneel Eigenschappen Tekstlabel

    Het besturingselement Label geeft de opgegeven tekst weer.The Label control shows the entered text.

    Paneel Eigenschappen Tekstachtergrond

  4. Klik of tik in het deelvenster Eigenschappen op het pictogram Vullen en klik of tik vervolgens op een kleur.Click or tap the Fill icon in the Properties panel, and then click or tap a color.

    Paneel Eigenschappen Tekstkleur

    Uw selectie wordt toegepast op het besturingselement Label.The Label control reflects your selection.

    Paneel Eigenschappen Achtergrondkleur

  5. Klik of tik in het deelvenster Eigenschappen op de eigenschap Color.Click or tap the Color property in the properties panel.

    Eigenschap paneel Eigenschappen

    De waarde van de eigenschap Color is gemarkeerd in de formulebalk.The value of the Color property is highlighted in the formula bar.

    Eigenschapuitdrukking in paneel Eigenschappen

  6. Verwijder het tweede besturingselement Label door erop te klikken of tikken en vervolgens op Delete te drukken.Delete the second Label control by clicking or tapping it and then pressing Delete.

Een besturingselement configureren via de formulebalkConfigure a control in the formula bar

Met behulp van de formulebalk kunt u eigenschappen instellen die u niet rechtstreeks, in het tabblad Eigenschappen of via de werkbalk kunt instellen.By using the formula bar, you can set properties that you can't set directly, in the Properties tab, or from the toolbar. Zo kunt u op deze manier knopinfo instellen die wordt weergegeven wanneer een gebruiker het besturingselement aanwijst, maar er niet op klikt of tikt.For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. U kunt ook complexe formules opgeven om de mogelijkheden van de app te vergroten.You can also specify complicated formulas that increase the power of your app.

Alle wijzigingen die u eerder in dit onderwerp hebt gemaakt, hebben ertoe geleid dat de waarde van een bepaalde eigenschap van het besturingselement is aangepast.Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • Door het formaat van het besturingselement via slepen te wijzigen, is de waarde van de eigenschap Width aangepast.When you resized the control, you changed its Width property.
  • Door het besturingselement naar een andere positie te slepen, is de waarde van de eigenschappen X en Y gewijzigd.When you moved the control, you changed its X and Y properties.
  • Door de tekst van het besturingselement rechtstreeks te wijzigen, is de eigenschap Text aangepast.When you changed the text that the control displays, you changed its Text property.

In plaats van een besturingselement rechtstreeks, in het tabblad Eigenschappen of via de werkbalk te configureren, kunt u de waarde van een eigenschap ook aanpassen door de eigenschap te selecteren in de lijst met eigenschappen en vervolgens een waarde op te geven op de formulebalk.Instead of configuring a control directly, in the Properties tab, or from the toolbar, you can also update the value of a property by selecting it in the property list and then specifying a value in the formula bar. Deze aanpak betekent dat u alfabetisch kunt zoeken naar eigenschappen, maar nog belangrijker is dat u meer mogelijkheden hebt.By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. Selecteer het resterende besturingselement Label, klik of tik op Text in de lijst met eigenschappen en typ vervolgens "Mijn bedrijfsnaam" (inclusief de aanhalingstekens) in de formulebalk.With the remaining Label control selected, click or tap Text in the property list, and then type "My Company Name" (including the quotation marks) in the formula bar.

    Een letterlijke tekenreeks in een label

    Wanneer u een tekenreeks tussen aanhalingstekens zet, geeft u aan dat de invoer exact moet worden weergegeven zoals u deze hebt getypt.When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. Een andere mogelijkheid is om de waarde van een eigenschap in te stellen op een formule.As an alternative, you can set the value of a property to a formula.

  2. Selecteer het besturingselement Label, klik of tik op Text in de lijst met eigenschappen en typ vervolgens Today() (zonder aanhalingstekens) in de formulebalk.With the Label control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    U ziet nu de huidige datum in het besturingselement.The control shows the current date.

    Functie Today

    Tip

    U kunt verschillende notaties gebruiken voor datums en tijden. Daarnaast kunt u berekeningen uitvoeren op datums en tijden.You can format dates and times in various ways, in addition to performing calculations on them.

Twee besturingselementen configureren voor onderlinge interactieConfigure two controls to interact with each other

In deze procedure gaat u een selectievakje toevoegen en vervolgens het eerder gemaakte label zo configureren dat dit vak alleen wordt weergegeven wanneer het selectievakje is ingeschakeld.In this procedure, you'll add a check box and then configure the label that you already have to appear only when the check box is selected.

  1. Klik of tik op het tabblad Invoegen.Click or tap the Insert tab.

    Tabblad Invoegen

  2. Klik of tik op Besturingselementen, en klik of tik vervolgens op Selectievakje.Click or tap Controls, and then click or tap Check box.

    Selectievakje invoegen

  3. Plaats het besturingselement Selectievakje onder het besturingselement Label en stel de eigenschap Text van het besturingselement Selectievakje in op Tekst weergeven.Move the Check box control so that it appears below the Label control, and set the Text property of the Check box control so that Show text appears.

    Selectievakje configureren

  4. Met het besturingselement Selectievakje nog steeds geselecteerd, klikt of tikt u op de naam ervan boven het tabblad Eigenschappen en typt u vervolgens MijnselectievakjeWith the Check box control still selected, click or tap its name just above the Properties tab, and then type MyCheckbox

    Naam van selectievakje wijzigen

  5. Klik of tik op het besturingselement Label om dat te selecteren.Click or tap the Label control to select it.

  6. Klik of tik in het tabblad Eigenschappen op de eigenschap Visible.On the Properties tab, click or tap the Visible property.

    Eigenschap Visible

  7. Verwijder true op de formulebalk, en typ of plak deze formule:In the formula bar, delete true, and then type or paste this formula:

    If(Mijnselectievakje.Value = true, true, false)If(MyCheckbox.Value = true, true, false)

    Deze If-functie geeft aan dat het label alleen moet worden weergegeven wanneer het selectievakje is ingeschakeld.This If function states that the label should appear only when the check box is selected. Omdat het selectievakje is uitgeschakeld, verdwijnt het besturingselement Label (het selectiekader is nog wel zichtbaar).Because the check box is cleared, the Label control disappears (except for the selection box).

    Formule met Visible

  8. Klik of tik op het besturingselement Selectievakje om het selectiekader eraan toe te voegen, en klik of tik er vervolgens nogmaals op om een vinkje toe te voegen.Click or tap the Check box control to add the selection box to it, and then click or tap it again to add a check mark.

    Het label wordt opnieuw weergegeven:The Label reappears:

    Label wordt weergegeven wanneer het selectievakje is ingeschakeld

  9. Schakel het besturingselement Selectievakje uit om het besturingselement Label te verbergen.Clear the Check box control to hide the Label control.

    Label verdwijnt wanneer het selectievakje wordt uitgeschakeld

Dit is een eenvoudig voorbeeld, maar u kunt het gedrag en uiterlijk van uw app met behulp van een of formules variëren van eenvoudig tot complex.This example is basic, but you can configure the behavior and appearance of your app by building one or more formulas from simple to complex.

De naam van een scherm of besturingselement wijzigenRename a screen or a control

Door de naam een scherm of besturingselement te wijzigen, kunt u formules maken die makkelijker zijn te lezen en te onderhouden.By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Klik of tik op het scherm of het besturingselement waarvan u de naam wilt wijzigen.Click or tap the screen or the control that you want to rename.

  2. Klik of tik in het rechterdeelvenster op de naam van de eigenschap (boven het tabblad Eigenschappen) en typ vervolgens de naam die u wilt gebruiken.In the right-hand pane, click or tap the name of the control (just above the Properties tab), and then type the name that you want.

    Naam van selectievakje wijzigen

Een scherm of een besturingselement zoeken en selecterenFind and select a screen or a control

U kunt een scherm of besturingselement vinden en selecteren, zelfs als dit is verborgen of onder een ander besturingselement valt. Dit doet u door ernaar te zoeken in het linkerdeelvenster.You can find and select a screen or a control, even if it's hidden or overlaps with another control, by searching for it in the left-hand pane. In dit deelvenster ziet u ofwel een miniatuur van elk scherm in de app, ofwel een hiërarchische weergave van elk scherm en de besturingselementen die het bevat.This pane shows either a thumbnail of each screen in the app or a hierarchical view of each screen and the controls that it contains.

  • Als u wilt schakelen tussen de miniaturen en de hiërarchische weergave, klikt of tikt u op een pictogram in de rechterbovenhoek van het deelvenster.To switch between the thumbnails and the hierarchical view, click or tap an icon in the upper-right corner of the pane.

    Schakelen tussen weergaven

  • Als u een besturingselement wilt zoeken, typt u één of meer tekens om de namen van besturingselementen te markeren die de tekst die u hebt getypt bevatten.To find a control, type one or more characters to highlight the control names that contain the text that you typed.

    Als u op een zoekresultaat klikt of tikt, selecteert u dit besturingselement in de app.If you click or tap a search result, you select that control in the app.

    Zoeken in de structuurweergave

  • Als u een scherm omhoog of omlaag wilt verplaatsen, dupliceren, verwijderen of de naam ervan wilt wijzigen, klikt u erop met de rechtermuisknop (of klik of tik op het weglatingsteken ernaast). Klik of tik vervolgens op de gewenste optie.To move a screen up or down, duplicate it, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.

    Structuurweergave van het contextmenu

  • Als u een scherm wilt kopiëren/plakken, verwijderen of de naam ervan wilt wijzigen, klikt u erop met de rechtermuisknop (of klik of tik op het weglatingsteken ernaast). Klik of tik vervolgens op de gewenste optie.To copy/paste a control, delete it, or rename it, right-click it (or click or tap the ellipsis next to it), and then click or tap the option that you want.