Partager via

Contrôle Dialog (expérimental)

[Cet article fait partie de la documentation en version préliminaire et peut faire l’objet de modifications.]

Un contrôle utilisé pour regrouper le contenu.

Contrôle Dialog

Important

  • Il s’agit d’une fonctionnalité expérimentale.
  • Les fonctionnalités d'évaluation ne sont pas destinées à une utilisation en production et peuvent être restreintes. Ces fonctionnalités sont disponibles avant une publication officielle afin que les clients puissent y accéder de façon anticipée et fournir des commentaires.

Description

Une boîte de dialogue (Dialog) est une fenêtre contextuelle temporaire qui prend le focus sur la page ou l’application et oblige les utilisateurs à interagir avec elle. On l’utilise principalement pour confirmer des actions, telles que la suppression d’un fichier ou demander aux gens de faire un choix.

Ce composant de canevas imite le style et le comportement du Contrôle Dialog de Fluent UI. Consultez la documentation pour connaître les meilleures pratiques.

Afficher le composant dans le référentiel GitHub du Kit du créateur.

Propriétés

Propriétés principales

Propriété Description
Buttons Jeu de données qui définit les boutons (en savoir plus dans les propriétés button).
Title Texte affiché dans la section titre.
OverlayColor Couleur affichée dans la zone de superposition.
DialogWidth Largeur de la boîte de dialogue (à ne pas confondre avec la largeur du contrôle, qui doit s’étendre sur la largeur de l’application).
DialogHeight La hauteur de la boîte de dialogue (à ne pas confondre avec la hauteur du contrôle, qui doit couvrir la hauteur de l’application).
SubTitle Texte affiché sous le titre.

Propriétés des boutons

Propriété Description
Label L’étiquette affichée sur le bouton.
ButtonType Énumération qui détermine le style du bouton. Choisir entre Standard et Primary. 
Table(
    {
        Label: "Cancel", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Standard 
    },{
        Label: "Ok", 
        ButtonType:'Microsoft.CoreControls.Button.ButtonType'.Primary
    }
)

Propriétés du style

Propriété Description
Theme Objet de thème. En savoir plus sur les thèmes.

Apprenez-en davantage sur la mise en forme dans la section Contenu du panneau Format de Panel.

Propriétés d’événement

Propriété Description
OnCloseSelect Expression d’action exécutée lorsque le bouton fermer est sélectionné.
OnButtonSelect Expression d’action exécutée lorsque l’un des boutons d’action est sélectionné.

Comportement

Configurer la visibilité de la boîte de dialogue

Rendez le contrôle Dialog proprement dit (ou la surface dans laquelle il se trouve) visible lorsqu’une variable booléenne (true/false) passe à true. Affectez cette variable à la propriété de visibilité de la boîte de dialogue. Pour masquer la boîte de dialogue après qu'elle a été affichée, mettez à jour la variable dans la propriété de réinitialisation déclenchée lorsque l'icône de fermeture est sélectionnée.

Ce qui suit montre une formule Power Fx pour ouvrir la boîte de dialogue, dans une formule d’action sur un autre composant quelque part dans l’application (par exemple, la propriété OnSelect d’un bouton) :

UpdateContext({ showHideDialog: true })

Ce qui suit est la formule Power Fx pour fermer la boîte de dialogue, dans la propriété OnCloseSelect de la boîte de dialogue :

UpdateContext({ showHideDialog: false })

Affectez la variable à la propriété Visible de la boîte de dialogue :

showHideDialog

Configurer les actions du bouton

Dans la propriété OnButtonSelect de la boîte de dialogue, indiquez des actions dans une condition If() ou Switch() en fonction de la valeur du texte Self.SelectedButton.Label pour définir l’action. Selon l’action, il peut être judicieux de fermer également la boîte de dialogue une fois l’action terminée.

    If( Self.SelectedButton.Label = "Send", 
        Notify("Email Sent")
    );
    UpdateContext({ showHideDialog: false })

Limitations

Ce composant de canevas ne peut être utilisé que dans les applications canevas et les pages personnalisées.

  • Last updated on