Catégories
Prestations Audits Formations

Formulaire Power Apps à onglets

Dans cet exemple, vous découvrirez comment créer un formulaire Power Apps avec des onglets.

Pour ce faire, l’astuce consiste à utiliser des boutons qui seront suffisamment arrondis pour ressembler à des onglets.

Par ailleurs, afin de s’éviter trop de manipulations, un premier bouton nommé Jouets sera entièrement configuré. Ensuite, il sera copié 2 fois pour disposer au total de 3 boutons et donc 3 onglets. Il suffira de changer le texte des 2 nouveaux boutons pour les identifier.

Enfin, vous terminerez en associant les contrôles cartes de données aux onglets correspondants.

Préparation

Personnaliser le formulaire SharePoint

Tout d’abord, ouvrez vote site SharePoint puis sur ce site, ouvrez la liste lstAffaires avec l’interface moderne.

Ensuite, dans le menu de la liste, cliquez sur Power Apps, puis dans le sous-menu qui s’ouvre, cliquez sur Personnaliser les formulaires.

Patientez quelques instants, le temps du chargement et de la préparation du formulaire.

Préparer le formulaire

Une fois que le formulaire est ouvert dans Power Apps, fermez le volet Champs avec la croix.

Ensuite, supprimez le contrôle Image1. Ce contrôle avait été inséré précédemment dans le TP Personnaliser une liste SharePoint.

Donnez la couleur suivante au formulaire :

SharePointForm.Fill = RGBA(0; 120; 212; 1)

Puis, avec l’onglet Insérer, insérez une étiquette puis configurez ses propriétés :

Label1.Text = "Détail d'une affaire"
Label1.FontWeight = Bold
Label1.Italic = True
Label1.Height = 151
Label1.Size = 28

Ajouter un bouton

Ensuite, avec l’onglet Insérer, insérez un bouton. Grâce aux propriétés, remplacez le texte Bouton par le texte Jouet.

Button1.Text = "Jouet"

Puis, modifiez la courbure du haut du bouton de 20 degrés :

Button1.RadiusTopLeft = 20
Button1.RadiusTopRight = Button1.RadiusTopLeft

Comprendre les effets visuels des onglets

Un onglet est une sorte “d’illusion d’optique”.

En effet, lorsque l’utilisateur clique sur un onglet, il s’attend à voir l’onglet sur lequel il a cliqué “s’activer”. Inversement, il s’attend à voir les autres onglets “se désactiver”. Ces phénomènes visuels s’obtiennent en jouant sur les paramètres de couleur du bouton et ceux liés aux bordures de l’onglet.

Vous trouverez l’explication des propriétés de couleur et de bordure dans Power Apps sur le site de Microsoft Docs, qui est consultable grâce à ce raccourci : https://coudr.com/powco

De plus, le paramétrage de ces propriétés utilise la fonction ColorFade(). Celle-ci renvoie une version plus claire ou plus sombre d’une couleur. La quantité de fondu varie de -100% (complètement noir) à 100%, qui éclaire complètement une couleur au blanc.

Vous trouverez l’aide de la fonction ColorFade() sur ce lien : https://coudr.com/powfn

Personnaliser les effets visuels des onglets

Configurez les couleurs et la bordure du bouton avec ces paramètres :

Button1.BorderColor = SharePointForm1.BorderColor
Button1.BorderStyle = BorderStyle.Solid
Button1.DisabledBorderColor = ColorFade(Button1.BorderColor;
60%)
Button1.DisabledColor = Button1.Color
Button1.DisabledFill = SharePointForm1.Fill
Button1.HoverBorderColor =
ColorFade(Button1.BorderColor; 20%)
Button1.HoverColor = Button1.Color
Button1.PressedBorderColor = Button1.Fill

Mécanisme d’activation

Les propriétés DisabledBorderColor, DisabledColor, DisabledFill ne s’affichent que si la valeur de la propriété DisplayMode est définie sur Disabled (désactivé). DisplayMode fait partie des propriétés principales de Power Apps, au même titre que OnSelect par exemple. Elle sert à définir si le contrôle autorise l’entrée utilisateur (valeur: Edit), affiche uniquement les données (valeur: View) ou est désactivé (valeur: Disabled).

Si un onglet n’est pas sélectionné, ses propriétés Disabled doivent s’afficher. Si l’onglet est sélectionné, ses propriétés Disabled ne doivent pas s’afficher. Pour savoir, si l’onglet est sélectionné, il suffit de stocker le texte de l’onglet dans une variable au moment où l’utilisateur clique sur l’onglet :

Button1.OnSelect = Set(varOngletTitre;Button1.Text)

Ensuite, il suffit de comparer la valeur de la variable avec la valeur du texte de l’onglet en cours. Configurez la propriété DisplayMode du bouton :

Button1.DisplayMode = If(varOngletTitre=Button1.Text;Disabled;Edit)

Finaliser le paramétrage du bouton

Enfin, pour une raison purement esthétique (et pédagogique), le texte de l’onglet est aligné en haut et la taille du bouton est réduite. La réduction permettra d’avoir bientôt 3 boutons. Configurez ces deux dernières propriétés :

Button1.VerticalAlign = Top
Button1.Width = 148

Ensuite, glissez le bouton pour qu’il s’aligne en haut du contrôle de formulaire.

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

Premier onglet dans Power Apps
Premier onglet dans Power Apps

Multiplier le bouton d’origine

Maintenant, sélectionnez votre bouton, copiez-le et collez-le à 2 reprises : vous obtenez 3 boutons.

Renommez les 2 nouveaux boutons : Button2 et Button3.

Alignez vos boutons en haut du formulaire.

Grâce à la propriété Text, remplacez le texte “Jouet” par “Montant” puis “Responsable”.

Button2.Text = "Montant"
Button3.Text = "Responsable"

Attribuer les contrôles

Chaque onglet doit afficher des cartes de données différentes, sinon ils ne servent à rien.

Dans la vraie vie, il y aurait probablement 12 à 15 champs à répartir sur les onglets. Dans ce scénario, il y a seulement 3 champs. Toutefois, il est facile de décliner ce qu’il y a faire avec plus de champs.

Votre objectif est que le Titre apparaisse sur tous les onglets, la carte MontantHT ne doit apparaître que sur l’onglet “Montant”, tandis que la carte Responsable ne doit apparaître que sur l’onglet “Responsable”.

Cliquez sur la carte Responsable, puis définissez sa propriété visible :

Responsable_DataCard1.Visible = varOngletTitre = "Responsable"

Ne soyez pas surpris de voir le contrôle disparaître. Comme l’application n’a pas été exécutée, la variable varOngletTitre n’a pas encore de valeur. Donc varOngletTitre = “Responsable” est faux. Du coup Responsable_DataCard1.Visible = false.

Ensuite, cliquez sur la carte MontantHT, puis définissez sa propriété visible:

MontantHT_DataCard1.Visible = varOngletTitre = "Montant"

Pour la carte Titre, c’est encore plus simple : il suffit de ne pas définir la propriété OnVisible pour que la carte s’affiche sur tous les onglets. Il n’y a donc rien à faire.

Configurer l’écran

Lors de l’ouverture du formulaire, vous souhaitez que l’utilisateur arrive par défaut sur l’onglet Jouet.

Pour ce faire, configurez la propriété avancée OnVisible de l’écran :

FormScreen1.OnVisible = varOngletTitre = "Jouet"

C’est fini 😉

Tester le nouveau formulaire

Vous allez vérifier l’efficacité de vos modifications. Pour cela, cliquez sur le lien dans le coin supérieur gauche, qui s’intitule Revenir à SharePoint : une boite de dialogue s’ouvre.

Dans cette boîte de dialogue, cliquez sur le bouton Publier sur SharePoint.

Patientez quelques instants : la liste SharePoint va s’ouvrir.

Il est possible que le résultat ne soit pas immédiat suite à la manipulation ci-dessous. Dans ce cas patientez une bonne minute. Si le résultat n’est toujours pas visible : modifiez à nouveau le formulaire PowerApps puis publiez le à nouveau.

Dans cette liste, cliquez sur un élément quelconque pour l’ouvrir : il s’affiche bien dans le nouveau formulaire Power Apps.

Cliquez sur l’onglet Responsable et remarquez la présence des champs Titre et Responsable, uniquement.

Cliquez sur l’onglet Montant et remarquez la présence des champs Titre et MontantHT, uniquement.

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

Affichage d'un onglet
Affichage d’un onglet

Dans SharePoint, fermez le volet de l’élément affiché.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer des formulaires dans un formulaire Power Apps.

Maintenant, vous pouvez appliquer cette technique sur des formulaires ou sur les applications Power Apps que vous développerez dans l’avenir.

Pour aller encore plus loin, vous avez un excellent article (en anglais et en deux parties) de Mme Audrie Gordon sur Microsoft Docs. Il montre une utilisation encore plus poussée des onglets dans une application Power Apps :

Partie 1 : Handling Tab Control Scenarios in PowerApps for Full Screen Formats : https://coudr.com/powtab01

Partie 2 : Tabbed User Interface – Mobile Version : https://coudr.com/powtab02

Article mis à jour le 13.03.2020

Catégories
Prestations Audits Formations

Support de cours sur Power Apps en libre accès numérique

Dans un objectif de renforcer les actions en faveur d’un meilleur accès à la connaissance, mon support de cours sur Microsoft Power Apps est en libre accès numérique.

Contrôles Power Apps

Ce support de cours est composé d’une présentation de 200 pages et des travaux pratiques (119 pages), entièrement rédigés. C’est un support de cours complet et opérationnel.

La présentation est l’exposé des concepts avec les explications. Les travaux pratiques sont rédigés sous forme de tutoriels.

Ces documents sont offerts sous license Creative Commons Zero (CCØ). Ils peuvent donc être téléchargés librement et utilisés sans restrictions.

C’est une démarche qui vise à permettre au plus grand nombre l’accès à du contenu pédagogique à jour, au moment de sa rédaction, et précis.

Contrôle OnSelect

Si vous rencontrez des difficultés de téléchargement ou de compréhension, n’hésitez pas à me contacter.

Pour obtenir le support de cours complet, vous pouvez télécharger les deux documents sur Créer des applications avec Microsoft Power Apps : l’exposé et les travaux pratiques.

Téléchargement du cours : Exposé.

Téléchargement manipulations : Travaux pratiques.

Application de canevas à partir de zéro

Bien que toutes les précautions aient été prises lors de la rédaction de cette documentation, ni l’auteur, ni l’éditeur, ne seront tenus pour responsables des erreurs, ou omissions, ou dommages causés ou prétendument causés directement ou indirectement par les informations contenues dans ces documents.

Cette documentation est éditée à des fins purement éducatives. Les informations contenues dans ces documents sont fournies sans aucune garantie expresse, statutaire ou implicite. Les manipulations sont faites sous votre seule et unique responsabilité

Article mis à jour le 13.01.2020.

Catégories
Prestations Audits Formations

Centre d’excellence de la Power Platform

Le Centre d’excellence de la Power Platform est une solution à charger dans un environnement qui n’est pas l’environnement par défaut.

Il sert à administrer les applications Power Apps et Power Automate de votre organisation.

Centre d'Excellence - Résumé

Il est lui-même constitué d’applications Power Apps et de flux Power Automate pour fonctionner. Des rapports Power BI sont disponibles.

Centre d'Excellence - Solution

Pour la télécharger :

https://coudr.com/cex

Pour l’installation, il faut ouvrir le fichier Documentation.pdf et suivre les instructions. Elles sont détaillées et très claires.

Les rapports Power BI sont probablement les plus impressionnants. Par exemple, vous avez le rapport ci-dessous sur les applications.

Centre d'Excellence - Applications

Il y d’autres rapports disponibles sur les environnements ou les flux, comme ci-dessous.

Article modifié le 22.12.2019.

Catégories
Prestations Audits Formations

Créer un projet d’intégration de données

Objectif

Cet exercice vous explique comment créer un projet d’intégration de données.

Pratique

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

https://make.powerapps.com/

Dans le menu supérieur, vérifiez que vous êtes dans votre environnement par défaut. Si vous n’êtes pas dans votre environnement par défaut, cliquez sur Environnement.

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

Sélection de l'environnement
Sélection de l’environnement

Cliquez ou tapez sur le nom de votre environnement par défaut, pour le sélectionner.

Ensuite, dans le volet de navigation (à gauche), cliquez ou tapez sur Données. Dans la liste déroulante qui apparaît, cliquez ou tapez sur Intégration de données : le volet central affiche un message.

Dans le volet central, cliquez ou tapez sur Créer un projet d’intégration de données : une fenêtre Power Query s’ouvre. Celle-ci vous propose de sélectionner une source de données.

Actuellement les sources de données accessibles sont des fichiers Access, Excel, JSON, Texte/CSV, XML ; ou des bases de données Amazon Redshift, IBM Db2, Oracle, PostgreSQL, SQL Server ; ou des sources de données Azure Data Explorer ; Azure SQL Data Warehouse , SQL Azure ; ou des services en ligne Liste SharePoint Online, Objets Salesforce, rapports Salesforce ; ou des sources de données API web, Liste SharePoint, ODAta, Page Web, Table vide, Requête vide.

Dans cette liste, sélectionnez Excel.

Dans la fenêtre qui s’ouvre, cliquez ou tapez sur le bouton Parcourir.

Si une fenêtre vous demande de choisir un compte, sélectionnez votre compte de tenant.

Une nouvelle fenêtre s’affiche. Dans le menu supérieur de cette fenêtre, cliquez sur Charger puis sur Fichiers.

Chargez le fichier excel_ventes.xlsx qui se trouve dans les dossiers d’exercice. Une fois que le fichier est chargé, sélectionnez-le puis cliquez ou tapez sur le bouton Ouvrir.

Pour information, sachez que le fichier est chargé à cet emplacement OneDrive : https://monsupersite-my.sharepoint.com/personal/jack_monsupersite_onmicrosoft_com/Documents.

Cliquez ou tapez sur le bouton Suivant.

Dans le volet de gauche, cochez Tableau3 (et non pas Tableau).

Cliquez ou tapez sur le bouton Suivant.

Cliquez ou tapez à nouveau sur le bouton Suivant.

Dans l’écran Mapper des entités, cochez Charger sur la nouvelle entité.

Vous pouvez choisir le type de chaque colonne.

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

Modifiez le type de la zone de destination de chaque colonne en Texte.

Dans la zone Champ Nom principal, sélectionnez Clef.

Cochez la case Supprimer les lignes qui n’existent plus dans la sortie de requête.

Renommez le nom de l’entité en le préfixant avec votre prénom, par exemple jack_Tableau3.

Renommez le nom de l’entité en le préfixant avec votre prénom, par exemple jack_Tableau3.

Cliquez ou tapez à nouveau sur le bouton Suivant.

Dans l’écran Mapper des entités, cochez Actualiser manuellement.

Cliquez ou tapez à nouveau sur le bouton Créer.

Si d’aventures, vous obtenez une erreur : reprenez votre projet et réessayez les étapes précédentes.

Cliquez ou tapez à nouveau sur le bouton Terminé.

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

Projet d'intégration terminé

Avec le menu …, renommez le projet en le préfixant avec votre prénom, par exemple jack_projet1.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer un projet d’intégration de données.

Catégories
Prestations Audits Formations

Exécuter une application canevas basée sur un modèle

Objectif

Cet exercice vous explique comment exécuter l’application Donner des bravos.

Préparation

Pratique

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

https://web.powerapps.com/

Sous Applications récentes, vous devriez voir l’application de canevas Donner des bravos.

Si elle n’apparaît pas, cliquez dans le volet de gauche, sur Applications.

Cliquez ou tapez sur Donner des bravos pour l’ouvrir.

Application Shoutouts

Il est possible qu’un bandeau rouge s’affiche en haut de l’écran. Ce bandeau va disparaître automatiquement au bout de 30 secondes. Il est lié à des données manquantes vous concernant, comme votre photo de profil. Dans un environnement réel de production, il faudrait le faire.

Cliquez ou tapez sur NEXT (suivant) : cette page explique le rôle de l’application.

Cliquez ou tapez à nouveau sur NEXT (suivant) : cette page explique que vous pouvez ajouter un message qui sera lu par votre communauté.

Cliquez ou tapez à nouveau sur NEXT (suivant) : cette page explique que vous pouvez ajouter une photo ou une image à votre message.

Cliquez ou tapez à nouveau sur NEXT (suivant) : cette page explique que les félicitations seront reçues par email par le destinataire, ainsi que son responsable hiérarchique.

Cliquez ou tapez à nouveau sur NEXT (suivant) : vous pouvez maintenant envoyer des félicitations à quelqu’un. Vous pouvez aussi consulter les félicitations que vous avez reçues et celles que vous avez envoyées. Vous remarquerez que l’application vous a automatiquement envoyé une première félicitation en votre nom.

Pour envoyer vos félicitations, cliquez ou tapez sur le + de Send Shoutout (envoyer des félicitations).

Dans l’écran Search person (recherche de personne), tapez le nom de Bob Durand dans la zone Search : il s’affiche aussitôt juste en dessous de votre saisie.

Cliquez ou tapez sur NEXT (suivant) : la liste des types de félicitations s’affiche.

Dans cette liste, cliquez ou tapez sur Thank You (Merci) puis cliquez ou tapez sur NEXT (suivant).

Dans l’écran Your Personal Message and Photo (Votre message personnel et votre photo), saisissez le message suivant : Tu es la personne qui mérite la plus grande reconnaissance pour le travail accompli.

Facultativement, vous pouvez charger aussi une image. Vous en trouverez une dans les fichiers d’exercices.

Cliquez ou tapez sur NEXT (suivant) : l’écran qui s’intitule Review Your Shoutout (Révisez votre message de félicitation) s’affiche.

Cliquez ou tapez sur SEND (envoyer) : Le message Your Shoutout has been sent (Votre message de félicitation a été envoyé) s’affiche.

Cliquez ou tapez sur l’icône X en haut à droite pour revenir à l’espace de travail par défaut de l’application.

Vérifiez la présence du message de félicitations dans la boite aux lettres de Bob Durand, ainsi que celle de Karine Marchais.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment exécuter une application canevas basée sur un modèle.

Catégories
Prestations Audits Formations

Créer une application PowerApps canevas à partir d’un modèle

