Uso di un controllo per modificare la proprietà di altri controlli

Completato

Quando si usano controlli, è possibile modificarne il funzionamento di un controllo specifico in base alle proprietà di un altro controllo. Ciò consente agli utenti di vedere le modifiche all'esperienza a seconda dell'input.

Si supponga ad esempio che l'app abbia un menu a discesa che consente all'utente di scegliere una dimensione del carattere piccola, media o grande. In base a tale impostazione potranno essere modificate dinamicamente le dimensioni del carattere in tutta l'app.

Screenshot di un menu a discesa che mostra una dimensione piccola e un'etichetta di testo che mostra il carattere nella dimensione 8.

Screenshot dello stesso menu a discesa che mostra una dimensione grande e la stessa etichetta di testo che mostra la dimensione del carattere in 24.

È anche possibile applicare una logica simile per i colori del carattere e di riempimento, la posizione dei controlli o la visualizzazione o meno di controlli in base alle selezioni dell'utente. Se un utente seleziona una casella di controllo "Nuovo cliente?", ad esempio, nella schermata verranno visualizzati i campi per l'inserimento di un nuovo cliente.

Screenshot di una casella di controllo che chiede

Screenshot di una casella di controllo che chiede

Uso degli input per regolare le posizioni di un controllo

Usare l'esempio seguente per comprendere il posizionamento dei controlli nel canvas e come usare l'input dell'utente per modificarlo. La posizione dei controlli nel canvas è basata su una combinazione di due proprietà: X e Y.

  • X: distanza tra il bordo sinistro di un controllo e il bordo sinistro della schermata.

  • Y: distanza tra il bordo superiore di un controllo e il bordo superiore della schermata.

Tenere presente che le proprietà X e Y si applicano a tutti i controlli ad eccezione delle schermate. Accedere all'app e fare pratica.

  1. Innanzitutto, creare una nuova schermata per l'app selezionando + Nuova schermata nel pannello Visualizzazione struttura ad albero, quindi selezionare Vuoto.

  2. Successivamente, inserire un controllo a discesa. Selezionare il pulsante + Inserisci e immettere drop nel campo di ricerca, quindi selezionare A discesa.

  3. Modificare la proprietà Items nell'elenco a discesa da DropDownSample a quanto indicato di seguito:

    Table({Position:"Top"},{Position:"Middle"},{Position:"Bottom"})
    

    In tal modo si crea una tabella di record con una singola colonna chiamata Posizione con tre record chiamati Alto, Basso e Medio. Se si seleziona il controllo a discesa tenendo premuto ALT vengono visualizzati questi valori.

    Screenshot del controllo a discesa che mostra i valori Top, Middle e Bottom.

  4. Successivamente, si aggiunge un controllo che è possibile riposizionare dinamicamente sulla schermata. Ancora una volta, selezionare + Inserisci nella barra multifunzione dell'app, immettere aereo nel campo di ricerca, quindi selezionare l'icona Aereo. Trascinare l'icona Aereo al centro della schermata.

  5. Ora si visualizza l'icona Aereo a diverse altezze sulla schermata in base al controllo a discesa. A tale scopo, selezionare l'icona a forma di aereo e trovare la proprietà Y. Si noti che attualmente ha un valore numerico statico. Modificare il valore della proprietà Y nel modo seguente:

    Switch(Dropdown1.SelectedText.Value,"Top",0,"Middle",Screen1.Height/2,"Bottom",Screen1.Height/1-Self.Height)
    

    Nota

    Poiché il controllo a discesa potrebbe avere un nome diverso da Dropdown1, sostituire Dropdown1 con il nome specifico del controllo in uso.

    Screenshot della proprietà Y in Power Apps.

  6. Per provare e testare la formula, impostare la modalità anteprima per l'app. Selezionare ogni posizione nel menu a discesa. Notare che l'icona Aereo regola il valore di "altitudine" (o le coordinate Y) mentre si cambia il valore del dropdown.

Spiegazione

Siamo stati in grado di realizzare il movimento della nostra icona aereo perché la proprietà Y è solo un valore numerico. Tuttavia, non tutti i numeri funzionerebbero, quindi è stato necessario fornire numeri che mostrassero la nostra icona sullo schermo.

Abbiamo usato una funzione Switch basata sul valore di posizione del nostro controllo a discesa, assegnando un valore diverso a Y in base all'input dell'utente. Il valore zero è in alto, mentre l'intera altezza dello schermo è in basso. Abbiamo usato la proprietà Height del controllo dello schermo per tenere conto di qualsiasi piattaforma che usi l'app.

Abbiamo usato anche la proprietà Height dell'icona aereo (Self.Height) per il valore "Bottom" in modo da vedere l'icona aereo nella parte inferiore dello schermo, altrimenti sarebbe stata fuori dalla schermata visibile.

La modifica delle proprietà nei controlli permette di modificare il comportamento degli altri controlli. In questo modo è possibile personalizzare l'esperienza utente. Nel prossimo modulo si apprenderà come migliorare l'app applicando la formattazione condizionale.