Utilisation de fichiers multimédias dans PowerAppsUsing multimedia files in PowerApps

Cette rubrique vous indique comment incorporer des fichiers multimédias dans votre application, charger des dessins de stylet dans une source de données et afficher les images d’une source de données dans votre application.This topic shows you how to embed multimedia files in your app, upload pen drawings to a data source, and show images from a data source in your app. La source de données utilisée dans la présente rubrique correspond à un fichier Excel hébergé par OneDrive Entreprise.The data source used in this topic is an Excel file in OneDrive for Business.

Conditions préalablesPrerequisites

Inscrivez-vous à PowerApps, puis installez l’application.Sign up for PowerApps, and install it. Lorsque vous ouvrez PowerApps, connectez-vous avec les informations d’identification que vous avez utilisées pour vous inscrire.When you open PowerApps, sign in using the same credentials that you used to sign up.

Ajouter un élément multimédia à partir d’un fichier ou du cloudAdd media from a file or the cloud

Vous pouvez choisir le type de fichier multimédia à ajouter (par exemple, une image, une vidéo ou un fichier audio).You can choose the kind of media file to add (for example, images, video, or audio).

  1. Sur l’onglet Contents (Contenu), sélectionnez Media (Média).On the Content tab, select Media.
  2. Sous Media (Média), sélectionnez Images (Images), Videos (Vidéos) ou Audio (Audio), puis sélectionnez Browse (Parcourir) :Under Media, select Images, Videos, or Audio, and then select Browse:

  3. Sélectionnez le fichier que vous souhaitez ajouter, puis choisissez Open (Ouvrir).Select the file that you want to add, and then select Open.

    Le dossier Images s’ouvre sur votre ordinateur et vous permet de sélectionner une image. Vous pouvez également accéder à un autre dossier.The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. Une fois les fichiers ajoutés, appuyez sur Échap pour revenir à l’espace de travail par défaut.When you finish adding files, press Esc to return to the default workspace.
  5. Sur l’onglet Insert (Insertion), sélectionnez Media (Média), puis Image (Image), Video (Vidéo) ou Audio (Audio) :On the Insert tab, select Media, and then select Image, Video, or Audio:

  6. Si vous avez ajouté un contrôle d’image, définissez la propriété Image correspondante sur le fichier que vous avez ajouté :If you added an image control, set its Image property to the file that you added:

    Définition de la propriété Image

    Remarque : spécifiez uniquement le nom du fichier, sans indiquer l’extension et en l’insérant entre des guillemets simples.Note Specify the file name only, without the extension, inside single quotes.

  7. Si vous avez ajouté un contrôle de vidéo ou audio, définissez la propriété Media correspondante sur le fichier que vous avez ajouté :If you added a video or audio control, set its Media property to the file that you added:

    Définition de la propriété Media

    Remarque : exécutez une vidéo YouTube en définissant la propriété Media d’un contrôle de vidéo sur l’URL appropriée, insérée entre des guillemets doubles.Note Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

Ajouter un élément multimédia à partir d’Azure Media ServicesAdd media from Azure Media Services

  1. À partir de votre compte Azure Media Services, chargez et publiez votre élément multimédia vidéo à partir du menu AMS > Paramètres > Éléments multimédias.From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.
  2. Une fois que la vidéo est publiée, copiez son URL.After the video is published, copy its URL.
  3. À partir de PowerApps, ajoutez le contrôle Vidéo à partir du menu Insérer > Média.From PowerApps, add the Video control from Insert > Media.
  4. Définissez la propriété Média sur la propriété que vous avez copiée.Set the Media property to the URL that you copied.

Comme le montre ce graphique, vous pouvez choisir n’importe quelle URL de streaming prise en charge par Azure Media Services :As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

Définition de la propriété Media

Ajouter à votre application des images provenant du cloudAdd images from the cloud to your app

Dans ce scénario, vous allez enregistrer les images dans un compte de stockage cloud OneDrive Entreprise.In this scenario, you save images in a cloud storage account, OneDrive for Business. Vous allez inclure le chemin d’accès aux images dans une table Excel, et afficher ces images dans un contrôle de galerie au sein de votre application.You use an Excel table to contain the path to the images, and you display the images in a gallery control in your app.