Objectif

Cet exercice vous explique comment créer une application canevas à partir d’un modèle.

Vous pourrez ainsi explorer les possibilités de conception de PowerApps. Dans cet exemple, vous pourrez aussi appliquer les premiers concepts de PowerApps et développer votre application de canevas.

Préparation

  • Pour faire cet exercice, vous avez besoin d’un compte utilisateur dans Office 365, ainsi que la messagerie Outlook.

Pratique

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

https://web.powerapps.com/

Dans le volet de navigation (à gauche), cliquez sur Créer.

Dans la zone de recherche (en haut, à droite), entrez : Shoutouts, puis cliquez sur : Shoutouts.

L’application de canevas Shoutouts encourage les collègues à partager des compliments au travail. Vous pouvez envoyer des notifications automatiques par e-mail aux responsables des destinataires.

Donnez un nom à votre application : Donner des bravos

Le nom de l’application ne doit pas dépasser 64 caractères.

Gardez la case de Tablette sélectionnée.

Sous le libellé Se connecte à, l’application de canevas Shoutouts vous indique qu’elle peut se connecter à Outlook d’Office 365 (icône bleue) et à votre compte (icône rouge).

Application PowerApps canevas basée sur un modèle

Ensuite, cliquez ou tapez sur Créer.

Une fenêtre, intitulée Encore quelques instants, vous informe que l’application de canevas Shoutouts a besoin de votre autorisation pour se connecter à votre compte utilisateur et à votre compte de boîte aux lettres.

Éventuellement, vous pourriez changer de compte. Pour l’instant, ne changez pas de compte.

Dans la fenêtre qui s’intitule Encore quelques instants, cliquez ou tapez sur le bouton Autoriser.

Patientez quelques instants : une fenêtre, intitulée Bienvenue dans PowerApps Studio, s’affiche.

Dans cette fenêtre, cliquez ou tapez sur Afficher un aperçu de cette application.

Puis ouvrez le mode Aperçu en appuyant sur F5 (ou en cliquant ou appuyant sur le bouton de lecture près de l’angle supérieur droit).

Chaque exemple représente un scénario différent avec une variété d’écrans et d’autres contrôles.

Application PowerApps Shoutouts Bravos

Une fois l’exploration de l’application terminée, fermez le mode Aperçu en appuyant sur Échap (ou en cliquant ou en appuyant sur l’icône de fermeture près de l’angle supérieur droit, sous la barre de titre pour PowerApps).

Si une fenêtre, intitulée Le saviez-vous apparaît cliquez ou tapez sur le bouton OK pour la faire disparaître.

Vous allez enregistrer l’application. Pour ce faire, en haut à gauche, cliquez ou tapez sur l’onglet Fichier.

Dans la page Paramètres de l’application, passez en revue les paramètres par défaut.

Près du bord gauche, cliquez ou tapez sur Enregistrer.

Ensuite, sélectionnez Le cloud puis cliquez ou tapez sur le bouton Enregistrer.

Patientez quelques instants : le message Toutes les modifications sont enregistrées s’affiche.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer votre propre application stockée dans votre compte cloud.

Si vous lancez immédiatement l’application Shoutouts, vous aurez probablement des erreurs car le contexte de son fonctionnement n’est pas encore défini. Les exercices suivants vous montreront comment utiliser correctement cette application.

Gardez à l’esprit qu’une application PowerApps s’exécute généralement dans un environnement varié. Il est donc normal de s’assurer que toutes les conditions nécessaires à son exécution sont réunies.

Article mis à jour le 09.11.2019.

Catégories
Prestations Audits Formations

Créer une stratégie de protection contre la perte de données

Objectif

Cet exemple vous explique comment créer une nouvelle stratégie de protection contre la perte de données. Des stratégies de protection contre la perte de données définies par les administrateurs de clients peuvent être appliquées à un seul environnement, ou à plusieurs.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

Pratique

Ouvrez le centre d’administration PowerApps et identifiez-vous avec votre compte de tenant.

https://admin.powerapps.com/

Centre d'administration PowerApps

Dans le volet de navigation (à gauche), cliquez ou tapez sur Stratégies de données.

Puis cliquez ou tapez sur Nouvelle stratégie (en haut et à droite de l’écran).

Nouvelle stratégie de données

Dans la boîte de dialogue Nom de la stratégie de données, gardez le choix par défaut (Appliquer à TOUS les environnements) puis cliquez ou tapez sur le bouton Continuer : la liste des groupes de données s’affiche.

Groupes de données

Dans l’étiquette horodatée, comme Stratégie 08:22:01 11-16-2019 (en haut et au milieu de la page), entrez le nom de la stratégie de données : Sécuriser les données métiers.

Cliquez ou tapez sur le lien Ajouter qui se trouve dans la zone de groupe Business data only (Données métiers uniquement) : la liste des connecteurs s’affiche. Cette liste est constituée de tous les connecteurs de données qui figurent dans le groupe No business data allowed (Données métiers non autorisées).

Dans la page Ajouter des connecteurs, sélectionnez les connecteurs Office 365 Outlook et SharePoint.

Cliquez ou tapez sur le bouton Ajouter des connecteurs. L’ajout d’un connecteur à un groupe de données le supprime automatiquement de l’autre groupe de donnée.

Enfin cliquez ou tapez sur Enregistrer la stratégie (en haut et à droite de l’écran) pour valider vos manipulations.

Une fois la stratégie créée, elle apparaît dans la liste des stratégies de données de la page Stratégies de protection contre la perte de données.

Stratégie de protection contre la perte de données

Cliquez ou tapez sur Sécuriser les données métiers pour afficher les détails de la stratégie.

Notez que vous pourriez éventuellement modifier les environnements sur lesquels la stratégie s’applique. Vous pourriez aussi éventuellement classer différemment les connecteurs de données. Toutefois, ne faites aucune modification pour l’instant.

Une fois que vous avez passé en revue les détails de la stratégie, cliquez ou tapez sur Fermer (en haut et à droite de l’écran).

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une nouvelle stratégie de protection contre la perte de données.

Cette stratégie permet aux applications concernées de partager des données entre Office 365 Outlook et SharePoint. Par ailleurs, elle bloque automatiquement le partage des données avec les autres connecteurs.

Concrètement et grâce à cette stratégie, une application ne pourra pas partager des données métiers entre SharePoint et LinkedIn, par exemple.

Article mis à jour le 16.11.2019.

Catégories
Prestations Audits Formations

Créer une connexion à une passerelle

Objectif

Cet exemple vous explique comment créer une connexion à une passerelle. Cette connexion permettra de connecter une base de données locale, qui pourra être utilisée dans une application PowerApps.

Prérequis

  • L’exercice du TP Créer une nouvelle passerelle doit être terminé avec succès.
  • Vous devez disposer des droits pour vous connecter à un site SharePoint Server local ou à une base de données SQL Server locale.

Pratique

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

https://make.powerapps.com/

Dans le menu supérieur, vérifiez que vous êtes dans votre environnement par défaut. Si vous n’êtes pas dans votre environnement par défaut, cliquez sur Environnement.

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

Sélection de l'environnement
Sélection de l’environnement

Cliquez ou tapez sur le nom de votre environnement par défaut, pour le sélectionner.

Ensuite, dans le volet de navigation (à gauche), cliquez ou tapez sur Données. Dans la liste déroulante qui apparaît, cliquez ou tapez sur Connexions : le volet central apparaît.

Dans le volet central, cliquez ou tapez sur Nouvelle connexion (en haut à gauche).

Dans la zone de recherche (en haut, à droite), entrez SharePoint, puis cliquez sur SharePoint.

Variante : Si vous disposez d’une base de données SQL Server sur laquelle vous avez un accès autorisé, vous pouvez vous connecter à cette base.

Un pop-up propose de vous connecter directement au service Cloud, ou à l’aide d’une passerelle de données locales.

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

Sélection de la connexion

Dans le pop-up, cochez sur Se connecter à l’aide d’une passerelle de données locale : le pop-up s’agrandit.

Dans la nouvelle zone, gardez l’authentification Windows.

Renseignez le nom d’utilisateur local et son mot de passe.

Gardez la passerelle qui porte votre prénom.

Puis cliquez sur le bouton Créer.

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

Création de la connexion

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une connexion à une passerelle pour vous connecter à un serveur SharePoint local ou à une base de données SQL Server locale.

Catégories
Prestations Audits Formations

Créer une nouvelle passerelle

Objectif

Cet exemple vous explique comment créer une nouvelle passerelle. Cette passerelle permettra de vous connecter à une base de données locale.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

  • Vous devez disposer des autorisations d’Administrateur de l’environnement PowerApps, Administrateur global Office 365 ou Administrateur Azure Active Directory.

Pratique

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

https://make.powerapps.com/

Dans le menu supérieur, vérifiez que vous êtes dans votre environnement par défaut. Si vous n’êtes pas dans votre environnement par défaut, cliquez sur Environnement.

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

Sélection de l'environnement

Cliquez ou tapez sur le nom de votre environnement par défaut, pour le sélectionner.

Ensuite, dans le volet de navigation (à gauche), cliquez ou tapez sur Données. Dans la liste déroulante qui apparaît, cliquez ou tapez sur Passerelles : le volet central affiche un message.

Si le volet central affiche le message suivant : “Vous ne pouvez pas installer de passerelle dans cet environnement”, basculez sur votre environnement par défaut comme indiqué plus haut.

Dans le volet central, cliquez ou tapez sur Nouvelle passerelle. Vous arrivez sur une page web qui vous propose de télécharger la passerelle de données locale.

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

Télécharger la passerelle locale

Cliquez ou tapez sur le bouton Télécharger.

Installez le logiciel GatewayInstall.exe en suivant les instructions.

À la fin de l’installation, entrez l’email associé à votre tenant. Dans ce scénario, il s’agit de l’adresse jack@monsupersite.onmicrosoft.com. Pour vous l’adresse sera forcément différente : il s’agit de votre adresse email dans le tenant.

Dans la fenêtre qui s ‘ouvre, entrez le mot de passe associé.

La fenêtre peut être cachée. Faites Alt-Tab pour la faire apparaître.

Une nouvelle fenêtre apparait.

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

Paramétrage de la passerelle

Dans la zone Nouveau nom de on-premises data gateway, entrez votre prénom.

Entrez la clé de récupération suivante : AaBbCcDd01.

Cliquez ou tapez sur le bouton Configurer : patientez quelques instants. Votre passerelle est prête à être utilisée.

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

On-premises data gateway

Décochez la case Contribuez à l’amélioration de on-premises data gateway en envoyant des informations d’utilisation à Microsoft puis cliquez sur le bouton Fermer.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une nouvelle passerelle. Cette passerelle permet ensuite de vous connecter à un SharePoint Server local ou à une base de données SQL Server locale.

Article mis à jour le 16.11.2019.

Catégories
Prestations Audits Formations

Créer une nouvelle base de données pour PowerApps

Objectif

Cet exemple vous explique comment créer une nouvelle base de données dans un environnement existant.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

Pratique

Ouvrez le centre d’administration PowerApps et identifiez-vous avec votre compte de tenant.

https://admin.powerapps.com/

Dans le volet de navigation (à gauche), cliquez ou tapez sur Environnements.

Cherchez l’environnement qui est par défaut. S’il n’y a qu’un seul environnement, alors il est forcément par défaut. En revanche, si vous avez plusieurs environnements qui sont présents, vous devez appliquer la méthode suivante pour déterminer l’environnement par défaut. Regardez la valeur qui se trouve dans la colonne TYPE. S’il est indiqué Par défaut, il s’agit de l’environnement par défaut.

Une fois que vous avez déterminé l’environnement par défaut, cliquez ou tapez sur son nom.

Dans les détails de l’environnement, cliquez ou tapez sur le bouton Créer une base de données (à droite).

Cette action active l’accès au Common Data Service (Service de données communes).

Sélectionnez la devise EUR et la langue French pour les données stockées dans la base de données.

Vous ne pourrez plus changer la devise ou la langue une fois la base de données créée.

Notez que Microsoft se réserve le droit d’utiliser vos noms d’entité et de champs pour améliorer leur Common Data Service. En revanche, ils n’utilisent pas le contenu de vos tables de base de données.

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

Créer ma base de données

Ensuite, cliquez ou tapez sur le bouton Créer une base de données.

Patientez quelques minutes, le temps de la création de la base de données sur le service de données communes. Ce temps est variable, mais comptez au moins 3 à 5 minutes.

Si d’aventures, vous obtenez un message d’erreur, cliquez à nouveau sur le bouton Créer une base de données.

Une fois la base de données créée, cliquez ou tapez sur Environnements (volet de gauche) pour afficher la liste des environnements de la page Environnements.

Remarquez la présence d’une chaîne de caractères entre parenthèses, à côté du nom de l’environnement, comme orgfe408f65. C’est le nom unique de la division racine dans Dynamics 365 Customer Engagement. Une division est un groupe logique d’activités professionnelles liées. Une division peut avoir plusieurs sous-divisions.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer une nouvelle base de données dans un environnement existant.

Catégories
Prestations Audits Formations

Créer un environnement de développement pour PowerApps

Objectif

Cet exemple vous explique comment créer un environnement de développement.

Prérequis

  • Pour réaliser cet exercice, vous devez aller sur le site de Microsoft ci-dessous, afin d’activer une version d’évaluation gratuite PowerApps Plan 2.

https://make.powerapps.com/signup?redirect=marketing&email=

Pratique

Ouvrez le centre d’administration PowerApps et identifiez-vous avec votre compte de tenant.

https://admin.powerapps.com/

Dans le volet de navigation (à gauche), cliquez ou tapez sur Environnements.

Puis cliquez ou tapez sur Nouvel environnement (en haut et à droite de l’écran).

Dans la boîte de dialogue Nouvel environnement, entrez le nom suivant pour l’environnement : Formation.

Puis sélectionnez votre région Europe et un type d’environnement Essai.

La région proposée par défaut est la région d’origine du tenant Azure Active Directory. Toutefois, vous pouvez la changer lors de la création de l’environnement. En revanche, vous ne pourrez plus la changer une fois que l’environnement sera créé.

Ensuite, cliquez ou tapez sur le bouton Créer un environnement.

Une fois l’environnement créé, vous recevez un message de confirmation dans la boîte de dialogue qui vous propose de créer une base de données.

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

Créer une base de données

Cliquez ou tapez sur le bouton Créer une base de données.

Cette action active l’accès au Common Data Service (Service de données communes).

Sélectionnez la devise EUR et la langue French pour les données stockées dans la base de données.

Vous ne pourrez plus changer la devise ou la langue une fois la base de données créée.

Gardez cochée la case Inclure des exemples d’applications et de données.

Notez que Microsoft se réserve le droit d’utiliser vos noms d’entité et de champs pour améliorer leur Common Data Service. En revanche, ils n’utilisent pas le contenu de vos tables de base de données.

Ensuite, cliquez ou tapez sur le bouton Créer une base de données.

Attendez la disparition du bandeau bleu qui vous informe que la configuration de la base de données est en cours.

Le temps de la configuration de la base de données sur le service de données communes est variable, mais comptez au moins 3 à 5 minutes. À la fin de la configuration, l’écran s’actualisera automatiquement et le bandeau bleu disparaîtra comme par magie.

Une fois la base de données créée, votre nouvel environnement apparaît dans la liste des environnements de la page Environnements.

Fin des manipulations

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer un environnement de développement.

Catégories
Prestations Audits Formations

Démarrer un flux Power Automate dans une application PowerApps

Objectif

Cet exemple vous explique comment démarrer un flux dans une application canevas PowerApps.

Prérequis

  • La liste lstAffaires doit exister dans votre site SharePoint.

Créer le flux

Vous allez créer le flux Flow. Pour ce faire :

Ouvrez le centre des processus et tâches Microsoft Flow :

https://emea.flow.microsoft.com/fr-fr/

Dans le volet de navigation (à gauche), cliquez ou tapez sur Mes flux.

Dans le menu supérieur, cliquez ou tapez sur le menu Nouveau.

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

Nouveau flux
Nouveau flux

Puis cliquez ou tapez sur Automatisé – à partir de zéro.

Si la fenêtre Générer un flux automatisé s’ouvre, cliquez sur Ignorer.

Vous allez indiquer le connecteur à utiliser. Pour ce faire, dans la zone Rechercher parmi les connecteurs et les déclencheurs, saisissez powerapps et faites entrée.

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

Connecteur PowerApps
Connecteur PowerApps

Dans la liste des déclencheurs, cliquez ou tapez sur PowerApps de PowerApps.

Cliquez sur Nouvelle étape.

Dans la zone de recherche parmi les actions, entrez Créer un élément.

Dans la liste des actions qui s’affiche, cliquez ou tapez sur Créer un élément dans SharePoint.

Si un pop-up intitulé Entrer l’adresse et le nom de liste/bibliothèque du site SharePoint s’affiche, cliquez sur Reçu (ou sur Ne plus afficher).

Cliquez ou tapez dans la zone Adresse du site, patientez quelques secondes puis sélectionnez l’adresse du site SharePoint qui porte votre prénom.

Cliquez ou tapez dans la zone Nom de la liste, patientez quelques secondes puis sélectionnez votre liste (lstAffaires).

Cliquez ou tapez dans la zone Titre, puis dans la fenêtre de contenu dynamique, recherchez et ajoutez le paramètre Demander dans PowerApps : le nom du paramètre change automatiquement en Créerunélément_Titre.

Le rôle de Demander dans PowerApps est de faire un lien entre Flow et PowerApps pour chaque champ qui le nécessite. Cela signifie que PowerApps va transmettre le contenu du champ titre au champ Titre de Flow à travers Créerunélément_Titre.

Ensuite, cliquez ou tapez dans la zone FinWkf, et saisissez : non.

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

Flux PowerApps
Flux PowerApps

Renommer le flux de travail

Maintenant, vous allez renommer votre flux.

Pour ce faire, cliquez, en haut et à gauche de l’écran, sur Sans titre.

Saisissez le texte : NouvelleAffaire (sans espace).

Vérifier le flux

Vous allez vérifier votre flux.

Pour ce faire, cliquez, en haut et à droite de l’écran, sur le lien Vérificateur de flux.

Un volet apparaît sur la droite. Normalement, vous devez avoir 0 erreur et 0 avertissement. Dans le cas contraire, demandez de l’aide à votre formateur.

