Usare i file multimediali in PowerAppsUsing multimedia files in PowerApps

In questo argomento viene illustrato come incorporare i file multimediali nell'app, caricare disegni con penna in un'origine dati e visualizzare le immagini di un'origine dati nell'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. L'origine dati usata in questo argomento è un file di Excel in OneDrive for Business.The data source used in this topic is an Excel file in OneDrive for Business.

PrerequisitiPrerequisites

Iscriversi a PowerApps e installarlo.Sign up for PowerApps, and install it. Quando si apre PowerApps accedere usando le stesse credenziali usate per l'iscrizione.When you open PowerApps, sign in using the same credentials that you used to sign up.

Aggiungere file multimediali da un file o dal cloudAdd media from a file or the cloud

È possibile scegliere il tipo di file multimediale da aggiungere, ad esempio immagini, video o audio.You can choose the kind of media file to add (for example, images, video, or audio).

  1. Nella scheda Contenuto selezionare Elementi multimediali.On the Content tab, select Media.
  2. In Elementi multimediali selezionare Immagini, Video o Audio, quindi selezionare Sfoglia:Under Media, select Images, Videos, or Audio, and then select Browse:

  3. Selezionare il file che si vuole aggiungere e quindi Apri.Select the file that you want to add, and then select Open.

    Viene aperta la cartella Immagini nel computer ed è possibile selezionare un'immagine dalla cartella o passare a un'altra cartella.The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. Dopo aver aggiunto i file, premere ESC per tornare all'area di lavoro predefinita.When you finish adding files, press Esc to return to the default workspace.
  5. Nella scheda Inserisci selezionare Elementi multimediali, quindi selezionare Immagine, Video o Audio:On the Insert tab, select Media, and then select Image, Video, or Audio:

  6. Se è stato aggiunto un controllo immagine, impostare la relativa proprietà Image sul file aggiunto:If you added an image control, set its Image property to the file that you added:

    Impostare la proprietà Image

    Nota: specificare solo il nome del file, senza l'estensione, racchiudendolo tra virgolette.Note Specify the file name only, without the extension, inside single quotes.

  7. Se è stato aggiunto un controllo video o audio, impostare la relativa proprietà Media sul file aggiunto:If you added a video or audio control, set its Media property to the file that you added:

    Impostare la proprietà Media

    Nota: riprodurre un video YouTube impostando la proprietà Media di un controllo video sull'URL appropriato, racchiuso tra virgolette doppie.Note Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

Aggiungere file multimediali da Servizi multimediali di AzureAdd media from Azure Media Services

  1. Dall'account di Servizi multimediali di Azure, caricare e pubblicare l'asset video da AMS > Impostazioni > Asset.From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.
  2. Dopo aver pubblicato il video, copiare il relativo URL.After the video is published, copy its URL.
  3. Da PowerApps, aggiungere il controllo Video da Inserisci > Contenuti multimediali.From PowerApps, add the Video control from Insert > Media.
  4. Impostare la proprietà Contenuti multimediali nell'URL copiato.Set the Media property to the URL that you copied.

Come illustrato nell'immagine, è possibile scegliere qualsiasi URL di streaming supportato da Servizi multimediali di Azure:As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

Impostare la proprietà Media

Aggiungere immagini dal cloud all'appAdd images from the cloud to your app

In questo scenario le immagini vengono salvate in un account di archiviazione cloud, OneDrive for Business.In this scenario, you save images in a cloud storage account, OneDrive for Business. Si usa una tabella di Excel per contenere il percorso delle immagini e si visualizzano le immagini in un controllo raccolta nell'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 questo scenario si usa il file CreateFirstApp.zip che contiene alcuni file JPEG.This scenario uses the CreateFirstApp.zip that contains some .jpeg files.

NOTA: il percorso di queste immagini nel file di Excel deve usare le barre.NOTE: The path to these images in the Excel file must use forward slashes. Quando PowerApps salva i percorsi delle immagini in una tabella di Excel, il percorso usa le barre rovesciate.When PowerApps saves image paths in an Excel table, the path uses backslashes. Se si usano percorsi di immagini da una tabella di questo tipo, modificare i percorsi nella tabella di Excel in modo che usino le barre anziché le barre rovesciate.If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. In caso contrario le immagini non verranno visualizzate.Otherwise, the images won't display.

  1. Scaricare CreateFirstApp.zip ed estrarre la cartella Assets nell'account di archiviazione cloud.Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. Modificare il nome della cartella Assets in Assets_images.Rename the Assets folder to Assets_images.
  3. In un foglio di calcolo di Excel creare una tabella a una colonna e compilarla con questi dati:In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Tabella Jackets

  4. Assegnare alla tabella il nome Jackets e al file di Excel il nome Assets.xlsx.Name the table Jackets, and name the Excel file Assets.xlsx.
  5. Nell'app aggiungere la tabella Jackets come origine dati.In your app, add the Jackets table as a data source.
  6. Aggiungere un controllo Solo immagine (scheda Inserisci > Raccolta) e impostarne la proprietà Items su Jackets:Add an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    Proprietà Items

    La raccolta viene automaticamente aggiornata con le immagini:The gallery is automatically updated with the images:

    Immagini Jacket

    Quando si imposta la proprietà Items viene automaticamente aggiunta una colonna denominata PowerAppsId alla tabella di Excel.When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    Nella tabella di Excel il percorso dell'immagine può anche essere l'URL di un'immagine.In the Excel table, the image path can also be the URL to an image. Un esempio è il file Flooring Estimates.An example is the Flooring Estimates sample file. È possibile scaricarlo nell'account di archiviazione cloud, aggiungere la tabella FlooringEstimates come origine dati nell'app e quindi impostare il controllo raccolta su 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 raccolta viene automaticamente aggiornata con le immagini.The gallery is automatically updated with the images.

