Als Power Platform-gebruiker ben je ooit ergens begonnen, waarschijnlijk klein. Al doende merkte je wat wel én wat niet werkte. Zoveel nieuwe onderwerpen, mechanismen en concepten om te leren. Het bijbehorende gevoel van chaos, zoekende naar structuur. Jawel: de bekende leercurve.
Ook ik, ooit afkomstig uit een totaal andere branche, heb flink moeten zoeken naar wat het beste werkt en de nodige ‘leermomenten’ gehad. Daarom deel ik graag mijn top 5 lessen met jou:
- Wat is het verschil tussen een container en een group?
- Waarom zijn naamgeving & conventies zo belangrijk? (Inclusief lijst met voorvoegsels)
- Wat is het nut van een global of local variabele en wanneer gebruik je welke?
- Wat is thematisering & branding en hoe pas je het toe?
- Wat zijn componentbibliotheken en wanneer/hoe gebruik je ze?
1. Wat is het verschil tussen een container en een group?
Stel jij bent lekker aan de slag gegaan met de wensen van de gebruiker. Na een eerste presentatie wil hij het scherm anders en ben je vervolgens 20 controls aan het herpositioneren. Bij elke tussentijdse presentatie herhaalt zich dit. Als je helemaal klaar denkt te zijn, komt marketing met het kleurenschema van de organisatie en ben je weer al deze controls aan het aanpassen. Dit moet toch handiger kunnen? De oplossing: containers!
Containers zijn de ruggengraat van elke goed gestructureerde app. Ze definiëren delen van het scherm om een meer georganiseerde ontwerpervaring mogelijk te maken. Ook kunnen ze worden gebruikt om overlappende elementen te voorkomen, diepte te creëren, inhoud snel uit te lijnen of te corrigeren én ze bieden je de mogelijkheid om aanpasbare indelingen te maken (responsieve ontwerpen) voor als de app gebruikt gaat worden op verschillende schermgroottes. Je groepeert als het ware besturingselementen, waardoor deze gezamenlijk en dus niet afzonderlijk kunnen worden gepositioneerd. Het is een besturingselement met eigen eigenschappen zoals breedte en randkleur.
Stel je wilt een pagina met een headercomponent, een sidebarcomponent en een bodycomponent. Met containers maak je dan hiervoor logische schermverdelingen. Bijkomend voordeel is dat hiermee gelijk de zijbalk van de Tree view van inklapbare secties wordt voorzien, wat zorgt voor meer overzicht.
Je kunt er verschillende besturingselementen aan toevoegen, zoals labels, tekstvakken, comboboxen, galerijen en knoppen. Meerdere containers binnen elkaar stapelen is ook mogelijk (Child Container binnenin de Parent Container). Containers werken niet binnen formulieren, maar je kunt wel formulieren toevoegen binnen de container. Een app ontwerpen wordt zo een stuk makkelijker en de app is indien nodig sneller aan te passen.
Een group daarentegen heeft geen eigen eigenschappen en geen invloed op de indeling van de app, zoals een container dat wel heeft. Zie het als een soort snelkoppeling die een stap of twee uit je gebruikelijke proces kan halen. Je kunt bijvoorbeeld alle besturingselementen die bij een header horen groeperen en zo meer overzicht creëren in de zijbalk van de Tree view.
Het is ook een hulpmiddel om alle algemene eigenschappen (zoals lettergrootte, kleur, etc.) in één klik te kunnen wijzigen, in plaats van voor elk apart besturingselement. Je kunt in één keer voor de hele groep dynamisch instellen dat de groep van grootte verandert of wel/niet zichtbaar is als er aan een bepaalde voorwaarde wordt voldaan. Doe dit door de groep te selecteren en vervolgens in het rechter venster aanpassingen te maken naar wens. Het scheelt op deze manier veel tijd.
2. Waarom zijn naamgeving en conventies zo belangrijk?
Het zou zomaar kunnen dat je een half afgemaakt project van iemand anders voor je krijgt. Met de vraag of je er even wat aan wil verbeteren. Natuurlijk! Je bent al snel een tijd bezig om eerst de achterliggende gedachten van de schermen en besturingselementen helder te krijgen en vooral alles te hernoemen naar wat wel duidelijkheid geeft. Dit kan namelijk wél in één oogopslag helder zijn.
Als je je app bouwt met meerdere schermen, besturingselementen en gegevensbronnen, is het raadzaam om een bepaalde naamgevingsconventie te volgen en ervoor te zorgen dat deze consistent zijn in de gehele app. Ze moeten betekenisvol zijn om de gebruikers te helpen. Een schermnaam moet zijn doel helder omschrijven in 2 tot 3 woorden, eindigend met het woord "Screen" of "Scherm". Dit om onder andere rekening te houden met gebruikers met een visuele beperking en de schermnaam voor wordt voorgelezen. Denk hierbij aan bijvoorbeeld "Home Screen", "Booking Screen" of "Confirmation Screen".
Prefixes (voorvoegsels) maken autocomplete mogelijk wanneer je begint te typen in de formulebalk. Ook kun je hiermee variabelen gemakkelijker identificeren in complexere formules. Zo beginnen besturingselementen en variabelen met een kleine letter, gevolgd door een hoofdletter voor elk woord. Denk hierbij aan: lbl_UserName, gal_Search, btn_Submit en img_Logo. Hieronder een lijst met prefixes. Misschien kom je ergens anders andere naamgevingsconventies tegen, maar een systeem is altijd beter dan geen systeem ;-)
| Control | Prefix | Control | Prefix | Control | Prefix |
|---|---|---|---|---|---|
| 3D object | 3do | Date Picker | dte | PDF Viewer | |
| Address Input | add | Export Data | exp | Pie Chart | pch |
| Audio | aud | Form Processor | fpr | Radio | rad |
| Business Card Reader | bcr | Group | grp | Rich Text Editor | rte |
| Camera Control | cam | Icon | ico | Slider | sld |
| Card (Field of a Form Control) | crd | Import Data | imp | Text Input | txt |
| Check Box | cbx | Legend | lgd | Timer | tim |
| Column (part of Data Table) | clm | List Box | lbx | Video | vid |
| Container | con | Measuring Camera | mcm | ||
| Component | cmp | MS Stream Video | msv |
3. Wat is het nut van een global of local variabele en wanneer gebruik je welke?
Het bereik (scope) van een variabele bepaalt waar in de app naar verwezen kan worden. De term "global" is een beetje misleidend, aangezien ze niet globaal zijn in de hele tenant, maar alleen in de App waarin de variabele is gedefinieerd. Als de variabele nodig is op meerdere schermen in de app, gebruik dan een global variabele en verwijs op waar nodig ieder scherm hiernaar door in OnSelect de "set"-functie te gebruiken. Elke variabele die je definieert met de set-functie, heeft een app-breed bereik.
Daarentegen werkt een local (ook wel context genoemd) variabele alleen op het scherm waarin het is gedefinieerd, dus lokaal. Ze gebruiken alleen de ruimte in de context van het desbetreffende scherm. Kies dus voor dit type als het alleen relevant is voor een enkel scherm in de app. Verwijs op het scherm hiernaar door in OnSelect de functie "UpdateContext" of "Navigate" te gebruiken.
Door eerst te bepalen hoe je de variabele wil gaan gebruiken, kun je het type kiezen die het beste aansluit. Houd hierbij ook het onderhoud en geheugen/ruimte in gedachten. In het geval van een grote app met veel schermen die alleen global variabelen gebruikt, denk dan aan de mogelijk situatie in de toekomst als de app dient te worden bijgewerkt. Als de waarde van een variabele wordt gewijzigd, heeft dit impact op alle schermen waarin deze in gebruik is. Dit kan onbedoelde gevolgen hebben. Met een local/context-variabele zal de impact beperkt blijven tot één scherm.
Bonustip: Benoem de variabelen op de juiste wijze om verwarring te voorkomen. Global = gbl, local/context = loc.
Voor meer informatie over variabelen, zie: Inzicht krijgen in variabelen in canvas-apps - Power Apps | Microsoft Learn of Omgevingsvariabelen gebruiken in Power Platform-oplossingen - Power Apps | Microsoft Learn.
4. Wat is thematisering en branding?
Met thematisering kan een consistent uiterlijk op alle onderdelen en schermen binnen de App worden toegepast. Dit is vooral een uitkomst mocht een bedrijfsapp in de toekomst van styling veranderd moet worden. Een erg tijdrovende klus als je elk onderdeel in de App apart zou moeten aanpassen aan dit nieuwe thema.
Denk bij thematisering niet alleen aan kleur, maar ook aan lettertype (kan ook met niet 'out of the box', Web Safe Fonts), iconen en natuurlijk branding. Bij branding gaat het om het logo die in de app wordt toegepast. Als deze op dezelfde vooraf gedefinieerde methode in "OnStart" is opgenomen, is wijzigen zo gebeurt. Wie wil dat nou niet?!
Hoe pas je het toe?
Door in de App eigenschappen, onder OnStart een JSON-formule in te voeren, kan deze op een later tijdstip gemakkelijk worden aangepast naar een andere voorkeur. Hiermee zal de gehele app in één keer worden gewijzigd naar dit thema. Voor elk Canvas-app-onderdeel kun je alle voorkeuren vooraf instellen in dit schema. Dus ook hoe je wil dat de details van knoppen, sliders, tekstinvoer et cetera eruit wil laten zien over de gehele app én hoe deze standaard dienen te reageren. Dit vergt vooraf wat extra werk, maar scheelt je bij toekomstige thema wijzigingen gigantisch veel tijd!
Bonustip: Wil je zelf een kleurenpalet maken? Dit kan via de Fluent UI Theme Designer. De JSON-code die hieruit voortkomt kun je vervolgens exporteren en gebruiken als onderdeel van de formule in OnStart.
Voor meer voorbeelden en informatie, zie: Power Apps App Theming Guidelines - Matthew Devaney
Bonustip: Maak een apart rol-gebaseerd configuratiescherm waar thematisering en branding kan worden ingesteld voor de app. Door de gewenste stijl te selecteren wijzig je met één muisklik de gehele app.
5. Wat zijn componentbibliotheken?
Soms worden ze ook UI (User Interface) bibliotheken genoemd. Je kunt het zien als een verzamelplaats voor herbruikbare bouwblokken voor in Canvas apps. In deze bouwblokken definieer je een set met functies die opnieuw kunnen worden gebruikt in de app-schermen. De componenten vergemakkelijken voor ontwikkelaars het proces van de app-ontwikkeling. Zij kunnen hierdoor efficiënter werken en zich meer richten op de details en functionaliteiten.
Je kunt op 2 manieren de componenten maken. Eén manier is direct vanuit een app. Het nadeel hiervan is dat je deze dan niet kunt hergebruiken in je andere apps, omdat ze worden opgeslagen in de desbetreffende app waarin ze worden gebruikt. Vandaar de voorkeur om ze te maken in een componentbibliotheek. Een ander voordeel van componenten toevoegen aan een bibliotheek, is dat als je hier wijzigingen aanbrengt aan een component, dit wordt toegepast over alle apps waarin dit component wordt gebruikt. De componenten kunnen ook gemakkelijk worden gedeeld met anderen, zodat zij ze kunnen gebruiken in hun eigen apps. Zo kun je onderling samenwerken met zelfgemaakte componenten en deze gaandeweg verbeteren. Als er updates zijn uitgevoerd aan een component, dan krijgen de andere makers waarmee de component bibliotheek is gedeeld hier een melding van.
Wanneer en hoe gebruik je ze?
Als de standaard onderdelen in het platform niet toereikend zijn, kun je gebruik maken van op maat gemaakte componenten die je opslaat in je bibliotheek. Denk hierbij aan HTML-tekst-onderdelen, aangepaste iconen, achtergronden met kleurverloop en meer. Door een soepel lopende App (UI) verbeter je onder andere de gebruikerservaring (UX).
Om gebruik te kunnen maken van componenten uit andere apps en deze te importeren/exporteren van en naar je component bibliotheken, dien je wel eerst deze instelling in te schakelen. Dit doe je bij "Settings", "Upcoming features", "Retired" en zet vervolgens "Exporteer en importeer componenten" aan. Hierna kun je de gemaakte componenten hergebruiken in je Canvas apps.
De optie componentbibliotheken staat in eerste instantie wat verstopt. Deze kun je vinden in de linker navigatiebalk in van het Power Apps hoofdscherm. Selecteer "More" gevolgd door "Discover all". Als je naar beneden scrolt naar "App enhancements" kun je de "Component libraries" vastpinnen aan de navigatiebalk. Om een componentbibliotheek aan te maken, ga je in de navigatiebalk naar "Component libraries", waarna je bovenaan de mogelijkheid vindt "New component library".
In je Canvas app onder het kopje "Tree View" staat naast het kopje "Screens" het kopje "Components". Hier kun je de componenten uit je componentbibliotheek importeren.
Zodra de componenten zijn geïmporteerd, zijn ze klaar voor gebruik in je app. De onderdelen kun je vinden onder "Insert", "Custom".
Bonustip: Mocht je de Creator Kit al hebben gedownload en geïmporteerd, dan kun je hier ook componenten uit gebruiken. Als je nog nooit van de Creator Kit hebben gehoord, neem dan hier een kijkje: Creator Kit - Power Platform
Afsluitend
Van naamgevingen tot componentbibliotheken, ze hebben allemaal hun eigen toegevoegde waarde om het ontwikkelen van een App plezieriger te maken. Hoe vaak je de theorieën over deze onderwerpen ook leest, zodra je het in de praktijk gaat toepassen begint het pas te dagen wat de kracht ervan is.
Ga lekker los met je creativiteit en oefen, oefen, oefen. Maar vooral, zie fouten als leermomenten voor de toekomst ;)
Wil je meer weten over deze functionaliteit? Neem dan gerust contact met ons op, zodat we de mogelijkheden kunnen bespreken.
Heb je vragen over dit onderwerp of zou je Wendy willen inhuren voor een vergelijkbare opdracht?
Lees ook onze andere berichten
Kan jij onze expertise gebruiken bij jouw Power Platform oplossing?