Faites attention que le vérificateur de flux ne capte pas toutes les erreurs. Vous pouvez avoir des erreurs lors de l’enregistrement et lors de l’exécution du flux.

Si vous n’avez pas d’erreur, ni d’avertissement, fermez en cliquant sur l’icône X en haut et à droite du volet.

Enregistrer le flux

Vous allez enregistrer votre flux.

Pour ce faire, cliquez, en haut et à droite de l’écran, sur le lien Enregistrer. Vous pouvez aussi cliquer sur le bouton Enregistrer qui se trouve sous le flux.

Si vous avez un message sur un bandeau rouge en haut de l’écran, il s’agit d’une erreur. Dans ce cas, demandez de l’aide à votre formateur.

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.

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

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

Dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Mode téléphone sous Application vide, puis patientez.

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

En bas, cliquez sur le bouton 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.

Insérer un contrôle Entrée de texte (Text input)

Un contrôle Entrée de texte permet de saisir du texte ou des nombres.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Texte puis sélectionnez Entrée de texte : une entrée de texte apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : TextInput1.

Dans l’arborescence (à gauche), cliquez sur le contrôle TextInput1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et supprimez Entrée de texte : la case doit être vierge.

Dans l’arborescence (à gauche), cliquez sur le contrôle TextInput1 puis cliquez sur les 3 petits points (…) puis dans le menu cliquez sur Renommer et renommez en affaireTitre.

Insérer un contrôle Bouton (Button)

Un contrôle Bouton permet d’interagir avec l’application.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Bouton : un bouton apparaît sur l’écran central. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Button1.

Avec la souris, sélectionnez Button1 sur l’écran central puis glissez Button1 sous affaireTitre.

Dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Bouton par Créer.

Dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez sur les 3 petits points (…) puis dans le menu cliquez sur Renommer et renommez en affaireCreer.

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

Ecran avec 2 contrôles
Ecran avec 2 contrôles

Relier au flux

Dans l’arborescence (à gauche), cliquez sur le contrôle affaireCreer pour le sélectionner, puis cliquez dans le menu Action, et cliquez sur Flows : un volet s’ouvre à droite.

Cliquez sur le nom du flux : NouvelleAffaire.

Patientez une dizaine de secondes : une formule a été créée automatiquement dans la barre de formules.

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

Paramétrer la formule
Paramétrer la formule

Cliquez dans la barre de formule, juste après la parenthèse et complétez la formule pour obtenir exactement.

NouvelleAffaire.Run(affaireTitre.Text)

Cette formule permet de transmettre à PowerApps le contenu du champ titre.

Fermez le volet Données.

Enregistrer l’application

Cliquez sur le ruban Fichier puis cliquez sur Enregistrer.

Cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Exécuter l’application PowerApps

Cliquez sur Screen1.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

Dans la zone d’entrée de texte, tapez le texte : Chevaux en bois.

Fermez le mode Aperçu en appuyant sur la touche Échap du clavier. Vous pouvez aussi fermer le mode Aperçu, à l’aide de la croix en haut et à droite.

Si un pop-up apparaît, lisez-le puis fermez-le.

Ensuite, ouvrez la liste lstAffaires : la nouvelle affaire a bien été créée.

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

Liste lstAffaires mise à jour
Liste lstAffaires mise à jour

Fin des manipulations

L’exercice est terminé.

Bonus

Si vous en voulez plus : modifiez le flux pour que les nouvelles affaires disposent d’un champ IDAffaire qui soit attribué aléatoirement entre 1000 et 10000.

Résumé

Dans cet exercice, vous avez appris démarrer un flux dans une application canevas PowerApps. Ce n’était pas demandé, mais vous auriez pu mettre à jour plusieurs éléments de la liste à partir de PowerApps. Par ailleurs, il aurait aussi été possible de démarrer plusieurs flux à partir de cette application PowerApps.

Article mis à jour le 09.11.2018.

Catégories
Prestations Audits Formations

Créer un pop-up de confirmation dans PowerApps

Objectif

Lors d’une suppression d’un élément, il est préférable d’afficher une demande de confirmation à l’utilisateur de l’application PowerApps. Cette demande de confirmation permet de s’assurer notamment que l’utilisateur n’a pas cliqué par erreur sur le bouton de suppression.

La demande de confirmation se présente souvent d’un pop-up. Celui-ci affiche généralement un message avec un bouton pour confirmer et un bouton pour revenir en arrière.

L’objet de cet exercice est de voir comment implémenter ce pop-up. Il permet aussi de découvrir le regroupement de contrôles dans un nouveau contrôle.

Plus précisément, dans l’application PowerApps, vous allez utiliser 4 contrôles : 1 rectangle pour griser le fond de l’écran, 1 contrôle pour afficher un message de demande de confirmation, 1 bouton de confirmation et 1 bouton d’annulation de la suppression.

Le bouton de confirmation supprimera réellement l’élément.

Le bouton d’annulation reviendra à l’écran sans rien supprimer.

Ces 4 contrôles seront dans un groupe. Le groupe s’affichera uniquement en fonction de la valeur d’une variable booléenne.

Cette variable sera créée et alimentée grâce au contrôle de suppression de l’écran de modification. En effet, généralement c’est l’écran de modification qui propose la suppression d’un élément. Toutefois, il est possible de mettre un contrôle de suppression sur un contrôle galerie, par exemple.

Prérequis

Modifier une application existante

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

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canFruits.

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

Modification de l'application canFruits
Modification de l’application canFruits

Dans la liste qui apparaît, cliquez sur Modifier. Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

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

Application canFruits en modification
Application canFruits en modification

Créer une variable associée à la suppression

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Avec la méthode de votre choix, renommez le contrôle Icon1 en IconSuppression. Le contrôle Icon1 est la corbeille.

Copiez le contenu de la propriété OnSelect du contrôle IconSuppression, dans un fichier texte quelconque. A peu de choses près, vous pourrez le réutiliser plus tard, lorsque la suppression sera confirmée. Le contenu est le suivant :

Remove(lstFruits; BrowseGallery1.Selected);;Navigate(EcranListe;
ScreenTransition.None)

Ensuite, définissez la propriété OnSelect du contrôle IconSuppression avec cette nouvelle formule.

OnSelect = UpdateContext({boolSuppression: true})

Cette formule permet de créer une variable locale qui s’intitule boolSuppression et de définir sa valeur à true (vraie). Elle permettra de décider plus loin, s’il faut afficher ou non, la fenêtre de confirmation.

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

Insérer et définir un contrôle Rectangle

Afin de simuler la superposition du pop-up sur l’écran en cours, il est d’usage de flouter l’arrière-plan. Pour cela, vous allez utiliser un rectangle semi-transparent.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Cliquez sur le ruban Insérer puis cliquez sur Icônes puis cliquez sur Rectangle (presque tout en bas de la liste) : le contrôle Rectangle1 s’affiche.

Renommez Rectangle1 en rctSuppression. Les 3 premières lettres du nom du rectangle sont rct. C’est une abréviation de rectangle.

Définissez les propriétés suivantes de rctSuppression :

Fill = RGBA(219; 219; 219; 0,50)
Height = 1136
Width = 640
X = 0
Y = 0

Ces propriétés définissent essentiellement l’aspect du rectangle.

Insérer et définir un contrôle Étiquette

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Cliquez sur le ruban Insérer puis cliquez sur Étiquette : le contrôle Label1 s’affiche.

Renommez Label1 en lblSuppression. Les 3 premières lettres du nom de l’étiquette sont lbl. C’est une abréviation de label, soit étiquette en français.

Définissez les propriétés suivantes de lblSuppression :

BorderThickness = 5
Color = RGBA(0; 0; 0; 1)
Fill = RGBA(215; 223; 240; 1)
Text = "Confirmez-vous la suppression ?"
Size = 26
Height = 140
Width = 580
X = 30
Y = 248

Ces propriétés définissent essentiellement l’aspect de l’étiquette.

Insérer et définir un premier contrôle Bouton

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Cliquez sur le ruban Insérer puis cliquez sur Entrée puis cliquez sur Bouton : le contrôle Bouton1 s’affiche.

Renommez Bouton1 en btbSuppression. Les 3 premières lettres du nom du bouton sont btn. C’est une abréviation de button, soit bouton en français.

Définissez les propriétés suivantes de btbSuppression :

BorderThickness = lblSuppression.BorderThickness
BorderColor = lblSuppression.BorderColor
Color = lblSuppression.Color
Fill = lblSuppression.Fill
Text = "Oui"
Size = lblSuppression.Size
Height = 70
Width = 290
X = lblSuppression.X
Y = 388
OnSelect = Remove(lstFruits; BrowseGallery1.Selected);;UpdateContext({boolSuppression:
false});;Navigate(EcranListe; ScreenTransition.None)

La propriété OnSelect supprime l’élément, met à jour la variable boolSuppression à false (faux) et affiche l’écran EcranListe.

Vous noterez aussi que certaines propriétés du contrôle sont alimentées par les valeurs des propriétés du contrôle lblSuppression. Quand cela a du sens, c’est pratique pour modifier en une fois tous les contrôles concernés.

Insérer et définir un second contrôle Bouton

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Copiez-coller le bouton btbSuppression.

Renommez btbSuppression_1 en btbAnnulation. Les 3 premières lettres du nom du bouton sont btn. C’est une abréviation de button, soit bouton en français.

Définissez les propriétés suivantes de btbAnnulation :

BorderThickness = lblSuppression.BorderThickness
BorderColor = lblSuppression.BorderColor
Color = lblSuppression.Color
Fill = lblSuppression.Fill
Text = "Non"
Size = lblSuppression.Size
Height = 70
Width = 290
X = 320
Y = 388
OnSelect = UpdateContext({boolSuppression: false})

La propriété OnSelect met à jour la variable boolSuppression à false (faux).

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

Message de demande de confirmation
Message de demande de confirmation

Grouper les contrôles

Dans cette section, vous allez regrouper les contrôles liés à la demande de confirmation. L’intérêt d’avoir un groupe est de pouvoir faire apparaître ou disparaître les 4 contrôles simultanément. Comme un groupe est un contrôle, il possède des propriétés. Notamment, la propriété Visible du groupe va servir à l’afficher ou pas.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

Sélectionnez les 4 contrôles suivants : rctSuppression, lblSuppression, btbSuppression et btbAnnulation puis faites un clic droit sur la souris et sélectionnez le menu Groupe : le contrôle Group1 est créé.

Le regroupement des 4 contrôles permet de les manipuler d’un seul bloc.

Renommez Group1 en grpSuppression. Les 3 premières lettres du nom du groupe sont grp. C’est une abréviation de Group, soit groupe en français.

Maintenant, il reste à mettre en œuvre la visibilité ou non du groupe.

Pour ce faire, définissez les propriétés suivantes de grpSuppression :

Visible = boolSuppression

La propriété Visible indique s’il faut afficher ou non le groupe. Cet affichage dépend de la valeur de la variable boolSuppression.

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

Message de demande de confirmation
Message de demande de confirmation

Enregistrer et tester l’application

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

Cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Appuyez sur la touche F5.

Procédez à des tests. Par exemple, vous pouvez faire une tentative de suppression d’un élément. Puis, ensuite, vous pouvez faire une réelle suppression.

Une fois vos vérifications terminées, fermez la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier.

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 implémenter un pop-up de confirmation. Vous avez aussi découvert le regroupement de contrôles dans un nouveau contrôle.

Article mis à jour le 30.10.2019.

Catégories
Prestations Audits Formations

Ajouter une connexion SharePoint Online dans PowerApps

Objectif

Cet exercice vous explique comment ajouter une nouvelle connexion SharePoint Online dans PowerApps.

L’objectif est de relier une nouvelle liste SharePoint à l’application, afin de pouvoir sélectionner ces valeurs dans la liste existante. Cette manipulation est équivalente à l’utilisation du type de colonne Rechercher dans SharePoint.

Toutefois, il existe des différences importantes. En effet, cette manipulation permet de récupérer le contenu de n’importe quelle liste de n’importe quel site SharePoint. Ce qui n’est pas le cas avec la colonne Rechercher qui est limitée aux listes du site.

Par ailleurs, pour des raisons pédagogiques, la nouvelle connexion est faite dans cet exercice avec une liste SharePoint. En réalité, la nouvelle connexion pourrait se faire avec n’importe quelle source de données PowerApps et pas uniquement une liste SharePoint.

Prérequis

  • L’exercice du TP Créer une application PowerApps doit être terminé avec succès.
  • La liste lstFruits doit exister dans votre site SharePoint.
  • La liste lstProducteurs doit exister dans votre site SharePoint.

Modifier une application existante

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

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application canFruits.

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

Modification de l'application CanFruits
Modification de l’application CanFruits

Dans la liste qui apparaît, cliquez sur Modifier. Patientez quelques instants.

Si un pop-up vous demande l’autorisation de vous connecter à SharePoint, cliquez sur Autoriser.

À l’issue de ce temps de préparation, il est possible que vous obteniez un pop-up de bienvenue.

Dans ce pop-up, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

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

Application canFruits en modification
Application canFruits en modification

Personnaliser une carte de données

Pour changer un champ texte en liste déroulante qui pointe sur une autre liste, il faut personnaliser sa carte de données. Vous ne pouvez pas changer le type du contrôle. Vous devrez donc supprimer le contrôle existant puis ensuite, insérer un nouveau contrôle de type liste déroulante. Par ailleurs, comme la suppression du contrôle existant va générer des erreurs, il faudra les corriger en substituant le nom du nouveau contrôle à la place de l’ancien nom.

Vous allez voir comment faire ci-dessous.

Tout d’abord, développez EditForm1 qui se trouve sous EcranModification.

Ensuite, cliquez sur la carte qui s’intitule Producteur_DataCard1.

Pour personnaliser la carte Producteur, ouvrez ses propriétés avancées et cliquez sur Déverrouiller pour modifier les propriétés.

Ensuite, ouvrez la carte Producteur_DataCard1 pour faire apparaître ses contrôles.

Maintenant, il faut supprimer uniquement le contrôle de saisie du producteur DataCardValue4. Il ne faut pas supprimer la carte. Pour supprimer DataCardValue4, sélectionnez le dans l’arborescence puis appuyez sur la touche Suppr de votre clavier.

Pour l’instant, ne vous préoccupez pas des icônes rouges. Ces icônes rouges sont liées à la suppression du contrôle. En effet, il subsiste des formules qui font toujours référence aux propriétés de DataCardValue4. Ces erreurs vont être bientôt corrigées.

Insérer un contrôle Liste déroulante

Maintenant, il faut insérer un contrôle Liste déroulante dans Producteur_DataCard1. Pour ce faire, sélectionnez la carte Producteur_DataCard1 dans l’arborescence.

Ensuite, cliquez dans l’onglet Insérer puis cliquez sur Contrôles, et sélectionnez Liste déroulante : un nouveau contrôle apparait (Dropdown1) dans la carte.

Avant de continuer, vérifiez bien que le contrôle Dropdown1 est contenu dans Producteur_DataCard1. Si ce n’est pas le cas, supprimez le contrôle et recommencez.

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

Nouveau contrôle Producteur_DataCard1
Nouveau contrôle Producteur_DataCard1

Comme l’affichage est un peu encombré, vous allez l’aérer.

Pour ce faire, supprimez complètement la carte Pièces jointes_DataCard1.

Ensuite, agrandissez la carte Producteur_DataCard1 avec la souris.

Puis, déplacez le contrôle Dropdown1 sous producteur avec la souris.

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

Aménagement de l'écran (vue partielle)
Aménagement de l’écran (vue partielle)

Avec la méthode de votre choix, renommez le contrôle Dropdown1 en ListeDeroulanteProducteurs.

Ajouter une nouvelle source de données

Maintenant, vous allez ajouter une source de données de type SharePoint.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît.

Patientez quelques instants.

Dans cette liste, sélectionnez le site SharePoint qui porte votre prénom.

Sous Choisir une liste, cochez la case lstProducteurs, puis cliquez sur Se connecter (en bas du volet).

À partir de maintenant, vous pouvez utiliser les données de cette liste dans votre application.

Ouvrez l’arborescence.

Dans l’arborescence, cliquez sur ListeDeroulanteProducteurs.

Dans la propriété Par défaut, changez la valeur 1 par :

Parent.Default

Cette formule récupère la valeur par défaut de la liste.

Dans la propriété avancée Items, changez la valeur DropDownSample par :

lstProducteurs.Titre

Cette formule affiche le contenu de la liste lstProducteurs.

Corriger les erreurs

Vous allez corriger les erreurs liées à la suppression du contrôle DataCardValue4.

Pour ce faire, cliquez sur Producteur_DataCard1.

Dans le sélecteur de propriétés du ruban, sélectionnez Update.

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

Propriété Update
Propriété Update

Dans la zone de la formule, remplacez son contenu avec la formule suivante :

ListeDeroulanteProducteurs.Selected.Titre

Cette formule affiche la valeur du champ sélectionné.

Ensuite, cliquez sur ErrorMessage4.

Dans le sélecteur de propriétés du ruban, sélectionnez Y.

Dans la zone de la formule, remplacez son contenu avec la formule suivante :

ListeDeroulanteProducteurs.Y + ListeDeroulanteProducteurs.Height

Cette formule calcule la nouvelle valeur de Y (axe des ordonnées) en fonction de la hauteur du champ.

Exécuter l’application PowerApps

Avant d’exécuter l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Ensuite, cliquez sur EcranModification.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

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

Affichage de la liste déroulante
Affichage de la liste déroulante

Changez le producteur du fruit sélectionné, puis validez votre choix.

Fermez le mode Aperçu en appuyant sur la touche Échap du clavier. Vous pouvez aussi fermer le mode Aperçu, à l’aide de la croix en haut et à droite.

Vérifiez que la liste lstFruits a bien été mise à jour.

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

Liste lstFruits à jour
Liste lstFruits à jour

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment ajouter et utiliser une nouvelle connexion SharePoint Online dans PowerApps.

Article modifié le 19.10.2019

Catégories
Prestations Audits Formations

Publier et Versionner une application PowerApps

Objectif

Cet exemple vous explique comment publier et restaurer une version d’une application PowerApps.

Publier une application vous permet de déployer les modifications faites dans une application Microsoft PowerApps.

