Pulsante controllo moderno nelle app canvas

Il controllo Pulsante moderno fornisce un elemento selezionabile che attiva azioni in un'app canvas, offrendo stili flessibili e funzionalità di interazione complete.

Description

Il controllo Pulsante moderno fornisce un elemento selezionabile che attiva la logica dell'app quando selezionata. Usarlo per gli invii di moduli, la navigazione, le conferme e qualsiasi interazione che richiede l'input dell'utente. Il controllo supporta combinazioni di icone e testo, stili di carattere completi e stili di aspetto multipli tramite il tema Fluent. Le proprietà chiave per questo controllo sono Text, Appearance e OnSelect.

Generali

Testo : etichetta visualizzata sul pulsante. Supporta qualsiasi formula di testo o Power Fx che restituisce una stringa. Utilizzare questa proprietà per impostare o modificare il testo del pulsante.

Visibile : indica se il controllo viene visualizzato o è nascosto. Usare una formula di Power Fx per mostrare o nascondere il pulsante in base allo stato dell'app.

Behavior

OnSelect : utilizzare la proprietà OnSelect per definire cosa accade quando viene selezionato il pulsante. È il modo in cui l'app risponde quando l'utente seleziona il pulsante. Il controllo è accessibile: OnSelect attiva anche quando l'utente preme INVIO o Spazio mentre il controllo ha lo stato attivo della tastiera.

DisplayMode : indica se il controllo consente l'input dell'utente (Modifica), visualizza solo i dati (visualizzazione) o è disabilitato (Disabilitato). Se Disabilitato, il pulsante è visivamente disattivato e OnSelect non viene attivato.

Introduzione

Il controllo Pulsante moderno è uno dei controlli più usati in Power Apps. Al suo centro, un pulsante ha due elementi essenziali: il testo visualizzato dagli utenti (la proprietà Text ) e l'azione che si verifica quando è selezionata (la proprietà OnSelect ). Dopo aver compreso queste nozioni di base, è possibile creare app interattive che rispondono all'input dell'utente.

Imposta testo pulsante

Per modificare il testo visualizzato nel pulsante, impostare la proprietà Text :

• Nel riquadro Proprietà immettere testo direttamente nel campo Testo
• Uso di una formula: Text = "Click Me" o Text = "Save " & TextInput1.Text

Rendere interattivi i pulsanti

Definire cosa accade quando gli utenti selezionano il pulsante usando la proprietà OnSelect :

1. Selezionare il pulsante nell'app.
2. Nel riquadro Proprietà individuare la proprietà OnSelect .
3. Immettere la formula di Power Fx, ad esempio Navigate(NextScreen).

Configurare le proprietà del pulsante

Power Apps usa un approccio semplificato per la modifica dei controlli.

• Selezionare il pulsante nell'area di disegno:
  • Usare il riquadro Proprietà a destra per modificare le proprietà di base.
  • Usare la barra della formula nella parte superiore per le formule avanzate.
  • Passare alle proprietà avanzate per la personalizzazione dettagliata.

Dimensioni e posizione

X : distanza tra il bordo sinistro del controllo e il bordo sinistro del contenitore padre (schermata se non è presente alcun contenitore padre).

Y : distanza tra il bordo superiore del controllo e il bordo superiore del contenitore padre (schermata se non è presente alcun contenitore padre).

Width : distanza tra i bordi sinistro e destro del controllo. Il valore predefinito è 96.

Altezza : distanza tra i bordi superiore e inferiore del controllo. Il valore predefinito è 32.

Allinea : allineamento orizzontale del contenuto del pulsante all'interno del controllo . Accetta valori Align di enumerazione: Align.Left, Align.CenterAlign.Right, , Align.Justify.

VerticalAlign : allineamento verticale del contenuto del pulsante. Accetta valori VerticalAlign di enumerazione: VerticalAlign.Top, VerticalAlign.Middle, VerticalAlign.Bottom.

PaddingTop : distanza tra il contenuto del pulsante e il bordo superiore del controllo.

PaddingBottom : distanza tra il contenuto del pulsante e il bordo inferiore del controllo.

PaddingLeft : distanza tra il contenuto del pulsante e il bordo sinistro del controllo.

PaddingRight : distanza tra il contenuto del pulsante e il bordo destro del controllo.

Stile e tema

Aspetto : stile di visualizzazione del pulsante. Accetta valori ButtonAppearance di enumerazione:

BasePaletteColor : colore di base utilizzato dal tema per generare la tavolozza dei colori del controllo. Modificare questa proprietà per applicare un colore del tema diverso al pulsante.

Icona : nome dell'icona Fluent da visualizzare insieme al testo del pulsante (ad esempio, "Add", "Save", "Delete"). Lasciare vuoto un pulsante solo testo.

