Power Fx : Dites adieu aux Pop-ups manuelles avec la fonction Confirm()

Si vous développez sur Power Apps depuis un certain temps, vous connaissez la douleur de devoir créer une boîte de dialogue de confirmation personnalisée. Jusqu’à présent, cela impliquait de grouper un rectangle, des libellés, deux boutons, et de gérer une variable de visibilité (ex: varShowPopup). C’était long, fastidieux et alourdissait inutilement l’arborescence de l’application.

L’arrivée de la fonction Confirm change radicalement la donne. Voici pourquoi elle va devenir indispensable dans votre boîte à outils de Maker.

🚀 Pourquoi cette fonction est une révolution

1. Un gain de temps considérable

Ce qui prenait auparavant 15 à 20 minutes (création des contrôles UI, grouping, logique de visibilité, gestion du z-index) se fait désormais en une seule ligne de code. Vous n’avez plus besoin de dessiner l’interface de la pop-up pixel par pixel, Power Apps le fait pour vous via les composants natifs.

Créer une pop-up accessible “à la main” est complexe. Il faut gérer le “Focus Trap” (garder la navigation clavier prisonnière de la pop-up tant qu’elle est ouverte) et s’assurer que les lecteurs d’écran (Screen Readers) annoncent correctement le message. La fonction Confirm() utilise les composants standards (Fluent UI), garantissant une accessibilité optimale et une navigation clavier conforme sans effort supplémentaire *.

A ce jour l’accessibilité du popup est encore perfectible car des points sont encore à améliorer, comme remonté par @AlexSolex dans les commentaires :

“la confirmation ne prend pas encore complètement bien l’accessibilité : le focus ne revient pas tout à fait sur le bouton qui a affiché la confirmation, et le popup ne porte pas l’information de dialog nécessaire aux technologie d’assistance pour indiquer qu’une fenêtre est apparue”

Gageons que Microsoft peaufine ces aspects très rapidement car il est indéniable que cette fonction soit très largement utilisée, il serait dommage que les paramètres d’accessibilité soient ocultés.

3. Réduction de la complexité (Low Code)

Moins de contrôles sur votre écran signifie de meilleures performances au chargement (DOM plus léger). De plus, vous éliminez le besoin de variables de contexte uniquement dédiées à l’affichage (les fameux UpdateContext({locShowDialog: true})), rendant votre code plus lisible, plus facile à maintenir et moins sujet aux bugs d’état.

🎓 Tutoriel : Maîtriser la fonction Confirm étape par étape

Pré-requis : Pour les applications Canvas, assurez-vous que les Contrôles Modernes sont activés dans les paramètres de votre application pour bénéficier du design Fluent moderne (Mais cela reste facultatif).

Parfois, vous voulez simplement que l’utilisateur s’arrête et lise un message critique avant de pouvoir continuer. Contrairement à la fonction Notify qui peut disparaître, Confirm bloque l’écran jusqu’à interaction.

// Sur une propriété OnVisible d'un écran
Confirm("Une maintenance serveur est prévue ce soir à 18h00. Veuillez sauvegarder vos travaux.")

L’utilisateur est obligé de cliquer sur “confirmer” ou “annuler” pour fermer la boîte et reprendre le contrôle.

Étape 2 : Utilisation basique (Condition de suppression)

C’est le cas le plus classique : empêcher une action irréversible. La fonction renvoie true si l’utilisateur confirme, et false sinon.

// Sur la propriété OnSelect d'une icône de poubelle
If(
    Confirm("Voulez-vous vraiment supprimer cet élément ?");
    Remove(MaListeSharePoint; ThisItem);;
    Notify("Élément supprimé"; NotificationType.Success)
)

Étape 3 : Personnalisation des boutons

Par défaut, les boutons affichent “OK” et “Annuler”. Pour une meilleure expérience utilisateur (UX), il est recommandé d’utiliser des verbes d’action précis.

Utilisez le second argument de la fonction pour passer un enregistrement d’options (OptionsRecord).

If(
    Confirm(
        "Voulez-vous soumettre ce dossier pour approbation ?";
        {
            ConfirmButton: "Envoyer";
            CancelButton: "Relire"
        }
    );
    SubmitForm(FormulaireDossier)
)

Étape 4 : Titres et Sous-titres

Pour donner plus de contexte sans surcharger la question principale, utilisez les propriétés Title et Subtitle.

If(
    Confirm(
        "Cette action est irréversible.";
        {
            Title: "Confirmation de suppression";
            Subtitle: "Toutes les données associées seront définitivement perdues.";
            ConfirmButton: "Supprimer";
            CancelButton: "Annuler"
        }
    );
    Remove(ComptesClients; ThisItem)
)