Les versions d’une application PowerApps permettent de revenir à une version précédente de votre application. Dans leur fonctionnement, elles sont similaires aux versions d’une bibliothèque SharePoint.

Personnaliser une application PowerApps

Vous allez changer l’alignement du stock pour le mettre à droite.

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 le volet central, cochez la case en face d’une application déjà publiée, afin de la sélectionner. Dans ce scénario, il s’agit de l’application qui s’intitule canFruits.

Dans la bannière (en haut), cliquez sur Modifier : un nouvel onglet s’ouvre à droite.

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.

Dans l’arborescence (à gauche), cliquez sur le contrôle Body1 (sous EcranListe et BrowseGallery1) puis, dans ses propriétés (à droite), cliquez sur droite (right) dans Alignement du texte.

Enregistrer l’application

Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Si une bannière vous propose de publier l’application pour la partager, ignorez-la.

Une fois enregistrée, ne cliquez pas sur le bouton Publier !

La publication permet de rendre vos modifications publiques. En effet, l’enregistrement stocke vos modifications mais celles-ci ne sont pas encore visible. Vous allez le vérifier.

Ne fermez pas cet écran.

Tester le partage

Pour vérifier que votre modification n’est pas encore visible, vous allez utiliser l’application avec le compte d’Alice.

Pour ce faire, ouvrez un autre navigateur web que celui que vous utilisez actuellement. Par exemple, si vous utilisez Google Chrome, ouvrez Microsoft Edge ou Firefox. Vous pourriez garder le même navigateur web. Toutefois, le fait de disposer de deux navigateurs différents vous évite de jongler entre les comptes.

Dans le nouveau navigateur web, ouvrez le site :

https://portal.office.com

Renseignez le compte de l’utilisateur Alice puis son mot de passe.

Si vous avez oublié le compte ou le mot de passe de l’utilisateur, vous pouvez les récupérer dans votre email.

Éventuellement, vous pouvez aussi le réinitialiser dans l’AD avec un nouveau mot de passe.

Une fois l’ouverture du site, fermez les pop-ups qui surgissent éventuellement.

Dans la page d’accueil du site Office 365, cliquez sur Outlook qui s’ouvre.

Une fois que Outlook est ouvert, fermez les pop-ups qui surgissent éventuellement.

Dans Outlook, cherchez et ouvrez le message qui vous indique que l’application PowerApps est partagée avec vous.

Dans ce message, cliquez sur le bouton Open : l’application se lance.

Vous constatez immédiatement que les valeurs du stock ne sont pas alignées à droite.

Appuyez 2 ou 3 fois sur CTRL + F5 de votre clavier pour rafraîchir l’affichage : les valeurs du stock ne sont toujours pas alignées à droite.

C’est normal car vous n’avez pas encore publié votre application.

Ne fermez pas cet écran.

Revenez sur le navigateur précédent, où vous avez modifié l’application.

Publier l’application

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

Maintenant, cliquez sur le bouton Publier : un pop-up apparaît qui vous rappelle que les utilisateurs autorisés verront la nouvelle version de l’application.

Dans ce pop-up, cliquez sur le bouton Publier cette version.

Ne fermez pas cet écran.

Tester la publication

Pour vérifier que votre modification est visible, vous allez utiliser l’application avec le compte d’Alice.

Revenez sur le navigateur d’Alice.

Sur le navigateur d’Alice, appuyez sur touche F5 de votre clavier pour rafraîchit son écran.

Vous constatez immédiatement que les valeurs du stock sont alignées à droite.

Les modifications ont été publiées.

Ne fermez pas cet écran.

Revenez sur le navigateur précédent, où vous avez modifié l’application.

Versionner l’application

Normalement, vous devriez être sur le volet Enregistrer.

Cliquez sur le bouton Afficher toutes les versions : la liste des versions apparaît.

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

Liste des versions
Liste des versions

Dans cet exemple, vous avez 3 versions. La dernière version (Version 3) est celle qui vient d’être publiée : elle est dans un état Actif. Vous allez restaurer la version précédente.

Pour ce faire, cochez la case de la version précédente.

Dans la bannière (en haut), cliquez sur Restaurer : un pop-up vous demande de confirmer la restauration.

Dans ce pop-up, cliquez sur le bouton Restaurer.

Si un message vous indique que l’application est verrouillée, fermez les autres onglets PowerApps et recommencez.

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

Version restaurée
Version restaurée

Faites attention que la version a bien été restaurée mais qu’elle n’est pas encore publiée. Si vous souhaitez réellement revenir à la version précédente en production, vous devez la publier.

Pour ce faire, cliquez sur les 3 petits points (“…”) en face de la dernière version, puis cliquez sur Publier cette version : un volet s’ouvre.

Dans ce volet, cliquez sur le bouton Publier cette version.

Une fois que vous l’aurez fait, vous vérifierez que les modifications ont été publiées grâce au compte d’Alice. Notamment, vous constaterez que les valeurs du stock sont à nouveau alignées à gauche.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment publier et restaurer une version d’une application PowerApps.

Vous avez pu aussi vérifier les conséquences de la publication.

Article mis à jour le 11.10.2019

Catégories
Prestations Audits Formations

Partager et Autoriser une application PowerApps

Cet exemple vous explique comment partager une application PowerApps, grâce à une série d’autorisations.

Prérequis

  • Créez un compte dans Office 365, comme celui d’Alice Martin.
  • Attribuez une licence Office 365 au compte Alice Martin avant de commencer l’exercice.
  • L’exercice du TP Créer une application PowerApps doit être terminé avec succès.
  • La liste lstFruits doit exister dans votre site SharePoint.

Partager 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 volet central, cochez la case en face d’une application déjà publiée, afin de la sélectionner. Dans ce scénario, il s’agit de l’application qui s’intitule canFruits.

Dans la bannière (en haut), cliquez sur Partager : un grand volet s’ouvre à droite.

Vous pouvez partager l’application avec un utilisateur ou un groupe. Vous pouvez le faire en entrant un nom, une adresse email d’utilisateurs ou de groupes de sécurité Azure Active Directory avec lesquels vous souhaitez partager l’application.

Il n’est pas possible de partager une application avec un groupe de distribution de l’organisation ou avec un utilisateur ou un groupe qui n’appartient pas à votre organisation.

Dans ce scénario, entrez Alice.

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

Partage d'une application PowerApps
Partage d’une application PowerApps

Sélectionnez le compte Alice mais ne cliquez pas sur le bouton Partager.

Vous pourriez éventuellement autoriser Alice à être copropriétaire de l’application en cochant la case Copropriétaire. Dans ce cas, elle pourrait aussi modifier ou partager l’application. Toutefois, elle ne pourrait pas la supprimer ou modifier les propriétaires. Même s’il existe plusieurs propriétaires, une seule personne peut modifier une application à un instant t. Il n’est pas possible que deux personnes puissent modifier simultanément l’application. Pour l’instant, ne cochez pas la case Copropriétaire.

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

Partage en cours d'une application PowerApps
Partage en cours d’une application PowerApps

Ne fermez pas ce volet.

Définir des autorisations de la source de données

L’application sélectionnée manipule les données d’un site SharePoint. Vous devez donc donner les autorisations suffisantes sur SharePoint aux utilisateurs avec lesquels vous partagez l’application.

Puisque le site SharePoint qui porte votre prénom hérite par défaut des autorisations du site Extranet, vous allez partager le site SharePoint Extranet avec Alice.

Pour ce faire, ouvrez le site SharePoint Extranet.

Dans le coin supérieur droit de votre site, cliquez sur l’icône membre : un volet s’ouvre.

Dans ce volet, cliquez sur Ajouter des membres.

Dans la boîte de dialogue, entrez Alice puis cliquez sur le bouton Enregistrer.

Une fois que le partage du site SharePoint est fait, revenez au volet de partage de l’application PowerApps.

Au bas du panneau de partage, cliquez sur le bouton Partager.

Par défaut, les utilisateurs concernés recevront un email pour les prévenir que l’application est partagée avec eux. Celui-ci contient un lien qui ouvre l’application. Si l’utilisateur ouvre le lien à partir d’un appareil mobile, l’application s’ouvre dans PowerApps Mobile. Si l’utilisateur ouvre le lien à partir d’un ordinateur de bureau, l’application s’ouvre dans un navigateur.

Les copropriétaires de l’application recevront un email supplémentaire. Celui-ci contient un lien qui ouvre l’application pour la modifier.

Tester le partage

Vous allez tester le partage avec le compte d’Alice.

Pour ce faire, ouvrez un autre navigateur web que celui que vous utilisez actuellement. Par exemple, si vous utilisez Google Chrome, ouvrez Microsoft Edge ou Firefox. Vous pourriez garder le même navigateur web. Toutefois, le fait de disposer de deux navigateurs différents vous évite de jongler entre les comptes.

Dans le nouveau navigateur web, ouvrez le site :

https://portal.office.com

Renseignez le compte de l’utilisateur Alice puis son mot de passe.

Si vous avez oublié le compte ou le mot de passe de l’utilisateur, vous pouvez les récupérer dans votre email.

Éventuellement, vous pouvez aussi le réinitialiser dans l’AD avec un nouveau mot de passe.

Une fois l’ouverture du site, fermez les pop-ups qui surgissent éventuellement.

Dans la page d’accueil du site Office 365, cliquez sur Outlook : un nouvel onglet s’ouvre.

Dans le nouvel onglet, sélectionnez votre fuseau horaire : (UTC+01:00) Brussels, Copenhagen, Madrid, Paris puis cliquez sur Enregistrer.

Une fois que Outlook est ouvert, fermez les pop-ups qui surgissent éventuellement.

Dans Outlook, cherchez et ouvrez le message qui vous indique que l’application PowerApps est partagée avec vous.

Dans ce message, cliquez sur le bouton Ouvrez l’application : le pop-up d’autorisation s’affiche.

Si vous ne voyez qu’un écran blanc, c’est probablement parce que l’application n’a pas été publiée. Publiez l’application et partagez à nouveau l’application avec Alice.

Sous SharePoint, cliquez sur Afficher les autorisations afin d’obtenir la liste des autorisations nécessaires pour faire fonctionner l’application. Notamment, l’application peut Lire les noms de listes et de bibliothèques, ainsi que les noms des colonnes ; Créer, lire mettre à jour, copier et supprimer des fichiers et des métadonnées ; Créer, lire, mettre à jour et supprimer des éléments de liste.

Cette manipulation est nécessaire pour des raisons de sécurité. En effet, vous devez vous assurer que les autorisations nécessaires sont cohérentes avec l’objet de l’application.

Cliquez sur le bouton Fermer, pour fermer la fenêtre de SharePoint.

Cliquez sur le bouton Autoriser : l’application se lance.

Dans la zone Rechercher des éléments, tapez la lettre i : tous les fruits avec cette lettre restent affichés (Citron, Mandarine).

Enlevez la lettre i dans la zone de recherche.

Cliquez deux ou trois fois sur l’icône de tri afin de vérifier que les éléments sont triés en ordre croissant ou décroissant sur le nom du fruit.

Fermez l’onglet de l’application.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment partager une application publiée. Vous avez pu vérifier que l’utilisateur pouvait manipuler l’application.

Article mis à jour le 04.10.2019

Catégories
Prestations Audits Formations

Créer des listes en cascade dans 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.

Objectif

Les listes en cascade sont basées généralement sur au moins deux listes déroulantes. Il y a une relation de dépendance entre ces listes déroulantes.

Par exemple, une première liste des départements énumère les départements. Lorsque l’utilisateur sélectionne un département dans cette liste déroulante, la seconde liste déroulante affiche les villes du département.

Ce mécanisme est très pratique. En effet, il réduit la quantité d’informations exposées à l’utilisateur. Celui-ci peut donc faire son choix plus efficacement.

Dans l’exemple de cet exercice, une liste déroulante va afficher la liste des identifiants des fournisseurs de la liste lstAffaires. Une seconde liste déroulante affichera la liste des affaires du fournisseur sélectionné.

Prérequis

  • La liste lstAffaires doit exister dans votre site SharePoint.

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

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 dans le volet de gauche.

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.

Se connecter aux données

Dans le menu du haut, cliquez sur le ruban Affichage.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît.

Patientez quelques instants.

Dans cette liste, sélectionnez votre site SharePoint.

Sous Choisir une liste, cochez la case lstAffaires, puis cliquez sur Se connecter (en bas du volet).

Lorsque la connexion est terminée, cliquez sur la croix en haut et à droite du volet Source de données pour fermer ce volet.

Insérer et définir un premier contrôle Liste déroulante (Dropdown)

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Cliquez sur le ruban Insérer puis cliquez sur Contrôles puis cliquez sur Liste déroulante : une liste déroulante apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1: Dropdown1.

Dans l’arborescence, double-cliquez sur Dropdown1, et nommez-le : ListeDeroulanteFournisseur.

Ensuite, définissez les propriétés suivantes de ListeDeroulanteFournisseur :

Items = Distinct(lstAffaires.FournisseurID;FournisseurID)

Cette liste déroulante affiche les identifiants des fournisseurs. Chaque identifiant est un nombre qui se termine par 5.

La fonction Distinct() élimine les doublons d’une liste de valeurs. Par ailleurs, elle retourne une table à une colonne des résultats avec des valeurs en double supprimées. Le nom de la colonne est result. Dans le cas présent, la fonction dédoublonne les valeurs en double de la colonne FournisseurID.

Pour en savoir plus sur Distinct(), consultez la page de Microsoft dédiée aux fonctions : https://coudr.com/powfn.

Petite astuce : la fonction Dictinct() permet de forcer l’alimentation d’une liste déroulante. En effet, il arrive que PowerApps ne renseigne pas le champ de la liste déroulante lors du premier accès à l’écran. L’utilisation, même temporaire, de cette fonction oblige PowerApps à alimenter la liste déroulante.

Insérer et définir un second contrôle Liste déroulante (Dropdown)

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Cliquez sur le ruban Insérer puis cliquez sur Contrôles puis cliquez sur Liste déroulante : une liste déroulante apparaît sur l’écran Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1: Dropdown1.

Déplacez légèrement le contrôle sous le premier, afin de bien voir les deux contrôles.

Dans l’arborescence, double-cliquez sur Dropdown1, et nommez-le : ListeDeroulanteAffaires.

Ensuite, définissez les propriétés suivantes de ListeDeroulanteAffaires :

Items = Distinct(Filter(lstAffaires;FournisseurID = ListeDeroulanteFournisseur.Selected.Result);Titre)

Cette liste déroulante affiche les affaires qui dépendent du fournisseur sélectionné dans la liste déroulante précédente.

Insérer et définir un contrôle Formulaire d’affichage (Display Form)

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

Cliquez sur le ruban Insérer puis cliquez sur Formulaires puis cliquez sur Affichage : un formulaire d’affichage apparaît sur l’écran Screen1.

Ensuite, définissez les propriétés suivantes du formulaire d’affichage :

DataSource = lstAffaires

Ensuite, cliquez sur le lien Choisissez les champs à ajouter à partir du volet Personnalisation. Ce lien se trouve dans le formulaire.

Dans le volet Champs qui s’ouvre, cliquez sur Ajouter un champ.

Cochez :

  • Titre
  • Responsable
  • MontantHT

Puis cliquez sur le bouton Ajouter.

Fermez le volet Champs.

Dans l’onglet Propriétés, modifiez la valeur de la propriété Colonnes de 3 à 1 : les champs se retrouvent l’un en-dessous de l’autre.

Ensuite, définissez les propriétés suivantes du formulaire d’affichage :

Item = LookUp(lstAffaires; Titre = ListeDeroulanteAffaires.Selected.Result)
Heigh = 358
Width = 436
X = 146
Y = 200

La fonction LookUp() utilise 2 paramètres. Le premier paramètre indique la source de données utilisée. Le second paramètre est une formule de filtre.

Dans ce scénario, la fonction LookUp() cherche dans la liste lstAffaires, l’élément dont le titre est égal au choix de la seconde liste déroulante.

Enregistrer et tester l’application

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

Cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Appuyez sur la touche F5.

Procédez à des tests.

Résultat des listes en cascade
Résultat des listes en cascade

Une fois vos vérifications terminées, fermez la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier.

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

Bonus : tri des éléments des listes déroulantes.

Les listes déroulantes ne sont pas triées.

Vous devez les trier dans l’ordre alphabétique du résultat.

Pour cela, utilisez la fonction SortByColumns() pour trier les éléments des listes déroulantes en ordre descendant.

Pour savoir comment utiliser la fonction SortByColumns(), consultez la page de Microsoft dédiée aux fonctions : https://coudr.com/powfn.

Résumé

Dans cet exercice, vous avez appris comment réaliser des listes en cascade dans PowerApps, à partir d’une source de données.

Vous avez aussi vu comment afficher le résultat d’une sélection d’une liste déroulante.

Article mis à jour le 28.09.2019.

Catégories
Prestations Audits Formations

Développer une véritable application PowerApps de A à Z

L’objectif de cet exercice est de découvrir le développement d’une véritable application PowerApps de A à Z.

C’est aussi l’occasion d’apprendre une technique de développement, orientée interface. Outre les explications techniques, les choix ergonomiques et de développement sont explicités : taille des contrôles, choix de boutons et non d’icônes, etc.

Vous verrez aussi une alternative possible dans la méthodologie de développement.

Préparation

Modifier une application existante

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

https://make.powerapps.com/

Dans le volet de gauche, cliquez sur Applications.

Dans le volet central de droite, sous l’onglet Applications récentes, cliquez sur les 3 petits points en face du nom de votre application tabEcrans.

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

Modification de l'application PowerApps TabEcrans
Modification de l’application PowerApps TabEcrans

Dans la liste qui apparaît, cliquez sur Modifier. Patientez quelques instants. Si vous obtenez un pop-up de bienvenue, cliquez sur le bouton Ignorer : votre application s’ouvre en modification.

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

Application PowerApps TabEcrans en modification (vue partielle)
Application PowerApps TabEcrans en modification (vue partielle)

Se connecter aux données

Dans le menu du haut, cliquez sur le ruban Affichage.

Sous Affichage, cliquez sur Source de données : le volet Source de données apparaît à gauche.

En haut du volet Source de données, cliquez dans la zone Rechercher…

