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
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 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
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)
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:
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:
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:
