Création d’un composant MsgBox de confirmation de suppression

Conception du composant

Le composant prendra en entrée un enregistrement (record) plutôt qu’une table, car une demande de suppression concerne généralement un élément unique sélectionné par l’utilisateur. Le composant exposera également une propriété de sortie pour communiquer la réponse de l’utilisateur à l’écran parent.

Étape 1 : créer le composant

Dans le volet gauche, cliquez sur Composants
Cliquez sur Nouveau composant
Renommez-le cmpConfirmationSuppression
Définissez les dimensions : largeur 400, hauteur 200

Étape 2 : définir les propriétés personnalisées

Dans le panneau de propriétés du composant, ajoutez les propriétés suivantes :

Propriétés d’entrée

Nom de propriété	Type	Description
Visible	Booléen	Contrôle l’affichage du composant
EnregistrementASupprimer	Enregistrement	L’enregistrement concerné par la suppression
ChampAffichage	Texte	Nom du champ à afficher dans le message
TitreBoite	Texte	Titre personnalisable de la boîte de dialogue

Propriété de sortie

Nom de propriété	Type	Description
ReponseUtilisateur	Texte	Valeur retournée : “Confirmer”, “Annuler” ou “Aucune”

Configuration des propriétés

Pour créer chaque propriété :

Sélectionnez le composant cmpConfirmationSuppression
Dans le panneau de droite, cliquez sur Nouvelle propriété personnalisée
Renseignez les paramètres selon le tableau ci-dessous

Propriété : Visible
    Type de propriété : Entrée
    Type de données : Booléen
    Valeur par défaut : false


Propriété : EnregistrementASupprimer
    Type de propriété : Entrée
    Type de données : Enregistrement
    Valeur par défaut : {ID: 0, Libelle: ""}


Propriété : ChampAffichage
    Type de propriété : Entrée
    Type de données : Texte
    Valeur par défaut : "Libelle"


Propriété : TitreBoite
    Type de propriété : Entrée
    Type de données : Texte
    Valeur par défaut : "Confirmation de suppression"


Propriété : ReponseUtilisateur
    Type de propriété : Sortie
    Type de données : Texte

Étape 3 : construire l’interface du composant

Fond semi-transparent (overlay)

Ajoutez un contrôle Rectangle nommé rectOverlay :

X: 0
Y: 0
Width: Parent.Width
Height: Parent.Height
Fill: RGBA(0, 0, 0, 0.5)
Visible: Parent.Visible

Conteneur principal de la boîte de dialogue

Ajoutez un contrôle Rectangle nommé rectBoiteDialogue :

X: (Parent.Width - Self.Width) / 2
Y: (Parent.Height - Self.Height) / 2
Width: 350
Height: 180
Fill: White
BorderColor: RGBA(200, 200, 200, 1)
BorderThickness: 1
Visible: Parent.Visible

Barre de titre

Ajoutez un contrôle Rectangle nommé rectBarreTitre :

X: rectBoiteDialogue.X
Y: rectBoiteDialogue.Y
Width: rectBoiteDialogue.Width
Height: 40
Fill: RGBA(220, 53, 69, 1)
Visible: Parent.Visible

Libellé du titre

Ajoutez un contrôle Libellé (Label) nommé lblTitre :

X: rectBarreTitre.X + 10
Y: rectBarreTitre.Y + 5
Width: rectBarreTitre.Width - 20
Height: 30
Text: Parent.TitreBoite
Color: White
Font: Font.'Segoe UI'
FontWeight: FontWeight.Semibold
Size: 14
Visible: Parent.Visible

Icône d’avertissement

Ajoutez un contrôle Icône nommé icoAvertissement :

X: rectBoiteDialogue.X + 15
Y: rectBoiteDialogue.Y + 55
Width: 32
Height: 32
Icon: Icon.Warning
Color: RGBA(220, 53, 69, 1)
Visible: Parent.Visible

Message de confirmation

Ajoutez un contrôle Libellé nommé lblMessage :

X: icoAvertissement.X + icoAvertissement.Width + 10
Y: rectBoiteDialogue.Y + 50
Width: rectBoiteDialogue.Width - icoAvertissement.Width - 40
Height: 50
Text: "Voulez-vous supprimer l'enregistrement « " & 
      Text(LookUp(
          Table(Parent.EnregistrementASupprimer), 
          true
      ).(Parent.ChampAffichage)) & 
      " » ?"
