Exercice - Ajouter une source de données à l’application canevas et concevoir des pages fonctionnelles

8 minutes

Dans Power Apps, vous pouvez connecter vos données à une application déjà existante ou à une application que vous générez à partir de zéro. Votre application peut se connecter à SharePoint, Microsoft Dataverse, Salesforce, OneDrive ou toute autre source de données.

Nous allons utiliser SharePoint comme source de données principale pour cette application. Vous pouvez vous connecter au site SharePoint pour générer automatiquement une application à partir d’une liste personnalisée, créer une connexion avant d’ajouter des données à une application existante ou créer une application à partir de zéro.

Créer un site SharePoint

Connectez-vous au portail SharePoint avec les informations d’identification de votre organisation Microsoft.
Sélectionnez + Créer un site sur la page de démarrage SharePoint pour créer le site SharePoint .
Dans la page de démarrage de SharePoint, vous trouverez les informations suivantes :
- Choisissez le type de site ; le choix est le site de communication ou le site d’équipe. Sélectionnez Site de communication.
- Entrez un nom approprié pour le site ; par exemple , Easy Sales.
- Ajoutez la description du site si nécessaire (facultatif).
- Sélectionnez la langue de votre choix dans la liste déroulante.
Sélectionnez Terminer pour créer un site SharePoint pour charger vos données.

Un site SharePoint moderne est créé et prêt à être utilisé en secondes. Vous pouvez maintenant créer une liste, une bibliothèque de documents, une page, et ainsi de suite dans votre site nouvellement créé.

Remarque

Si vous avez sélectionné le site d’équipe, un groupe Microsoft 365 est également créé.

Créer une liste SharePoint

Une liste SharePoint collecte des données avec une structure similaire à une table, une feuille de calcul ou une base de données simple. Il peut inclure de nombreux types d’informations différents, tels que des nombres, du texte, des pièces jointes et même des images.

Pour notre application Easy Sales , nous allons créer une liste contenant les détails de toutes les catégories de produits : Canapés, Chaises, Tables et Tapis.

Dans le site SharePoint nouvellement créé sous le nom Easy Sales, sélectionnez la liste déroulante + Nouveau , puis sélectionnez Liste pour créer votre liste SharePoint.
Dans la fenêtre Créer une liste, sélectionnez Liste vide pour créer une liste SharePoint à partir de zéro.
Configurez le volet Créer comme suit :
- Entrez un nom approprié pour la liste ; par exemple , Easy Sales.
- Renseignez la description, si nécessaire (facultatif).
- Laissez la case à cocher Afficher dans la navigation du site activée.
- Cliquez sur Créer.

Ajouter des données à votre liste SharePoint

Une fois la liste créée, il est temps d’ajouter les données. Ici, les « données » signifient les détails d’un produit particulier. Les détails du produit incluent les informations suivantes : Nom, Image, Prix, Dimensions, Poids, Couleur, PrimaryMaterial, Zone, Hauteur et image 3D du produit à afficher en réalité mixte.

Dans la liste des ventes faciles créée, sélectionnez + Ajouter une colonne pour ajouter une colonne d’un type spécifique. La liste ci-dessous montre les colonnes qui doivent être créées, avec leurs noms et types dans ce format : Nom de la colonne - Type de colonne.
- Nom : ligne de texte unique
- ImageLink : ligne de texte unique
- Prix : ligne de texte unique
- Dimensions : ligne de texte unique
- Poids : ligne de texte unique
- Couleur : ligne de texte unique
- PrimaryMaterial : ligne de texte unique
- Hauteur : nombre
- Profondeur : Nombre
- Largeur : nombre
- Prix/cm2 : Nombre
- ProductCategory : ligne de texte unique
- FileType : ligne de texte unique
Sélectionnez le type de colonne dans la liste déroulante ; par exemple, sélectionnez Une seule ligne de texte.

Entrez les détails de la colonne dans l’onglet Créer la colonne , puis sélectionnez Enregistrer.

Répétez la même procédure pour le reste des colonnes de la liste précédente.

Remarque

