Exercice : créer une application de gestion des stocks avec SharePoint

  • 12 minutes

Imaginez un scénario dans lequel vous souhaitez que les utilisateurs de Contoso, votre société, commandent leurs propres machines à café. Contoso souhaite que vous créiez une application que vous pouvez partager avec toute personne qui gère ce processus.

Dans cet exercice, vous allez configurer deux listes SharePoint pour stocker les données de machine à café et les données de commande. Ensuite, vous allez créer une application canevas Power Apps pour interagir avec ces données et passer des commandes.

Créer la liste des machines

Votre première tâche consiste à créer la liste des machines :

  1. Téléchargez le fichier Excel Machine-Order-Data.xlsx.

  2. Accédez à un site SharePoint Online sur lequel vous souhaitez stocker les données de votre application.

  3. Dans le coin supérieur gauche, cliquez sur Nouveau > Liste.

  4. Sélectionnez l’option À partir d’Excel.

    Capture d’écran de la page Créer une liste dans SharePoint illustrant l’option À partir d’Excel.

  5. Cliquez sur Charger un fichier, puis sélectionnez le fichier Machine-Order-Data.xlsx que vous avez précédemment téléchargé.

  6. Sur la page Personnaliser, vérifiez que la table Machines se trouve dans le menu déroulant Sélectionner une table de ce fichier, puis cliquez sur Suivant dans le coin inférieur droit.

    Capture d’écran de la page Personnaliser illustrant la table Machines sélectionnée.

  7. Vous pouvez ajuster le nom de votre liste et ajouter une description (facultatif). Cliquez sur le bouton Créer pour continuer. Attendez ensuite quelques instants pour votre nouvelle liste.

Une fois votre nouvelle liste terminée, votre navigateur devrait y accéder automatiquement. Toutes les données de votre feuille Excel devraient être chargées et prêtes à l’emploi.

Créer la liste des commandes

Ensuite, vous allez créer la liste des commandes en procédant comme suit :

  1. Cliquez sur le bouton Accueil dans le coin supérieur gauche, sous le nom de votre site SharePoint.

  2. Dans le coin supérieur gauche, cliquez sur Nouveau > Liste.

  3. Sélectionnez Liste vide.

  4. Nommez votre liste Orders-List, puis cliquez sur Créer.

    Capture d’écran du champ Nom défini sur Orders-List.

  5. Sur la page Orders-List, directement sous le nom de la liste, vous voyez une colonne nommée « Title ». À droite de celle-ci se trouve le bouton Ajouter une colonne. Cliquez sur Ajouter une colonne.

  6. Dans la boîte de dialogue Créer une colonne, sélectionnez Date et heure, puis cliquez sur Suivant.

  7. Nommez cette colonne OrderDate, puis cliquez sur Enregistrer.

    Capture d’écran de la boîte de dialogue Créer une colonne avec le champ Saisie du nom et le bouton Enregistrer mis en évidence.

  8. Recliquez sur Ajouter une colonne.

  9. Faites défiler vers le bas et sélectionnez Devise, puis cliquez sur Suivant.

  10. Nommez cette colonne OrderTotal, puis cliquez sur Enregistrer.

Vous disposez maintenant d’une liste SharePoint vous permettant de stocker les données de commande des machines à café.

Créer l’application canevas

Pour créer l’application canevas dans Power Apps, procédez comme suit :

  1. Accédez à make.powerapps.com.

  2. Sélectionnez l’option Créer à gauche.

  3. Sélectionnez Application vide.

    Capture d’écran de la page Créer votre application dans Power Apps avec l’option Application vide sélectionnée.

  4. Sélectionnez l’option Créer sous Application canevas vide.

  5. Nommez votre application Contoso Coffee Machine Ordering, puis cliquez sur le bouton Créer.

  6. Quelques instants après, votre écran ouvre l’éditeur d’applications canevas, où vous pouvez concevoir et modifier votre application Power Apps pour interagir avec vos données SharePoint.

    Capture d’écran de l’éditeur d’applications canevas.

  7. Cliquez sur l’icône Enregistrer dans le coin supérieur droit. (Par défaut, Power Apps enregistre automatiquement votre application toutes les deux minutes, mais seulement après la première fois que vous l’enregistrez manuellement ; il est donc toujours judicieux d’enregistrer votre application après l’avoir créée.)

  8. Cliquez sur le menu déroulant Ajouter des données.

  9. Recherchez et sélectionnez SharePoint (à savoir l’option SharePoint standard, et non Sites SharePoint). Vous devrez peut-être faire défiler les résultats vers le bas pour la trouver. Si vous n’avez pas encore de connexion, cliquez sur Ajouter une connexion. Si vous disposez déjà d’une connexion, vous pouvez sélectionner votre connexion existante et ignorer l’étape suivante pour continuer.

    Capture d’écran du menu déroulant Ajouter des données développé pour afficher les résultats de la recherche de l’option SharePoint.

  10. Pour créer une connexion, un volet s’ouvre sur le côté droit de l’écran. Assurez-vous que l’option Se connecter directement (services cloud) est sélectionnée, puis cliquez sur Se connecter dans la partie inférieure de l’écran.

  11. Sur le côté droit de votre écran, vous devriez maintenant voir l’option Se connecter à un site SharePoint vous invitant à saisir l’URL de l’emplacement de votre liste ou vous pouvez regarder sous les sites récents pour trouver le site SharePoint.

    Le site SharePoint sur lequel vous avez créé vos listes de machines devrait s’afficher dans la liste des sites récents. Il vous suffit de sélectionner le site pour continuer.

    Si votre site ne s’affiche pas dans la liste, revenez au site où vous avez créé la liste et copiez l’URL (l’écran d’accueil du site, et non la page de liste), puis collez-la dans la ligne supérieure du volet. Une fois que Power Apps identifie le site, vous pouvez cliquer sur Connecter pour continuer.

  12. Dans le volet Choisir une liste, cochez les cases Machine-Order-Data et Orders-List.

  13. Cliquez sur Se connecter.

    Capture d’écran de la boîte de dialogue Choisir une liste avec les deux listes sélectionnées et le bouton Se connecter qui s’affiche.

