Recommandations pour la construction d’applications PowerApps

Voici un petit résumé des dernières recommandations Microsoft figurant dans le livre blanc destiné aux développeurs d’applications PowerApps.

Vous y trouverez également quelques suggestions personnelles.

Conventions de nommage des objets

Ecrans

Les noms des écrans étant lus par les logiciels lecteurs d’écran, il est important de nommer ses écrans de manière très claire :

  • Home Screen
  • Search Screen
  • Customer Screen

Voici quelques exemples :

blog ai3 20101_ecrans Recommandations pour la construction d'applications PowerApps

Contrôles

Voici une proposition d’abréviations à utiliser comme préfixes dans les noms que vous attribuerez à vos contrôles :

Type de contrôle (en anglais)Abréviation
buttonbtn
camera controlcam
canvascan
cardcrd
collectioncol
combo boxcmb (je préfère cbx)
datesdte (je préfère dat)
drop downdrp (je préfère ddl)
formfrm
gallerygal
groupgrp
header page shapehdr
html texthtm
iconico
imageimg
labellbl
page section shapesec
shapes (rectangle, circle, …)shp (je préfère rec pour les rectangles et shp pour le reste)
table datatbl (je préfère tab)
text inputtxt
timertim
etc.

Un contrôle doit avoir un nom unique dans une application. Si un contrôle est réutilisé sur plusieurs écrans, il est recommandé de le suffixer par une abréviation précisant l’écran où il se trouve. Par exemple, un bouton btnHome sur les écrans Search Screen et Customer Screen :

  • btnHomeSS
  • btnHomeCS

Conventions de nommage du code

Variables

Quelques recommandations pour le nommage de vos variables :

  • Donnez-lui un nom qui décrive clairement sa fonction, son rôle
  • Utilisez un préfixe différent selon qu’il s’agit d’une variable locale ou globale
    • loc pour les variables locales
    • gbl pour les variables globales (je préfère glo)
  • N’hésitez pas à utiliser plusieurs mots pour nommer votre variable, sans les séparer par un caractère spécial mais simplement en faisant commencer chaque mot par une majuscule
  • Utilisez le camel case

Exemples :

  • Variable globale : gloFocusedBorderColor
  • Variable locale : locSuccessMessage

Collections

Quelques recommandations pour le choix du nom de vos collections :

  • Utilisez un nom qui représente vraiment le contenu de votre collection
  • Préfixez le nom de votre collection par col
  • Si nécessaire, utilisez plusieurs mots en les faisant commencer chacun par une majuscule
  • Utiliser le camel case

Quelques exemples :

  • colMenuItems
  • colSelectedOrders

Organisation des objets et du code

Organisez à l’aide de groupes

Les contrôles de chacun de vos écrans devraient idéalement être rassemblés dans des groupes. Cela vous facilitera la lisibilité du contenu de vos écrans et vous pourrez déplacer ces groupes plus aisément d’un écran à l’autre. Remarque : les galeries, les formulaire et les graphiques sont déjà des contrôles groupés mais rien ne vous empêche de les mettre également à l’intérieur d’autres groupes.

Voici un exemple :

blog ai3 20101_groupes Recommandations pour la construction d'applications PowerApps

Pour plus de flexibilité dans l’utilisation des groupes, vous pouvez également activer la fonctionnalité expérimentale Essayer le contrôle Groupe amélioré (enhanced Group control). Celle-ci vous permettra d’imbriquer des groupes et de leur affecter des propriétés influant sur les contrôles qu’ils contiennent. Cela permet une gestion plus claire et plus efficace de vos contrôles.

Minimiser le nombre de vos contrôles

Plus il y a de contrôles dans votre application et plus ses performances se dégraderont. Il est donc important d’optimiser le nombre de contrôles. Par exemple, plutôt que d’avoir 4 images s’affichant alternativement à l’aide la propriété Visible, privilégiez un seul contrôle Image avec un peu de code :

blog ai3 Image-22 Recommandations pour la construction d'applications PowerApps

Optimisation du code

Il est possible d’optimiser les structures conditionnelles de type If de la manière suivante :

blog ai3 Image-23 Recommandations pour la construction d'applications PowerApps

…peut s’écrire plus simplement ainsi :

blog ai3 Image-24 Recommandations pour la construction d'applications PowerApps

Egalement, si plusieurs contrôles doit effectuer le même code, préférez l’utilisation d’un bouton masqué contenant le code dans sa propriété OnSelect et utilisez la fonction Select pour le déclencher à partir de vos contrôles.

Recommandations sur le code

Évitez aussi de multiples appels à une fonction qui prend des paramètres en nombre infinis :

blog ai3 Image-25 Recommandations pour la construction d'applications PowerApps

…au lieu de :

blog ai3 Image-25-1 Recommandations pour la construction d'applications PowerApps

Préférez ClearCollect(…) à Clear;Collect(…).

Préférez aussi CountIf(…) plutôt que Count(Filter(…)).

Optimisation des performances

Le OnStart

Pour rappel, cet événement n’est appelé qu’une seule fois au lancement de l’application. Y mettre une quantité importante de code pourrait nuire à l’expérience utilisateur. Par exemple, trop de code dans cet événement pourrait induire un temps d’attente plus ou moins long avant l’affichage du premier écran.

La fonction Concurrent

Pour exécuter du code en parallèle et optimiser le temps d’exécution de certaines portions de code, la fonction Concurrent s’avère très pratique. Elle permet d’éviter l’utilisation de contrôles de type Timer pour le chargement simultané de données.

blog ai3 Image-26 Recommandations pour la construction d'applications PowerApps