Après avoir créé une liste SharePoint , une colonne de titre par défaut est créée que vous pouvez renommer en tant que nom.
Une fois que nous avons ajouté les colonnes, nous devons ajouter les données réelles sous ces colonnes. Commencez à ajouter des données à des colonnes en téléchargeant le dossier personnalisé qui inclut tous les détails du produit pour les quatre listes. Pour accéder aux données, sélectionnez le lien suivant, sélectionnez le bouton Autres actions de fichier (...) en haut à droite de la page, puis sélectionnez Télécharger.

Dossier personnalisé Power Apps
Sélectionnez + Nouveau pour ajouter un élément, puis renseignez les détails requis comme indiqué dans le fichier Excel téléchargé. Sélectionnez Enregistrer pour enregistrer les détails entrés.

Remarque

La vue Grille vous permet d’ajouter des informations librement à différentes lignes ou colonnes.
Commencez à ajouter vos données dans leurs colonnes respectives, comme illustré dans la figure :

Remarque

Si vous souhaitez inclure des images de votre choix, vous pouvez ajouter les liens d’image des images publiques disponibles sur Internet sous la colonne ImageLink . Vous pouvez obtenir les liens d’image en cliquant avec le bouton droit et en sélectionnant l’option Copier l’adresse de l’image .

Remarque

Vous n’aurez pas besoin des valeurs de hauteur, de profondeur et de largeur pour la liste des catégories tapis . Cette catégorie de produit prend la valeur de superficie mesurée pendant la session de mesure dans MR et donne le prix du tapis en fonction de la superficie calculée. Toutefois, nous avons ajouté la colonne Price/cm2 pour faciliter le processus de calcul.

Créer une connexion

Maintenant que toutes nos données requises pour l’application sont stockées dans la liste SharePoint, nous allons établir une connexion dans Power Apps. Une fois la connexion établie, vous pouvez facilement accéder aux données SharePoint via l’application.

Pour commencer à créer une connexion, connectez-vous à Power Apps et sélectionnez Connexions dans la barre de navigation gauche. Sélectionnez ensuite + Nouvelle connexion près du coin supérieur gauche.
Sélectionnez SharePoint. Nous sélectionnons SharePoint , car nous avons stocké les données requises dans les listes SharePoint .
Pour vous connecter à SharePoint Online, sélectionnez Se connecter directement (services cloud), puis créez, puis, si vous y êtes invité, fournissez des informations d’identification.
La connexion est créée et vous pouvez créer une application à partir de zéro.

Remarque

Même si la connexion est créée, vous pouvez toujours ajouter, modifier et supprimer des données stockées dans votre liste SharePoint. Toutes les modifications sont reflétées dans l’application via la connexion.

Commençons à créer l’application Easy Sales en fonction des données SharePoint, puis ajoutons des données à partir d’autres sources, si vous le souhaitez. En suivant cette procédure, vous pourrez concevoir certaines des pages principales de l’application. Par exemple, vous allez apprendre à concevoir un écran de démarrage, une page produit et une page de liste de produits. Nous allons également accéder aux données stockées dans la liste SharePoint via le contrôle de la galerie Power Apps.

Ouvrir une application vide

Accédez à la page d’accueil de Power Apps , puis sélectionnez Créer dans le menu de gauche. Sélectionnez Application vide, puis sélectionnez Créer sous Application de canevas vide.
Spécifiez un nom pour votre application ; par exemple , Easy-Sales. Sélectionnez Téléphone, puis sélectionnez Créer.

Power Apps Studio crée une application vide pour les téléphones.

Remarque

Bien que vous puissiez concevoir une application à partir de zéro pour différents appareils, cette rubrique se concentre sur la conception d’une application pour les téléphones.
Si la boîte de dialogue Bienvenue dans Power Apps Studio s’ouvre, sélectionnez Ignorer.

Se connecter aux données

Pour inclure des données dans votre application Power App, vous devez vous connecter aux données via les connecteurs de votre application. Étant donné que nous avons stocké toutes les données dans une liste SharePoint , nous allons sélectionner SharePoint comme l’un des connecteurs.