Ce scénario utilise le fichier CreateFirstApp.zip, qui contient des fichiers .jpeg.This scenario uses the CreateFirstApp.zip that contains some .jpeg files.

REMARQUE : le chemin d’accès à ces images dans le fichier Excel doit utiliser des barres obliques.NOTE: The path to these images in the Excel file must use forward slashes. Lorsque PowerApps enregistre les chemins d’accès aux images dans une table Excel, ces chemins utilisent des barres obliques inverses.When PowerApps saves image paths in an Excel table, the path uses backslashes. Si vous utilisez les chemins d’accès aux images d’une table Excel, remplacez les barres obliques inverses par des barres obliques dans ces chemins.If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. Dans le cas contraire, les images ne s’affichent pas.Otherwise, the images won't display.

  1. Téléchargez le fichier CreateFirstApp.zip et extrayez le dossier Assets dans votre compte de stockage cloud.Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. Remplacez le nom du dossier Assets par Assets_images.Rename the Assets folder to Assets_images.
  3. Dans une feuille de calcul Excel, créez un tableau à une colonne et insérez les données suivantes dans ce dernier :In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Table Jackets

  4. Donnez à la table le nom Jackets et au fichier Excel, le nom Assets.xlsx.Name the table Jackets, and name the Excel file Assets.xlsx.
  5. Dans votre application, ajoutez la table Jackets en tant que source de données.In your app, add the Jackets table as a data source.
  6. Ajoutez un contrôle Image only (menu Insert (Insertion) > Gallery (Galerie)) et définissez sa propriété Items sur Jackets :Add an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    Propriété Items

    La galerie est automatiquement mise à jour et affiche les images :The gallery is automatically updated with the images:

    Images Jackets

    Lorsque vous définissez la propriété Items, la colonne PowerAppsId est automatiquement ajoutée à la table Excel.When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    Dans cette table, le chemin d’accès à l’image peut également correspondre à l’URL d’une image.In the Excel table, the image path can also be the URL to an image. Voici un exemple de fichier : Flooring Estimates.An example is the Flooring Estimates sample file. Vous pouvez le télécharger dans votre compte de stockage cloud, ajouter la table FlooringEstimates en tant que source de données dans votre application, puis définir le contrôle de galerie sur FlooringEstimates.You can download it to your cloud storage account, add the FlooringEstimates table as a data source in your app, and then set the gallery control to FlooringEstimates. La galerie est automatiquement mise à jour et affiche les images.The gallery is automatically updated with the images.

Charger des dessins de stylet dans le cloudUpload pen drawings to the cloud

