Creare un controllo Tabs in Power Apps
17 giugno 2020
In questo esempio mostro come creare un controllo di tipo Tabs in Power Apps utilizzando i suoi controlli standard.
Questo perché, come nel caso precedente Creare un Popup in Power Apps, non esiste un controllo nativo.
Risultato finale
struttura dei controlli
dove i principali elementi sono: rectTabsContainer, glryTabs e grpTabs. Gli altri elementi presenti servono solo come esempio di contenuto.
ordine dei controlli
Anche i controlli che saranno contenuti nei singoli Tabs, nel caso fossero più di uno, è conveniente raggrupparli, un gruppo per ogni singolo Tab. Questo ci permetterà di controllare più semplicemente la visualizzazione o meno.
Il controllo gallery (glryTabs) sarà il principale mentre il rettangolo (rectTabsContainer) si posizionerà in automatico.
Quindi inseriamo queste formule nel rettangolo rectTabsContainer:
queste nella gallery glryTabs:
e queste nella label lblTabItem
dove la proprietà ID rappresenta l'identificatore univoco del tab, mente Text è il testo visualizzato.
A questo punto la label nella gallery (lblTabItem) andrà impostata come:
Il passo successivo è tenere traccia di quale tab è correntemente selezionato.
Per far questo uso una variabile di contesto di nome TabIDSelected. Questa sarà impostata sull'evento OnSelect del controllo glryTabs:
Adesso non resta che evidenziare graficamente qual'è il tab selezionato.
Ho scelto di evidenziarlo sottolineando il testo e riducendo la dimensione dei tab non selezionati:
tab selezionato
Questo effetto si ottiene impostando queste proprietà del controllo lblTabItem:
Questo lo si fa tramite la proprietà Visibile.
Vanno posizionati i singoli controlli di contenuto manualmente in modo che siano sopra al controllo container (rectTabsContainer).
Il passo successivo è legare i singoli controlli al relativo Tab:
Questo perché, come nel caso precedente Creare un Popup in Power Apps, non esiste un controllo nativo.
Struttura del controllo Tabs
Il controllo sarà costituito da:- un contenitore che delimita, visivamente, l'ambito del controllo (rettangolo - rectTabsContainer)
- una serie di Tab cliccabili (gallery - glryTabs)
- una serie di controlli, uno o più per ogni Tab presente, eventualmente raggruppati (grpTabs_Info, btnTab_Detail e btnTab_About)
Risultato finaleCostruzione del controllo
Come dicevo non esiste un controllo Tabs quindi lo simulerò con un rettangolo che funge da contenitore e una gallery per visualizzare i singoli Tab.Il rettangolo contenitore sarà solo virtuale in quanto i controlli contenuti in realtà saranno semplicemente sovrapposti e, accesi o spenti, in funzione del Tab selezionato (proprietà Visible).
Questa è la struttura dei controlli da realizzare:struttura dei controllidove i principali elementi sono: rectTabsContainer, glryTabs e grpTabs. Gli altri elementi presenti servono solo come esempio di contenuto.
Attenzione: l'ordine in cui compaiono i controlli è importante. Il rettangolo che servirà da container (rectTabsContainer) deve essere visualizzato appena sopra la gallery dei Tabs (glryTabs). I controlli che dovranno essere contenuti nei Tab, dovranno essere presenti prima del container.
Questo è il dettaglio dell'ordine di visualizzazione:ordine dei controlliRaggruppiamo
Per semplicità di gestione i controlli che compongono il controllo Tabs, rectTabsContainer e glryTabs, vanno raggruppati in un gruppo di nome grpTabs.Anche i controlli che saranno contenuti nei singoli Tabs, nel caso fossero più di uno, è conveniente raggrupparli, un gruppo per ogni singolo Tab. Questo ci permetterà di controllare più semplicemente la visualizzazione o meno.
Posizionare gli elementi in automatico
Sempre nell'ottica di semplificare la gestione e il posizionamento dei controlli, leghiamo assieme il rettangolo e la gallery tramite delle formule.Il controllo gallery (glryTabs) sarà il principale mentre il rettangolo (rectTabsContainer) si posizionerà in automatico.
Quindi inseriamo queste formule nel rettangolo rectTabsContainer:
Power Apps
X = glryTabs.X
Y = glryTabs.Y + glryTabs.Height
Width = glryTabs.Width
Height = 500
BorderThickness = 2
Fill = RGBA(255, 255, 255, 1)
Power Apps
TemplateSize = 150
TemplatePadding = 0
Width = 845
Height = 70
Fill = RGBA(0, 0, 0, 0)
Power Apps
X = 0
Y = 0
Width = Parent.TemplateWidth
Height = Parent.Height
BorderThickness = 2
Fill = RGBA(255, 255, 255, 1)
Gestione Tabs
Il controllo glrtTabs si aspetta una collection in ingresso nella proprietà Items, inseriamo questa:Power Apps
Items = [{ID: "info", Text: "Tab Info"}, {ID: "detail", Text: "Tab Detail"}, {ID: "about", Text: "Tab About"}]
A questo punto la label nella gallery (lblTabItem) andrà impostata come:
Power Apps
Text = ThisItem.Value.Text
Da notare che l'accesso alla proprietà Text della collection va fatto tramite ThisItem.Value.
Il passo successivo è tenere traccia di quale tab è correntemente selezionato.
Per far questo uso una variabile di contesto di nome TabIDSelected. Questa sarà impostata sull'evento OnSelect del controllo glryTabs:
Power Apps
OnSelect = UpdateContext({TabIDSelected: ThisItem.Value.ID})
Adesso non resta che evidenziare graficamente qual'è il tab selezionato.
Ho scelto di evidenziarlo sottolineando il testo e riducendo la dimensione dei tab non selezionati:
tab selezionatoQuesto effetto si ottiene impostando queste proprietà del controllo lblTabItem:
Power Apps
Underline = ThisItem.Value.ID = TabIDSelected
Y = If(TabIDSelected = ThisItem.Value.ID, 2, 10)
Contenuto dei Tab
Il controllo Tabs a questo punto è perfettamente funzionante, va gestita la visualizzazione del contenuto.Questo lo si fa tramite la proprietà Visibile.
Vanno posizionati i singoli controlli di contenuto manualmente in modo che siano sopra al controllo container (rectTabsContainer).
Il passo successivo è legare i singoli controlli al relativo Tab:
Power Apps
grpTabs_Info.Visible = TabIDSelected = "info"
btnTab_Detail.Visible = TabIDSelected = "detail"
btnTab_About.Visible = TabIDSelected = "about"
Nel caso del primo tab dove avevo più controlli, li ho raggruppati ed ho gestito la proprietà Visible del gruppo anziché dei singoli.