Étape 5 : Utilisation avec des variables

Dans des scénarios complexes, vous pourriez avoir besoin de stocker la réponse pour l’utiliser plus tard ou conditionner plusieurs blocs logiques.

// On stocke le résultat (true/false) dans une variable
Set(
    varReponseUtilisateur;
    Confirm(
        "Avez-vous terminé l'inspection de sécurité ?";
        { ConfirmButton: "Oui, terminer"; CancelButton: "Non, continuer" }
    )
);;

// On utilise la variable pour la logique
If(
    varReponseUtilisateur;
    Patch(Inspections; ThisItem; {Statut: "Terminé"});; Navigate(EcranAccueil);
    Notify("Vous pouvez continuer l'inspection."; NotificationType.Information)
)

Étape 6 : Niveau Expert (Intégration avec Gestion d’Erreurs)

Voici le modèle “Gold Standard” pour les opérations critiques. Il combine Confirm pour l’intention utilisateur et IfError pour la robustesse technique.

// 1. Demande de confirmation
If(
    Confirm(
        "Voulez-vous vraiment archiver ce dossier ?";
        {
            Title: "Archivage 🗂️";
            Subtitle: "Le dossier passera en lecture seule.";
            ConfirmButton: "Oui, archiver";
            CancelButton: "Annuler"
        }
    );

    // 2. Tentative technique (Try/Catch)
    IfError(
        // TRY : On tente l'action
        Patch(
            'Dossiers Clients';
            ThisItem;
            { Statut: "Archivé"; DateArchivage: Now() }
        );;
        Notify("Dossier archivé avec succès."; NotificationType.Success);;
        Navigate(EcranAccueil);

        // CATCH : Si le Patch échoue (ex: erreur réseau)
        Notify(
            "Échec de l'archivage. Erreur : " & FirstError.Message;
            NotificationType.Error
        )
    )
)

💼 Utilisation dans un bouton custom (Command Bar) - Model Driven

Les applications Model-Driven bénéficient également de Power Fx via la barre de commande moderne. Plus besoin de JavaScript complexe pour des dialogues simples !

Dans cet exemple, nous utilisons la fonction Confirm pour gérer une bascule de statut (Actif / Inactif) via un seul bouton de commande personnalisé. Ici, le choix n’est pas “Faire ou Annuler”, mais “Option A ou Option B”.

If(
    // On pose la question à l'utilisateur
    Confirm(
        "Changer le statut du contact ?";
        { ConfirmButton: "Activer"; CancelButton: "Désactiver" }
    );
    
    // Branche VRAI (Bouton "Activer") : On active le contact
    Patch(Contacts; Self.Selected.Item; {Statut: 'Statut (Contacts)'.Actif});; 
    Notify("Le contact a été Activé"; NotificationType.Success);

    // Branche FAUX (Bouton "Désactiver") : On désactive le contact
    Patch(Contacts; Self.Selected.Item; {Statut: 'Statut (Contacts)'.Inactif});; 
    Notify("Le contact a été désactivé"; NotificationType.Success)
)

Pourquoi c’est intéressant ? Habituellement, le bouton “Cancel” sert à ne rien faire. Ici, nous tirons parti du fait que Confirm retourne un booléen (true/false) pour exécuter une action différente dans chaque cas. C’est une méthode astucieuse pour créer des choix binaires rapides sans créer de page intermédiaire.

📋 10 Cas d’usages concrets

Pour vous aider à visualiser le potentiel de cette nouvelle fonctionnalité et stimuler votre créativité, voici une suggestion d’idées pratiques et variées où l’implémentation de Confirm apportera une réelle valeur ajoutée en remplaçant avantageusement vos anciennes boîtes de dialogue manuelles :

Suppression de données : “Voulez-vous supprimer ce client de la base ?”
Annulation de formulaire (Dirty check) : “Vous avez des modifications non sauvegardées. Voulez-vous vraiment quitter cet écran ?”
Validation de workflow : “Confirmez-vous l’envoi de la commande au fournisseur ?”
Déconnexion : “Voulez-vous vous déconnecter de l’application ?”
Choix binaire simple : “Préférez-vous recevoir le reçu par Email (Bouton 1) ou par SMS (Bouton 2 - Annuler) ?”
Lancement d’un Power Automate : “Lancer le flux de génération de PDF maintenant ?”
Archivage : “Voulez-vous archiver ce projet ? Il ne sera plus visible dans la liste active.”
Écrasement de fichier : “Un fichier du même nom existe déjà. Voulez-vous l’écraser ?”
Confirmation de présence : “Confirmez-vous votre présence à l’événement du 12 mars ?”
Avertissement de sécurité : “Vous êtes sur le point d’accéder à une zone restreinte. Continuer ?”