À gauche de Power Apps Studio, sélectionnez l’option Données .
Après avoir ouvert le volet Données , sélectionnez le bouton Ajouter des données pour vous connecter aux données.
Dans la fenêtre Sélectionner une source de données , développez la section Connecteurs et sélectionnez l’option SharePoint .
Dans l’exercice précédent, nous avons déjà créé une connexion. Sélectionnez la connexion créée pour ajouter les données à votre application. Sélectionnez le site SharePoint créé sous le nom Easy Sales.
Après avoir sélectionné le site Easy Sales SharePoint, toutes les listes créées sur ce site sont affichées. Ensuite, sélectionnez la liste SharePoint créée concernant l’application, puis cliquez sur Se connecter.
Toutes les données requises sont connectées et prêtes à être utilisées dans l’application. Vous pouvez maintenant commencer à créer l’application.

Créer l’écran de démarrage

Sélectionnez l’option Arborescence à gauche de Power Apps Studio. Vous devez déjà avoir un écran vide dans Power Apps Studio ; si ce n’est pas le cas, sous l’onglet Accueil , sélectionnez la flèche vers le bas en regard de Nouvel écran qui ouvre la liste des types d’écran. Ensuite, sélectionnez Vide pour créer un écran vide.
Renommez l’écran en écran de démarrage en sélectionnant l’icône trois points (...) présente en regard du nom de l’écran et en sélectionnant l’option Renommer .
Sélectionnez l’écran nouvellement créé pour modifier ses propriétés sous l’onglet Propriétés à droite de l’écran.
Sélectionnez la liste déroulante en regard de la propriété d’image d’arrière-plan pour ajouter une image à l’écran. Sélectionnez + Ajouter un fichier image pour sélectionner le fichier logo téléchargé.
Définissez la position de l’image sur Ajuster pour que l’image entière corresponde à la taille spécifiée. L’option Ajuster redimensionne l’image proportionnellement sans la rogner.
Sous l’onglet Insertion , développez la liste déroulante Entrée et sélectionnez Minuteur. Ensuite, faites glisser le bouton sur l’écran et placez-le où vous le souhaitez.
Pour modifier certaines des propriétés du minuteur, vous pouvez utiliser la liste déroulante Propriété en haut à gauche ou utiliser le volet Propriétés . Définissez les propriétés suivantes :
- Démarrage automatique : true
- Durée : 2000
- Visible : false
  
  Remarque
  
  Par défaut, la durée est mesurée en millisecondes. Puisque 1 seconde = 1000 millisecondes, entrez 2000 comme valeur pour la durée.
Nous voulons que l’écran de démarrage soit visible pendant seulement deux secondes, puis passer à la page d’accueil. Créez un écran vide comme nous l’avons fait à l’étape précédente et renommez-le en tant que page d’accueil. Plus tard, sélectionnez le bouton minuteur ajouté à l’écran de démarrage et configurez la propriété OnTimerEnd . Remplacez false par le contenu suivant :
```
Navigate('Home Page',ScreenTransition.Fade)
```
Enregistrez votre application en accédant à Fichier>Enregistrer. Ensuite, sélectionnez l’option cloud , puis sélectionnez Enregistrer.

Créer la page d’accueil

Sélectionnez la page d’accueil créée précédemment. Pour insérer quatre boutons, accédez à l’onglet Insertion et sélectionnez l’option Bouton pour ajouter des boutons à l’écran. Ajustez la taille et la position de ces boutons en fonction des besoins. Renommez-les respectivement Sofas_button, Chairs_button, Tables_button et Carpets_button.
Modifiez le texte d’affichage des boutons pour indiquer des catégories de produits telles que canapés, chaises, tables et tapis.
Nous allons utiliser ces boutons pour accéder à la liste des produits sous différentes catégories. Pour ce faire, nous devons filtrer les produits de la liste SharePoint en fonction de la catégorie de produit. Créez deux écrans vides et renommez-les Produits et Tapis.
Sélectionnez le bouton Sofas_button nouvellement créé et configurez la propriété OnSelect . Après avoir sélectionné le bouton, il doit nous amener à la page de liste de produits créée à l’étape précédente. Remplacez la valeur false par le code suivant :
```
Navigate(Products,ScreenTransition.Cover, {ID:1});
```
Remarque