Caricare disegni con penna nel cloudUpload pen drawings to the cloud

In questo scenario si apprenderà come caricare disegni con penna nell'origine dati, OneDrive for Business, e il modo in cui vengono archiviati i disegni.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 aggiungere Image [image] alla cella A1.In Excel, add Image [image] to cell A1.
  2. Creare una tabella seguendo questa procedura:Create a table using the following steps:

    a.a. Selezionare la cella A1.Select cell A1.

    b.b. Selezionare Tabella sulla barra multifunzione Inserisci.On the Insert ribbon, select Table.

    c.c. Nella finestra di dialogo selezionare Tabella con intestazioni, quindi selezionare OK.In the dialog box, select My table has headers, and then select OK.

    Creare una tabella

    Il file di Excel è ora in formato tabella.Your Excel file is now in a table format. Vedere Formattare una tabella di Excel per altre informazioni sulla formattazione delle tabelle in Excel.See Format the data as a table for more information about table formatting in Excel.

    d.d. Assegnare alla tabella il nome Drawings:Name the table Drawings:

    Rinominare la tabella Drawings

  3. Salvare il file di Excel in OneDrive for Business come SavePen.xlsx.Save the Excel file to OneDrive for Business as SavePen.xlsx.
  4. In PowerApps creare un'applicazione vuota.In PowerApps, create a blank app.
  5. Nell'app aggiungere l'account OneDrive for Business come origine dati:In your app, add the OneDrive for Business account as a data source:

    a.a. Fare clic o toccare la scheda Visualizzazione e quindi fare clic o toccare Origini dati.Click or tap the View tab, and then click or tap Data sources.

    b.b. Fare clic o toccare Aggiungi origine dati, quindi fare clic o toccare OneDrive for Business.Click or tap Add data source, and then click or tap OneDrive for Business.

    c.c. Fare clic o toccare SavePen.xlsx.Click or tap SavePen.xlsx.

    d.d. Selezionare la tabella Drawings e quindi fare clic o toccare Connetti.Select the Drawings table, and then click or tap Connect.

    Connessione

    La tabella Drawings è ora elencata come origine dati.Now, the Drawings table is listed as a data source.

  6. Nella scheda Inserisci selezionare Testo e quindi Input penna.On the Insert tab, select Text, and then select Pen input.
  7. Rinominare il nuovo controllo MyPen:Rename the new control MyPen:

    Rinomina

  8. Nella scheda Inserisci aggiungere un controllo Pulsante e impostarne la proprietà OnSelect su questa formula:On the Insert tab, add a Button control, and set its OnSelect property to this formula:

     Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
    
  9. Aggiungere un controllo Raccolta immagini (scheda Inserisci > Raccolta) e impostarne la proprietà Items su Drawings.Add an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. La proprietà Image del controllo raccolta viene automaticamente impostata su ThisItem.Image.The Image property of the gallery control is automatically set to ThisItem.Image.

    Disporre i controlli in modo che la schermata sia simile alla seguente:Arrange the controls so that your screen resembles the following:

    Schermata di esempio

  10. Premere F5 o selezionare Anteprima ( ).Press F5, or select Preview ( ).
  11. Disegnare qualcosa in MyPen e quindi selezionare il pulsante.Draw something in MyPen, and then select the button.

    La prima immagine nel controllo raccolta rappresenta ciò che è stato disegnato.The first image in the gallery control displays what you drew.

  12. Aggiungere altri elementi al disegno e selezionare il pulsante.Add something else to your drawing, and select the button.

    La seconda immagine nel controllo raccolta rappresenta ciò che è stato disegnato.The second image in the gallery control displays what you drew.

  13. Chiudere la finestra di anteprima premendo ESC.Close the preview window by pressing Esc.

    Nell'account di archiviazione cloud è stata creata automaticamente la cartella SavePen_images.In your cloud storage account, a SavePen_images folder has been automatically created. Questa cartella contiene le immagini salvate con ID relativi ai nomi dei file.This folder contains your saved images with IDs for their file names. Per visualizzare la cartella può essere necessario aggiornare la finestra del browser, ad esempio premendo F5.To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    In SavePen.xlsx la colonna Image specifica il percorso delle nuove immagini.In SavePen.xlsx, the Image column specifies the path to the new images.

Limitazioni noteKnown limitations

Per informazioni su come condividere i dati di Excel all'interno dell'organizzazione, esaminare queste limitazioni.For information about how to share Excel data within your organization, review these limitations.

Per altre informazioniFor more information

Assicurarsi di testare l'app su piattaforme diverse, tra cui una finestra del browser e un telefono.Be sure to test your app on different platforms, including in a browser window and on a phone.

Per informazioni sugli scenari più avanzati che prevedono il caricamento di elementi multimediali direttamente a un'altra origine dati, vedere i suggerimenti per l'acquisizione delle immagini a livello professionale e l'argomento relativo ai connettori personalizzati per il caricamento delle immagini.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.

Un altro modo per caricare i file in un'origine dati è usare la funzione Patch.Another way to upload files to a data source is to use the Patch function.