Attention à éviter d’y mettre des segments de code interdépendants ; la fonction ne le supporte pas (vous ne pouvez pas définir une variable dans l’une des opération concurrente et la modifier dans une autre).

Pour plus d’information sur l’utilisation de la fonction Concurrent afin d’optimiser les performances de vos applications, consulter ce lien :
https://www.youtube.com/watch?v=xHJvbMEj-so

Délégation et non-délégation

Gardez à l’esprit que certaines fonctions et certains opérateurs peuvent être délégués par le serveur possédant la source de données et d’autres non. L’utilisation de fonctions non-déléguées oblige le chargement de ces données au préalable ce qui induit un temps d’exécution plus long.

Pour mieux comprendre les aspects de délégation, consultez cet article :
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/delegation-overview

Collections locales

Privilégiez l’utilisation de collections locales pour stocker les données provenant de votre source plutôt que d’y faire de nombreux appels en direct.

Procédures stockées sur SQL Server

Si vous utilisez SQL Server comme source de données pour votre application, d’énormes gains en performance peuvent être réalisés en déportant le traitement des données via des procédures stockées appelées à partir d’un flux de travail Microsoft Flow.

Code coûteux en performance

Lorsque vous devez exécuter du code pouvant potentiellement être chronophage, suivez ces quelques conseils :

  • N’exécutez pas ce code AVANT l’affichage de votre prochain écran ; affichez d’abord votre prochain écran et mettez votre code dans l’événement OnVisible de l’écran pour qu’il s’exécute en arrière-plan pendant que l’utilisateur prend connaissance du contenu de l’écran
  • Utilisez un message indiquant qu’un chargement ou un traitement conséquent est en cours afin que l’utilisateur patiente quelques instants
  • Utilisez, dans la mesure du possible, la fonction Concurrent pour paralléliser les traitements

Limiter la taille du package de l’application

Bien que PowerApps optimise au maximum le chargement des applications, il est possible de suivre quelques règles pour aller encore plus dans le sens de l’optimisation :

  • Supprimez les médias inutilisés
  • Privilégiez les images SVG aux images PNG ou JPG
  • Réduisez la résolution de votre application si une grosse résolution n’est pas indispensable
  • Supprimez les écrans inutilisés
  • Vérifiez que vous n’avez pas trop de workflows dans une même application. Si vous avez une partie de votre application destinée à des administrateurs et une autre à des utilisateurs, pensez éventuellement à les éclater en deux applications distinctes.

Republiez régulièrement vos applications

La plateforme PowerApps évoluant en permanence, pensez à republier régulièrement vos applications afin de bénéficier de ses nouvelles évolutions et optimisations.

Le design

Styles relatifs par lien parent/enfant

Plutôt que de redéfinir « en dur » des valeurs de mise en forme (taille, position, couleurs, …) pour chaque contrôle, privilégiez l’utilisation de formules rendant plusieurs contrôles dépendant d’un seul. En modifiant la mise en forme du contrôle parent, tous ses enfants se mettront à jour automatiquement. Cela rendra la maintenance du design de votre application beaucoup plus aisée.

Utilisation de galleries

L’utilisation de galeries pour l’affichage de données sera beaucoup plus efficace que l’utilisation de formulaires. Gardez-le à l’esprit afin d’optimiser l’affichage de vos données.

Formulaires

Les formulaires doivent plutôt être utilisés dans le cadre de saisies de données répétitives. Ils sont également très pratiques pour regrouper efficacement des données d’une même source.

Applications à facteurs de formes multiples

Si votre application doit s’exécuter sur des périphériques dont le facteur de forme diffère, créez-là d’abord pour un facteur de forme donné. Testez-la et validez-là puis convertissez-la vers l’autre facteur de forme. Jetez un œil à l’article suivant pour savoir comment effectuer cette conversion :
http://toddbaginski.com/blog/how-to-convert-a-powerapp-from-one-layout-to-another/

Débogage et gestion des erreurs

Il peut être très aisé de gérer les erreurs de votre application à l’aide de contrôles de type Toggle. Utilisez la propriété Default du toggle pour déterminer lorsqu’il y a erreur et utilisez sa propriété OnCheck pour définir le comportement de l’application suite à l’apparition de l’erreur.

D’autre part, utilisez un panel masqué pour y mettre des valeurs de variables ou des indicateurs d’états qui se mettront à jour en temps réel lors de l’exécution de votre application. Cela vous permettra de déboguer votre application beaucoup plus facilement.

D’ailleurs, vous pouvez en profiter pour n’afficher ce panneau de débogage qu’aux concepteurs d’applications PowerApps. Pour cela, utilisez le connecteur PowerApps for Makers de la manière suivante :

blog ai3 Image-27 Recommandations pour la construction d'applications PowerApps

Documentation

Commentaires

Les commentaires sont disponibles dans le code de vos applications PowerApps depuis Juin 2018. Les deux formats suivants sont acceptés :

  • Commentaire de ligne : utilisez le formalisme // pour commenter tout ce qui s’y trouve après, sur la ligne en cours uniquement
  • Bloc de commentaires : utilisez /* et */ pour écrire des commentaires sur plusieurs lignes

Ecrans de documentation

Vous pouvez également créer des écrans où insérer du texte pour documenter à minima votre application. Assurez-vous qu’aucune navigation ne permette à l’utilisateur d’atterrir sur ces écrans afin qu’ils ne soient visibles que des concepteurs d’application dans l’éditeur PowerApps.

blog ai3 Image-28 Recommandations pour la construction d'applications PowerApps

Si vous avez des questions ou des remarques, n’hésitez pas…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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