Dans ce scénario, vous allez découvrir comment charger des dessins de stylet dans votre source de données, OneDrive Entreprise, et examiner le mode de stockage des dessins à cet emplacement.In this scenario, you learn how to upload pen drawings to your data source, OneDrive for Business, and examine how the drawings are stored there.

  1. Dans Excel, ajoutez Image [image] dans la cellule A1.In Excel, add Image [image] to cell A1.
  2. Créez une table en procédant comme suit :Create a table using the following steps:

    a.a. Sélectionnez la cellule A1.Select cell A1.

    b.b. Dans le ruban Insert (Insertion), sélectionnez Table (Table).On the Insert ribbon, select Table.

    c.c. Dans la boîte de dialogue, sélectionnez My table has headers (Ma table comporte des en-têtes), puis cliquez sur OK (OK).In the dialog box, select My table has headers, and then select OK.

    Création d’une table

    Votre fichier Excel se présente désormais sous la forme d’une table.Your Excel file is now in a table format. Consultez la page Mettre en forme un tableau Excel pour en savoir plus sur la mise en forme d’une table dans Excel.See Format the data as a table for more information about table formatting in Excel.

    d.d. Nommez la table Drawings :Name the table Drawings:

    Remplacement du nom de la table par Drawings

  3. Enregistrez le fichier Excel dans OneDrive Entreprise, sous le nom SavePen.xlsx.Save the Excel file to OneDrive for Business as SavePen.xlsx.
  4. Dans PowerApps, créez une application vide.In PowerApps, create a blank app.
  5. Dans votre application, ajoutez le compte OneDrive Entreprise en tant que source de données :In your app, add the OneDrive for Business account as a data source:

    a.a. Cliquez ou appuyez sur l’onglet View (Affichage), puis sur Sources de données.Click or tap the View tab, and then click or tap Data sources.

    b.b. Appuyez ou cliquez sur Add data source (Ajouter une source de données), puis appuyez ou cliquez sur OneDrive for Business (OneDrive Entreprise).Click or tap Add data source, and then click or tap OneDrive for Business.

    c.c. Cliquez ou appuyez sur SavePen.xlsx.Click or tap SavePen.xlsx.

    d.d. Sélectionnez la table Drawings (Dessins), puis appuyez ou cliquez sur Connect (Connexion).Select the Drawings table, and then click or tap Connect.

    Se connecter

    À présent, la table Drawings est répertoriée en tant que source de données.Now, the Drawings table is listed as a data source.

  6. Sur l’onglet Insert (Insertion), sélectionnez Text (Texte), puis Pen Input (Saisie effectuée à l’aide du stylet).On the Insert tab, select Text, and then select Pen input.
  7. Renommez le nouveau contrôle MyPen :Rename the new control MyPen:

    Renommer

  8. Sur l’onglet Insert (Insertion), ajoutez un contrôle Button et définissez sa propriété OnSelect sur la formule suivante :On the Insert tab, add a Button control, and set its OnSelect property to this formula:

     Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
    
  9. Ajoutez un contrôle Image gallery (onglet Insert (Insertion) > Gallery (Galerie)) et définissez sa propriété Items sur Drawings.Add an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. La propriété Image du contrôle de galerie est automatiquement définie sur ThisItem.Image.The Image property of the gallery control is automatically set to ThisItem.Image.

    Organisez les contrôles afin que votre écran ressemble à ce qui suit :Arrange the controls so that your screen resembles the following:

    Exemple d’écran

  10. Appuyez sur F5 ou sélectionnez l’option d’aperçu ().Press F5, or select Preview ( ).
  11. Dessinez un élément dans MyPen, puis appuyez ou cliquez sur le bouton.Draw something in MyPen, and then select the button.

    Dans le contrôle de galerie, la première image affiche ce que vous avez dessiné.The first image in the gallery control displays what you drew.

  12. Ajoutez un autre élément à votre dessin, puis appuyez ou cliquez sur le bouton.Add something else to your drawing, and select the button.

    Dans le contrôle de galerie, la deuxième image affiche ce que vous avez dessiné.The second image in the gallery control displays what you drew.

  13. Fermez la fenêtre d’aperçu en appuyant sur Échap.Close the preview window by pressing Esc.

    Dans votre compte de stockage cloud, un dossier SavePen_images est automatiquement créé.In your cloud storage account, a SavePen_images folder has been automatically created. Ce dossier contient vos images enregistrées, dont les noms de fichier correspondent à des ID.This folder contains your saved images with IDs for their file names. Pour afficher le dossier, vous devrez peut-être actualiser la fenêtre du navigateur en appuyant sur F5, par exemple.To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    Dans le fichier SavePen.xlsx, la colonne Image indique le chemin d’accès aux nouvelles images.In SavePen.xlsx, the Image column specifies the path to the new images.

Limitations connuesKnown limitations

Pour plus d’informations sur la façon de partager des données Excel au sein de votre organisation, passez en revue ces limitations.For information about how to share Excel data within your organization, review these limitations.

Pour en savoir plusFor more information

Veillez à tester votre application sur différentes plateformes, y compris dans une fenêtre de navigateur et sur un téléphone.Be sure to test your app on different platforms, including in a browser window and on a phone.

Pour des informations sur des scénarios plus complexes, qui impliquent le chargement de données multimédias directement vers une autre source de données, consultez cette page de conseils de professionnels sur la capture d’image et la page relative aux connecteurs personnalisés dédiés au chargement d’images.For information about more advanced scenarios that involve uploading multimedia directly to a different data source, see image capture pro tips and custom connectors for image upload.

Pour charger des fichiers dans une source de données, vous pouvez également utiliser la fonction Patch.Another way to upload files to a data source is to use the Patch function.