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…

PowerApps Développeur – DEPLOYER

Introduction

Dans Office 365 vous ouvrez PowerApps et s’affiche le titre Développez rapidement des applications professionnelles.

Voilà une belle promesse, surtout que ces applications fonctionnent sur smartphone !
Mais qu’en est-il de l’investissement en temps, de la documentation disponible, des limites de ces apps, de leur diffusion, de leur maintenabilité ?

Voyons la réelle étendue des pouvoirs que vous donne PowerApps 😉

Pour développer une application, vous allez :

  1. Définir ou identifier les données manipulées
  2. Concevoir ou générer* vos pages et écrire du code
  3. Publier votre application V1 dans votre tenant O365
  4. Partager cette application avec vos collègues
  5. Demain vous ou une autre personne produira de nouvelles versions

Dans ce second article je me focalise sur les points 1., 3. et 4. : PARTAGER LES DONNÉES / DEPLOYER.

*La génération d’une App est possible depuis une modern list SharePoint
Autre article : PowerApps Developpeur – CODER

Les données

Dans PowerApps comme dans Flow il faut mettre en place un connecteur pour utiliser une source de données, d’ailleurs les 2 produits partagent les mêmes connecteurs.
Le terme connexion est équivalent à connecteur dans PowerApps en Français.

Il existe des connecteurs pour Office 365, pour Azure et aussi  Facebook, Jira, WordPress, …
Une fois qu’un connecteur est créé, il est disponible pour n Apps et n Flows.
Une App ou un Flow peut avoir une seule ou plusieurs sources de données.

Exemple 1 : le connecteur OneDrive Entreprise permet d’utiliser un classeur Excel comme source de données.
PowerApps reconnaît comme table de données chaque objet Tableau, différents tableaux peuvent être présents dans une même feuille de calcul ou des feuilles séparées.

blog ai3 PowerAppsDev10-1024x362 PowerApps Développeur - DEPLOYER

Exemple 2 : le connecteur Utilisateurs d’Office 365 permet d’accéder à son compte utilisateur et aux comptes de son organisation (la capture écran est faite à partir de plusieurs captures).

blog ai3 PowerAppsDev11 PowerApps Développeur - DEPLOYER

Exemple 3 : le connecteur SharePoint permet que votre application affiche et mette à jour une liste SharePoint.  Typiquement vous définissez les données de suivi d’un projet dans un site d’équipe SharePoint puis vous générez une App mobile pour un accès en mobilité.

blog ai3 PowerAppsDev14 PowerApps Développeur - DEPLOYER

Enfin, les API REST permettent aussi les connecteurs personnalisés.

Une fois que vous avez déployé votre application PowerApps, les utilisateurs doivent l’autoriser à utiliser leur identité pour tous les connecteurs concernés.
Exemple avec l’application « PowerApps Training for Office » qui fait partie des modèles d’applications disponibles.

blog ai3 PowerAppsDev12 PowerApps Développeur - DEPLOYER

Voyons maintenant le déploiement d’une application PowerApps.

Déployer

Déployer une application PowerApps c’est :

  • Publier la Version que l’on veut mettre en production
    • La version courante est identifiée par En direct
  • S’assurer que le public ciblé par cette App a bien accès aux données
  • Partager l’application avec d’autres personnes de mon organisation
    • Partage avec 2 collègues, une équipe ou tout le monde pour l’utiliser
    • Partage avec telle ou telle personne pour l’utiliser et la modifier, ces personnes verront les versions publiées et les autres et peuvent être bêta testeurs

blog ai3 PowerAppsDev15 PowerApps Développeur - DEPLOYER

Pour l’utiliser depuis un navigateur sur PC, votre App a une URL que vous trouvez dans sa page Détails.

Sur tablettes et smartphones

blog ai3 PowerAppsDev16-300x223 PowerApps Développeur - DEPLOYERAucune complexité pour déployer des Apps sur les terminaux mobiles. Il suffit d’installer l’application PowerApps qui vous demande votre compte Office 365 et se connecte à votre environnement.

Cette application PowerApps est le lanceur de vos Apps.

En revanche c’est à la conception de votre App que vous indiquez la taille des pages, pensez donc mobile first si vous ciblez un usage nomade.

Conclusion

Cet article examine les points 1., 3. et 4. du développement d’une application PowerApps :

1. Définir ou identifier les données manipulées
2. Concevoir ou générer vos pages et écrire du code
3. Publier votre application V1 dans votre tenant O365
4. Partager cette application avec vos collègues
5. Demain vous ou une autre personne produira de nouvelles versions

Si les données sont définies par le besoin, leur(s) emplacement(s) est à définir pour être accessibles à la population visée. Ceci peut paraître une évidence, mais attention aux évolutions futures.

Vos Apps étant des applications SaaS, les déployer consiste à les partager (les ouvrir) aux utilisateurs. Ce partage se combine avec la notion de versions intermédiaires et de versions publiées.

Article sur les points 2.  et 5.  : PowerApps Developpeur – CODER

PowerApps Développeur – CODER

Introduction

Dans Office 365 vous ouvrez PowerApps et s’affiche le titre Développez rapidement des applications professionnelles.

Voilà une belle promesse, surtout que ces applications fonctionnent sur smartphone !
Mais qu’en est-il de l’investissement en temps, de la documentation disponible, des limites de ces apps, de leur diffusion, de leur maintenabilité ?

Voyons la réelle étendue des pouvoirs que vous donne PowerApps 😉

