Maak herbruikbaar ‘Tab’ component om te gebruiken in al je toekomstige Power Apps

Maak 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.

MORE RELEVANT NEWS

Hoe je het Power Platform maximaliseert

Hoe je het Power Platform maximaliseert

Integreer Power BI en Power Apps in jouw dagelijkse Apps In het (Microsoft) Power Platform wordt het steeds makkelijker om verschillende tools te combineren om het maximale uit je data te halen. Dat komt ook omdat we meer...

Lees meer
Productiviteit verhogen met de juiste integratie

Productiviteit verhogen met de juiste integratie

PowerApps Portal deel 2: Sharepoint integratie In deel 1 van de PowerApps Portal serie kwam het samenwerken met partners en klanten aan bod. Kort stipte ik de Sharepoint Integration aan en wil ik daar in dit stuk wat dieper...

Lees meer

Get in Touch

Accelerate your innovation capacity