Simplifier l’utilisation de vos contrôles personnalisés dans une ou plusieurs applications Power Apps

Créer des variables dynamiques pour les propriétés de vos contrôles dans une application Power Apps

L’objectif de cet article est de définir rapidement et de centraliser les propriétés des contrôles que vous allez utiliser dans une application PowerApps.
En règle générale nous définissons les propriétés d’un contrôle, puis nous le dupliquons dans l’application.

Par exemple : j’ai ajouté un bouton que j’ai personnalisé, sa couleur de fond est rouge, son texte est blanc, ses bords sont arrondis… Pour avoir une application homogène, je vais dupliquer mon bouton personnalisé dans les écrans de l’application pour créer un nouveau bouton. Si jamais je dois faire évoluer la couleur alors je vais devoir reparcourir tous les boutons utilisés dans mon application.

Afin de ne pas avoir à faire cela, il est préférable de définir des variables dans la propriété OnStart de l’application où les valeurs des propriétés des contrôles seront définies.

Voici un exemple de variables à définir dans la propriété OnStart de votre application :

Set(
    gblAppColors;
    {
        BackgroundDark: ColorValue("#2d2c2c");
        BackgroundDefault: ColorValue("#F3F2F1");
        ...
);;
Set(
    glbAppFont;
    {Font: Font.'Segoe UI'}
);;
Set(
    gblAppSizes;
    {
        Small: 10;
        Medium: 13;
        Large: 16;
        ExtraLarge: 22
    }
);;
Set(
   glbAppStyle;
   {Icon: {
        Color: gblAppColors.TeamsDefaultPrimary;
        Fill: gblAppColors.OverlayTransparent;
        DisabledColor: gblAppColors.NeutralWebGray60;
        DisabledFill: gblAppColors.NeutralWebGray50;
        DisabledBorderColor: gblAppColors.NeutralWebGray30;
        HoverBorderColor: gblAppColors.TeamsDefaultShade10;
        HoverColor: gblAppColors.NeutralWebWhite;
        HoverFill: gblAppColors.TeamsDefaultShade10;
        BorderColor: gblAppColors.TeamsDefaultPrimary;
        BorderThickness: 0;
        FocusedBorderColor: gblAppColors.TeamsDefaultPrimary;
        FocusedBorderThickness: 1,5
    };
    ButtonPrimary: {
        BorderColor: gblAppColors.TeamsDefaultPrimary;
        BorderThickness: 0;
        Color: gblAppColors.NeutralWebWhite;
        DisabledBorderColor: gblAppColors.NeutralWebGray30;
        DisabledColor: gblAppColors.NeutralWebGray60;
        DisabledFill: gblAppColors.NeutralWebGray30;
        Fill: Red;
        FocusedBorderColor: gblAppColors.TeamsDefaultPrimary;
        FocusedBorderThickness: 1,5;
        HoverBorderColor: gblAppColors.TeamsDefaultShade10;
        HoverColor: gblAppColors.NeutralWebWhite;
        HoverFill: gblAppColors.TeamsDefaultShade10;
        PressedBorderColor: gblAppColors.TeamsDefaultShade20;
        PressedColor: gblAppColors.NeutralWebWhite;
        PressedFill: gblAppColors.TeamsDefaultShade20;
        RadiusBottomLeft: 2;
        RadiusBottomRight: 2;
        RadiusTopLeft: 2;
        RadiusTopRight: 2;
        Size: {
            Small: gblAppSizes.Small;
            Medium: gblAppSizes.Medium;
            Large: gblAppSizes.Large;
            ExtraLarge: gblAppSizes.ExtraLarge
        };
        Font: glbAppFont.Font
    };
    ButtonSecondary: {
        ...
    }
    ...
}

Dans l’exemple proposé, jai crée un object qui contient des couleurs, un autre le format de la police et aussi la taille du texte. Ensuite viendra la variable glbAppStyle qui contiendra autant d’objets qu’il y a de composants.


Vous retrouverez un exemple complet de ces variables et objets dans le fichier ci-dessous.

Ensuite il vous suffit de faire un écran, où vous disposerez chacun des types de contrôles que vous souhaitez. Ses propriétés devront être associées aux valeurs définies dans la variable du OnStart de l’application (comme dans le Gif ci-dessous).
L’écran que vous venez de créer sera votre référence, il contiendra les contrôles à utiliser et à dupliquer dans votre application.


En utilisant une copie de ces contrôles par la suite, il n’est plus nécessaire de tous les parcourir pour les mettre à jour. Il suffira de mettre à jour les variables que vous avez défini dans la propriété OnStart de votre application, pour modifier l’ensemble des contrôles de votre application.

Définir les mêmes variables pour toutes vos applications

Pour que ces variables soient définies à un seul endroit et non pas dans chacune de vos applications, je vais créer un composant Power App.
Celui-ci aura une variable de sortie gblAppStyles, qui sera égale à l’objet défini ci-dessus. Tandis que dans sa propriété OnReset définira les variables gblAppColors, glbAppFont, gblAppSizes. Vous pouvez en ajouter d’autres si nécessaire.
Notre composant est terminé, on peut maintenant le publier.
Le composant utilisé pour cet exemple est disponible ci-dessous, il contient aussi les contrôles dans la partie écran. Vous pouvez donc copier ceux-ci dans vos nouvelles applications.

https://powerusers.microsoft.com/t5/Canvas-Apps-Components-Samples/Dynamic-Controls/td-p/847318

Maintenant lors de la création d’une nouvelle application PowerApps, nous allons faire appel à notre composant pour charger la variable gblAppStyles.
Pour cela on va recharger notre composant dans la propriété OnStart et sauvegarder sa sortie gblAppStyles dans la propriété OnVisible de notre écran principal.

Ci-dessus ma nouvelle application, dans laquelle j’ai ajouté les contrôles liés aux variables dynamiques comme lors de la présentation précédente et qui intègre mon composant.

Nos contrôles sont définis grâce aux variables de l’objet gblAppStyles. Alors quand on mettra à jour notre composant cela affectera directement les éléments présents dans notre application.
Voici un exemple :

Le composant va permettre de définir des variables présentes dans différentes applications. Ainsi lorsque l’on devra modifier les propriétés des contrôles : la couleur par exemple, on pourra le faire depuis le composant afin que cela se répercute sur les contrôles des applications qui l’utilisent lors de la mise à jour de celui-ci.

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s