Vue normale

Il y a de nouveaux articles disponibles, cliquez pour rafraîchir la page.
À partir d’avant-hierDéveloppement Microsoft 365/ Power Platform / SharePoint

Votre application Power Apps est trop longue lors d’un chargement ? Vous n’arrivez pas à identifier une erreur ?

Lors de la création de ma dernière application, j’ai constaté qu’il y avait des lenteurs pendant le chargement des écrans.
Il existe plusieurs raisons possibles (le nombre trop important de contrôles dans l’application, le temps de chargement des sources de données…).

Je vous conseille de toujours vérifier votre application avec les outils évoqués ci-dessous avant de la mettre à disposition. Ils vous permettront d’identifier les problèmes existants et d’améliorer vos applications.

Le premier outil à disposition dans Power Apps et simple d’utilisation est le vérificateur d’application. Pour y accéder sélectionnez l’onglet stethoscope en haut à droite de votre application. L’outil comporte différentes sections.

Lors de l’analyse de mon application, la section « performances » affichait des problèmes. Le vérificateur m’a indiqué qu’il y avait des références vers d’autres écrans, ce que j’ai corrigé. J’utilisais dans mes formules l’objet gallery.Selected alors que la galerie était dans un autre écran. Cette correction m’a permis de passer de 6 secondes de chargement à 2 secondes.
Quand on fait référence à des contrôles d’un autre écran cela peut avoir un impact assez important. Il est possible d’en oublier à cause des copier/coller par exemple.

N’hésitez pas à parcourir les sections pour corriger vos problèmes. Si vous arrivez à respecter l’accessibilité c’est encore mieux 😉

Pour obtenir plus de précisions et identifier un problème, il y a un autre outil : le moniteur.
Vous pouvez l’ouvrir depuis les paramètres ou l’éditeur de Power Apps.

C’est un outil qui permet de visualiser et surveiller l’ensemble des événements qui se déroule dans votre application. Le moniteur examine le déroulement d’une session afin de diagnostiquer et résoudre vos problèmes. Il permet de surveiller la navigation entre les pages, les exécutions des fonctions, les problèmes liés aux échanges avec les sources de données, etc pour comprendre le comportement de l’application de façon précise.

Le moniteur propose aussi deux fonctionnalités pour permettre le dépannage et débogage collaboratif des problèmes dans Power Apps. Pratique pour comprendre un comportement que ne vous ne parvenez pas à reproduire sur votre session.

Attention lorsque vous allez mettre en production votre application. Veillez à ce que la fonctionnalité de debug de la Power Apps soit désactivée pour ne pas impacter ses performances.

Bon debug 😉

capture-decran-2021-12-31-173650-1

franckcatinot

Les bonnes pratiques du développement Power Apps

Retrouvez la vidéo de notre présentation « Les bonnes pratiques du développement Power Apps » lors de l’événement Power Platform French Summit 2021 qui a eu lieu le vendredi 19 Novembre.
Lors de cette vidéo nous avons abordé les thèmes suivants :

Retrouvez les slides ci-dessous :

Et voici les liens des différents sujets évoqués durant la présentation :

Maintenant c’est à vous de jouer, je vous souhaite de bons développements Power Apps 😉

Capture d’écran 2021-11-29 233913

franckcatinot

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.

button

franckcatinot

Récupérer des données depuis Graph dans PowerApps à l’aide de Flow

L’objectif de cet article est de découvrir comment intégrer Graph dans PowerApps.

Dans un premier temps, nous allons créer une application de type canevas dans PowerApps.

PowerAppsCreer

Ajouter deux étiquettes ainsi qu’un bouton qui permettra de charger vos données.

Il faut maintenant créer un connecteur personnalisé lot Microsoft Graph JSON pour Microsoft Flow. Pour cela veuillez suivre le lien suivant https://docs.microsoft.com/fr-fr/graph/tutorials/flow

Dans mon cas, j’ai donné uniquement l’autorisation User.ReadWrite de type délégué à l’application.

Une fois votre connecteur en place dans Flow, alors vous pouvez lier votre bouton PowerApps vers Flow.

PowerAppsAjouterFlow

Par défaut le trigger de votre Flow sera PowerApps, nous ajouterons ensuite l’action personnalisée de votre connecteur définit précédemment dans Flow, dans mon cas je l’ai appelé Graph.
Ensuite je complète le champ body de mon Action « Graph » afin d’effectuer la requête « https://graph.microsoft.com/v1.0/me/ ».

BodyRequest

Puis je lance mon Flow pour tester son fonctionnement.

CorpsConnecteurFlow

Dans l’historique des exécutions de mon Flow, je remarque que celui-ci a fonctionné. Je copie le corps de la sortie de ma requête.

J’édite de nouveau mon Flow, j’ajoute une action « Réponse », et j’ajoute le texte copié précédemment dans la pop-up « Utiliser l’exemple de charge utile pour générer le schéma » afin que le composant génère le bon Schéma JSON.

Information : Je n’ai pas ajouté l’action « répondre à PoweApps » afin de retourner le résultat de la requête, car celle-ci est seulement capable de nous retourner des résultats de type texte, booléen, fichier, messagerie, nombre et date et non pas des tables ou objets.

GenerationJsonFlow

Je clique sur terminer et je modifie le JSON afin que la réponse soit correcte.

Information : Si votre JSON ne correspond pas à la réponse de votre requête ou qu’il contient une erreur alors l’application PowerApps va probablement générer une erreur.

J’ajoute dans corps de l’action « Réponse » de ma requête précédente et je sauvegarde mon Flow.

ReponseFlow

Je peux maintenant retourner sur PowerApps, mon Flow est disponible.

Je stocke le résultat du Flow dans la variable globale me, lors du clique sur mon bouton ajouté précédemment.

ChargerDonnees

Je peux maintenant observer les valeurs retournées, dans les étiquettes définies précédemment. Mon premier champ texte affichera le display name de l’utilisateur courant tandis que le second affichera son adresse mail.

AfficherDonnees

Je lance mon application, et lorsque je clique sur le bouton « Charger les données » le display name et l’adresse mail de l’utilisateur courant apparaissent.

Resultat

Et voilà 😊 Vous êtes maintenant capable d’utiliser Graph depuis PowerApps. N’oubliez pas de modifier les droits de votre application, si jamais vos appels depuis Flow nécessitent plus d’autorisations.

laptop-3190194_960_720

franckcatinot

PowerAppsCreer

PowerAppsAjouterFlow

BodyRequest

CorpsConnecteurFlow

GenerationJsonFlow

ReponseFlow

ChargerDonnees

AfficherDonnees

Resultat

❌
❌