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.

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

Gerelateerde artikelen

Joost Joost / 22-05-2023

3 minuten lezen

Ook deze maand heeft Microsoft weer een aantal mooie verbeteringen en nieuwe ontwikkelingen uitgebracht. Eén van deze verbeteringen wil ik met jullie gaan bespreken in mijn blog.

In mijn blog van de maand maart heb ik jullie een uiterlijke verandering laten zien in Power Automate op het gebied van expressies. Deze maand komt er een verbetering uit die het mogelijk maakt om invoergegevens op te maken op basis van voorbeelden; dus expressies genereren in plaats van ze zelf te schrijven in Power Automate!

Hoe ziet dit eruit?

Expressies in Power Automate is een krachtige manier om bewerkingen uit te voeren op gegevens. Nu kan het opmaken van expressies best ingewikkeld zijn, vooral als het gaat om complexe varianten. Het is nu mogelijk om op basis van voorbeelden een expressie op te bouwen. Waardoor je zonder de verschillende functies en bijbehorende syntaxis te kennen die nodig zijn om de gewenste expressies te maken, toch die complexe variant kunt opmaken. Dit is voor elke maker, ervaren of niet, een perfecte toevoeging.

Als je tekst, data of getallen wilt opmaken, kan dit vrij gemakkelijk door alleen voorbeelden te geven van de uitvoerindeling die je door de stroom wilt produceren. Power Automate genereert automatisch de expressieformule die je dan direct kan gebruiken in je flow.

Datum opmaken op basis van voorbeelden.

Hoe gebruik je deze functionaliteit? Stel je voor: je gebruikt een SharePoint-lijst met reserveringen op producten die je uitleent voor twee weken. Als de twee weken verlopen zijn, wil je een e-mail verzenden naar de persoon die het product heeft geleend met de vraag deze in te leveren. Standaard noteert de SharePoint-indeling data als volgt: 2023-05-14. Maar dit wil je in het e-mailmeldingsbericht weergeven als 14 mei.
Laten we eens kijken hoe we de notatie van de datum met opmaakgegevens kunnen wijzigen aan de hand van voorbeelden.

Wanneer je de Flow bewerkt in de Power Automate-ontwerper, selecteer je de actie waarin je de opgemaakte datum wilt invoegen en ga je vervolgens naar een tekstveld op de kaart.
Selecteer in het venster dat opent de optie Expressie > Gegevens opmaken op basis van voorbeelden.

In de lijst die geopend wordt, vind je alle items die in de stroom weergegeven kunnen worden. Selecteer het item dat je wilt omzetten en geef een voorbeeld van de oorspronkelijke gegevens voor het item dat je in de vorige stap hebt geselecteerd.

Power Automate geeft de expressie weer waarmee je de gewenste uitvoer te zien krijgt. Dit kan je testen met een andere waarde om te bevestigen dat de expressie doet wat je verwacht.

Conclusie

Met deze verbetering ben je in staat om makkelijk en snel je expressies vorm te geven, zonder dat je de verschillende functies en bijbehorende syntaxis kent die nodig zijn om de gewenste expressies te maken.
Deze functionaliteit is voor iedere maker een verbetering, eenvoudig in gebruik en krachtig in uitvoer. Probeer het eens uit en je zal zien dat het ook jouw Flow beter maakt.

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.

Joost Joost / 24-04-2023

2 minuten lezen

Deze maand komen er weer een aantal mooie updates uit op het Power Platform waaronder een aanpassing in het uiterlijk van modelgestuurde apps (model driven apps). Modelgestuurde apps hebben een moderner, vernieuwend uiterlijk gekregen. In deze update zit onder andere een bijgewerkte styling, waaronder lettertypen, kleuren, randen, schaduwen etc. Al deze aanpassingen zijn afgestemd op het nieuwste Fluent design.

Hoe ziet deze moderne, vernieuwende uiterlijk eruit?

Opdrachtbalk

De opdrachtbalk is in een aparte ‘zwevende’ sectie boven aan de pagina terug te vinden. 
Dit uiterlijk is afgestemd op de Microsoft 365-ervaring met afgeronde hoeken en hoogte.

Weergavepagina’s

De grootste verandering op weergavepagina's is de overschakeling van het alleen-lezen raster naar het Power Apps-rasterbesturingselement. Dit biedt de mogelijkheid voor oneindig scrollen door pagina’s. Het Power Apps-rasterbesturingselement ondersteunt ook online bewerken, waarmee gebruikers records kunnen bekijken, openen en bewerken vanuit weergaven en subrasters. 

Formulieren

Het onderdeel formulieren gebruikt ook de nieuwe opdrachtbalk. Maar hier zijn meer aanpassingen gedaan zoals vernieuwde kopteksten, tabbladen en secties. De snelle weergaven, kaartformulieren, kopteksten, sitemaps en de tijdlijn besturingselementen hebben een verandering in uiterlijk doorgemaakt.
Hieronder zie je een formulierpagina met een modern, vernieuwd uiterlijk.

Veldbesturingselementen

Ook de veldbesturingselementen zoals tekst invoer, actie-invoer, opzoeken zijn gebouwd en ontworpen met Fluent-componenten. Deze hebben nu een meer gestroomlijnd ontwerp. De pictogrammen zijn verplaatst naar de rechterkant van het veld labels. Sommige overbodige pictogrammen zijn verwijderd, als voorbeeld: het slotpictogram wordt niet weergegeven voor alleen-lezen velden.

Conclusie

Het Microsoft Fluent uiterlijk wordt de nieuwe moderne, snelle en efficiënte standaard voor veel Microsoft producten. Niet alleen de modelgestuurde apps maar ook andere Power Platform onderdelen worden langzaam getransformeerd in dit uiterlijk. Voor de modelgestuurde app is dit een begin van een modern, en een meer efficiënte manier van werken met je data in een gebruiksvriendelijke en herkenbaar uiterlijk.

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.

{description}

Heb je een Power Platform expert nodig?

Neem contact met ons op
{description}

Hoor van onze experts hoe leuk ShareValue is

Lees de verhalen van onze collega's