Dans cette zone de recherche, saisissez SharePoint puis cliquez sur l’icône bleue SharePoint aide les organisations à partager : ne cliquez pas sur les icônes violettes Common Data Service.

Dans la liste qui s ‘affiche, cliquez sur la première connexion SharePoint : la liste des sites récents apparaît. Patientez quelques instants.

Dans cette liste, sélectionnez votre site SharePoint.

Sous Choisir une liste, cochez la case lstFruits, puis cliquez sur Se connecter (en bas du volet).

Lorsque la connexion est terminée, cliquez sur la croix en haut et à droite du volet Source de données pour fermer ce volet.

Modifier le premier écran

L’application sera utilisée par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Dans ce cas, il est préférable d’utiliser des gros boutons, plutôt que des icones.

Dans l’écran EcranPrincipal, supprimez le contrôle Hexagone avec le bouton Suppr de votre clavier.

Définissez le contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 1046
Y = 668

Insérez un autre contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 22
Y = 668

Vous pouvez aussi copier-coller un contrôle puis modifier les valeurs des propriétés de la copie.

Insérez un contrôle icône de type Rectangle avec les propriétés suivantes :

Fill = Couleurs.Fill
Height = 100
Width = 1366
X = 0
Y = 0

Insérez un contrôle Étiquette avec les propriétés suivantes :

Align = Align.Center
Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 100
Size = 28
Text = "Fruits frais"
Width = 1366
X = 0
Y = 0

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

Écran mis à jour
Écran mis à jour

Cet écran va vous servir de modèle pour l’écran suivant.

Dupliquer l’écran principal pour lister

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

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranListe.

Ensuite, dans l’écran EcranListe, supprimez les deux contrôles Bouton avec le bouton Suppr de votre clavier.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter tout en haut.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranListe puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Galerie (Gallery)

Sur l’écran EcranListe, vous allez insérer un contrôle Galerie vertical.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

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

Sous Insérer, cliquez sur Galerie : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Verticale.

Par défaut, le contrôle Gallery1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle Gallery1.

Ensuite, cliquez dans ses propriétés (à droite), cliquez sur la flèche vers le bas du menu Disposition.

Dans la liste des dispositions, cliquez sur Titre, sous-titre et corps.

Ensuite, définissez les propriétés suivantes de Gallery1 :

Height = 568
Items = lstFruits
Width = 1366
X = 0
Y = 100

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

  • Dans la zone Body1, sélectionnez Stock.
  • Dans la zone Subtitle2, sélectionnez Saisons.
  • Dans la zone Title2, sélectionnez Title.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Vous obtenez l’affichage de la liste des fruits.

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

Galerie mise en forme (vue partielle)
Galerie mise en forme (vue partielle)

Ensuite, définissez les propriétés suivantes de NextArrow2 :

Color = Couleurs.Color

Puis, définissez les propriétés suivantes de Separator2 :

Fill = Couleurs.Fill

Vous allez faire apparaître le nom du producteur entre parenthèse, à coté du nom du fruit.

Pour ce faire, définissez les propriétés suivantes de Title2 :

Text = ThisItem.Titre & " (" & Producteur & ")"

Le champ producteur de la liste SharePoint est volontairement vide, il est donc normal que la parenthèse soit vide. Toutefois, vous devez vous mettre à la place de l’utilisateur de votre application. Celui-ci peut ne pas comprendre la présence de cette paire de parenthèse vide. Vous allez donc rajouter une information qui indique que la provenance est inconnue quand le champ producteur est vide.

Pour ce faire, redéfinissez les propriétés suivantes de Title1 :

Text = ThisItem.Titre & " (" & If(IsBlank(Producteur); "Provenance inconnue"; Producteur) & ")"

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

Nouvelle mise en forme de la galerie (vue partielle)
Nouvelle mise en forme de la galerie (vue partielle)

Cependant, cette mise en forme ne vous convient pas. Vous voulez que le contenu formaté du champ producteur se trouve à côté du champ titre.

Avec la souris, redimensionnez le champ Title2 pour qu’il occupe moins de la moitié de la largeur. La hauteur reste inchangée.

Title2.Height = Title2.Size * 1,8 (soit 36)
Title2.Width = Parent.TemplateWidth – 740 (soit 626)

Ensuite, copiez-collez le champ Title2: vous obtenez un nouveau champ Title2_1. Renommez Title2_1 en Producteur1. Ensuite, avec la souris, déplacez Producteur1 à coté de Title1.

Producteur1.X = 675
Producteur1.Y = 18 

Définissez les propriétés suivantes de Producteur1:

Producteur1.Text = If(IsBlank(Producteur); "Provenance
inconnue"; "Producteur: " & Producteur)

Définissez les propriétés suivantes de Title2 :

Title2.Text = ThisItem.Titre

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

Dernière mise en forme de la galerie (vue partielle)
Dernière mise en forme de la galerie (vue partielle)

Insérer un contrôle Icône (Icon)

Sur l’écran EcranListe, vous allez insérer un contrôle Icône Ajouter.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

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

Sous Insérer, cliquez sur Icônes : la liste des icônes apparaît.

Dans la liste des modèles, sélectionnez + Ajouter.

Ensuite, définissez les propriétés suivantes de Icon1 :

Color = Couleurs.Color
X = 1276
Y = 18

Dupliquer l’écran principal pour afficher

Il faut ensuite développer l’écran détail pour afficher le détail d’un élément.

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

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranDetail.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter au-dessus de l’écran EcranPrincipal.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Formulaire (Form)

Sur l’écran EcranDetail, vous allez insérer un contrôle Formulaire.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

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

Sous Insérer, cliquez sur Formulaire : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Affichage.

Par défaut, le contrôle FormViewer1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle FormViewer1.

Ensuite, définissez les propriétés suivantes de FormViewer1 :

DataSource = lstFruits
Height = 568
Item = Gallery1.Selected
Width = 1366
X = 0
Y = 100

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier les champs à côté de l’étiquette Champs.

Cliquez sur Ajouter un champ : une petite fenêtre s’ouvre dans le volet Champs. Descendez l’ascenseur de cette petite fenêtre jusqu’en bas, pour faire apparaître les champs qui vous intéressent.

Cochez :

  • Producteur
  • Saisons
  • Stock
  • Titre

Puis cliquez sur le bouton Ajouter.

Cliquez sur la flèche à gauche du nom de chaque champ, pour réduire le détail affiché. Vous devrez donc le faire 4 fois.

Avec la souris, déplacez les champs pour être dans cet ordre.

  • Titre
  • Stock
  • Saisons
  • Producteur

Fermez le volet Champs.

Ce formulaire est utilisé par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Vous allez grossir la taille des polices.

Pour ce faire, modifiez la Hauteur de toutes les cartes à 250.

Puis, modifiez la Taille de police de tous les DataCardKey à 32.

Ensuite, modifiez la Taille de police de tous les DataCardValue à 48.

Enfin, modifiez la Hauteur de tous les DataCardValue à 87.

Vous allez afficher les champs sur 2 colonnes.

Pour ce faire, cliquez sur FormViewer1, puis changez la valeur de la propriété Colonnes à 2 (au lieu de 3).

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

Formulaire de détail mis en forme (vue partielle)
Formulaire de détail mis en forme (vue partielle)

Enfin, définissez les propriétés du bouton de gauche : Button2_1.

OnSelect = Navigate(EcranListe;ScreenTransition.Fade)
Text = "Accueil"

Le choix a été fait d’associer un bouton pour revenir à l’accueil.

Insérer un contrôle Bouton (Button)

Sur l’écran EcranDetail, vous allez insérer un contrôle Bouton.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

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

Sous Insérer, cliquez sur Bouton : un bouton s’affiche.

Définissez le contrôle Bouton avec les propriétés suivantes :

Color = Couleurs.Color
Fill = Couleurs.Fill
Height = 84
Size = 28
Width = 304
X = 534
Y = 668

Dupliquer l’écran principal pour modifier

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

Maintenant, vous allez renommer l’écran dupliqué.

Pour ce faire, dans l’arborescence (à gauche), double-cliquez sur l’écran EcranPrincipal_1 puis tapez son nouveau nom : EcranModification.

Puis vous allez déplacer l’écran dupliqué, afin de le remonter au-dessus de l’écran EcranPrincipal.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran EcranModification puis cliquez sur les points de suspension (…) et sélectionnez Monter.

Insérer un contrôle Formulaire (Form)

Sur l’écran EcranModification, vous allez insérer un contrôle Formulaire.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranModification.

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

Sous Insérer, cliquez sur Formulaire : la liste des modèles apparaît.

Dans la liste des modèles, sélectionnez Modifier.

Par défaut, le contrôle Form1 est sélectionné. Si ce n’est pas le cas, dans l’arborescence (à gauche), cliquez sur le contrôle Form1.

Ensuite, définissez les propriétés suivantes de Form1 :

DataSource = lstFruits
Height = 568
Item = Gallery1.Selected
Width = 1366
X = 0
Y = 100

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier les champs à côté de l’étiquette Champs.

Cliquez sur Ajouter un champ : une petite fenêtre s’ouvre dans le volet Champs. Descendez l’ascenseur de cette petite fenêtre jusqu’en bas, pour faire apparaître les champs qui vous intéressent.

Cochez :

  • Producteur
  • Saisons
  • Stock
  • Titre

Puis cliquez sur le bouton Ajouter.

Cliquez sur la flèche à gauche du nom de chaque champ, pour réduire le détail affiché. Vous devrez donc le faire 4 fois.

Avec la souris, déplacez les champs pour être dans cet ordre.

  • Titre
  • Stock
  • Saisons
  • Producteur

Fermez le volet Champs.

Ce formulaire est utilisé par des personnes qui travaillent sur des tablettes durcies, dans un environnement hostile avec beaucoup de poussière. Vous allez grossir la taille des polices.

Pour ce faire, modifiez la Hauteur de toutes les cartes à 250.

Puis, modifiez la Taille de police de tous les DataCardKey à 32.

Ensuite, modifiez la Taille de police de tous les DataCardValue à 48.

Enfin, modifiez la Hauteur de tous les DataCardValue à 87.

Vous allez afficher les champs sur 2 colonnes.

Pour ce faire, cliquez sur Form1, puis changez la valeur de la propriété Colonnes à 2 (au lieu de 3).

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

Formulaire de modification mis en forme (vue partielle)
Formulaire de modification mis en forme (vue partielle)

Maintenant, définissez les propriétés du bouton de gauche : Button2_2.

OnSelect = Back(ScreenTransition.Fade)
Text = "Retour"

Ensuite, définissez les propriétés du bouton de droite : Button1_2.

OnSelect = SubmitForm(Form1);;Navigate(EcranListe;ScreenTransition.Fade)
Text = "Valider"

Finaliser la navigation de l’écran qui liste

La navigation entre les écrans a été partiellement mise en œuvre. Toutefois, certaines actions de navigation ne peuvent être mises en œuvre que lorsque les éléments sont présents. C’est la raison pour laquelle cette navigation est faite à la fin.

Bien évidemment, vous pourriez changer de méthode de développement. Pour des raisons pédagogiques, le choix a été fait de rentrer tout de suite dans le détail de chaque écran afin de diminuer les manipulations.

Toutefois, si vous avez une vision d’ensemble des tous les composants de PowerApps, vous pouvez d’abord créer tous les objets nécessaires à votre application : écrans, formulaires, etc. Ensuite, vous pouvez préciser le paramétrage de chaque contrôle.

Dans l’arborescence (à gauche), cliquez sur l’écran EcranListe.

Cliquez sur le contrôle NextArrow2.

Définissez la propriété suivante de NextArrow2 :

OnSelect = Navigate(EcranDetail;ScreenTransition.Fade)

Cliquez sur le contrôle Icon1.

Définissez la propriété suivante de Icon1 :

OnSelect = NewForm(Form1);;Navigate(EcranModification;ScreenTransition.Fade)

Finaliser la navigation de l’écran qui détaille

Dans l’arborescence (à gauche), cliquez sur l’écran EcranDetail.

Définissez les propriétés du contrôle Bouton de droite : Button1_1.

OnSelect = EditForm(Form1);;Navigate(EcranModification;ScreenTransition.Fade)
Text = "Modifier"

Définissez les propriétés du contrôle Bouton du milieu : Button3.

OnSelect = Remove(lstFruits;Gallery1.Selected);;Navigate(EcranListe;ScreenTransition.Fade)
Text = "Supprimer"

Enregistrer et exécuter l’application

Avant d’exécuter l’application, vous allez l’enregistrer. Pour ce faire, appuyez sur les touches suivantes de votre clavier : Ctrl + S.

Ensuite, cliquez sur EcranListe.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

Vérifiez que vous pouvez :

  • Afficher la liste des éléments.
  • Afficher un élément.
  • Ajouter un élément.
  • Modifier un élément.
  • Supprimer un élément.
  • Naviguer d’un écran à un autre.

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 découvert le développement d’une véritable application PowerApps de A à Z, à travers une technique de développement, orientée interface.

Article mis à jour le 24.09.2019.

Catégories
Prestations Audits Formations

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.

Catégories
Prestations Audits Formations

Créer une application PowerApps

Cet exemple vous explique comment créer une véritable application PowerApps à partir d’un canevas vierge, en utilisant une liste de SharePoint comme source de données.

L’objectif est aussi de vous faire manipuler un contrôle de type galerie et un contrôle de type formulaire. Ces contrôles sont apportés par les modèles d’écrans sélectionnés.

Préparation

  • La liste lstFruits doit exister dans vote site SharePoint.

Créer une application PowerApps

Ouvrez le site web Microsoft PowerApps et identifiez-vous éventuellement 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 Mode téléphone sous Application vide, puis patientez.

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

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

Notez que vous auriez pu aussi bien choisir la disposition de la tablette 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 canFruits.

En bas à droite, 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.

Se connecter aux données

Dans l’écran blanc au milieu, cliquez sur Se connecter à des données.

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

Se connecter à des données (vue partielle)
Se connecter à des données (vue partielle)

Dans le volet Source de données, cliquez sur Connecteurs.

Sous Connecteurs, cherchez et cliquez sur SharePoint.

Dans le volet qui s’affiche, cliquez sur Ajouter une connexion.

Il est possible qu’une connexion SharePoint à votre nom existe déjà. Toutefois, cette situation est liée à un exercice précédent. Dans cet exercice, vous allez construire une nouvelle connexion, sans tenir compte de cette facilité. C’est la raison pour laquelle, vous ajouter une nouvelle connexion.

Dans le volet qui offre le choix entre Se connecter directement (services de cloud computing) ou Se connecter à l’aide de la passerelle de données locales, vérifiez que la case Se connecter directement (services de cloud computing) est bien cochée. Si cette case n’est pas cochée, cochez-la. Ensuite cliquez sur le bouton Créer.

Entrez l’URL de votre site SharePoint, ou sélectionnez le dans la liste s’il apparaît.

Sous Choisir une liste, cochez la case lstFruits, puis cliquez sur Se connecter.

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

Source de données (vue partielle)
Source de données (vue partielle)

Lorsque la connexion est terminée, cliquez sur la droite sur l’icône Arborescence, en forme de feuilles empilées.

Créer un écran d’affichage

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.

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.

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

Liste des types d'écran (vue partielle)
Liste des types d’écran (vue partielle)

Dans cette liste d’écran, cliquez sur Liste (en haut et à droite de la liste) : un nouvel écran est ajouté avec différents contrôles.

Dans cet écran, le contrôle BrowseGallery1 est le contrôle principal.

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

Nouvelle liste
Nouvelle liste

Dans l’arborescence (à gauche), cliquez sur le contrôle LblAppName1 puis, dans ses propriétés (à droite), cliquez dans Texte et remplacez [Title] par :

Liste des fruits

Dans l’arborescence (à gauche), cliquez sur le contrôle BrowseGallery1 puis cliquez dans ses propriétés (à droite), cliquez sur la flèche vers le bas du menu Disposition.

Dans la liste des dispositions, cliquez sur Titre, sous-titre et corps.

Dans la barre de formule (en haut, au milieu) de la propriété Items, remplacez CustomGallerySample par lstFruits et les deux instances de SampleText par Title.

Ce qui donne :

SortByColumns(Search(lstFruits;
TextSearchBox1.Text; "Title"); "Title"; If(SortDescending1;
SortOrder.Descending; SortOrder.Ascending))

Dans cette formule, la fonction Search() recherche les éléments de la liste lstFruits dont le titre (“Title” en anglais) correspond au texte saisi dans la zone de recherche (“TextSearchBox1.Text”). Ensuite, le résultat est trié sur le titre, en ordre ascendant ou descendant selon la valeur de la variable SortDescending1.

Pour l’instant, ne vous préoccupez pas des icônes rouges ou orangées. Elles sont essentiellement liées aux incohérences entre les noms des formules et les noms des champs. Elles sont corrigées ci-dessous.

Dans l’onglet Propriétés du volet de droite, sélectionnez Modifier à côté de l’étiquette Champs.

Dans la zone Body1, sélectionnez Stock.

Dans la zone Subtitle2, sélectionnez Saisons.

Dans la zone Title2, sélectionnez Title.

Cliquez sur la croix en haut et à droite du volet Données pour fermer ce volet.

Ne tenez pas compte de l’icône avec un triangle jaune. Il ne s’agit pas d’un message d’erreur mais d’un message d’avertissement. Il vous indique que la recherche peut mal fonctionner sur un jeu de données important. Dans la mesure où vous n’avez que 4 éléments, vous n’êtes pas véritablement concerné.

Vous obtenez l’affichage de la liste des fruits.

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

Affichage (vue partielle)
Affichage (vue partielle)

Créer l’écran de modification

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 Formulaire : un nouvel écran est ajouté avec différents contrôles.

Dans l’arborescence (à gauche), cliquez sur le contrôle EditForm1 puis, dans ses propriétés (à droite), cliquez sur la flèche vers le bas à côté de Source de données, puis sélectionnez lstFruits.

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

Modification (vue partielle)
Modification (vue partielle)

Dans l’arborescence (à gauche), cliquez sur le contrôle EditForm1 puis, dans l’onglet Avancé (à droite), cliquez dans la zone Item, puis entrez la formule suivante :

BrowseGallery1.Selected

Cette formule indique que vous afficherez dans le formulaire l’élément précédemment sélectionné. Aussitôt que vous avez validé la formule, le premier élément (Citron) s’est affiché dans le formulaire.

Ensuite, dans l’arborescence (à gauche), cliquez sur le contrôle LblAppName2 puis, dans ses propriétés (à droite), cliquez dans Texte et remplacez [Title] par :

Modifier un fruit

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

Paramétrage de l'écran (vue partielle)
Paramétrage de l’écran (vue partielle)

Agir sur les écrans

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

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

Renommez en EcranListe.

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

Renommez en EcranModification.

Configurer les icônes de l’écran d’affichage

Les manipulations suivantes sont faites sur EcranListe.

Développez EcranListe.

Dans l’arborescence (à gauche), cliquez sur le contrôle IconRefresh1 (en forme de flèche circulaire dans la zone centrale de visualisation), puis dans l’onglet Avancé (à droite), cliquez dans la zone OnSelect, puis remplacez son contenu avec la formule suivante :

Refresh(lstFruits)

Cette formule entraîne une demande de mise à jour des données à partir de SharePoint.

Dans l’arborescence (à gauche), cliquez sur le contrôle IconNewItem1 (en forme de + dans la zone centrale de visualisation), puis dans l’onglet Avancé (à droite), cliquez dans la zone OnSelect, puis remplacez son contenu avec la formule suivante :

NewForm(EditForm1);;Navigate(EcranModification;ScreenTransition.None)

Cette formule permet d’ouvrir le formulaire (EditForm1) de l’écran de modification (EcranModification) avec des champs vides, pour créer un nouvel enregistrement.

Dans l’arborescence (à gauche), cliquez sur le contrôle NextArrow2 qui est sous BrowseGallery1 et qui a la forme de > dans la zone centrale de visualisation, puis dans l’onglet Avancé (à droite), cliquez dans la zone OnSelect, puis remplacez son contenu avec la formule suivante :

EditForm(EditForm1);;Navigate(EcranModification;
ScreenTransition.None)

Cette formule permet d’ouvrir le formulaire (EditForm1) de l’écran de modification (EcranModification) avec les valeurs de l’enregistrement en cours. L’utilisateur peut modifier ou supprimer l’enregistrement.

Configurer les icônes de l’écran de modification

Les manipulations suivantes sont faites sur EcranModification.

Développez EcranModification.

Dans l’arborescence (à gauche), cliquez sur le contrôle IconCancel1 (en forme de X dans la zone centrale de visualisation), puis dans l’onglet Avancé (à droite), cliquez dans la zone OnSelect, puis remplacez son contenu avec la formule suivante :

ResetForm(EditForm1);;Navigate(EcranListe;
ScreenTransition.None)

Cette formule permet d’annuler toutes les modifications effectuées dans cet écran par l’utilisateur, puis de faire apparaître l’écran d’affichage.

Dans l’arborescence (à gauche), cliquez sur le contrôle IconAccept1 puis (en forme de coche dans la zone centrale de visualisation), dans l’onglet Avancé (à droite), cliquez dans la zone OnSelect, puis remplacez son contenu avec la formule suivante :

SubmitForm(EditForm1);;Navigate(EcranListe;
ScreenTransition.None)

Cette formule permet d’enregistrer toutes les modifications effectuées dans cet écran par l’utilisateur, puis de faire apparaître l’écran d’affichage.

Cliquez dans l’onglet Insérer puis cliquez sur Icônes, et sélectionnez l’icône Corbeille : un nouveau contrôle apparait (Icon1).

Déplacez l’icône Corbeille, à gauche de l’icône en forme de coche.

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

Position de l'icône Corbeille
Position de l’icône Corbeille

Dans les propriétés de l’icône Corbeille, cliquez dans la zone Couleur et sélectionnez Blanc.

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

Couleur de l'icône Corbeille
Couleur de l’icône Corbeille

Dans Avancé, cliquez dans la zone Visible, puis remplacez son contenu (“true”) avec la formule suivante :

EditForm1.Mode = FormMode.Edit

Si vous ne voyez pas la propriété Visible, cliquez sur le bouton Autres options. Vous pouvez aussi sélectionner directement la propriété Visible dans la zone centrale des formules.

Cette formule permet d’afficher l’icône uniquement quand le formulaire est en mode Édition (et non pas en mode Création).

Ensuite, définissez la propriété OnSelect de l’icône Corbeille avec la formule suivante :

Remove(lstFruits;
BrowseGallery1.Selected);;Navigate(EcranListe; ScreenTransition.None)

Cette formule permet de supprimer l’enregistrement sélectionné de la source de données, puis de faire apparaître l’écran d’affichage.

Enregistrer l’application

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

Publier l’application

La publication d’une application la rend disponible auprès des utilisateurs autorisés.

Dans l’écran Enregistrer, cliquez sur Publier : une boîte de dialogue vous informe que la publication donne accès aux utilisateurs dotés d’autorisations.

Dans cette boîte de dialogue, cliquez sur le bouton Publier cette version.

Cliquez sur la flèche en haut et à gauche pour revenir à l’accueil.

Exécuter l’application PowerApps

Cliquez sur EcranListe.

Cliquez sur l’icône Aperçu en forme de triangle (en haut, à droite) ou appuyez sur la touche F5.

Dans la zone Rechercher des éléments, tapez la lettre i : tous les fruits avec cette lettre restent affichés (Citron, Mandarine).

Enlevez la lettre i dans la zone de recherche.

Cliquez deux ou trois fois sur l’icône de tri afin de vérifier que les éléments sont triés en ordre croissant ou décroissant sur le nom du fruit.

Cliquez l’icône en forme de + pour ajouter un nouvel élément avec le fruit de votre choix puis validez votre saisie avec l’icône en forme de coche. Profitez-en pour vérifier que l’icône de la corbeille n’apparaît pas.

Mettez à jour l’enregistrement que vous venez d’ajouter, puis enregistrez les modifications.

Mettez à jour l’enregistrement que vous venez de modifier, puis annulez les modifications.

Avec la corbeille, supprimez l’enregistrement que vous avez ajouté.

Fermez le mode Aperçu en appuyant sur la touche Échap du clavier. Vous pouvez aussi fermer le mode Aperçu, à l’aide de la croix en haut et à droite.

Si un pop-up apparaît, lisez-le puis fermez-le.

L’exercice est terminé.

Bonus : formatage du stock

Dans cette manipulation avancée, vous allez introduire un séparateur des milliers pour l’affichage du stock.

Ne faites cette manipulation que si vous êtes en avance sur le groupe.

Si vous n’êtes pas en avance, rappelez-vous que vous pourrez la faire de retour dans votre organisation.

Dans l’écran d’affichage, qui présente les données de la liste sous forme d’une liste, vous allez modifier la formule d’affichage du stock afin que les valeurs s’affichent sous forme d’un nombre formaté avec un séparateur pour les milliers. Pour ce faire, vous devez utiliser deux fonctions : la fonction Text() et la fonction Value().

La fonction Value() transforme une chaîne de caractère en une valeur numérique. Tandis que la fonction Text() formate une valeur numérique, qui est le premier argument de la fonction. Le format est donné grâce au second argument.

Vous trouverez l’aide de la fonction Value() sur le lien ci-dessous.

https://coudr.com/powfnvalue

Vous trouverez l’aide de la fonction Text() sur le lien ci-dessous.

https://coudr.com/powfntext

Un premier indice : si vous voulez convertir la chaîne de caractères “3000” en la valeur numérique :

Value("3000") donne 3000

Un second indice : vous avez le droit d’insérer une formule dans une formule, comme pour Excel. Par exemple, dans la formule suivante la fonction Value() est insérée dans la fonction Text() :

Text(Value())

Un dernier indice :

Text(3000; “# ###”) donne 3 000

À vous de trouver la bonne formule 😉

Pour vous aider, regardez la copie d’écran ci-dessous qui affiche le résultat.

Séparateur de milliers (vue partielle)
Séparateur de milliers (vue partielle)

Le bonus est terminé.

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.

Résumé

Dans cet exercice, vous avez appris comment créer une application, à partir d’un canevas vierge, reliée à une liste SharePoint.

Article mis à jour le 21 septembre 2019 .

Catégories
Prestations Audits Formations

Créer automatiquement une application PowerApps à partir de SharePoint

Dans cet exemple, vous découvrirez comment vous pouvez créer automatiquement une application PowerApps à partir d’une liste SharePoint.

Préparation

  • La liste lstAffaires doit exister dans votre site SharePoint.

Créer une application SharePoint

Ouvrez votre site SharePoint.

Sur votre site SharePoint, ouvrez la liste lstAffaires.

Dans le menu de la liste, cliquez sur PowerApps, puis dans le sous-menu qui s’ouvre, cliquez sur Créer une application.

Dans le volet qui s’affiche à droite, nommez votre application : shpAffaires.

Cliquez sur le bouton Créer : un nouvel onglet s’ouvre.

Patientez quelques instants, le temps de la génération de votre application et de son enregistrement dans PowerApps.

Exécuter l’application PowerApps

À l’issue de ce temps de préparation, il est possible que vous obteniez un pop-up de bienvenue.

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

Message de bienvenue
Message de bienvenue

Dans ce pop-up, cliquez sur Afficher un aperçu de cette application. L’application se lance.

Si l’aperçu ne se déclenche pas automatiquement, appuyez sur la touche F5 de votre clavier pour le déclencher manuellement.

Si un autre pop-up surgit pour vous demander votre avis, fermez-le.

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

Aperçu de l'application (vue partielle)
Aperçu de l’application (vue partielle)

Ajouter un élément dans SharePoint

Cet aperçu fonctionne réellement. Cela signifie que vous allez pouvoir ajouter un élément avec votre application.

Pour ce faire, cliquez sur la croix en forme de plus, en haut à droite, puis renseignez les informations demandées avec les valeurs suivantes :

  • Titre : Grande voiture
  • IDAffaire : 300
  • Responsable : indiquez votre nom d’administrateur du tenant
  • MontantHT : 50

Ne renseignez pas les autres champs, puis cliquez sur la coche de validation, qui se trouve en haut à droite : la nouvelle affaire est rentrée.

Cliquez sur l’icône en forme de cercle pour actualiser la liste.

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

Création d'une affaire avec l'application
Création d’une affaire avec l’application

Vous pouvez aussi le vérifier en ouvrant la liste sur SharePoint.

Si SharePoint vous demande si l’affichage est privé, déclinez la proposition et gardez un affichage public.

L’exercice est terminé.

Bonus : déplacer les champs

Dans cette manipulation avancée, vous allez modifier l’ordre d’affichage des champs de l’écran d’édition.

Ne faites cette manipulation que si vous êtes en avance sur le groupe.

Si vous n’êtes pas en avance, vous pourrez la faire de retour dans votre organisation.

Dans l’écran d’édition DetailScreen1, cliquez sur DetailForm1.

Dans les propriétés de DetailForm1, cliquez sur Modifier les champs : le volet Champs s’affiche.

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

Ordre original des champs
Ordre original des champs

Avec la souris, déplacez les champs de façon que l’ordre des champs soit le suivant :

  • Titre
  • MontantHT
  • Etat
  • LivraisonDate
  • FournisseurID
  • LivraisonEtranger
  • Responsable
  • IDAffaire

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

Nouvel ordre des champs
Nouvel ordre des champs

Si vous êtes bloqué, demandez de l’aide à votre formateur.

Vous obtenez une nouvelle présentation de l’écran d’édition

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

Nouvel écran d'édition
Nouvel écran d’édition

Enregistrez votre travail.

Si votre application a un souci, pensez toujours à enregistrer votre travail. Ensuite, vous fermez l’onglet du navigateur où vous avez modifié votre application. Puis, dans un nouvel onglet, vous retrouverez votre application en ouvrant le site :

https://make.powerapps.com/

Le bonus est terminé.

Résumé

Dans cet exercice, vous avez appris comment créer automatiquement une application PowerApps à partir de SharePoint. Vous avez vu aussi comment utiliser votre nouvelle application pour ajouter un élément dans la liste.

Catégories
Prestations Audits Formations

Revenir au formulaire SharePoint par défaut

Dans cet exemple, vous découvrirez comment revenir au formulaire SharePoint par défaut, malgré sa personnalisation dans PowerApps.

Préparation

Modifier le formulaire par défaut

Ouvrez votre site SharePoint.

Sur votre site SharePoint, ouvrez la liste lstAffaires.

Dans le coin supérieur droit, cliquez sur la roue dentée de SharePoint : un volet s’ouvre.

Dans ce volet, cliquez sur le lien Paramètres de la liste : l’écran des paramètres s’ouvre.

Dans cet écran, cliquez sur le lien Paramètres du formulaire : l’écran des paramètres du formulaire s’ouvre.

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

Paramètres du formulaire
Paramètres du formulaire

Dans cet écran, cliquez sur la case à cocher Utiliser le formulaire SharePoint par défaut, puis cliquez sur le bouton OK.

Tester le nouveau formulaire

Vous allez vérifier que c’est bien le formulaire d’origine qui s’ouvre.

Dans la liste SharePoint, cliquez sur un élément pour l’ouvrir : il s’affiche dans le formulaire SharePoint d’origine.

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

Affichage dans le formulaire SharePoint
Affichage dans le formulaire SharePoint

Notamment, vous remarquerez que le champ MontantHT ne se trouve plus directement sous le champ Titre.

Dans SharePoint, fermez le volet de l’élément affiché.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment revenir au formulaire SharePoint par défaut, malgré sa personnalisation dans PowerApps.

Si vous changez à nouveau les paramètres de la liste, vous retrouverez le formulaire PowerApps que vous pourrez modifier. Vous pourrez même le supprimer et bien sûr, en créer un nouveau.

Catégories
Prestations Audits Formations

Personnaliser le formulaire d’une liste SharePoint

Dans cet exemple, vous découvrirez comment personnaliser les formulaires d’une liste SharePoint. Cette personnalisation est uniquement possible à partir de l’interface moderne. C’est l’interface par défaut. Regardez la copie d’écran ci-dessous qui présente un exemple d’une interface moderne.

Exemple d'interface moderne
Exemple d’interface moderne

Toutefois, il existe aussi une ancienne interface, dite classique ou standard. Celle-ci ne permet pas de faire l’exercice. Regardez la copie d’écran ci-dessous qui présente l’interface classique de la même liste.

Exemple d'interface classique
Exemple d’interface classique

Si d’aventures, vous travaillez avec l’ancienne interface comme ci-dessus, cliquez sur le lien Quitter l’expérience classique.

Concrètement, vous allez personnaliser le formulaire SharePoint avec PowerApps de façon à positionner le champ MontantHT sous le champ Titre et vous disparaître le champ Pièces jointes.

Préparation

  • La liste lstAffaires doit exister dans le site SharePoint avec votre prénom. Pour créer cette liste, suivez la procédure ci-dessous.

Personnaliser les formulaires SharePoint

Ouvrez votre site SharePoint de travail :

Sur le site SharePoint, ouvrez la liste lstAffaires.

Ensuite, dans le menu de la liste, cliquez sur PowerApps, puis dans le sous-menu qui s’ouvre, cliquez sur Personnaliser les formulaires.

Patientez quelques instants, le temps de la génération de votre application et de son enregistrement dans PowerApps.

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

Personnalisation du formulaire SharePoint
Personnalisation du formulaire SharePoint

Modifier le formulaire personnalisé SharePoint

Normalement, le volet Champs est ouvert. Si le volet Champs n’est pas ouvert, cliquez sur le formulaire SharePointForm1 qui se trouve sous FormScreen1, puis dans les propriétés Champs, cliquez sur Modifier les champs : le volet Champs s’ouvre à nouveau.

Dans ce volet, cliquez sur Ajouter un champ : la liste des champs s’affiche.

Dans cette liste, cochez uniquement les deux champs : MontantHT et Responsable.

Ensuite, cliquez sur le bouton Ajouter.

Maintenant, fermez le volet Champs avec la croix.

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

Modification des champs du formulaire
Modification des champs du formulaire

Personnaliser le formulaire

Donnez une couleur pastel à l’écran, comme par exemple :

FormScreen1.Fill = RGBA( 204; 216; 225; 1)

Grâce à la poignée haute et centrale, abaissez la hauteur du contrôle SharePointForm1 d’environ un quart d’écran.

SharePointForm1.Y = 197

Insérez un contrôle image. Vous en trouverez sous le menu Média.

Arrangez le contrôle Image1 afin qu’il occupe la totalité de la hauteur du premier quart de l’écran.

Image1.Height = SharePointForm1.Y
Image1.Height = 444

Avec les propriétés de l’image, ajoutez une image quelconque dans Image1.

Toujours avec les propriétés de l’image, et notamment grâce à la propriété Position de l’image, remplir le contrôle avec l’image.

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

Personnalisation du formulaire
Personnalisation du formulaire

Tester le nouveau formulaire

Vous allez vérifier l’efficacité de vos modifications. Pour cela, cliquez sur le lien dans le coin supérieur gauche, qui s’intitule Revenir à SharePoint : une boite de dialogue s’ouvre.

Dans cette boîte de dialogue, cliquez sur le bouton Publier : la liste SharePoint s’ouvre.

Dans cette liste, cliquez sur un élément quelconque pour l’ouvrir : il s’affiche bien dans le nouveau formulaire PowerApps.

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

Affichage dans le formulaire PowerApps
Affichage dans le formulaire PowerApps

Dans SharePoint, fermez le volet de l’élément affiché.

L’exercice est terminé.

Résumé

Dans cet exercice, vous avez appris comment personnaliser le formulaire d’une liste SharePoint.

Vous verrez dans un autre exercice que vous pouvez revenir facilement au formulaire d’origine.

Article mis à jour le 12.03.2020

Catégories
Prestations Audits Formations

Manipuler les écrans, la navigation et les formules dans 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

Cet exemple explique comment créer deux écrans différents. Le premier écran sera avec un fond jaune et un bouton marqué Navigation. Lorsque l’utilisateur cliquera sur le bouton Navigation, il affichera un second écran.

Ce deuxième écran a un fond bleu avec un bouton marqué Revenir. Lorsque l’utilisateur cliquera sur le bouton Revenir il affichera le premier écran.

Deux écrans différents (1er écran)
Deux écrans différents (1er écran)

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 Mode téléphone sous Application vide, puis patientez.

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

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

Notez que vous auriez pu aussi bien choisir la disposition de la tablette 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 canEcrans.

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.

Créer un écran d’affichage

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.

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.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen2 puis, dans ses propriétés (à droite), cliquez dans Remplir et remplacez la couleur Blanc par un bleu très clair.

Insérer un contrôle Bouton (Button)

Ce bouton servira à afficher l’écran nommé Screen2. Dans le vocabulaire PowerApps, il est plutôt usuel de dire qu’il servira à naviguer jusqu’à l’écran Screen2. Le résultat qui est attendu est le suivant : quand l’utilisateur cliquera sur le bouton, l’écran Screen2 devra s’afficher.

Pour parvenir à ce résultat, il faut utiliser la fonction Navigate(). Cette fonction a besoin de deux arguments. Le premier argument indique le nom de l’écran de destination de la navigation. Le second argument indique le type de transition que vous désirez.

Vous trouverez l’aide de la fonction Navigate() sur le lien ci-dessous.

https://coudr.com/powfnnavigate

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1.

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 Screen1. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Button1.

Dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Bouton par Navigation.

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

Sous Action, cliquez sur Naviguer : il vous est proposé de naviguer sur l’écran Screen2, ainsi qu’un choix de transition sur l’écran Screen2 (ScreenTransition.Fade). Gardez ces valeurs par défaut : une formule de navigation a été générée automatiquement. Vous allez le vérifier tout de suite.

Pour ce faire, dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et vérifiez la présence de la formule suivante :

Navigate(Screen2; ScreenTransition.Fade)

Vous l’avez compris : un clic sur ce bouton affichera l’écran Screen2.

Appuyez sur la touche F5 puis cliquez sur le bouton Navigation : vous devez voir l’écran bleu de Screen2.

Appuyez sur la touche échap pour sortir.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Gérer les formules

En vous inspirant des manipulations précédentes, ajoutez un bouton sur l’écran Screen2 qui permet de revenir à l’écran Screen 1.

Le texte du bouton pourra être : Revenir.

Vous prendrez aussi une transition d’écran différente de la transition par défaut, par exemple : ScreenTransition.Cover.

Changez aussi la couleur de remplissage de l’écran Screen1, par exemple : Jaune.

Avec la touche F5, testez vos manipulations.

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

Deux écrans différents (2nd écran)
Deux écrans différents (2nd écran)

Renommer les écrans

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

Renommez en EcranListe.

Vous auriez pu aussi double-cliquer sur le nom de l’écran dans l’arborescence, puis le renommer.

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

Renommez en EcranDetail.

Avec la méthode de votre choix, constatez que les formules des boutons ont bien été changées.

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

Modification des formules
Modification des formules

Pour information, notez que pour revenir à l’écran précédent, vous auriez pu aussi utiliser la fonction Back(). Pour la formation ce n’est pas nécessaire de le faire.

Vous trouverez l’aide de la fonction Back() sur le lien ci-dessous. Ce lien présente l’aide de la fonction Navigate() et de la fonction Back().

https://coudr.com/powfnnavigate

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 manipuler les écrans, la navigation et les formules dans PowerApps.

Notamment, vous avez créé un écran supplémentaire. Ensuite, sur chaque écran, vous avez ajouté un bouton qui grâce à la fonction Navigate() permet de changer d’écran.

Vous avez aussi appris à renommer un écran et vous avez constaté que PowerApps mettait automatiquement à jour ses formules avec le nouveau nom.

Vous verrez plus tard que ce fonctionnement est général pour les contrôles et les objets de PowerApps.

Catégories
Prestations Audits Formations

Manipuler les contrôles, les fonctions et les formules dans 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

Cet exercice vous explique comment manipuler les contrôles, les fonctions et les formules dans PowerApps.

Il s’agit de simples manipulations qui vous permettent de vous familiariser avec l’interface et les contrôles.

Dans cette nouvelle application, vous allez insérer un contrôle Étiquette (Label). Celui-ci sert à afficher un texte quelconque. Vous insérerez aussi un contrôle “Entrée de texte”. Ce contrôle permet de saisir un texte quelconque. Enfin, vous verrez comment ajouter un contrôle Bouton. Ce type de contrôle vous est familier à travers les boutons OK, Annuler, etc.

Vous verrez également une nouvelle fonction qui donne la longueur d’une chaîne de caractères. Cette fonction est utilisée notamment pour vérifier que la chaîne ne dépasse pas une valeur avant de la stocker. Ensuite, vous apprendrez à additionner des valeurs numériques avec l’opérateur +. Enfin, vous découvrirez la fonction ClearCollect() qui permet notamment de créer de nouvelles collections. Une collection sert à stocker des données temporaires, utilisées tant que l’application est ouverte.

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 Mode téléphone sous Application vide, puis patientez.

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

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

Notez que vous auriez pu aussi bien choisir la disposition de la tablette 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 canControles.

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

Enregistrer et changer le nom
Enregistrer et changer le nom

En bas et à droite de l’écran, 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.

Insérer un contrôle Étiquette (Label)

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.

Un contrôle Étiquette sert à afficher du texte ou des données qui sont généralement calculées. Par exemple, le résultat de la somme de deux nombres.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Étiquette : une étiquette apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Label1.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Texte par Haricot et cliquez ailleurs pour que PowerApps prenne en compte votre modification.

Tester l’application

Pour voir ce que donne vos modifications, il y a plusieurs techniques : 1) Appuyer sur la touche F5 du clavier puis fermer la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier ; 2) Cliquer sur l’icône en forme de triangle dans le coin supérieur droit puis fermer la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier ; 3) Cliquer sur le contrôle puis appuyer simultanément sur la touche Alt du clavier. Il suffit de relâcher la touche Alt pour quitter le mode d’aperçu.

