Power Apps: bouw jouw eigen dynamische componenten!

Heb je weleens een canvas-app gemaakt met Microsoft Power Apps, maar wil je de eindgebruikers meer mogelijkheden geven om de app zelf te kunnen beheren? In deze blogpost geven we je een voorbeeld hoe je dit kunt doen. We laten je aan de hand van een voorbeeld zien hoe we een landkaart met verplaatsbare locatie spelden maken door alleen gebruik te maken van de standaard Power Apps componenten.

Standaard componenten

In Power Apps canvas-apps heb je als maker toegang tot een uitgebreide set standaard componenten om te gebruiken in je apps. Voorbeelden hiervan zijn tekst invoervelden, knoppen, formulieren of galerijen. Vaak bieden deze componenten precies de functionaliteit die je zoekt. Je schrijft enkel een paar formules logica, geeft je component een kleurtje en je past het geheel verder aan zodat het eruit ziet zoals je wilt. Echter, als je wilt dat de gebruikers van je app zelf nog kunnen schuiven met deze componenten, loop je vast. Toch is het mogelijk om, met een beetje creativiteit, jouw eindgebruikers meer aanpassingsmogelijkheden te geven.

Neem als voorbeeld een app om werkplekken op kantoor mee te reserveren. Het is vrij eenvoudig om hier een plattegrond voor te gebruiken, met aantikbare bolletjes voor de te reserveren plekken. Maar wat als het aantal werkplekken wordt uitgebreid? Of nog ingrijpender: de gebruikers van de app verhuizen naar een heel nieuw kantoor? Je wilt niet dat je bij iedere wijziging de componenten in de app moeten wijzigen, toevoegen of verwijderen. Je wilt dat de gebruikers van de app dit zelfstandig kunnen doen.

Hoe ziet dat er dan uit?

Om te laten zien hoe we een dergelijke oplossing kunnen bouwen gaan we een simpele app met een plattegrond maken. Maar wel met de mogelijkheid om de locaties op de kaart te kunnen wijzigen. Onlangs zijn wij, Shared, verhuisd naar ons nieuwe kantoor in Rotterdam. Maar in de onderstaande app staat de locatie speld nog op ons oude adres. We willen deze speld verplaatsen naar ons nieuwe kantoor op het Vasteland in Rotterdam en dat doen we op deze manier:

Hoe maak je dit?

Om dit te maken moet je eigenlijk een klein beetje vals spelen. De nieuwe locatie die op de kaart wordt geplaatst is eigenlijk al aanwezig in de app, hij is alleen onzichtbaar. Bij het klikken op de knop ‘Nieuwe speld’ wordt de zichtbaarheid van de container die de speld met het bijbehorende label bevat op ‘waar’ gezet. Met behulp van een variabele ‘varX’ voor de horizontale positie en een variabele ‘varY’ voor de verticale positie kan de speld verplaats worden. De pijltjes knoppen die onderaan in de app te zien zijn veranderen de waarde van deze variabelen met tien pixels, dat gebeurt met deze Power Fx formule:

Set(varY; varY-10)

Wanneer de gebruiker dus op de knop klikt, verandert varY met tien pixels en verplaatst de speld zich tien pixels naar boven in de app. Dit gebeurt zo, omdat de eigenschap ‘Y’ van de container met de speld ingesteld is op varY.

De schuifbalken werken op een soortgelijke manier. Hier heb je enkel het probleem dat hoe groter de Y-coördinaat van een component wordt, hoe meer deze zich naar beneden verplaatst. Dit is op te lossen door het totaal aan pixels van het vlak waarover je het component wilt kunnen verplaatsen neemt en daar dan vervolgens de in de schuifbalk geselecteerde waarde van af haalt. De onderstaande formule plaats je in de ‘OnChange’-eigenschap van de schuifbalk.

Set(VarY; 627-Self.Value)

In dit voorbeeld gebruiken we slechts één speld. In de praktijk kun  je het zo gek maken als je zelf zou willen, maar probeer niet meer dan honderd spelden op één kaart te plaatsen, want dan verliezen je gebruikers waarschijnlijk het overzicht.

Het alternatief: PCF-componenten

Misschien denk je bij het bovenstaande: wat als ik écht iets wil wat ook niet met een beetje creativiteit opgelost kan worden? Bijv. dat ik op de kaart klik en dat er precies op die plek een speld verschijnt?

In dat geval is het altijd nog mogelijk om maatwerk Power Apps componenten te maken in het zogenoemde PCF-framework. Dit geeft je de flexibiliteit die je zoekt maar vergt wel dat je het component van de grond af aan moet opbouwen met behulp van een (front-end) ontwikkelaar. Dat vergt dus meer expertise, is complexer en daarmee duurder en minder snel. Op die manier kun je dus wél voor elke vraag terecht bij Power Apps.

In het kort

Door een beetje creatief om te gaan met de standaardcomponenten die we van Power Apps krijgen is het vrij eenvoudig om een dynamische app te bouwen. Je geeft de eindgebruikers een stukje controle over de functionaliteiten van je app en je bespaart jezelf zo een hoop aanpaswerk. Zo heb je meer tijd voor de dingen die er echt toe doen, zoals koffie drinken of nog meer geweldige canvas-apps bouwen!

Ook zelf jouw eigen apps kunnen beheren? Laat ons dat dan even weten!