Color: RGBA(50, 50, 50, 1)
Font: Font.'Segoe UI'
Size: 12
Visible: Parent.Visible

Note : si la formule ci-dessus pose problème, utilisez cette alternative simplifiée :

Text: "Voulez-vous supprimer cet enregistrement ?"

Bouton Annuler

Ajoutez un contrôle Bouton nommé btnAnnuler :

X: rectBoiteDialogue.X + 20
Y: rectBoiteDialogue.Y + rectBoiteDialogue.Height - 50
Width: 120
Height: 35
Text: "Annuler"
Fill: RGBA(108, 117, 125, 1)
Color: White
BorderRadius: 4
Visible: Parent.Visible


OnSelect: Select(Parent)

Bouton Confirmer

Ajoutez un contrôle Bouton nommé btnConfirmer :

X: rectBoiteDialogue.X + rectBoiteDialogue.Width - 140
Y: rectBoiteDialogue.Y + rectBoiteDialogue.Height - 50
Width: 120
Height: 35
Text: "Supprimer"
Fill: RGBA(220, 53, 69, 1)
Color: White
BorderRadius: 4
Visible: Parent.Visible


OnSelect: Select(Parent)

Étape 4 : gérer la propriété de sortie

Pour la propriété ReponseUtilisateur, définissez la formule suivante dans sa définition :

If(
    btnConfirmer.Pressed, 
    "Confirmer",
    If(
        btnAnnuler.Pressed, 
        "Annuler",
        "Aucune"
    )
)

Étape 5 : utilisation du composant dans un écran

Données de test

Dans la propriété OnVisible de l’écran :

ClearCollect(
    colClients,
    { ID: 1, Nom: "Dupont", Prenom: "Marie", Ville: "Paris" },
    { ID: 2, Nom: "Martin", Prenom: "Pierre", Ville: "Lyon" },
    { ID: 3, Nom: "Bernard", Prenom: "Sophie", Ville: "Marseille" }
)

Variable de contrôle

Ajoutez également :

UpdateContext({ 
    locAfficherConfirmation: false,
    locEnregistrementSelectionne: Blank()
})

Galerie d’affichage

Ajoutez une galerie galClients avec :

Items: colClients
TemplateSize: 60

Dans la galerie, ajoutez un libellé et un bouton de suppression :

Libellé :

Text: ThisItem.Nom & " " & ThisItem.Prenom & " - " & ThisItem.Ville

Bouton supprimer (icône poubelle) :

OnSelect: UpdateContext({ 
    locAfficherConfirmation: true,
    locEnregistrementSelectionne: ThisItem
})

Instance du composant

Ajoutez le composant cmpConfirmationSuppression sur l’écran avec ces propriétés :

Visible: locAfficherConfirmation
EnregistrementASupprimer: locEnregistrementSelectionne
ChampAffichage: "Nom"
TitreBoite: "Supprimer ce client ?"

Gestion de la réponse

Dans la propriété OnSelect du composant (au niveau de l’écran) :

If(
    cmpConfirmationSuppression_1.ReponseUtilisateur = "Confirmer",
    // Supprimer l'enregistrement
    Remove(colClients, locEnregistrementSelectionne);
    UpdateContext({ locAfficherConfirmation: false });
    Notify("Enregistrement supprimé", NotificationType.Success),
    
    // Si annulation
    If(
        cmpConfirmationSuppression_1.ReponseUtilisateur = "Annuler",
        UpdateContext({ locAfficherConfirmation: false })
    )
)

Alternative : utilisation avec une propriété comportementale

Pour une approche plus élégante, vous pouvez créer des propriétés de type comportement (behavior) sur le composant.

Propriétés comportementales à ajouter

Propriété : OnConfirm
    Type de propriété : Comportement
    Type de données : Booléen


Propriété : OnCancel
    Type de propriété : Comportement
    Type de données : Booléen

Modification des boutons dans le composant

btnConfirmer.OnSelect :

cmpConfirmationSuppression.OnConfirm()

btnAnnuler.OnSelect :

cmpConfirmationSuppression.OnCancel()

Utilisation simplifiée dans l’écran

Sur l’instance du composant :

OnConfirm: 
    Remove(colClients, locEnregistrementSelectionne);
    UpdateContext({ locAfficherConfirmation: false });
    Notify("Client supprimé", NotificationType.Success)


OnCancel:
    UpdateContext({ locAfficherConfirmation: false })

Source : Microsoft Learn - Création de composants Canvas