Utilisez la méthode de votre choix pour voir le résultat.

Appuyez sur la touche échap pour sortir.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Insérer une formule

Maintenant, vous allez afficher le résultat d’une formule.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis dans la zone de formule (au milieu et en haut), remplacez “Haricot” par :

Len("Haricot")

Puis cliquez ailleurs. La fonction Len() donne la longueur d’une chaîne de caractères. Dans ce scénario, vous obtenez la valeur 7.

Vous trouverez l’aide de la fonction Len() sur le lien ci-dessous.

https://coudr.com/powfnlen

Avec la souris, descendez le contrôle pour qu’il soit un peu au-dessus du milieu de l’écran blanc.

Insérer un contrôle Entrée de texte (Text input)

Un contrôle “Entrée de texte” permet de saisir du texte ou des nombres.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Texte puis sélectionnez Entrée de texte : une entrée de texte apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : TextInput1.

Refaites la même opération pour insérer un second contrôle “Entrée de texte”. Normalement, il se nomme TextInput2.

Avec la souris, descendez le nouveau contrôle pour qu’il soit sous le premier.

Pour les deux contrôles Entrée de texte, changez leur format dans Propriétés, en Nombre.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis dans la zone de formule (en haut), remplacez Len(“Haricot”) par :

TextInput1+TextInput2

Puis cliquez ailleurs.

Appuyez sur la touche F5 puis saisissez des nombres quelconques dans les contrôles d’entrée et constatez que la somme est calculée dans le contrôle étiquette.

Ensuite, avec la souris, descendez les nouveaux contrôles pour qu’ils soient juste au-dessus de l’étiquette.

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

Vérifier la formule
Vérifier la formule

Appuyez sur la touche Échap pour sortir.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Insérer un contrôle Bouton (Button)

Un contrôle Bouton permet d’interagir avec l’application. Vous allez utiliser un bouton afin de créer une nouvelle collection qui se nommera Stagiaire. Une collection permet en particulier de stocker les données saisies par l’utilisateur. Dans ce scénario, il s’agit des données des contrôles d’entrée de texte TextInput1 et TextInput2.

Dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Bouton : un bouton apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Button1.

Dans l’arborescence (à gauche), cliquez sur le contrôle Button1 puis cliquez dans ses propriétés (à droite), cliquez dans la zone Texte et remplacez Bouton par Action puis faites une tabulation avec votre clavier.

Dans les propriétés de Button1, cliquez sur l’onglet Avancé puis cliquez dans la zone OnSelect et remplacez False par :

ClearCollect(Stagiaire;{Prénom:TextInput1.Text; Nom:TextInput2.Text})

Deux remarques importantes :

  • N’oubliez pas le .Text, qui est collé à TextInput1 et TextInput2 dans la fonction.
  • Si vous supprimez un contrôle, puis vous en créez un nouveau, vous devez éditer toutes les fonctions qui font référence à ce contrôle, même si vous l’avez nommé exactement pareil. Ceci est toujours vrai, pour tous les contrôles.

La fonction ClearCollect() est très utilisée car elle permet notamment de créer de nouvelles collections. Vous trouverez l’aide de la fonction ClearCollect() sur le lien ci-dessous.

https://coudr.com/powfncollect

Dans ce scénario, la collection s’intitule Stagiaire et elle est composée de deux variables : Prénom et Nom. La variable Prénom sera alimentée par le contenu saisi de TextInput1, tandis que la variable Nom sera alimentée par le contenu saisi de TextInput2.

Si vous avez des erreurs, signalées par des points rouges ou des croix blanches sur un fond rouge, vérifiez votre formule. Notamment, vérifiez que vous avez bien écrit TextInput1 et non pas Input1.

Pour les deux contrôles Entrée de texte, changez leur format (dans Propriétés) en Texte.

Insérer un contrôle Galerie (Gallery)

Un contrôle Galerie permet notamment d’afficher le contenu d’une collection.

Grâce au menu Insérer, ajoutez un contrôle de type Galerie verticale. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Gallery1.

Arrangez l’écran pour voir tous les contrôles sur l’écran du milieu.

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

Écran avec 5 contrôles
Écran avec 5 contrôles

Dans le contrôle Gallery1, définissez la valeur de la propriété avancée Items à Stagiaire, à la place de CustomGallerySample. Stagiaire est tout simplement le nom de la collection.

Dans l’onglet Propriétés du contrôle Gallery1, sélectionnez Modifier à côté de l’étiquette Champs puis vérifiez que Prénom est rattaché à Subtitle1 et Nom à Title1. Si ce n’est pas le cas, mettez à jour les données. Par contre, ne changez pas la valeur de Image1, qui ne nous intéresse pas pour l’instant.

Fermez le volet Données, en cliquant sur la croix en haut, à droite du volet.

Appuyez sur la touche F5 puis saisissez des valeurs pour le prénom et le nom puis cliquez sur le bouton Action.

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

Action du bouton
Action du bouton

Appuyez sur la touche échap pour sortir.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

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 à insérer un contrôle Étiquette (Label), qui sert à afficher un texte quelconque, ainsi qu’un contrôle “Entrée de texte”, pour permettre de saisir un texte quelconque, et un contrôle Bouton, qui exécute une action.

Vous avez aussi découvert l’existence de la fonction Len(), qui donne la longueur d’une chaîne de caractères, ainsi que la fonction ClearCollect(), qui permet notamment de créer de nouvelles collections. Une collection sert à stocker des données temporaires, utilisées tant que l’application est ouverte. Un contrôle Galerie a permis d’afficher le contenu de la collection.

Il existe bien d’autres fonctions. Leur liste est accessible sur le lien Fonctions, signaux et énumérations PowerApps du site Microsoft Docs : https://coudr.com/powfn.

Catégories
Prestations Audits Formations

Bonjour en 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

Le plus simple pour comprendre ce qu’est PowerApps et avoir un premier aperçu de ses possibilités est de l’utiliser. Aussi, cet exemple vous explique comment créer une première application PowerApps. Cette application affichera une salutation personnalisée avec le nom de l’utilisateur connecté.

Le résultat final ressemblera à une fenêtre comme celle-ci, où Jack Lutz sera remplacé par votre nom dans la salutation.

Affichage de la salutation
Affichage de la salutation

L’exercice vous fera manipuler les contrôles pour afficher la salutation. En particulier, le contrôle Étiquette qui sert à afficher du texte ou des données.

Vous utiliserez aussi la formule User() qui retourne des informations sur l’utilisateur connecté. La liste des formules est accessible sur le lien Fonctions, signaux et énumérations de PowerApps du site Microsoft Docs : https://coudr.com/powfn.

Vous découvrirez aussi comment tester et vérifier le bon résultat de votre travail.

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

Créer une application
Créer une application

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

Si vous voyez un pop-up qui vous propose d’indiquer votre Pays, cliquez sur le bouton Prise en mains. Pour vous aider, regardez la copie d’écran ci-dessous.

Prise en main pour commencer
Prise en main pour commencer

Dans le volet central du nouvel onglet et sous Démarrer avec un modèle ou un canevas vierge, cliquez sur Mode téléphone sous Application vide, puis patientez.

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

Démarrer avec un modèle ou un canevas vierge
Démarrer avec un modèle ou un canevas vierge

Notez que vous auriez pu aussi bien choisir la disposition de la tablette 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

Par défaut, il y a une fonctionnalité de sauvegarde automatique toutes les deux minutes. Cependant, cette sauvegarde automatique ne se déclenche qu’à partir du moment où vous avez sauvegardé manuellement votre application au moins une fois.

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 canBonjour. Par défaut, le nom de l’application est toujours Application. C’est donc une bonne pratique de renommer immédiatement votre application.

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

Enregistrer et changer le nom
Enregistrer et changer le nom

En bas et à droite de l’écran, 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 de l’écran pour revenir à l’accueil.

Insérer un contrôle Étiquette (Label)

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.

Un contrôle Étiquette sert à afficher du texte ou des données qui sont généralement calculées. Par exemple, le résultat de la somme de deux nombres.

Dans cette manipulation, vous allez afficher la formule de salutation personnalisée. Le but est d’avoir un texte qui affiche par exemple : “Bonjour Jack Lutz”.

Pour ce faire, dans l’arborescence (à gauche), cliquez sur l’écran Screen1, puis dans le menu du haut cliquez sur le ruban Insérer.

Sous Insérer, cliquez sur Étiquette : une étiquette apparaît sur l’écran blanc. Le nom du contrôle s’affiche dans l’arborescence (à gauche), sous Screen1 : Label1.

Dans l’arborescence (à gauche), cliquez sur le contrôle Label1 puis cliquez dans Propriétés, cliquez dans la zone Texte.

Dans la zone de formule (au milieu, en haut), remplacez “Texte” par :

"Bonjour " & User().FullName

L’opérateur & permet de concaténer deux chaînes de caractères. La première chaîne de caractères contient le texte fixe “Bonjour “. La seconde chaîne de caractères utilise le résultat de la fonction User() . Cette fonction représente l’utilisateur connecté. Tandis que, la propriété FullName fournit le nom et prénom de l’utilisateur connecté.

Vous trouverez l’aide de la fonction User() sur le lien ci-dessous.

https://coudr.com/powfnuser

Vous remarquerez que vous pouvez voir directement le résultat de vos modifications. En effet, elles sont reflétées dans l’instance en cours d’exécution de l’application.

Notez aussi que vous pouvez utiliser plusieurs fois l’opérateur & dans une formule, si vous en avez besoin. Par exemple, vous pourriez éventuellement terminer la salutation par un point d’exclamation. Cela donnerait la formule suivante :

"Bonjour " & User().FullName & " !"

Pour la formation ce n’est pas nécessaire de le faire. Pour l’instant, contentez-vous de la première formule proposée :

"Bonjour " & User().FullName

Pour vous aider, regardez la copie d’écran ci-dessous. Travaillez bien dans la zone de formule (au milieu, en haut), et non pas dans les propriétés du contrôle, afin d’éviter d’avoir des doubles ou triples guillemets.

Action de l'étiquette
Action de l’étiquette

Notez la présence du terme FullName sous la formule. En effet, PowerApps a analysé votre saisie et il vous propose d’utiliser la propriété FullName de la fonction User(). Cela peut paraître étrange car vous venez de l’indiquer. Toutefois, c’est normal dans la mesure où le focus de votre souris n’a pas encore quitté la zone de saisie.

Maintenant, cliquez avec votre souris sur l’onglet Propriétés du contrôle. L’objectif de cette manipulation est simplement de faire sortir votre souris de la zone de la formule.

Quand vous modifierez un contrôle, vous devrez toujours sortir la souris de la zone de modification pour que PowerApps prenne en compte votre modification.

Tester l’application

Pour voir ce que donne vos modifications, il y a plusieurs techniques :

  • Appuyer sur la touche F5 du clavier puis fermer la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier.
  • Cliquer sur l’icône en forme de triangle dans le coin supérieur droit puis fermer la fenêtre en cliquant sur la croix en haut et à droite ou sur Échap du clavier.
  • Cliquer sur le contrôle puis appuyer simultanément sur la touche Alt du clavier. Il suffit de relâcher la touche Alt pour quitter le mode d’aperçu.

Utilisez la méthode de votre choix pour voir le résultat : l’application vous salue !

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

Affichage de la salutation
Affichage de la salutation

S’il n’y a pas d’espace entre Bonjour et Jack Lutz, éditez votre formule et vérifiez la présence d’un espace après le mot Bonjour et avant le dernier guillemet.

"Bonjour " & User().FullName

Appuyez sur la touche échap pour sortir.

Si un pop-up surgit, cliquez sur le bouton OK. Éventuellement, vous pouvez aussi cocher la case Ne plus afficher ce message.

Enregistrer l’application

Cliquez sur le ruban Fichier puis 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 à insérer un contrôle. En particulier, vous avez utilisé le contrôle Étiquette qui sert à afficher du texte ou des données.

Vous avez aussi appris à utiliser la formule User() qui retourne des informations sur l’utilisateur connecté.

Enfin, vous avez découvert comment tester et vérifier le bon résultat de votre travail.

Catégories
Prestations Audits Formations

En cas de problèmes avec PowerApps

Méthode pour développer et déboguer avec succès une application PowerApps, en cas de problèmes.

Règle 1
Faites des dessins de tous les écrans de votre future application, y compris la navigation entre les écrans, à l’échelle 1:1. Cela s’appelle un mock-up. Ne croyez pas que cette étape soit facultative ou inutile. Ne croyez pas non plus que la terre est plate : elle est sphérique avec les pôles un peu aplatis, mais pas trop.

Règle 2
Appliquez la règle 1, même si vous êtes convaincu que la terre est plate ou que le système solaire est rectangulaire.

