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.

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)
questo sarà l'aspetto finale:
Risultato finale
Risultato finale

Costruzione 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 controlli
struttura dei controlli

dove 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 controlli
ordine dei controlli

Raggruppiamo

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)
queste nella gallery glryTabs:

Power Apps

TemplateSize = 150
TemplatePadding = 0
Width = 845
Height = 70
Fill = RGBA(0, 0, 0, 0)
e queste nella label lblTabItem

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"}]
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:

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 selezionato
tab selezionato

Questo 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.
Tags:
Power Apps26
Potrebbe interessarti anche: