Hoe maak je een herbruikbaar ‘Tab’ component om te gebruiken in al je toekomstige Power Apps ?
Power Apps brengt ons veel opties en mogelijkheden. Met de aanstaande nieuwe Pagina’s functie en in bestaande Canvas Apps is het handig om direct beschikbare componenten te hebben die je de flexibiliteit geven om je pixel-perfect pagina’s snel te creëren , terwijl je eenzelfde ‘look en feel’ behoudt met de rest van je app. Dit artikel geeft een korte uitleg over het maken van een herbruikbaar onderdeel om ’tabbladen’ op een pagina te maken.
Het gebruik van tabbladen op een pagina helpt bij het organiseren van de inhoud, een doel dat de veel makers van apps zullen herkennen. Om hergebruik te vergemakkelijken biedt Power Apps de Component Libaries waarmee je componenten kunt hergebruiken in elke (canvas) app die je binnen de omgeving maakt.
Hoewel de stijl geheel aan jou is, geeft het voorbeeld de tabbladen een zeer consistent Power Apps-gevoel. Laten we eens kijken hoe je eenvoudig herbruikbare “tabbladen” kunt maken in Power Apps.
Hoe maak jeeen nieuwe of open een bestaande ‘Componentenbibliotheek App’.
- Selecteer de Apps
- Selecteer binnen Apps het tabblad Componentbibliotheken (preview)
- Selecteer ‘+ Nieuwe componentenbibliotheek (preview)’ op het lint
Binnen de nieuwe componentenbibliotheek-app word je naar het tabbladComponentenop de boomweergavepagina geleid waar het component Component1 is geselecteerd. Navigeer binnen een bestaande bibliotheek naar het tabblad Componenten en selecteer ‘+ Nieuwe component’.
Opmerking: voor de onderstaande instelling kan de ervaring verschillen, afhankelijk van wanneer je dit bericht in de toekomst leest.
Voordat je aan de component gaat werken, schakel je de ‘Verbeterde componenteigenschappen’ in. Je kunt dit doen door ‘Bestand’ te selecteren en vervolgens ‘Instellingen’. Selecteer in de pop-up met instellingen ‘aankomende functies’, vink op het tabblad Experimenteel ‘Verbeterde componenteigenschappen’ aan.
Component instellen
Als goede gewoonte hernoem ik het component, aangezien we een tabbladcomponent maken, zal ik het ‘Comp_Tab_DCL’ noemen, wat in feite aangeeft dat het een component is met de naam Tab en wordt onderhouden in de Demo Component Library (DCL).
Pas de grootte van het onderdeel aan zodat het beter aansluit bij het verwachte daadwerkelijke gebruik:
- Breedte: 200
- Hoogte: 60
Een label toevoegen
Voeg een Label-besturingselement toe dat de weergavenaam van het tabblad bevat, voor deze demo gaan we ervan uit dat er geen ondersteuningsvereisten voor meerdere talen zijn.
Voeg een label toe en hernoem het: Lbl_DisplayName_Tab
Verandering:
Lbl_DisplayName_Tab.X naar 0
Lbl_DisplayName_Tab.Y naar 0
Lbl_DisplayName_Tab.Width naar Parent.Width
Lbl_DisplayName_Tab.Height to Parent.Height
Lbl_DisplayName_Tab.Uitlijnen op midden
Een rechthoek toevoegen
Voeg een Rechthoekig-besturingselement toe dat de onderstrepende indicator is die aangeeft of dit het geselecteerde tabblad is.
Voeg een rechthoek toe en hernoem deze: Rec_LineSelected_Tab
Verandering:
Rec_LineSelected_Tab.Hoogte tot 3
Rec_LineSelected_Tab.X naar Lbl_DisplayName_Tab.PaddingLeft
Rec_LineSelected_Tab.Y naar Parent.Height – Zelf.Height
Rec_LineSelected_Tab.Width to Parent.Width – (2 * Self.X)
Een knop toevoegen
Voeg een knopbesturingselement toe dat de selector zal zijn voor het tabblad dat de logica voor het selecteren van tabbladen beheert.
Voeg een knop toe en hernoem deze: Btn_TabSelection_Tab
Verandering:
Btn_TabSelection_Tab.X naar 0
Btn_TabSelection_Tab.Y naar 0
Btn_TabSelection_Tab.Width to Parent.Width
Btn_TabSelection_Tab.Hoogte tot bovenliggende.Hoogte
Btn_TabSelection_Tab.Tekst naar “”
Btn_TabSelection_Tab.Vul naar transparant
Btn_TabSelection_Tab.HoverFill naar transparant
Btn_TabSelection_Tab.PressedFill to Transparent
Nu deze eerste elementen zijn gedefinieerd, kunnen we doorgaan met het maken van enkele van de componenteigenschappen. Selecteer Comp_Tab_DCL en voeg een aangepaste eigenschap toe.
De eerste eigenschap die we zullen maken, is de eigenschap OnSelect die de expressie bevat die wordt geactiveerd wanneer de component (instantie) wordt geselecteerd. De aangepaste eigenschap OnSelect moet de volgende configuratie hebben:
- Weergavenaam: OnSelect
- Naam: OnSelect
Beschrijving: de expressie die wordt geactiveerd bij het selecteren van de component. Voorbeeld: UpdateContext({varTabSelected: Comp_Tab_DCL.Text })
- Eigenschapstype: Gedrag
- Gegevenstype: Tekst
Display name
De tweede eigenschap die moet worden gemaakt, is de eigenschap Text die de DisplayName van het tabblad levert. Daarnaast wordt ‘if’ gebruikt als vergelijkingswaarde voor de geselecteerde tabvariabele op de schermen waar we de tab gaan gebruiken. De aangepaste eigenschap Text moet de volgende configuratie hebben:
- Weergavenaam: Tekst
- Naam: Tekst
- Beschrijving: De weergavenaam van het tabblad
- Eigenschapstype: Invoer
Gegevenstype: Tekst
Tabselected toevoegen
De laatste eigenschap die moet worden gemaakt, is de eigenschap TabSelected die de variabele van het huidig geselecteerde tabblad op het scherm bevat. De aangepaste eigenschap TabSelected moet de volgende configuratie hebben:
- Weergavenaam: Tekst
- Naam: Tekst
- Beschrijving: de variabele die de momenteel geselecteerde tabwaarde bevat
- Eigenschapstype: Invoer
- Gegevenstype: Tekst
Displayname
Nu alle elementen aanwezig zijn, kunnen we er een paar samenvoegen voordat we onze herbruikbare tabbladcomponent kunnen testen. Om te beginnen met de weergavenaam van het tabblad, moet het de eigenschap Text van het onderdeel weergeven.
- Selecteer Lbl_DisplayName_Tab
Verandering:
- Lbl_DisplayName_Tab.Text naar Comp_Tab_DCL.Text
Component geselecteerd
Het tweede dat we gaan veranderen is de rechthoek, deze zou alleen zichtbaar moeten zijn als de tab-component is geselecteerd (en dus momenteel actief).
- Selecteer Rec_LineSelected_Tab
Verandering:
- Rec_LineSelected_Tab.Visible to If(Comp_Tab_DCL.Text = Comp_Tab_DCL.TabSelected, true, false)
Het laatste dat we moeten doen voordat we dit kunnen testen, is door de eigenschap OnSelect van het besturingselement verbinden met het besturingselement Btn_TabSelection_Tab.
- Selecteer Btn_TabSelection_Tab
Verandering:
- Btn_TabSelection_Tab.OnSelect naar Comp_Tab_DCL.OnSelect()
En dat is alles… Gefeliciteerd met het maken van een gemakkelijk herbruikbare Tabs-component!
Er is een kleine instructie die bij dit onderdeel wordt geleverd en die we kort zullen doornemen. Schakel in de boomstructuur naar het tabblad Schermen en voeg een exemplaar van Comp_Tab_DCL in het scherm in, dat waarschijnlijk Comp_Tab_DCL_1 zal heten.
- Hernoem Comp_Tab_DCL_1 naar Comp_SelectMe en volg de onderstaande instructies.
- Selecteer Comp_SelectMe
Verandering:
- Comp_SelectMe.Text naar “Selecteer mij”
- Comp_SelectMe.OnSelect to UpdateContext({varTabSelected: Self.Text})
- Comp_SelectMe.TabSelected naar varTabSelected
- (Pas eventueel de grootte van het tabblad aan)
Je hebt zojuist de schermvariabele ‘varTabSelected’ verbonden met de tabcomponent die door deze te selecteren de naam (eigenschap Tekst) van het tabblad zal instellen. Elke andere zichtbare eigenschap van een component kan nu afhankelijk worden gemaakt van de waarde in ‘varTabSelected’. Bijvoorbeeld:
Container1.Visible is If(varTabSelected = “Select Me”, true, false)
Je kunt zoveel tabbladen toevoegen als je nodig hebt, zorg er wel voor dat de exemplaren van de tabbladen op het scherm verschillende namen hebben. Hiërarchieën kunnen worden bereikt door de variabele te wijzigen, bijvoorbeeld varSubTabSelected.
Veel succes met het gebruiken hiervan! Was dit nuttig, volg ons dan op LinkedIn en we houden je op de hoogte van meer interessante Powers.