IconStyle : indica se l'icona viene visualizzata in stile contorno o riempito. Accetta valori IconStyle di enumerazione: IconStyle.Outline (impostazione predefinita) o IconStyle.Filled.

IconRotation : rotazione in gradi applicata all'icona. Il valore predefinito è 0.

Layout : posizione dell'icona rispetto al testo del pulsante. Accetta valori ButtonLayout di enumerazione:

Font : famiglia di caratteri usata per l'etichetta del pulsante.

Dimensioni : dimensioni del carattere dell'etichetta del pulsante, espressa in punti.

Color: colore del testo dell'etichetta del pulsante.

FontWeight : spessore dell'etichetta del pulsante. Accetta valori FontWeight di enumerazione: FontWeight.Bold, FontWeight.Semibold( FontWeight.Normal impostazione predefinita), FontWeight.Lighter.

Corsivo : indica se l'etichetta del pulsante viene visualizzata in corsivo.

Sottolineatura : indica se una riga viene visualizzata sotto il testo dell'etichetta del pulsante.

Barrato : indica se una riga viene visualizzata al centro del testo dell'etichetta del pulsante.

BorderColor : colore del bordo del controllo.

BorderStyle : stile del bordo del controllo. Accetta valori BorderStyle di enumerazione: BorderStyle.Solid, BorderStyle.Dashed, BorderStyle.Dottedo BorderStyle.None.

BorderThickness : spessore del bordo del controllo in pixel.

RadiusTopLeft : raggio dell'angolo dell'angolo superiore sinistro del controllo.

RadiusTopRight : raggio dell'angolo dell'angolo superiore destro del controllo.

RadiusBottomLeft : raggio dell'angolo dell'angolo inferiore sinistro del controllo.

RadiusBottomRight : raggio dell'angolo dell'angolo inferiore destro del controllo.

Proprietà aggiuntive

AccessibleLabel : etichetta letta dalle utilità per la lettura dello schermo. Fornire una descrizione significativa quando l'etichetta del pulsante da sola non è sufficiente , ad esempio quando si usa un pulsante di sola icona.

Descrizione comando : testo esplicativo visualizzato quando l'utente passa il puntatore del mouse sul pulsante.

ContentLanguage : lingua di visualizzazione per il contenuto del controllo, se diversa dalla lingua dell'app.

Esempio

L'esempio YAML seguente mostra un pulsante di invio e un pulsante di annullamento con azioni OnSelect:

- SubmitButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Submit"
      OnSelect: |
        SubmitForm(DataForm1);
        Navigate(SuccessScreen)
      Appearance: =ButtonAppearance.Primary
      Icon: ="Checkmark"
      IconStyle: =IconStyle.Outline
      Layout: =ButtonLayout.IconBefore
      AccessibleLabel: ="Submit the form"
      Tooltip: ="Submit your response"
      Width: =120
      Height: =36

- CancelButton:
    Control: ModernButton@1.0.0
    Properties:
      Text: ="Cancel"
      OnSelect: =Navigate(HomeScreen)
      Appearance: =ButtonAppearance.Outline
      Width: =120
      Height: =36

Modelli di pulsante comuni

Ecco le implementazioni tipiche dei pulsanti:

Pulsante di spostamento:

OnSelect = Navigate(DetailsScreen, ScreenTransition.Fade)

Invio di dati:

OnSelect = SubmitForm(Form1); Notify("Data saved!", NotificationType.Success)

Aggiornamento variabile:

OnSelect = Set(IsVisible, !IsVisible)

Finestra di dialogo di conferma:

OnSelect = If(
    Confirm("Are you sure you want to delete this item?"),
    Remove(Collection1, ThisItem)
)

Aggiornamenti recenti

La versione aggiornata del controllo moderno Button include i miglioramenti e le modifiche di comportamento seguenti.

Ridenominazione delle proprietà

Le proprietà seguenti vengono rinominate. Aggiornare tutte le formule nell'app che fanno riferimento ai nomi delle proprietà precedenti.

Proprietà rimosse

Correzioni di bug e miglioramenti

• Enumerazioni aggiornate: Appearance, Layoute IconStyle ora usano enumerazioni Power Fx tipate (ButtonAppearance, ButtonLayout, IconStyle) anziché valori stringa, migliorando IntelliSense e riducendo gli errori delle formule.
• Supporto della descrizione comando: la nuova Tooltip proprietà mostra testo esplicativo al passaggio del mouse.
• Miglioramenti del bordo: aggiunti BorderStyle e BorderThickness per un controllo bordo più preciso. Quattro proprietà specifiche dell'angolo sostituiscono BorderRadius per il controllo angolo indipendente.
• Controllo carattere completo: le proprietà del tipo di carattere sono ora coerenti con altri controlli moderni. Usare Font, Size, ColorItalic, , Underlinee Strikethrough.

Vedere anche

• Panoramica dei controlli moderni
• Dimensioni e proprietà della posizione