Règle 3
Si vous êtes perdu avec les différents onglets ouverts, connectez-vous sur https://office.com. Le site https://office.com vous orientera vers PowerApps, Flow, le centre d’administration, etc.

Règle 4
Dès que votre application PowerApps est créée, allez dans Fichier puis cliquez sur Enregistrer. Donnez un nom à votre application puis cliquez sur Enregistrer en bas à droite de l’écran. A partir de maintenant, votre application sera enregistrée automatiquement toutes les 2 minutes. Vous me direz merci plus tard.

Règle 5
Créez un écran vide supplémentaire qui servira pour tester, dès qu’il y a un problème quelconque : dans une formule, une fonction, une liste, etc.

Règle 6
Pour afficher un ou plusieurs éléments d’une liste, insérez un contrôle Galerie.

Règle 7
Pour afficher un seul élément d’une liste, insérez un contrôle Formulaire.

Règle 8
Les fonctions de navigations Navigate() et Back() se trouvent généralement sur les propriétés OnSelect ou OnSuccess des écrans ou des contrôles.

Règle 9
Pour tester une formule, insérez un contrôle Étiquette dans l’écran vide de test (voir Règle 5), puis créez votre formule dans la propriété Text.

Règle 10 a
Pour vérifier le contenu d’une liste SharePoint dans PowerApps, insérez un contrôle Table de données dans l’écran vide de test (voir Règle 5) que vous reliez à la liste. Cela permet de vérifier ce que PowerApps “voit” comme données. Vous serez peut-être surpris.

Règle 10 b
Pour vérifier le contenu d’une source de données dans PowerApps, insérez un contrôle Table de données dans l’écran vide de test (voir Règle 5) que vous reliez à la source. Cela permet de vérifier ce que PowerApps “voit” comme données. Vous serez peut-être surpris.

Règle 11
Pour vérifier le contenu d’une source de données dans PowerApps, insérez un contrôle Table de données dans l’écran vide de test (voir Règle 5) que vous reliez à la source. Cela permet de vérifier ce que PowerApps “voit” comme données. Vous serez peut-être surpris.

Règle 12
Il n’y a pas de règle 12. Attends… S’il n’y a pas de …

Règle 13
En cas d’erreur (icône rouge), cliquez dans le stéthoscope en haut à droite puis dans Formules : lisez l’explication.

Règle 14 a
En cas d’erreur (icône rouge) dans une formule, remplacez TOUTES les virgules (“,”) de la formule par des points-virgules (“;”) dans la version française de PowerApps. Dans la version de française PowerApps, les menus sont en français…

Règle 14 b
If error (red icon) in a formula, replace ALL semicolons (“;”) in the formula with commas (“,”) in the English version of PowerApps. In the English version of PowerApps, the menus are in English…

Règle 15
En cas d’erreur (icône rouge) incompréhensible ou bizarre dans une formule, vérifiez la syntaxe des fonctions. Les fonctions de PowerApps ont une syntaxe précise avec des paramètres disposées dans un ordre précis. Pour connaître la syntaxe d’une fonction : https://coudr.com/powfn.

Règle 16
En cas d’erreur (icône rouge) incompréhensible ou bizarre dans une formule, réécrivez entièrement votre formule.

Règle 17
En cas d’erreur (icône rouge) dans une formule, réécrivez votre formule en sélectionnant les champs proposés automatiquement par PowerApps.

Règle 18
Si tout est bon et que ça ne marche pas, enregistrez votre application puis fermez l’onglet qui affiche l’application. Ouvrez a nouveau l’application en modification avec les 3 petits points (…).

Règle 19
Si l’affichage PowerApps est bizarre, enregistrez votre application puis fermez l’onglet qui affiche l’application. Ensuite, appuyez simultanément sur les touches du clavier Alt + Maj + Suppr. Dans la fenêtre qui s’ouvre, cochez toutes les cases et sélectionnez la durée. Attention les mots de passe enregistrés dans le navigateur seront perdus. Quand le nettoyage est terminé, fermez TOUS les navigateurs ouverts. Ouvrez a nouveau le navigateur puis identifiez vous sur https://office.com.

Règle 20
Si PowerApps vous demande sans arrêt de vous authentifier, enregistrez votre application puis fermez l’onglet qui affiche l’application. Ensuite, appuyez simultanément sur les touches du clavier Alt + Maj + Suppr. Dans la fenêtre qui s’ouvre, cochez toutes les cases et sélectionnez la durée. Attention les mots de passe enregistrés dans le navigateur seront perdus. Quand le nettoyage est terminé, fermez TOUS les navigateurs ouverts. Ouvrez a nouveau le navigateur puis identifiez vous sur https://office.com.

Règle 21
Si votre formule ne fonctionne toujours pas ou si vous ne savez pas comment faire et que vous voulez faire une recherche sur Google. Traduisez en anglais votre recherche sur Google et faîtes la précéder par le mot PowerApps. Par exemple : “PowerApps View a SharePoint Calendar”.

Règle 22
Demerden Sie sich! (Private joke : souvenir pour N.). Multilingues, qu’on est.

Règle 23
Si le champ d’une liste déroulante est vide, alors qu’il devrait être alimenté. Utilisez temporairement la fonction Dictinct(). Celle-ci oblige PowerApps à alimenter une liste déroulante vide. Ensuite, une fois que la liste déroulante est bien alimentée, enlevez la fonction Distinct(), si vous n’en avez plus besoin.

Article mis à jour le 14 septembre 2019

Catégories
Prestations Audits Formations

Créer une application multilingue PowerApps

Le besoin d’une application multilingue PowerApps apparaît dans les organisations internationales. L’idée est d’avoir une seule application PowerApps qui peut s’afficher dans la langue de l’utilisateur.

Identifier les textes fixes

Dans votre application, recherchez tous les contenus textuels, comme les messages, infobulles, etc.

Dans ce scénario, le formulaire est constitué de deux contrôles. Un contrôle de type étiquette et un contrôle de type entrée de texte. Ces contrôles servent à saisir la ville du demandeur.

Le formulaire doit fonctionner en français, anglais et allemand. Il doit aussi prévoir le cas où la langue n’est ni le français, l’anglais et l’allemand. La langue initiale du formulaire est l’anglais.

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

Formulaire PowerApps multilingue
Formulaire PowerApps multilingue

Créer une table de correspondance

En fonction du code langue qui sera récupérée (voir plus bas), cette table indique le terme correspondant à la langue pour chaque chaîne de caractères. Pour vous aider, regardez la copie d’écran ci-dessous.

TermeLangueTraduction
City frVille
City enCity
City deStadt
CityCity

Vous remarquerez la présence d’une ligne avec une valeur vide pour le code langue. Cette ligne sert comme valeur par défaut, si aucun code langue ne peut être récupéré ou si le code langue récupéré n’a pas de valeur définie pour la variable.

Concrètement, cette liste est définie dans un fichier Microsoft Excel sous forme d’un tableau. Pour vous aider, regardez la copie d’écran ci-dessous.

Fichier Microsoft Excel sous forme d'un tableau
Fichier Microsoft Excel sous forme d’un tableau

Il est conseillé de donner un nom significatif à votre tableau. Par défaut, celui-ci s’appelle Tableau1. Dans ce scénario, le tableau se nomme dictionary. Pour vous aider, regardez la copie d’écran ci-dessous.

Nommer un tableau Excel
Nommer un tableau Excel

Ce fichier est ensuite importé dans l’application PowerApps sous forme de données statiques. Pour vous aider, regardez la copie d’écran ci-dessous.

Importer à partir d'Excel dans PowerApps
Importer à partir d’Excel

Ensuite, il suffit de cliquer sur Importer à partir d’Excel, de sélectionner le fichier Excel. Lors de l’import, vous devrez indiquer quel tableau est concerné dans le volet de droite.

Récupérer la langue de l’utilisateur

La fonction Language() permet de récupérer la langue de l’utilisateur. Pour plus d’informations, consultez l’aide Microsoft de la fonction Language(). Cet article s’est d’ailleurs inspiré de cette page d’aide.

Dans votre application, définissez la propriété Text du champ texte City avec la formule suivante :

LookUp( dictionary; Terme = "City" && (Langue = Left( Language(); 2 )  || IsBlank( Langue ))).Traduction

A l’intérieur de cette formule, la fonction Language() récupère le code langue sous la forme fr-FR. La fonction Left() extrait les deux premiers caractères du code langue, soit fr.

La fonction LookUp() lit les données de la source de données dictionnary. Les données sont filtrées pour le terme City et pour le code langue calculé précédemment. Si le code langue est vide, la traduction de la ligne sans code langue est récupérée. Pour vous aider, regardez la copie d’écran ci-dessous.

Récupération du code langue
Récupération du code langue

Dans ce scénario, la langue de l’utilisateur est bien le français.

Vous noterez que l’affichage de la traduction doit tenir compte de la longueur de la traduction.

Article mis à jour le 4 septembre 2019.

Catégories
Prestations Audits Formations

Créer et gérer une application pour SharePoint Online

PowerApps est intégré dans le contexte de SharePoint Online, de plusieurs façons.

Personnaliser un formulaire

Tout d’abord, vous pouvez personnaliser les formulaires SharePoint. Cela signifie que grâce à PowerApps, vous modifiez le formulaire d’ajout, de modification ou d’affichage d’un élément d’une liste SharePoint.

Pour ce faire, vous devez être dans l’expérience Moderne de l’affichage de la liste SharePoint. Ensuite, quand vous cliquez sur le bouton Personnaliser les formulaires sous PowerApps, une application particulière est créée. Sachez que cette application PowerApps ne peut pas être exécutée de façon autonome. En effet, elle est uniquement disponible à partir de la liste SharePoint.

Créer une application

Concrètement, l’application est générée puis enregistrée directement dans PowerApps. C’est une application avec un seul écran.

Vous pouvez aussi créer directement une application PowerApps en partant d’une liste SharePoint. Une fois nommée, l’application est générée puis enregistrée directement dans PowerApps. Il s’agit d’une application avec 3 écrans par défaut.

Écran de navigation BrowseScreen1

L’écran de navigation s’intitule par défaut BrowseScreen1. Il affiche la liste des éléments et il permet aussi de créer un élément en appelant le formulaire correspondant.

Écran de navigation BrowseScreen1
Écran de navigation BrowseScreen1

L’écran BrowseScreen1 possède une galerie qui s’intitule BrowseGallery1. C’est le contrôle principal de l’écran. Il affiche la liste des éléments de la liste SharePoint. Cette liste est filtrée par le contenu de la recherche TextSearchBox1. BrowseGallery1 est constitué de 5 contrôles, dont 3 servent à afficher les données : Title1, Subtitle1, Body1. Cette disposition peut bien évidemment être changée.

Galerie BrowseGallery1
Galerie BrowseGallery1
  • Title1 est une étiquette qui affiche la valeur de la colonne Titre de la liste pour l’élément concerné.
  • Subtitle1 est une étiquette qui affiche la valeur d’une autre colonne pour l’élément concerné.
  • Body1 est une étiquette qui affiche la valeur d’une autre colonne pour l’élément concerné.

Les 2 autres contrôles de BrowseGallery1 sont Separator1 qui est un rectangle qui représente la barre horizontale basse de séparation des éléments et NextArrow1 qui est l’icône de la flèche à droite. Quand l’utilisateur clique dessus, cette action affiche l’écran DetailScreen1.
IconSortUpDown1 est l’icône qui change l’ordre de tri grâce à la fonction UpdateContext() qui met à jour la variable SortDescending1 :

OnSelect: UpdateContext({SortDescending1: !SortDescending1})

IconRefresh1 est l’icône qui rafraîchit l’affichage grâce à la fonction Refresh() :

OnSelect: Refresh(lstAffaires)

TextSearchBox1 est une entrée de texte pour la saisie de la recherche. Tandis que IconNewItem1 est l’icône de création d’un élément. Quand l’utilisateur clique dessus, cette action ouvre le contrôle EditForm1 en mode création et affiche l’écran EditScreen1 :

OnSelect: NewForm(EditForm1);;Navigate(EditScreen1; None)

Rectangle11 est un rectangle qui représente la barre horizontale haute. Tandis que SearchIcon1 est l’icône de la loupe, LblAppName1 est une étiquette qui affiche par défaut le nom de la liste et RectQuickActionBar1 est un rectangle qui représente le bandeau supérieur.

Écran de détails DetailScreen1

Cet écran affiche le détail d’un élément.

Quand une application est générée à partir d’une liste SharePoint, son nom par défaut est: DetailScreen1. DetailForm1 est le contrôle principal de cet écran. C’est un contrôle de type formulaire. Il permet d’afficher le détail d’un élément de la liste SharePoint. Il contient les champs de la liste SharePoint. Les champs sont regroupés par cartes (ou DataCard).

Une carte DataCard1 est créée pour chaque champ. Elle est préfixée du nom du champ : Titre_DataCard1, MontantHT_DataCard1, etc. Chaque carte est constituée de 2 contrôles.

Il y a un contrôle de type étiquette DataCarKey avec le nom du champ. Elle est suffixée d’un numéro différent par DataCard : DataCardKey1, DataCardKey2, etc. Il y a aussi une étiquette DataCardValue avec la valeur du champ. Elle est suffixée d’un numéro différent par DataCard : DataCardValue1, DataCardValue2, etc.

IconDelete1 est l’icône de suppression d’un élément. Quand l’utilisateur clique dessus, cette action supprime l’élément et revient sur l’écran précédent.

OnSelect: Remove(lstAffaires; BrowseGallery1.Selected);; If (IsEmpty(Errors(lstAffaires; BrowseGallery1.Selected)); Back())

IconEdit1 est l’icône de modification d’un élément. Quand l’utilisateur clique dessus, cette action ouvre le contrôle EditForm1 en mode édition et affiche l’écran EditScreen1.

OnSelect: EditForm(EditForm1);;Navigate(EditScreen1; None)

IconBackarrow1 est l’icône de retour à l’écran de navigation BrowseScreen1.

OnSelect: Navigate(BrowseScreen1; None)

LblAppName2 est une étiquette qui affiche par défaut le nom de la liste. Tandis que RectQuickActionBar2 est un rectangle qui représente le bandeau supérieur.

Écran de modification EditScreen1

Cet écran permet de modifier le détail d’un élément.

Quand une application est générée à partir d’une liste SharePoint, son nom par défaut est: EditScreen1. Dans cet écran, EditForm1 est le contrôle principal. C’est un contrôle de type formulaire. Celui-ci permet de modifier ou de créer un nouvel élément. En effet, il contient les champs de la liste SharePoint.

Dans ce contrôle les champs sont regroupés par cartes (ou DataCard). Une carte DataCard2 est créée pour chaque champ. Elle est préfixée du nom du champ : Titre_DataCard2, etc.

Dans ce contrôle, chaque DataCard est constituée de 4 contrôles.

  • Une étiquette StarVisible2 qui signale si le champ est obligatoire ou pas.
  • Une étiquette ErrorMessage2 qui affiche un message d’erreur.
  • Une étiquette DataCarKey avec le nom du champ. Elle est suffixée d’un numéro différent par DataCard : DataCardKey9, etc.
  • Une entrée de texte DataCardValue avec la valeur du champ. Elle est suffixée d’un numéro différent par DataCard : DataCardValue9, etc.

IconAccept1 est l’icône de validation de la modification. Quand l’utilisateur clique dessus, cette action ouvre EditForm1 en validation.

IconCancel1 est l’icône d’annulation de la modification. Quand l’utilisateur clique dessus, cette action affiche à nouveau EditForm1 sans rien modifier.

LblAppName3 est une étiquette qui affiche par défaut le nom de la liste. Tandis que RectQuickActionBar3 est un rectangle qui représente le bandeau supérieur.

Catégories
Prestations Audits Formations

Manipuler les données dans PowerApps

Liaison de données

La liaison de données permet de disposer de données sous forme d’une table. Cette table est constituée de lignes qu’on appelle des enregistrements de données.

Une liaison de données peut être faite avec les galeries. Les galeries servent à afficher toutes vos données. Elles peuvent aussi servir à filtrer un ensemble d’enregistrements.

Galerie PowerApps
Galerie PowerApps

Les galeries ont une disposition qui permet de choisir les champs à afficher et leur disposition. Vous pouvez aussi modifier l’ordre des champs à afficher.

Une liaison de données peut aussi être faite avec les formulaires. Le contrôle formulaire permet de se lier à un seul enregistrement de données à la fois. Il sert à afficher ou à éditer un seul enregistrement à la fois. Il permet aussi de créer un nouvel élément.

Formulaire PowerApps
Formulaire PowerApps

Cartes (Data Card) et contrôles

Une carte (Data Card) encapsule des contrôles enfants. Tandis qu’un formulaire encapsule des cartes et des contrôles.

Carte (Data Card) PowerApps
Carte (Data Card) PowerApps

L’écran d’édition possède des cartes avec 4 contrôles par défaut.

Dans une carte, la propriété DataField identifie le champ auquel la carte est liée dans l’enregistrement.

Pour faire référence aux propriétés de la carte, à partir d’un contrôle enfant, il est préférable d’utiliser l’objet Parent. Par exemple, pour lire l’état initial du champ à partir de la source de données, un contrôle enfant dans une carte utilisera Parent.Default.

Pour faire référence à l’enregistrement en cours dans une formule d’une propriété d’un contrôle ou d’une carte, il faut utiliser l’objet ThisItem. Cet objet contient les propriétés pour chaque champ de l’enregistrement.

Pour afficher les données d’une colonne de type choix ou recherche :

ThisItem.NomColonne.Value

Par exemple, si le nom de la colonne de type choix ou recherche, est Fruit, spécifiez :

ThisItem.Fruit.Value.

Pour afficher le nom complet d’un utilisateur ou d’un groupe :

ThisItem.NomColonne.DisplayName

Par exemple, si le nom de la colonne de type groupe est Marketing, spécifiez :

ThisItem.Marketing.DisplayName.

Pour afficher les données d’une colonne de type métadonnées gérées :

ThisItem.NomColonne.Label

Par exemple, si le nom de la colonne de type métadonnées gérées est Services, spécifiez :

ThisItem.Services.Label

Il existe plusieurs types de cartes pour modifier l’expérience utilisateur. Il est possible de changer la carte par défaut utilisée pour un champ.

Article mis à jour le 23.09.2019.