Claude Couderc Consulting

Personnaliser le thème d’un écran PowerApps

Cet exercice fait partie d’une série consacrée à l’apprentissage de PowerApps. C’est donc un entraînement purement pédagogique, qui sert à vous familiariser avec l’interface, les concepts, etc.

Vous verrez après d’autres exercices pour construire une application complète.

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.

Créer une application PowerApps

Ouvrez le site web Microsoft PowerApps et identifiez-vous avec votre compte de tenant.

https://make.powerapps.com/

Dans le volet de navigation (à gauche), cliquez sur Applications.

Dans la bannière du volet central (en haut), cliquez sur Créer une application (en haut, vers la gauche).

Dans le menu qui s’affiche, cliquez sur Zone de dessin : un nouvel onglet s’ouvre.

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.

Démarrer avec un modèle tablette
Démarrer avec un modèle tablette

Notez que vous auriez pu aussi bien choisir le mode téléphone sous Application vide, car les manipulations sont strictement identiques. Il s’agit d’un choix purement arbitraire.

Si la fenêtre Bienvenue dans PowerApps Studio s’ouvre, cliquez sur le bouton Ignorer. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Enregistrer et renommer l’application

Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Dans le volet central (vers la droite), remplacez le nom de l’application (“Application”) par tabEcrans.

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.

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

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1 puis cliquez sur les points de suspension (…) et sélectionnez Renommer.

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 (Button)

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.

Bouton avec couleur initiale
Bouton avec couleur initiale

Changer le thème

Maintenant, vous allez changer le thème cette application. Le thème est un jeu de couleurs.

Pour ce faire, cliquez sur le ruban Accueil : la liste des sous-menus apparaît (sous Accueil).

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.

Bouton avec un nouveau thème
Bouton avec un nouveau thème

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.

Bouton avec nouveau thème
Bouton avec nouveau thème

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

Cliquez sur le ruban Accueil : la liste des sous-menus apparaît (sous Accueil).

Dans la liste des sous-menus, cliquez sur Nouvel écran : la liste des types d’écran apparaît.

Dans cette liste d’écran, cliquez sur Vierge : un nouvel écran vide est ajouté. Le nom de l’écran est Screen2.

Renommer le second écran

Dans l’arborescence (à gauche), cliquez sur l’écran Screen2 puis cliquez sur les points de suspension (…) et sélectionnez Renommer.

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 Étiquette (Label)

Sur l’écran EcranMaitre, vous allez insérer un contrôle de type Étiquette.

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.

Renommer le contrôle

Sur l’écran EcranMaitre, vous allez renommer le contrôle.

Dans l’arborescence, double-cliquez sur Label1, et nommez-le : Couleurs.

Personnaliser le contrôle

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.

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.

Nouvelles valeurs pour Couleurs
Nouvelles valeurs pour Couleurs

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.

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.

Couleurs personnalisées
Couleurs personnalisées

Tester le changement de couleur

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).

Affichez l’écran EcranPrincipal et constatez l’application immédiate de vos modifications.

Pour vous aider, regardez la copie d’écran ci-dessous.

Nouvelles couleurs personnalisées
Nouvelles couleurs personnalisées

Enregistrer l’application

Cliquez sur le ruban Fichier puis dans le volet de gauche, cliquez sur Enregistrer.

Fin des manipulations

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é.

Résumé

Dans cet exercice, vous avez appris comment appliquer un thème et comment personnaliser les thèmes grâce à une astuce. Vous êtes aussi familiarisé un peu plus avec le fonctionnement des propriétés et des formules.

Vous comprenez aussi comment vous pouvez utiliser les propriétés d’un contrôle dans un autre.

Article mis à jour le 23.09.2019.

Office365 Addict

Ajouter un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.