🚫 Anti-Pattern : Confirm dans une boucle

C’est une erreur classique à ne pas commettre : mettre un Confirm à l’intérieur d’une boucle ForAll. Si l’utilisateur sélectionne 50 éléments et clique sur “Supprimer tout”, il aura 50 pop-ups à valider successivement, ce qui rend l’expérience utilisateur catastrophique.

La bonne pratique : Demandez la confirmation une seule fois avant de lancer la boucle.

// ✅ BON : Une seule question pour l'ensemble
If(
    Confirm("Êtes-vous sûr de vouloir supprimer les " & CountRows(Gallery.AllItems) & " éléments ?");
    ForAll(Gallery.AllItems; Remove(Source; ThisRecord))
)

// ❌ MAUVAIS : Une question par ligne (Expérience pénible)
ForAll(Gallery.AllItems; If(Confirm(...); Remove(...)))

🎨 Design et Thèmes

Puisque Confirm fait partie des contrôles modernes, la boîte de dialogue respecte automatiquement le Thème de votre application.

Contrairement aux pop-ups manuelles où vous deviez définir chaque couleur, Confirm s’adapte :

Si votre thème principal est “Rouge”, le bouton de confirmation sera automatiquement rouge.
Il respecte les coins arrondis et la typographie définie dans les paramètres globaux.
Vous n’avez aucun CSS ou propriété de couleur à gérer individuellement.

Il reste possible d’utiliser la fonction Confirm() sans les contrôles modernes activés, dans ce cas, le design du popup dépendra de votre navigateur :

Toutefois, la personnalisation du titre, sous-titre et du nom des boutons ne sera pas prise en compte :

⚠️ Contraintes et Limitations

Avant de déployer cette fonction partout, gardez en tête ces limitations techniques :

Deux boutons maximum : Confirm supporte exactement deux options (Confirm/Cancel). Impossible d’ajouter un troisième bouton “Peut-être” ou “Sauvegarder en brouillon”.
Impossible de masquer “Annuler” : L’utilisateur doit toujours avoir une porte de sortie. Vous ne pouvez pas forcer un bouton unique “OK” (sauf en détournant l’usage, mais le bouton Annuler restera visible).
Comportement Modal (Bloquant) : Quand les formules sont exécutées de manière séquentielle, la fonction arrête l’exécution du code Power Fx tant que l’utilisateur n’a pas répondu. C’est idéal quand vous souhaitez capter la réponse de l’utilisateur avant de poursuivre des traitements, mais dans le cas où vous souhaiteriez profiter du popup pour réaliser des traitements en arrière plan, il existe des solutions de contournement :
- Imbriquer le Confirm() dans un Concurrent() : Les instructions dans chaque “branche” s’exécuteront en parallèle. (Merci @AlexSolex d’avoir testé ce cas)
- Lancer le Confirm() (ou le traitement à mettre en arrière plan via un bouton masqué et la fonction Select()
Retour “Blank” : Si l’utilisateur appuie sur la touche Echap ou clique en dehors de la boîte (sur le web), la fonction peut renvoyer Blank (vide). Heureusement, dans un If, Blank est traité comme false, donc la logique de sécurité est préservée.

La page de référence de la fonction sur MS Learn c’est via ce lien

🚀 Pourquoi cette fonction est une révolution

1. Un gain de temps considérable

2. Accessibilité native (a11y)

3. Réduction de la complexité (Low Code)

🎓 Tutoriel : Maîtriser la fonction Confirm étape par étape

Étape 1 : Le cas d’usage informatif (Dialogue modal)

Étape 2 : Utilisation basique (Condition de suppression)

Étape 3 : Personnalisation des boutons

Étape 4 : Titres et Sous-titres

Étape 5 : Utilisation avec des variables

Étape 6 : Niveau Expert (Intégration avec Gestion d’Erreurs)

💼 Utilisation dans un bouton custom (Command Bar) - Model Driven

📋 10 Cas d’usages concrets

🚫 Anti-Pattern : Confirm dans une boucle

🎨 Design et Thèmes

⚠️ Contraintes et Limitations

Pour continuer votre lecture

Snippet Clavier et souris SVG dynamiques (affichage)

Studio Tweaks : L'add-on / script qui va changer votre vie de maker !

Valider un IBAN dans Power Apps : Regex et Modulo 97 (Code Snippet)

Recevoir les nouveaux articles par e-mail

Échanger autour de cet article

Votre confidentialité compte