Vous venez de créer votre application Power Apps et de la connecter à vos données afin de pouvoir lire et réécrire dans SharePoint directement au moyen de l’application.

Concevoir l’application canevas

Concevons notre application canevas en insérant et en connectant des contrôles.

  1. Cliquez sur Insérer > Libellé de texte.

    Capture d’écran du menu Insérer développé pour afficher la section Éléments populaires, notamment l’option Libellé de texte.

  2. Déplacez le contrôle Libellé de texte qui s’affiche dans le coin supérieur gauche du canevas, puis redimensionnez-le pour l’étendre sur tout le canevas.

  3. Sur le côté droit de l’écran, vous pouvez modifier les propriétés du contrôle dans vos applications canevas à l’aide d’une interface conviviale et sans avoir besoin de modifier le code. Le contrôle Libellé de texte étant toujours sélectionné, redéfinissez le texte sur Contoso Coffee Machine Ordering.

  4. Redéfinissez la propriété Font sur 18.

  5. Pour Text alignment, sélectionnez center.

  6. En regard de la couleur, l’icône représentant la lettre A indique la couleur du texte et l’icône représentant un pot de peinture indique la couleur d’arrière-plan de ce contrôle Libellé de texte. Cliquez sur l’icône A indiquant la couleur du texte, puis sélectionnez white.

  7. Cliquez sur l’icône représentant un pot de peinture, puis choisissez un bleu foncé (ou toute autre couleur de votre choix).

    Capture d’écran de l’icône représentant un pot de peinture cliquée pour révéler le sélecteur de couleur.

    Remarque

    Avec la plupart des contrôles, vous pouvez ajuster des paramètres tels que les polices, les couleurs et les couleurs d’arrière-plan par plusieurs moyens. Le volet Propriétés est unidirectionnel, mais vous remarquerez peut-être également que ces mêmes options s’affichent dans le ruban de la barre de commandes.

  8. Dans le ruban supérieur, cliquez sur Insérer > Galerie verticale.

  9. Une fenêtre contextuelle s’affiche alors pour vous inviter à connecter la galerie à une source de données. Sélectionnez Machine-Order-Data.

  10. Essayons d’ajuster les champs à l’aide de l’interface du ruban de la barre de commandes. Cliquez sur Modifier les champs dans la barre de commandes.

  11. Assurez-vous que le menu déroulant Subtitle1 affiche Price et que l’option Title1 affiche Machine Name. Cliquez en dehors de la boîte de dialogue Modifier les champs pour continuer.

  12. Le texte qui s’affiche dans votre galerie devrait refléter le nom de la machine et le prix, ainsi qu’un « exemple d’image », que nous corrigerons dans un instant. À présent, redimensionnez la galerie pour l’adapter sous le libellé d’en-tête, afin qu’elle occupe la moitié gauche du canevas sous votre libellé.

  13. Remplaçons cet exemple d’image afin de pouvoir afficher l’image réelle du produit. Cliquez sur l’icône de la première image dans la galerie. Directement sous le ruban de la barre de commandes se trouve le champ de saisie de formule fx où vous pouvez écrire du code pour modifier les propriétés d’un contrôle dans Power Apps, supprimez le texte SampleImage, puis saisissez ThisItem.Photo.

    Capture d’écran de l’option Image sélectionnée dans la barre de formule avec la formule définie sur ThisItem.Photo.

  14. À présent, modifions le format du texte de notre champ de sous-titre pour afficher la devise. Cliquez sur le libellé Subtitle1 dans le premier élément de votre galerie qui affiche le prix de l’article. Notez que l’Arborescence comporte un surlignage en gris pour ce contrôle et que le champ de formule affiche ThisItem.Price.

    Capture d’écran de l’arborescence illustrant le menu Screen1 développé pour afficher le sous-menu Gallery1, lui-même développé pour afficher l’option Subtitle1.

  15. Dans le champ de formule, redéfinissez la propriété Text sur Text(ThisItem.Price,"$##,###.00"). Vous voyez immédiatement que votre prix affiche des symboles dollar, des séparateurs de milliers et des cents.

  16. À présent, ajoutons un formulaire pour nous permettre de modifier nos données. Cliquez sur la moitié vide de votre canevas d’édition (pour quitter la galerie), puis sur Insérer > Formulaire de modification.

  17. Sélectionnez Orders-List comme source de données, puis Power Apps remplit le formulaire avec des champs, conformément à nos colonnes de liste SharePoint.

  18. Repositionnez et redimensionnez le contrôle Formulaire de modification pour l’adapter à la moitié droite de votre canevas.

    Capture d’écran du canevas illustrant le formulaire sélectionné et « Orders-List » comme source de données (DataSource) dans la barre de formule.

  19. Cliquez sur la fiche Title dans le formulaire. Notez qu’une icône représentant un cadenas s’affiche à gauche du nom de la fiche, juste au-dessus de la fiche sélectionnée. Nous allons déverrouiller la fiche pour la personnaliser. Cliquez avec le bouton droit sur la fiche sélectionnée, puis sélectionnez Déverrouiller.

    Image de la fiche Title sélectionnée affichant les options de clic droit, avec l’option Déverrouiller mise en évidence.

  20. Déverrouillez les fiches OrderDate et OrderTotal dans le formulaire à l’aide de la même technique.

  21. Sélectionnez le contrôle Saisie de texte sous Title dans votre formulaire. (Déverrouillez-le si nécessaire.)

  22. Redéfinissez le champ Formule Default en remplaçant Parent.Default par Gallery1.Selected.'Machine Name'. Vous devriez maintenant voir le titre de l’élément sélectionné dans la galerie sur le côté gauche de l’écran.

    Conseil

    Lorsque vous saisissez vos formules, Power Apps propose automatiquement des options au fur et à mesure que vous tapez. Vous pouvez appuyer sur la touche de tabulation ou Entrée pour sélectionner la suggestion mise en surbrillance ou parcourir la liste pour en sélectionner une. Cette opération est totalement facultative, mais elle peut accélérer la création et la précision des formules au fur et à mesure que vous vous y habituez.

  23. Sélectionnez le contrôle Sélecteur de dates sous OrderDate, puis redéfinissez la formule de la propriété DefaultDate sur Today().

  24. Sélectionnez le contrôle Saisie de texte sous OrderTotal, puis redéfinissez la formule sur Gallery1.Selected.Price.

  25. Sélectionnez l’intégralité du formulaire. Dans le coin supérieur gauche, la propriété DataSource s’affiche dans une liste déroulante avec le champ de saisie de formule 'Orders-List'. En cliquant sur ce menu déroulant Propriétés, vous pouvez choisir toute propriété disponible pour un contrôle et modifier la formule pour cette propriété de contrôle. Dans ce cas, vous allez redéfinir la propriété Item du formulaire, donc cliquez sur ce menu déroulant, puis sélectionnez Item.

    Capture d’écran du menu déroulant avec l’option DataSource par défaut sélectionnée et l’option Item qui s’affiche.

  26. Dans la formule de la propriété Item, saisissez Defaults('Orders-List'). La fonction Defaults() indique à Power Apps que nous créons un élément pour la liste SharePoint Orders-List, chaque fois que nous envoyons ce formulaire.

  27. Accédez à la barre de commandes, puis cliquez sur Insérer > Bouton.

  28. Faites glisser le contrôle Bouton sur le côté droit de votre écran sous les entrées de formulaire.

  29. Redéfinissez la propriété Text de votre contrôle Bouton sur Envoyer la commande.

  30. Redéfinissez la propriété OnSelect de votre contrôle Bouton sur SubmitForm(Form1).

À présent, vous disposez d’une application où les utilisateurs peuvent sélectionner une machine à café, prévisualiser leur commande et l’envoyer. Votre application terminée devrait ressembler à l’image suivante :

Capture d’écran de l’aperçu de la commande illustrant le bouton Envoyer la commande.

Passez votre application en mode Aperçu en cliquant sur le bouton (triangulaire) Lire dans le coin supérieur droit de la barre de commandes (ou en appuyant sur la touche de fonction F5 de votre clavier). Sélectionnez une machine à café, puis cliquez sur le bouton Envoyer la commande. Revenez sur la page Orders-List de votre liste SharePoint, puis vous devriez voir la commande que vous avez créée.

Capture d’écran de la commande venant d’être créée dans la liste.

J’espère que cela vous donnera envie de découvrir les possibilités d’interaction avec les données SharePoint à l’aide de Power Apps. Bien qu’il s’agisse d’une application de base, vous pouvez ajouter des personnalisations pour modifier l’IU/expérience utilisateur afin de répondre à vos besoins métier.