L’ID est une variable de contexte avec une valeur affectée. Cette valeur est transmise à la page de destination mentionnée dans la fonction Navigate . La valeur affectée à la variable filtre les produits en fonction de la catégorie de produit.
Répétez la même procédure pour les trois autres boutons. Là encore, veillez à fournir les noms d’écran appropriés dans la fonction Navigate ; par exemple, pour configurer la propriété OnSelect des boutons Chaises, Tables et Tapis , utilisez la fonction Navigate comme suit :
```
Navigate(Products,ScreenTransition.Cover, {ID:2});
```
```
Navigate(Products,ScreenTransition.Cover, {ID:3});
```
```
Navigate(Carpets,ScreenTransition.Cover)
```
Conseil / Astuce

Pour enregistrer votre progression, sélectionnez l’onglet Fichier en haut et sélectionnez l’option Enregistrer . Vous pouvez également utiliser Ctrl+S pour enregistrer votre progression.
Remarque

La syntaxe par défaut de la fonction Navigate est : Navigate(Screen [, Transition [, UpdateContextRecord]])
- Écran : Obligatoire. Écran à afficher.
- Transition : facultatif. La transition visuelle à utiliser entre l’écran actuel et l’écran suivant. La valeur par défaut est None.
- UpdateContextRecord : facultatif. Un enregistrement contenant le nom d’au moins une colonne et une valeur pour chaque colonne. Cet enregistrement met à jour les variables de contexte du nouvel écran comme s’il est passé à la fonction UpdateContext.
Conseil / Astuce

Vous pouvez tester votre application en appuyant sur la touche F5 du clavier ou en cliquant sur le bouton Lire en haut à droite de Power Apps Studio.

Utiliser le contrôle Galerie

Maintenant que nous avons ajouté les catégories de produits, nous allons afficher la liste des produits sous chaque catégorie. Dans Power Apps, nous utilisons le contrôle Gallery pour afficher un enregistrement de données.

Dans l’écran Produits , sous l’onglet Insertion , sélectionnez Galerie>verticale pour ajouter le contrôle Galerie à votre écran.
Renommez-le en Gallery_products. Sous l’onglet Propriétés du volet gauche, configurez la propriété Items comme suit :
```
If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))
```
Nous filtrons les produits stockés dans la liste SharePoint en fonction de la catégorie de produit. Les variables de contexte sont utilisées pour le processus de filtrage.
Configurez la propriétéChamps de la > dans le volet Propriétés en sélectionnant Modifier :
- Affectez le Prix au sous-titre 1.
- Affectez le Titre à l'en-tête Title1.
Lors de l’affectation des champs précédents, vous observerez les données qui sont reflétées dans votre galerie.
Ajustez la taille du Gallery_products en fonction des besoins. Pour ajouter ImageLink au titre Image1, sélectionnez l’image dans la galerie et configurez la propriété Image sous l’onglet Propriété en ajoutant cette ligne de code :
```
ThisItem.ImageLink
```
Maintenant, insérons une étiquette en haut de l’écran en sélectionnant l’option Étiquette . Ensuite, personnalisez la position, la couleur et l’affichage du texte comme indiqué dans la figure :
Ajoutez une icône Précédent sur l’étiquette précédemment ajoutée pour aider l’utilisateur à accéder à la page d’accueil si nécessaire. Pour ajouter l’icône Précédent , développez la liste déroulante Icônes et sélectionnez l’icône Précédent .
Positionnez correctement l’icône Précédent et modifiez sa couleur d’affichage, si nécessaire. Configurez sa propriété OnSelect en ajoutant les éléments suivants :
```
Navigate('Home Page',ScreenTransition.Cover)
```
Suivez la même procédure pour la page Tapis . Configurez la propriété Items de la galerie ajoutée à la page Tapis de la manière suivante :
```
Filter('Easy Sales',ProductCategory = "Carpet")
```
Conseil / Astuce

Pour enregistrer votre progression, sélectionnez l’onglet Fichier en haut et sélectionnez l’option Enregistrer . Vous pouvez également utiliser Ctrl+S pour enregistrer votre progression.

Après avoir implémenté les étapes précédentes, voici comment votre application doit ressembler. L’application inclut un excellent écran de démarrage, une page d’accueil et un inventaire des produits pour parcourir les produits.

Commentaires

Cette page a-t-elle été utile ?