De nieuwe look & feel van Power Apps met de modern controls - wat kan je ermee?

Blog

In deze blog vind je informatie over wat je met de nieuwe Preview functie (april 2023) in Power Apps kunt doen. Op dit moment is er nog geen documentatie van beschikbaar en moet je alles zelf uitproberen.

Ik zet alle benodigde informatie, tips en duidelijke afbeeldingen op een rijtje om direct aan de slag te kunnen met de modern controls!

De originele controls, Teams controls en nu ook de modern controls!

Het standaard uiterlijk van de canvas apps kennen we al een tijdje. Naar mijn mening verdient dit geen schoonheidsprijs en kan het mooier. Want het oog wilt ook wat. De gebruikerservaring nemen we gelijk mee in deze verbetering.

De controls uit Teams kun je al gebruiken in Power Apps, met een kleine omweg. Hoe je dit doet kom ik verderop in deze blog op terug.

Nu is er een nieuwe functie beschikbaar, de modern controls. Dit is gebaseerd op het Microsoft Fluent Design System. Hiermee ontwerp je sneller en gemakkelijker een app die er overzichtelijker en ruimtelijker uitziet. Én bovenal een betere gebruikerservaring oplevert. Dit alleen al door een paar mooie onderdelen toe te voegen!

Hoe schakel je deze functie in?

Om de modern controls te kunnen gebruiken, controleer je eerst de instellingen. Open de app vanuit de Power app studio (https://make.powerapps.com) en navigeer onderaan naar de instellingen.

1: Onder de tab 'Upcoming features' klik je op 'Preview', onderaan schakel je de optie 'Try out the modern controls' in.

2: Controleer in de tab 'Support' welke versie je momenteel hebt. Deze dient minstens 3.23034.5 of hoger te zijn. Welke versie je hebt, wordt bepaald door de locatie waar je omgeving zich bevindt en de verversingscadans. Wanneer er een update wordt uitgebracht voor jouw omgeving, verandert de standaardversie van de Power Apps Studio. Pas dit alleen aan indien nodig. Je kunt de versie aanpassen via ‘Edit’. Zodra je beide stappen hebt gedaan en het instellingenmenu afsluit, kun je aan de slag.

3: In de app staat nu onder 'Insert' een nieuw onderdeel genaamd 'modern controls'. Het is een lijst met behoorlijk wat nieuw functies die je naast de gebruikelijke controls nu ook kunt toevoegen aan de App.

Welke modern controls zijn er?

Hierbij een overzicht van alle modern controls met hun bijbehorende functie.

Control Toepassing Eigenschap set
Badge Snelle manier om belangrijke, korte informatie te tonen, zoals een statusindicator of initialen Content
Button Door erop te klikken acties starten en door een interface te navigeren Text
Checkbox Eén of meerdere opties selecteren uit een keuzelijst Label
Datepicker Gebruiksvriendelijke manier om datum in te voeren/te selecteren dankzij maandoverzicht Value
Dropdown Opties selecteren uit compacte, voorgedefinieerde lijst Items
Info Button Aanvullende informatie over een functie of veld om gebruikers te helpen Content
Link Vanuit de app doornavigeren naar een webpagina URL
Progress Bar Voortgang van taak of proces visueel weergeven Value
Radio Group Uit een lijst van opties één optie selecteren Items
Spinner Informatieve feedback dat de inhoud wordt geladen Label
Tab list Reeks tabbladen om te navigeren tussen andere secties of pagina's Items
Tekst Tekst voor het tonen van een beschrijving of informatie Text
Text Input Veld voor het invoeren van gegevens Default

1: Voorbeeld van de app met de originele controls:

2: Voorbeeld van de App met modern controls:

Door vanuit Power Apps in Teams te bouwen, maak je snel een App met het bijbehorende Teams-uiterlijk. Dit geeft de gebruiker herkenbaarheid en de App draait soepel in de gewenste kanalen. 
De controls uit Teams kun je met een kleine omweg gebruiken in de Power Apps Studio.

Hoe kun je de elementen uit Teams aan je Canvas App toevoegen?

Open Teams en ga in de linker navigatiebalk naar de App genaamd 'Apps'. Hier kun je zoeken op Power Apps en voeg deze toe door ‘Add’ te selecteren.

Om hier gemakkelijk bij te kunnen vanuit je navigatiebalk in Teams, kun je de App vastpinnen. Door onderaan de linker navigatiebalk de 3 bolletjes te selecteren, kun je de Power App opzoeken. Om het vast te pinnen druk je met de rechtermuisknop op de app en 'Pin'.

Nu kun je vanuit Teams een Power App creëren en hierin enkele controls toevoegen. Deze controls kun je d.m.v. kopiëren toevoegen aan je Canvas App in een andere omgeving, zoals de Power Apps Studio van de browser. Door dit te doen heb je meer functionaliteiten dan in de Power Apps in Teams. Voorbeeld hoe het er uit komt te zien:

Op dit moment zijn de modern controls helaas nog een preview functie, met bijbehorende beperkingen. Enkele nadelen zijn: De eigenschap sets (properties) zijn anders dan van de originele controls. De standaard kleuren die je gebruikt in de app zijn niet aanpasbaar. De App checker regels, zoals toegankelijkheid en formules werken momenteel nog niet. En de datepicker is niet op dezelfde manier in te stellen qua standaarden.

Mijn advies: probeer voor nu de modern controls vooral uit en raak ermee bekend. Om het gebruiksvriendelijk en overzichtelijk te houden voor jezelf, bouw een app met of alleen modern controls, of alleen met de originele of Teams controls. Een combi van beide doet de App nu nog geen goed.

Conclusie: ondanks de nu nog aanwezige beperkingen die bij een Preview functie horen, zijn de modern controls echt veelbelovend en voegen absoluut wat toe aan de gebruikerservaring. De App loopt soepeler, is sneller, duidelijker en visueel aantrekkelijker. Voor de makers is het ook gemakkelijker te configureren.
Hopelijk is het snel voor iedereen Generally Available, met nog meer toffe functies eraan toegevoegd!

In mijn volgende blog ga ik meer in op de UI van Canvas Apps. En geef ik meerdere tips & tricks die ik graag had geweten toe ik begon met Power Apps. Dus houdt de ShareValue website in de gaten!

Meer weten?

Wil je meer weten over deze functionaliteit of over het Power Platform in het algemeen? Neem dan gerust contact op met ons zodat we de mogelijkheden kunnen bespreken.

Deel deze pagina:
Wendy
Auteur
Wendy
Consultant

Heb je vragen over dit onderwerp of zou je Wendy willen inhuren voor een vergelijkbare opdracht?

Neem contact met ons op

Heb je een Power Platform expert nodig?

Neem contact met ons op

Hoor van onze experts hoe leuk ShareValue is

Lees de verhalen van onze collega's
Cookies beheren