In dit tweede deel gaan we een app maken met drie schermen vanuit een SharePoint-lijst en vervolgens de schermen en besturingselementen van de app verkennen.
Schermen, besturingselementen en velden van de app bijwerken en formules gebruiken om het app-gedrag verder aan te passen.
Een app genereren
In deze sectie van de cursus maken we een app op basis van de SharePoint-lijst ‘Flooring Estimates’. De app kan bijvoorbeeld worden gebruikt door een taxateur die bij een klant op bezoek is, om te kunnen verwijzen naar de lijst en deze up-to-date te houden. In de sectie Aan de slag hebben we al laten zien hoe een app op basis van dezelfde lijst kan worden gegeneerd, dus waarom moet dat nu weer? In de eerste plaats beginnen we niet in PowerApps Studio, maar laten we u nu zien hoe PowerApps is geïntegreerd in SharePoint Online. In de tweede plaats gaan we dieper in op het samenstellen van de app en laten we u zien hoe u de app kunt aanpassen. Dat zal zeker enkele nieuwe inzichten opleveren, dus laten we beginnen!
De app genereren
In de volgende afbeelding ziet u de SharePoint-lijst ‘Flooring Estimates’, met basisgegevens zoals naam en prijs, en een afbeelding voor elk type vloermateriaal. U kunt zien hoe PowerApps en Microsoft Flow nu zijn geïntegreerd in SharePoint Online, zodat u eenvoudig apps en stromen op basis van uw lijsten kunt ontwikkelen.
U begint met het bouwen van een app door te klikken of tikken op PowerApps en vervolgens op Een app maken. Voer in het rechterdeelvenster een naam voor de app in en klik of tik op Maken. Nadat u Maken hebt gekozen, begint PowerApps met het genereren van de app. PowerApps trekt allerlei conclusies op basis van uw gegevens om een nuttige app als uitgangspunt te genereren.
De app in PowerApps Studio weergeven
Uw nieuwe app met drie schermen wordt geopend in PowerApps Studio. Alle apps die worden gegenereerd op basis van gegevens hebben dezelfde reeks schermen:
- Het bladerscherm: voor het zoeken, sorteren, filteren en vernieuwen van de gegevens die zijn opgehaald uit de lijst en voor het toevoegen van items door op het pluspictogram (+) te klikken of te tikken.
- Het detailscherm: voor het weergeven van meer informatie over een item en waar u het item kunt verwijderen of bewerken.
- Het scherm voor bewerken/maken: waar u een bestaand item bewerkt of een nieuw item maakt.
Klik of tik op een pictogram in de rechterbovenhoek van de linkernavigatiebalk om over te schakelen naar de miniatuurweergave.
Klik of tik op een miniatuur om de besturingselementen in het betreffende scherm weer te geven.
De app in de voorbeeldmodus uitvoeren
Klik of tik op 
rechtsboven om de app uit te voeren. Als u door de app navigeert, ziet u dat deze alle gegevens uit de lijst bevat en een goed uitgangspunt biedt.
Vervolgens gaan we de app nader verkennen en deze later aanpassen uitgaande van onze behoeften.
Een gegenereerde app verkennen
In dit onderwerp gaan we dieper in op de gegenereerde app en bekijken we de schermen en besturingselementen die het gedrag van de app bepalen. We behandelen niet alle details, maar als u meer weet over de werking van deze app, kan dat helpen bij het ontwikkelen van uw eigen apps. In een later onderwerp kijken we naar de formules die zijn bedoeld voor schermen en besturingselementen.
Over besturingselementen in PowerApps
Een besturingselement is simpelweg een UI-element waaraan gedrag is gekoppeld. Veel besturingselementen in PowerApps zijn gelijk aan de besturingselementen die u in andere apps hebt gebruikt: labels, tekstinvoervakken, vervolgkeuzelijsten, navigatie-elementen enzovoort. Maar PowerApps heeft besturingselementen die meer gespecialiseerd zijn, zoals galerieën (voor de weergave van samenvattingsgegevens) en formulieren(die gedetailleerde gegevens weergeven en waarin u items kunt maken en bewerken). Er zijn ook andere interessante besturingselementen, zoals voorafbeelding, camera en streepjescode. Als u wilt nagaan welke besturingselementen er beschikbaar zijn, klikt of tikt u op Invoegen op het lint en klikt of tikt u vervolgens op elk van de opties, van Tekst tot en met Pictogrammen.
Het bladerscherm testen
Elk van de drie app-schermen heeft een hoofdbesturingselement en enkele extra besturingselementen. Het eerste venster van de app is het bladerscherm, dat standaard de naam BrowseScreen1 heeft. Het hoofdbesturingselement in dit scherm is een galerie met de naam BrowseGallery1. BrowseGallery1 bevat andere besturingselementen, zoals NextArrow1 (in de vorm van een pictogram: klik of tik erop om naar het detailscherm te gaan). Er zijn ook afzonderlijke besturingselementen in het scherm, zoals IconNewItem1 (in de vorm van een pictogram: klik of tik erop om een item te maken in het scherm voor bewerken/maken).
PowerApps heeft verschillende typen galerieën. Gebruik de galerie die het beste aansluit bij de indelingsvereisten voor uw app. Verderop in deze sectie ziet u nog meer manieren om de indeling te bepalen.
Het detailscherm verkennen
Vervolgens is het de beurt aan het detailscherm, dat standaard de naam DetailScreen1 heeft. Het hoofdbesturingselement in dit scherm is een weergaveformulier met de naam DetailForm1. DetailForm1 bevat andere besturingselementen, zoals DataCard1 (in de vorm van een kaart, waarbij in dit geval als categorie vloermateriaal (Flooring Estimates) wordt weergegeven). Het scherm bevat ook afzonderlijke besturingselementen, zoalsIconEdit1 (in de vorm van een pictogram: klik of tik erop om het huidige item te bewerken in het scherm voor bewerken/maken).
Er zijn tal van opties voor de galerie, maar voor formulieren zijn er slechts twee typen: een bewerkingsformulier of een weergaveformulier.
Het scherm voor bewerken/maken verkennen
Het derde scherm in de app is het scherm voor bewerken/maken, dat standaard de naam EditScreen1 heeft. Het hoofdbesturingselement in dit scherm is een bewerkingsformulier met de naam EditForm1. EditForm1 bevat andere besturingselementen, zoals DataCard8 (in de vorm van een kaart, waarmee u in dit geval de categorie vloermateriaal (Flooring Estimates) kunt bewerken). Het scherm bevat ook afzonderlijke besturingselementen, zoals IconAccept1 (in de vorm van een pictogram: klik of tik erop voor het opslaan van de wijzigingen die u hebt aangebracht in het scherm voor bewerken/maken).
Nu u een beeld hebt van de manier waarop de app is samengesteld uit schermen en besturingselementen, gaan we in het volgende onderwerp bekijken hoe u de app kunt aanpassen.
De app aanpassen
In de eerste twee onderwerpen van deze sectie hebt u een app gegenereerd op basis van een SharePoint-lijst en hebben we de app nader verkend om een beter beeld te krijgen van de manier waarop apps met drie schermen zijn samengesteld. De app die PowerApps heeft gegenereerd is handig, maar u zult een app vaak willen aanpassen nadat deze is gegenereerd. In dit onderwerp behandelen we enkele elementaire wijzigingen voor elk scherm van de app. U kunt nog veel meer doen om een app aan te passen, maar dat komt in latere onderwerpen aan de orde. In de tussentijd kunt u voortbouwen op hetgeen u in dit onderwerp leert. Neem een app die u hebt gegeneerd – op basis van een lijst, een Excel-bestand of een andere bron – en zie hoe u deze kunt aanpassen. Dit is zonder meer de beste manier om te leren hoe apps worden samengesteld.
Bladerscherm
We beginnen met het bladerscherm. De SharePoint-lijst bevat een afbeelding voor elk product, maar die afbeelding wordt niet standaard weergegeven. Daar gaan we wat aan doen. Selecteer op het tabblad Indeling in het rechterdeelvenster een andere indeling voor het bladerscherm. U ziet onmiddellijk de resultaten, omdat PowerApps de app bijwerkt terwijl u de wijzigingen aanbrengt.
Vanuit de juiste basisindeling gaat u nu de weergegeven velden wijzigen.< Klik of tik op een veld in het eerste item en wijzig vervolgens in het rechterdeelvenster de gegevens die voor elk item worden weergegeven. Dat biedt een beter overzicht van elk item in de lijst.
Detailscherm
In het detailscherm gaan we de volgorde van de velden wijzigen en tevens de afbeelding weergeven.Er zijn verschillende besturingselementen in dit scherm, daarom wijkt het proces enigszins af van het bladerscherm. Klik of tik op een veld en sleep in het rechterdeelvenster het veld Titel helemaal naar boven. Klik of tik vervolgens op het veld Afbeelding om dat weer te geven.
Scherm voor bewerken/maken
Tot slot gaan we in het scherm waar u invoer maakt en bewerkt een veld wijzigen om de invoer van tekst gemakkelijker te maken. Klik of tik op de vervolgkeuzelijst voor het veld Overzicht en klik of tik vervolgens op het besturingselement Tekst van meerdere regels bewerken.
U ziet hoe u met een paar eenvoudige stappen veel kunt doen om het uiterlijk en het gebruik van een gegenereerde app te verbeteren. In dit onderwerp richten we ons op de gebruikersinterface van PowerApps Studio, die veel opties voor het aanpassen van uw apps bevat. In het volgende onderwerp hebben we het over formules, die een belangrijke rol spelen bij het sturen van de werking van een app.
App-formules verkennen
Een van de grootste voordelen van PowerApps is dat u geen traditionele toepassingscode hoeft te schrijven: u hoeft dus geen ontwikkelaar te zijn om apps te maken! Maar u hebt wel een manier nodig om logica in een app op te nemen en om het navigeren, filteren, sorteren en andere functionaliteit van een app te regelen. Hier komt het gebruik van formules van pas. Als u Excel-formules hebt gebruikt, zal de manier waarop PowerApps werkt u bekend voorkomen. In dit onderwerp laten we een aantal basisformules voor tekstopmaak zien en behandelen we drie van de formules die PowerApps opneemt in de gegenereerde app. U krijgt een voorproefje van wat formules zoal kunnen doen. Vervolgens kijken we naar andere formules in de gegenereerde app en laten we zien hoe u uw eigen formules kunt schrijven.
In het vorige onderwerp hebben we het veld Price opgenomen in de galerie van het bladerscherm, maar de prijs werd weergegeven als een gewoon getal zonder valutasymbool. Stel dat we een dollarteken willen toevoegen en de tekstkleur willen wijzigen afhankelijk van de prijs van het item (bijvoorbeeld rood als de prijs hoger is dan $ 5 en groen als dat niet zo is). De volgende afbeelding geeft een indruk van hoe dat eruitziet.
Laten we beginnen met de valuta-opmaak. Standaard haalt PowerApps voor elk item een waarde op voor de prijs, die is ingesteld als de Text–eigenschap van het label dat de prijs bevat.
Als u het dollarteken als valutasymbool wilt toevoegen, klikt of tikt u op het label-besturingselement en stelt u in de formulebalk de eigenschap Textin voor deze formule.
De formule (Text(Price, "[$-en-US]$ ##.00") maakt gebruik van de Tekst–functie om aan te geven hoe het getal moet worden opgemaakt. Dat lijkt veel op een Excel-formule, maar PowerApps-formules verwijzen naar besturingselementen en andere app-elementen in plaats van naar cellen in een werkblad. Als u eerst op een besturingselement en vervolgens op de vervolgkeuzelijst met eigenschappen klikt of tikt, wordt een lijst met eigenschappen weergegeven die relevant zijn voor het besturingselement. Hieronder ziet u bijvoorbeeld een gedeeltelijke lijst van de eigenschappen voor een label. Sommige eigenschappen zijn relevant voor een scala van besturingselementen en andere alleen maar voor een specifiek besturingselement.
Als u de kleur voorwaardelijk wilt opmaken op basis van de prijs, gebruikt u een formule als de volgende voor de eigenschap Color van het label: If(Price > 5, Color.Red, Color.Green).
Nu u weet hoe formules worden gebruikt in combinatie met eigenschappen, gaan we drie voorbeelden bekijken van formules die PowerApps gebruikt in de gegenereerde app. De voorbeelden hebben allemaal betrekking op het bladerscherm en werken met de eigenschap OnSelect, die bepaalt wat er gebeurt wanneer een gebruiker op een app-besturingselement klikt of tikt.
- De eerste formule is gekoppeld aan het besturingselement IconNewItem1:
. U klikt of tikt op dit besturingselement om van het bladerscherm naar het scherm voor bewerken/maken te gaan en een item te maken.- De formule is
NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None) - De formule opent eerst een nieuw bewerkingsformulier en vervolgens het scherm voor bewerken/maken zodat u een nieuw item kunt maken. Een waarde van
ScreenTransition.None betekent dat er geen overgang tussen schermen is (zoals vervagen).
- De tweede formule is gekoppeld aan het besturingselement IconSortUpDown1:
. U klikt of tikt op dit besturingselement om de lijst met items in de galerie van het bladerscherm te sorteren.- De formule is
UpdateContext({SortDescending1: !SortDescending1}) - De formule gebruikt
UpdateContext voor het bijwerken van een variabele met de naam SortDescending1. De waarde van de variabele gaat heen en weer door op het besturingselement te klikken of te tikken. Dat maakt de galerie in dit scherm duidelijk hoe de items moeten worden gesorteerd (zie de video voor meer informatie).
- De derde formule is gekoppeld aan het besturingselement NextArrow1:
. U klikt of tikt op dit besturingselement om van het bladerscherm naar het detailscherm voor bewerken/maken te gaan.- De formule is
Navigate(DetailScreen1, ScreenTransition.None) - De formule navigeert naar het detailscherm, ook deze keer zonder overgang.
Er zitten veel andere formules in de app, neem dus even de tijd om te klikken op besturingselementen en te zien welke formules voor diverse eigenschappen worden ingesteld.
Ter afsluiting
Daarmee zijn we aan het eind gekomen van de verkenning van de gegenereerde app en van de schermen, besturingselementen, eigenschappen en formules die de werking en de mogelijkheden van de app bepalen.Als u alles gevolgd hebt, weet u nu beter hoe een gegenereerde app werkt. En met die kennis kunt u nu uw eigen apps gaan maken.
Voordat we verdergaan naar de volgende sectie, keren we even terug naar SharePoint om u te laten zien hoe de app nu is geïntegreerd met de lijst. Zoals u ziet, functioneert FlooringApp nu als een weergave van de lijst en u start de app door op Openen te klikken. Dat biedt een eenvoudige manier om uw lijsten te beheren met een prettige en gepersonaliseerde ervaring.
