Avoir un thème personnalisé pour Power Apps est facile. De plus, son implémentation est simple. Le thème est un jeu de couleurs.
Il s’agit de règles d’ergonomie qui simplifient la navigation dans Power Apps et les écrans.
Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.
Cas d’usage
Il est fréquent qu’il soit demandé que le jeu de couleurs d’une application soit modifié ou personnalisé. Dans cet exemple, vous verrez une première manipulation qui permet d’appliquer un jeu de couleur à une application.
Ensuite, des astuces sont introduites pour aider l’application à être maintenable. Notamment, vous verrez comment tirer parti de PowerApps pour changer le jeu de couleurs des contrôles sans avoir à tout modifier.
En particulier, vous découvrirez comment définir les propriétés d’un contrôle à l’aide des propriétés d’un autre contrôle.
Thème personnalisé pour Power Apps
Ouvrez le site web Microsoft PowerApps.
Puis, dans le volet de navigation (à gauche), cliquez sur Applications.
Ensuite, dans la bannière du volet central (en haut), cliquez sur Créer une application (en haut, vers la gauche).
Puis, dans le menu qui s’affiche, cliquez sur Zone de dessin : un nouvel onglet s’ouvre.
Enfin, dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Disposition de la tablette sous Application vide, puis patientez.
Pour vous aider, regardez la copie d’écran ci-dessous.
Enregistrer et renommer l’application
Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.
Ensuite, dans le volet central (vers la droite), remplacez le nom de l’application (« Application ») par tabEcrans.
Puis en bas, cliquez sur le bouton Enregistrer.
Si vous ne voyez pas le bouton Enregistrer, c’est parce que vous êtes dans les Paramètres de l’application. Dans ce cas, cliquez sur Enregistrer.
Ensuite, cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.
Afin d’éviter toute ambiguïté, il est indiqué systématiquement le nom du contrôle. Toutefois, vous pouvez aussi sélectionner un contrôle dans la représentation graphique de l’écran au milieu.
Renommer le premier écran
Vous allez renommer l’écran.
Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran Screen1 puis cliquez sur les points de suspension (…) et sélectionnez Renommer.
Ensuite, renommez en EcranPrincipal.
Vous auriez pu aussi double-cliquer sur le nom de l’écran dans l’arborescence, puis le renommer.
Insérer un contrôle Bouton
Sur l’écran EcranPrincipal, vous allez insérer un bouton. Ce bouton sert uniquement à vérifier l’impact du changement de thème que vous ferez ensuite.
Dans l’arborescence (à gauche), cliquez sur l’écran EcranPrincipal.
Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).
Sous Insérer, cliquez sur Bouton : un bouton apparaît sur l’écran EcranPrincipal. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous EcranPrincipal : Button1.
Pour vous aider, regardez la copie d’écran ci-dessous.
Changer le thème
Maintenant, vous allez avoir un thème personnalisé pour Power Apps.
Notamment, vous allez changer le thème cette application.
Pour ce faire, cliquez sur le ruban Accueil : la liste des sous-menus apparaît (sous Accueil).
Ensuite, dans cette liste, cliquez sur Thème. Dans la liste des thèmes, sélectionnez le thème de votre choix, par exemple Corail.
Pour vous aider, regardez la copie d’écran ci-dessous.
Le thème a bien été changé pour le bouton existant, mais que se passerait-il si vous ajoutiez un nouveau contrôle ? Les nouveaux contrôles, comme les contrôles existants, bénéficieront du nouveau thème.
Pour le vérifier, vous allez ajouter un élément graphique sur l’écran EcranPrincipal.
Insérer une icône
Sur l’écran EcranPrincipal, vous allez insérer un hexagone étoile. Cet hexagone sert uniquement à vérifier l’impact du changement de thème.
Dans l’arborescence (à gauche), cliquez sur l’écran EcranPrincipal.
Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).
Sous Insérer, cliquez sur Icônes : une liste d’icônes apparait avec un ascenseur à droite. Descendez l’ascenseur complètement tout en bas. Dans la liste, cliquez sur Hexagone, puis déplacez le pour le mettre à coté de Bouton.
Pour vous aider, regardez la copie d’écran ci-dessous.
Comme prévu, le nouveau contrôle bénéficie du thème par défaut.
L’utilisation d’un thème est évidemment pratique. Toutefois, il arrive souvent que les jeux de couleurs de votre organisation ne correspondent pas aux thèmes prédéfinis.
Vous allez voir une autre technique qui permet d’avoir une personnalisation des couleurs.
Ajouter un nouvel écran
Vous allez ajouter un nouvel écran.
Pour ce faire, cliquez sur le ruban Accueil : la liste des sous-menus apparaît (sous Accueil).
Ensuite, dans la liste des sous-menus, cliquez sur Nouvel écran : la liste des types d’écran apparaît.
Puis, dans cette liste d’écran, cliquez sur Vierge : un nouvel écran vide est ajouté. Le nom de l’écran est Screen2.
Vous allez renommer le second écran.
Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran Screen2 puis cliquez sur les points de suspension (…) et sélectionnez Renommer.
Ensuite, renommez en EcranMaitre.
Vous auriez pu aussi double-cliquer sur le nom de l’écran dans l’arborescence, puis le renommer.
Insérer un contrôle témoin pour définir le thème personnalisé pour Power Apps
Pour gérer le thème personnalisé pour Power Apps, vous pouvez utiliser un contrôle qui sert de témoin pour définir les couleurs que vous souhaitez.
En effet, le principe consiste à créer un contrôle, à lui affecter les couleurs de votre choix, définir les couleurs des autres contrôles grâce aux propriétés de ce contrôle témoin puis le rendre invisible.
Sur l’écran EcranMaitre, vous allez insérer un contrôle de type Étiquette, qui servira de contrôle témoin.
Dans l’arborescence (à gauche), cliquez sur l’écran EcranMaitre.
Cliquez sur le ruban Insérer : la liste des sous-menus apparaît (sous Insérer).
Sous Insérer, cliquez sur Étiquette : une étiquette apparaît sur l’écran EcranMaitre. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous EcranMaitre : Label1.
Vous allez renommer le contrôle.
Pour ce faire, dans l’arborescence, double-cliquez sur Label1, et nommez-le : Couleurs.
Affecter les couleurs au contrôle témoin
Comme le thème personnalisé pour Power Apps utilise les couleurs du contrôle témoin, vous allez les définir.
Pour ce faire, modifiez la propriété Couleur (Color) du contrôle Couleurs pour une couleur foncée, par exemple bleu foncé : RGBA(39; 113; 194; 1). La propriété Color concerne la couleur du texte.
Enfin, modifiez la propriété Couleur d’arrière-plan (Fill) du contrôle Couleurs pour une couleur claire, par exemple jaune vif : RGBA(255; 255; 0; 1). La propriété Fill concerne le remplissage de la forme.
Pour vous aider, regardez la copie d’écran ci-dessous.
Associer le contrôle
Vous allez associer les propriétés du contrôle Couleurs aux propriétés correspondantes des contrôles de l’autre écran.
Pour ce faire, sur l’écran EcranPrincipal, cliquez sur un des 2 contrôles présents : celui que vous voulez.
Spécifiez les valeurs suivantes pour les propriétés ci-dessous quand elles existent.
Les propriétés sont liées à la nature de chaque objet. Il est donc normal que la propriété Fill existe aussi pour l’hexagone, tandis que Color n’existe pas car il n’y a pas de texte à colorier dans ce contrôle.
Fill = Couleurs.Fill
Color = Couleurs.Color
Refaites la même personnalisation sur l’autre contrôle.
Pour vous aider, regardez la copie d’écran ci-dessous.
Tester le changement de couleur dans le thème personnalisé pour Power Apps
Vous allez tester le changement de couleur du contrôle témoin.
Pour ce faire, modifiez la propriété Couleur d’arrière-plan du contrôle Couleurs pour une autre couleur claire, par exemple un rouge extrêmement pale : RGBA(39; 113; 194; 1).
Ensuite, affichez l’écran EcranPrincipal et constatez l’application immédiate de vos modifications.
Pour vous aider, regardez la copie d’écran ci-dessous.
Vous allez rendre invisible le contrôle témoin. En effet, il sert uniquement à personnaliser les couleurs pour avoir un thème personnalisé pour Power Apps. Il est donc préférable qu’il ne soit pas visible.
Pour ce faire, cliquez sur le contrôle Couleurs.
Puis modifiez sa propriétés Visible à false.
Enregistrer l’application
Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.
Fermez l’onglet de votre application : un pop-up apparaît pour confirmer la fermeture. Dans ce pop-up, cliquez sur le bouton Quitter la page. Vous retrouverez votre application sous le menu Applications de l’accueil du site PowerApps.
L’exercice est terminé.