Pour développer une application, vous allez :

  1. Définir ou identifier les données manipulées
  2. Concevoir ou générer* vos pages et écrire du code
  3. Publier votre application V1 dans votre tenant O365
  4. Partager cette application avec vos collègues
  5. Demain vous ou une autre personne produira de nouvelles versions

Dans ce 1er article je me focalise sur les points 2. et 5. : CODER et MAINTENIR.

*La génération d’une App est possible depuis une modern list SharePoint, ceci est illustré plus avant dans cet article.

Autre article : https://as-ai3-blog-001.azurewebsites.net/PowerApps Developpeur – DEPLOYER

Exemple de besoin

Voici une application ultra simple, sans obligation de définir la structure et l’emplacement des données.

blog ai3 PowerAppsDev02 PowerApps Développeur - CODER blog ai3 PowerAppsDev03 PowerApps Développeur - CODER

Le code

Les instructions sont placées dans les événements (la capture écran est faite à partir de plusieurs captures)

blog ai3 PowerAppsDev04 PowerApps Développeur - CODER

Événement OnVisible de la page Main : la variable locale AddMode prend la valeur True (variable de type booléen).
Événement OnChange du champ Name : la variable locale CurrentName prend la valeur du champ Name.
Événement Default du champ Name : si mode ajout le champ est vide, sinon il contient l’élément sélectionné dans la liste.

Le choix des variables est essentiel pour la maintenance de l’application, ce qui est expliqué plus loin dans cet article. Il est important de les nommer avec soin.

La propriété Text du bouton AddOrUpdate est une formule qui positionne son libellé en « Ajouter » ou « Modifier » en fonction de la variable locale AddMode.
Le code de l’événement OnSelect de ce bouton :

  • La variable mémoire pour une liste est une collection
  • En mode ajout : ajouter un élément à la collection
  • Sinon mettre à jour
  • Puis dans les 2 cas passer en mode ajout (double point virgule pour enchaîner des instructions)

blog ai3 PowerAppsDev05 PowerApps Développeur - CODER

Les captures écran ci-dessus montrent que les utilisateurs aguerris aux formules Excel peuvent facilement faire la transition vers PowerApps.
La documentation PowerApps présente d’ailleurs le language comme des formules.
https://docs.microsoft.com/fr-fr/powerapps/maker/canvas-apps/formula-reference

blog ai3 PowerAppsDev06 PowerApps Développeur - CODERCependant plus les règles métier vont s’enrichir plus le code va être difficile à lire.
Une des idées qui a émergé de la communauté PowerApps  est la mise forme du code, à laquelle peuvent s’ajouter les commentaires « // ceci est un commentaire ».

 

User voice de la communauté PowerApps :
https://powerusers.microsoft.com/t5/PowerApps-Ideas/idb-p/PowerAppsIdeas

 

Au delà de la mise en forme du code et des commentaires, voyons plus généralement la maintenabilité des Apps.

La maintenabilité

Comme dans un classeur Excel avec de nombreuses formules réparties dans différentes cellules, il est difficile d’appréhender le code dans son ensemble.

La 1ère chose qui va fortement nous aider sont les variables, qui peuvent être locales ou globales.
En savoir plus  https://docs.microsoft.com/fr-fr/powerapps/maker/canvas-apps/working-with-variables#types-of-variables

En effet, PowerApps affiche les différentes variables et pour chacune :

  • Où elle est définie (où sa valeur est affectée), par exemple UpdateContext({AddMode: true})
  • Où est utilisée, par exemple If(AddMode;"";MyColl.Selected.Title)
  • Où elle est indirectement utilisée, par exemple :
    • La variable AddMode est utilisée pour initialiser valeur par défaut champ Name
    • Donc Name.OnChange est une utilisation indirecte de AddMode

Ainsi les variables permettent de « suivre le fil » des traitements.

blog ai3 PowerAppsDev07 PowerApps Développeur - CODER

La seconde chose qui va nous aider pour la maintenance est de produire une documentation technique dans une ou plusieurs pages de l’application, tel que :

blog ai3 PowerAppsDev08 PowerApps Développeur - CODER

Générer depuis SharePoint

Quand la source de données est une modern list SharePoint il est possible d’utiliser PowerApps pour personnaliser les formulaires, mais aussi pour créer une application mobile.

En un clic cette application est générée avec les fonctionnalités d’affichage de la liste, tri, recherche, ajout dans la liste, maj, suppression.
Il est ensuite possible de la personnaliser avec son propre code.

blog ai3 PowerAppsDev13 PowerApps Développeur - CODER

Conclusion

Cet article examine les points 2. et 5. du développement d’une application PowerApps :

1. Définir ou identifier les données manipulées
2. Concevoir ou générer vos pages et écrire du code
3. Publier votre application V1 dans votre tenant O365
4. Partager cette application avec vos collègues
5. Demain vous ou une autre personne produira de nouvelles versions

Pour coder une application il faut positionner des formules dans son IHM, cela favorise la prise en main de PowerApps par des personnes qui ne sont pas développeurs.
Pour la maintenance d’une application par d’autres personne que son auteur, je conseille d’appliquer les bonnes pratiques suggérées ici.

PowerApps est adapté aux développements en cycles courts [ Besoin  =>  App V1  =>  App V2  => … ]
Ceci dit le produit est en évolution rapide, cela se voit à travers les nombreuses idées émises par la communauté : Planned(152) Started(34) Completed(158)

Article sur les points 1.  3.  et 4.  : https://as-ai3-blog-001.azurewebsites.net/PowerApps Developpeur – DEPLOYER