Skip to content
Dans le volet gauche, cliquez sur ComposantsCliquez sur Nouveau composantRenommez-le cmpConfirmationSuppressionDéfinissez les dimensions : largeur 400, hauteur 200
Sélectionnez le composant cmpConfirmationSuppressionDans le panneau de droite, cliquez sur Nouvelle propriété personnaliséeRenseignez les paramètres selon le tableau ci-dessous
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
É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é :
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
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.