Difficulté : Facile

Pré-requis : Maîtrise de base de l’interface Power Apps Canvas

Avant

Après

Lorsque vous concevez des applications avec Power Apps Canvas, l’aspect visuel et l’expérience utilisateur sont essentiels.

L’une des astuces de conception qui peut vraiment améliorer l’apparence de votre application est l’ajout d’un effet de flou derrière une fenêtre pop-up afin de la mettre en évidence tout en créant un arrière-plan élégant et esthétique. .

Dans ce tutoriel, je vais vous montrer comment créer une pop-up avec cet effet de flou en quelques étapes simples.

Étape 1 : Créez votre interface utilisateur

Commencer par créer votre page et ajoutez les éléments d’interface dont vous avez besoin. Par exemple, vous pouvez ajouter un bouton pour déclencher la pop-up, du texte, des étiquettes, etc.

Dans mon exemple j’ai créé un formulaire avec un bouton de validation.

Étape 2 : Créez votre Pop-Up

La deuxième étape consiste à créer votre pop-up.

2.1. Commencez par Ajouter un contrôle container pour y créer la pop-up. Cliquez sur « Insérer » dans le menu supérieur, puis sélectionnez « Container ».

2.2. Placez le contrôle container sur l’écran et redimensionnez-le pour qu’il recouvre toute la zone de la pop-up.

2.3. Sélectionnez le contrôle container que vous avez ajouté puis dans le panneau de droite, sous « Propriétés », renommez le contrôle container en quelque chose de significatif, par exemple « ContainerPopup »

Vous pouvez également personnaliser son aspect en utilisant les propriétés de mise en forme. Pour ma part je vais ajouter une couleur de fond noir et régler son opacité à 30.

Étape 3 : Floutez l’Arrière-Plan

3.1. Sélectionnez le container que vous avez ajouté à l’étape précédente puis cliquez sur « Insérer » dans le menu supérieur, puis sélectionnez dans affichage le contrôle “Texte HTML”.
Assurez-vous que tous les éléments concernant la pop-up sont bien à l’intérieur du container en vérifiant dans le panneau d’arborescence situé à gauche.

3.2. Dans la barre de formule de l’action, utilisez le code suivant :

$"<div style='width:{Self.Width}px;height:{Self.Height-1}px;backdrop-filter:blur(5px)'></div>"

Dans le code HTML je vais régler la propriété CSS backdrop-filter à blur(5px). N’hésitez pas à augmenter ou diminuer le nombre de pixel afin d’obtenir l’effet de flou désiré.

3.3. Notre élément HTML est maintenant prêt. Nous allons donc le redimensionner pour qu’il prenne l’ensemble de la largeur et hauteur de la page. Nous allons également configurer les bordures de remplissage à 0 sur le panneau des propriétés situé a droite afin que notre élément couvre entièrement l’écran.

Étape 4 : Créer le contenu de la pop-up

4.1. Dans le container « Container_Popup », ajoutez les contrôles et le contenu que vous souhaitez afficher dans la fenêtre contextuelle. Cela peut être du texte, des boutons, des images, etc.

Dans mon exemple je vais ajouter un élément Rectangle auquel je vais attribué une couleur de fond blanche.

Je vais ensuite y afficher le résumé des informations entrer dans le formulaire par l’utilisateur.

Enfin je vais ajouter 2 boutons :

Un qui permet à l’utilisateur de confirmer si les informations sont bien exact et qui enregistrera les information en base de données puis fermera la pop-up.

Un deuxième bouton pour annuler et fermer la pop-up afin de pouvoir corriger et soumettre de nouveau (ou pas) le formulaire.

Étape 5 : Régler la visibilité de la pop-up

Ajout d’un bouton pour déclencher la pop-up :

5.1. Modifier la formule du contrôle qui déclenche votre pop-up pour définir la variable sur « true » :

Dans mon exemple je vais modifier la propriété « OnSelect » de mon bouton de validation de mon formulaire en définissant ma variable _PopupVisible à true en y ajoutant la formule suivante :

UpdateContext({NomDeVotreVariable: true})

Vous pouvez nommer la variable comme vous le souhaitez en respectant les conventions de nommages des variables en PowerApps.

5.2. Contrôler la visibilité de la pop-up :

Maintenant que la variable UpdateContext « _PopupVisible » a été définie sur « true » grâce à l’appui sur le bouton, vous pouvez utiliser cette variable pour contrôler la visibilité de la pop-up.

Accédez à la page où vous avez créé la pop-up.

Sélectionnez la propriété « Visible » de la pop-up (dans notre exemple ça sera le container_Popup).

Nous allons simplement lui attribuer le nom de notre variable _PopupVisible.

La pop-up sera visible lorsque la variable « PopupVisible » est définie sur « true », c’est-à-dire lorsque l’utilisateur a appuyé sur le bouton « Valider » du formulaire.

Testez votre pop-up :

Enregistrez vos modifications et testez l’ouverture de votre pop-up. Lorsque vous appuierez sur l’élément que vous avez choisis comme déclencheur (ici le bouton « Valider »), la variable UpdateContext « _PopupVisible » sera définie sur « true », ce qui rendra la pop-up visible.

5.4. Fermer votre pop-up

Nous allons procéder comme pour l’ouverture de la pop-up en modifiant la propriété « OnSelect » du contrôle que j’ai choisis pour fermer ma pop-up (ici le bouton « annuler ») en définissant ma variable _PopupVisible à false cette fois ci en y ajoutant la formule suivante :

UpdateContext({NomDeVotreVariable: false})

Étape 6 : Testez votre application !

Enregistrez vos modifications et redémarrez votre application afin de vérifier que votre pop-up ne se déclenche pas à l’ouverture de l’application (sauf si c’est votre souhait !)

Cliquez ensuite sur le bouton que vous avez ajouté pour déclencher l’ouverture de la pop-up.

Vérifiez que la pop-up s’affiche correctement et que le bouton de fermeture la masque lorsque vous le cliquez dessus.

C’est tout ! Vous avez maintenant créé une pop-up à l’aide d’un contrôle container dans Power Apps Canvas. Vous pouvez personnaliser davantage la pop-up en ajoutant du contenu, des boutons supplémentaires, en choisissant son temps de visibilité ou en ajustant son aspect visuel selon vos besoins.

Les possibilités sont infinis !