Multimediabestanden gebruiken in PowerAppsUsing multimedia files in PowerApps

In dit onderwerp wordt beschreven hoe u multimediabestanden insluit in uw app, hoe u pentekeningen uploadt naar een gegevensbron en hoe u afbeeldingen van een gegevensbron weergeeft in uw app.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. De gegevensbron die in dit onderwerp wordt gebruikt is een Excel-bestand in OneDrive voor Bedrijven.The data source used in this topic is an Excel file in OneDrive for Business.

VereistenPrerequisites

Registreer u voor PowerApps en installeer PowerApps.Sign up for PowerApps, and install it. Meld u bij het openen van PowerApps aan met dezelfde referenties die u hebt gebruikt om u te registreren.When you open PowerApps, sign in using the same credentials that you used to sign up.

Media uit een bestand of de cloud toevoegenAdd media from a file or the cloud

U kunt kiezen welk type mediabestand u toevoegt (bijvoorbeeld afbeeldingen, video's of audio).You can choose the kind of media file to add (for example, images, video, or audio).

  1. Op het tabblad Inhoud selecteert u Media.On the Content tab, select Media.

  2. Onder Media selecteert u Afbeeldingen, Video's of Audio. Daarna selecteert u Bladeren:Under Media, select Images, Videos, or Audio, and then select Browse:

    Door media bladeren

  3. Selecteer het bestand dat u wilt toevoegen en selecteer vervolgens Openen.Select the file that you want to add, and then select Open.

    De map Afbeeldingen op uw computer wordt geopend. U kunt een afbeelding uit de map selecteren of naar een andere map navigeren.The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. Wanneer u klaar bent met het toevoegen van bestanden drukt u op ESC om terug te keren naar de standaardwerkruimte.When you finish adding files, press Esc to return to the default workspace.

  5. Op het tabblad Invoegen selecteert u Media en daarna selecteert u Afbeelding, Video of Audio:On the Insert tab, select Media, and then select Image, Video, or Audio:

    Mediatype selecteren

  6. Als u een afbeeldingsbesturingselement hebt toegevoegd, stelt u de eigenschap Image in op het bestand dat u hebt toegevoegd:If you added an image control, set its Image property to the file that you added:

    De afbeeldingseigenschap instellen

    Notitie

    Geef alleen de bestandsnaam op, zonder extensie, tussen enkele aanhalingstekens.Specify the file name only, without the extension, inside single quotes.

  7. Als u een video- of audiobesturingselement hebt toegevoegd, stelt u de eigenschap Media in op het bestand dat u hebt toegevoegd:If you added a video or audio control, set its Media property to the file that you added:

    De media-eigenschap instellen

    Notitie

    U kunt een YouTube-video afspelen door de eigenschap Media van een videobesturingselement in te stellen op de geschikte URL, tussen dubbele aanhalingstekens.Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

Media toevoegen vanuit Azure Media ServicesAdd media from Azure Media Services

  1. Upload en publiceer uw video-asset vanuit uw Azure Media Services-account via AMS > Instellingen > Assets.From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.

  2. Nadat de video is gepubliceerd, kopieert u de URL.After the video is published, copy its URL.

  3. Voeg vanuit PowerApps het besturingselement Video toe vanuit Invoegen > Media.From PowerApps, add the Video control from Insert > Media.

  4. Stel de eigenschap Media in op de URL die u hebt gekopieerd.Set the Media property to the URL that you copied.

    Zoals in deze afbeelding wordt weergegeven, kunt u elke streaming-URL kiezen die wordt ondersteund door Azure Media Services:As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

    De media-eigenschap instellen

Afbeeldingen uit de cloud toevoegen aan uw appAdd images from the cloud to your app

In dit scenario slaat u afbeeldingen op in een cloudopslagaccount (bij OneDrive voor Bedrijven).In this scenario, you save images in a cloud storage account, OneDrive for Business. U gebruikt een Excel-tabel om het pad naar de afbeeldingen op te geven en u geeft de afbeeldingen weer in een galeriebesturingselement in uw app.You use an Excel table to contain the path to the images, and you display the images in a gallery control in your app.

In dit scenario gebruikt u de map CreateFirstApp.zip, die ook enkele JPEG-bestanden bevat.This scenario uses the CreateFirstApp.zip that contains some .jpeg files.

Notitie

Het pad naar deze afbeeldingen in het Excel-bestand moet slash-tekens bevatten.The path to these images in the Excel file must use forward slashes. Wanneer PowerApps afbeeldingspaden opslaat in een Excel-tabel, worden er backslash-tekens gebruikt.When PowerApps saves image paths in an Excel table, the path uses backslashes. Als u afbeeldingspaden gebruikt uit een dergelijke tabel, dient u dus de slash-tekens in de paden in de Excel-tabel te vervangen door backslash-tekens.If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. Anders worden de afbeeldingen niet weergegeven.Otherwise, the images won't display.

  1. Download eerst CreateFirstApp.zip en pak de map Assets uit naar uw cloudopslagaccount.Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.

  2. Wijzig de naam van de map Assets naar Assets_images.Rename the Assets folder to Assets_images.

  3. Maak in een Excel-werkblad een tabel van één kolom en vul deze met de volgende gegevens:In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Tabel Jackets

  4. Noem de tabel Jackets en noem het Excel-bestand Assets.xlsx.Name the table Jackets, and name the Excel file Assets.xlsx.

  5. Voeg in uw app de tabel Jackets toe als gegevensbron.In your app, add the Jackets table as a data source.

  6. Voeg het besturingselement Alleen afbeeldingen toe (tabblad Invoegen > Galerie) en stel de eigenschap Items in op Jackets:Add an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    Eigenschap Items

    De galerie wordt automatisch bijgewerkt met de afbeeldingen:The gallery is automatically updated with the images:

    Afbeeldingen Jacket

    Als u de eigenschap Items instelt, wordt de Excel-tabel automatisch bijgewerkt met een kolom met de naam PowerAppsId.When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    Het pad naar een afbeelding kan in de Excel-tabel ook de URL naar een afbeelding zijn.In the Excel table, the image path can also be the URL to an image. Een voorbeeld hiervan is het voorbeeldbestand Flooring Estimates.An example is the Flooring Estimates sample file. U kunt het downloaden naar uw cloudopslagaccount. Voeg dan de tabel FlooringEstimates toe als gegevensbron in uw app en stel vervolgens het galeriebesturingselement in op 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. De galerie wordt automatisch bijgewerkt met de afbeeldingen.The gallery is automatically updated with the images.

Pentekeningen uploaden naar de cloudUpload pen drawings to the cloud

In dit scenario leert u hoe u pentekeningen uploadt naar uw gegevensbron, OneDrive voor Bedrijven, en ontdekt u hoe de tekeningen daar worden opgeslagen.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. In Excel voegt u Afbeelding [image] toe aan cel A1.In Excel, add Image [image] to cell A1.

  2. Volg de volgende stappen om een tabel te maken:Create a table using the following steps:

    1. Selecteer cel A1.Select cell A1.

    2. Selecteer Tabel op het lintmenu Invoegen.On the Insert ribbon, select Table.

    3. Selecteer in het dialoogvenster Mijn tabel bevat veldnamen en selecteer OK.In the dialog box, select My table has headers, and then select OK.

      Een tabel maken

      Uw Excel-bestand is nu opgemaakt als tabel.Your Excel file is now in a table format. Zie Format the data as a table voor meer informatie over tabelopmaak in Excel.See Format the data as a table for more information about table formatting in Excel.

    4. Noem de tabel Drawings:Name the table Drawings:

      De naam van de tabel wijzigen naar Drawings

  3. Sla het Excel-bestand op in OneDrive voor Bedrijven met de naam SavePen.xlsx.Save the Excel file to OneDrive for Business as SavePen.xlsx.

  4. Maak in PowerApps een lege app.In PowerApps, create a blank app.

  5. Voeg in uw app het OneDrive voor Bedrijven-account toe als gegevensbron:In your app, add the OneDrive for Business account as a data source:

    1. Klik of tik op het tabblad Weergeven en tik of klik daarna op Gegevensbronnen.Click or tap the View tab, and then click or tap Data sources.

    2. Klik of tik op Een gegevensbron toevoegen en klik of tik daarna op OneDrive voor Bedrijven.Click or tap Add data source, and then click or tap OneDrive for Business.

    3. Klik of tik op SavePen.xlsx.Click or tap SavePen.xlsx.

    4. Selecteer de tabel Drawings en tik of klik op Verbinden.Select the Drawings table, and then click or tap Connect.

      Verbinden

      Nu wordt de tabel Drawings vermeld als gegevensbron.Now, the Drawings table is listed as a data source.

  6. Selecteer op het tabblad Invoegen de optie Tekst en selecteer daarna Peninvoer.On the Insert tab, select Text, and then select Pen input.

  7. Noem het nieuwe besturingselement MyPen:Rename the new control MyPen:

    Naam wijzigen

  8. Voeg op het tabblad Invoegen het besturingselement Knop toe en stel de eigenschap OnSelect in op deze formule:On the Insert tab, add a Button control, and set its OnSelect property to this formula:

    Patch(Tekeningen, Standaard(Tekeningen), {Afbeelding:MyPen.Image})Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})

  9. Voeg het besturingselement Afbeeldingengalerie toe (tabblad Invoegen > Galerie) en stel de eigenschap Items in op Drawings.Add an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. De eigenschap Image van het galeriebesturingselement wordt automatisch ingesteld op ThisItem.Image.The Image property of the gallery control is automatically set to ThisItem.Image.

    Deel de besturingselementen zodanig in dat uw scherm er als volgt uitziet:Arrange the controls so that your screen resembles the following:

    Voorbeeldscherm

  10. Druk op F5 of selecteer Voorbeeld (Press F5, or select Preview ( Knop Voorbeeld ).).

  11. Teken iets in MyPen en selecteer de knop.Draw something in MyPen, and then select the button.

    In de eerste afbeelding van het galeriebesturingselement wordt weergegeven wat u hebt getekend.The first image in the gallery control displays what you drew.

  12. Voeg nog iets toe aan uw tekening en selecteer de knop.Add something else to your drawing, and select the button.

    In de tweede afbeelding van het galeriebesturingselement wordt weergegeven wat u hebt getekend.The second image in the gallery control displays what you drew.

  13. Sluit het voorbeeldvenster door op ESC te drukken.Close the preview window by pressing Esc.

    In uw cloudopslagaccount is automatisch de map SavePen_images gemaakt.In your cloud storage account, a SavePen_images folder has been automatically created. Deze map bevat uw opgeslagen afbeeldingen met id's als bestandsnaam.This folder contains your saved images with IDs for their file names. Als u de map wilt bekijken, moet u mogelijk het browservenster vernieuwen door bijvoorbeeld op F5 te drukken.To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    In SavePen.xlsx staat in de kolom Afbeelding het pad naar de nieuwe afbeeldingen.In SavePen.xlsx, the Image column specifies the path to the new images.

Bekende beperkingenKnown limitations

Lees deze beperkingen door voor informatie over het delen van Excel-gegevens binnen uw organisatie.For information about how to share Excel data within your organization, review these limitations.

Voor meer informatieFor more information

Test uw apps op verschillende platforms, waaronder in een browservenster en op een telefoon.Be sure to test your app on different platforms, including in a browser window and on a phone.

Zie de tips van professionals over het vastleggen van afbeeldingen en de informatie over aangepaste connectors voor het uploaden van de afbeelding voor meer informatie over geavanceerde scenario's waarbij multimedia rechtstreeks moeten worden geüpload naar een andere gegevensbron.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.

U kunt bestanden ook uploaden naar een gegevensbron met de Patch-functie.Another way to upload files to a data source is to use the Patch function.