Использование файлов мультимедиа в PowerAppsUsing multimedia files in PowerApps

В этой статье описано, как внедрить файлы мультимедиа в приложение, отправить нарисованные с помощью пера рисунки в источник данных и просмотреть изображения из источника данных в приложении.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. В качестве источника данных мы используем файл Excel в OneDrive для бизнеса.The data source used in this topic is an Excel file in OneDrive for Business.

Технические условияPrerequisites

Зарегистрируйтесь в службе PowerApps и установите ее.Sign up for PowerApps, and install it. Откройте PowerApps и войдите в систему, используя учетные данные, которые вы ввели при регистрации.When you open PowerApps, sign in using the same credentials that you used to sign up.

Добавление мультимедиа из файла или из облакаAdd media from a file or the cloud

Выберите тип добавляемого файла мультимедиа (например, изображение, видео или звуковой файл).You can choose the kind of media file to add (for example, images, video, or audio).

  1. На вкладке Содержимое выберите Мультимедиа.On the Content tab, select Media.

  2. В разделе Мультимедиа выберите Изображения, Видео или Аудио, а затем щелкните Обзор:Under Media, select Images, Videos, or Audio, and then select Browse:

    Обзор мультимедиа

  3. Выберите файл, который необходимо добавить, а затем щелкните Открыть.Select the file that you want to add, and then select Open.

    После этого на компьютере откроется папка Изображения. Выберите изображение в этой папке или перейдите в другую.The Pictures folder on your computer opens, and you can select an image from there or navigate to another folder.

  4. После добавления файлов нажмите клавишу ESC, чтобы вернуться в рабочую область по умолчанию.When you finish adding files, press Esc to return to the default workspace.

  5. На вкладке Вставка щелкните Мультимедиа и выберите Изображение, Видео или Аудио:On the Insert tab, select Media, and then select Image, Video, or Audio:

    Выбор носителя

  6. Если вы добавили элемент управления "Изображение", в качестве значения свойства Image укажите имя добавленного файла:If you added an image control, set its Image property to the file that you added:

    Настройка свойства Image

    Примечание

    Укажите только имя файла, заключенное в одинарные кавычки, без расширения.Specify the file name only, without the extension, inside single quotes.

  7. Если вы добавили элемент управления "Видео" или "Аудио", в качестве значения свойства Media укажите имя добавленного файла:If you added a video or audio control, set its Media property to the file that you added:

    Настройка свойства Media

    Примечание

    Чтобы воспроизвести видео с сайта YouTube, в качестве значения свойства Media элемента управления "Видео" укажите соответствующий URL-адрес, заключенный в двойные кавычки.Play a YouTube video by setting the Media property of a video control to the appropriate URL, enclosed in double quotation marks.

Добавление мультимедиа из служб мультимедиа AzureAdd media from Azure Media Services

  1. Из учетной записи служб мультимедиа Azure передавайте и публикуйте видеоресурсы в меню AMS > Настройки > Ресурсы.From your Azure Media Services account, upload and publish your video asset from AMS > Settings > Assets.

  2. После публикации скопируйте URL-адрес видео.After the video is published, copy its URL.

  3. В PowerApps добавьте элемент управления Видео в меню Вставка > Мультимедиа.From PowerApps, add the Video control from Insert > Media.

  4. Задайте свойство Media для скопированного URL-адреса.Set the Media property to the URL that you copied.

    Как показано на этом снимке экрана, можно выбрать любой URL-адрес потоковой передачи, который поддерживают службы мультимедиа Azure:As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

    Настройка свойства Media

Добавление изображений из облака в приложениеAdd images from the cloud to your app

В этом разделе вы сохраните изображения в учетную запись облачного хранилища OneDrive для бизнеса.In this scenario, you save images in a cloud storage account, OneDrive for Business. Затем вы сохраните путь к изображениям в таблице Excel и просмотрите эти изображения в элементе управления "Коллекция" в приложении.You use an Excel table to contain the path to the images, and you display the images in a gallery control in your app.

В этом сценарии мы будем использовать файл CreateFirstApp.zip, содержащий несколько JPEG-файлов.This scenario uses the CreateFirstApp.zip that contains some .jpeg files.

Примечание

Путь к этим изображениям, сохраненным в файле Excel, должен содержать прямые косые черты.The path to these images in the Excel file must use forward slashes. Когда служба PowerApps сохраняет изображения в таблице Excel, путь к файлам содержит символы обратной косой черты.When PowerApps saves image paths in an Excel table, the path uses backslashes. Если вы используете пути к изображениям из таблицы Excel, измените эти пути, заменив все символы обратной косой черты на обычную косую черту.If you use image paths from such a table, change the paths in the Excel table to use forward slashes instead of backslashes. В противном случае изображения не будут отображаться.Otherwise, the images won't display.

  1. Загрузите файл CreateFirstApp.zip и извлеките папку Assets в облачную учетную запись хранения.Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.

  2. Измените имя папки Assets на Assets_images.Rename the Assets folder to Assets_images.

  3. В электронной таблице Excel создайте таблицу с одним столбцом и введите в нее следующие данные:In an Excel spreadsheet, create a one-column table, and fill it with the following data:

    Таблица Jackets

  4. Присвойте этой таблице имя Jackets, а файлу Excel — Assets.xlsx.Name the table Jackets, and name the Excel file Assets.xlsx.

  5. В приложении добавьте таблицу Jackets в качестве источника данных.In your app, add the Jackets table as a data source.

  6. Добавьте в приложение элемент управления Только изображение (вкладка Вставка > Коллекция) и назначьте его свойству Items значение Jackets:Add an Image only control (Insert tab > Gallery), and set its Items property to Jackets:

    Свойство Items

    Коллекция автоматически заполнится изображениями.The gallery is automatically updated with the images:

    Изображения пиджаков

    Когда вы присваиваете значение свойству Items, в таблицу Excel автоматически добавляется новый столбец PowerAppsId.When you set the Items property, a column named PowerAppsId is automatically added to the Excel table.

    В таблице Excel путь к изображению может содержать URL-адрес изображения.In the Excel table, the image path can also be the URL to an image. Рассмотрим пример файла Flooring Estimates.An example is the Flooring Estimates sample file. Вы можете загрузить этот файл в учетную запись облачного хранилища, добавить таблицу FlooringEstimates в качестве источника данных для приложения, а затем установить значение 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. Коллекция автоматически заполнится изображениями.The gallery is automatically updated with the images.

Отправка нарисованных с помощью пера рисунков в облакоUpload pen drawings to the cloud

В этом разделе вы узнаете, как отправить нарисованные с помощью пера рисунки в источник данных (OneDrive для бизнеса) и проверить параметры их хранения.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. В Excel добавьте значение Image [изображение] в ячейку A1.In Excel, add Image [image] to cell A1.

  2. Создайте таблицу, выполнив следующие действия:Create a table using the following steps:

    1. выберите ячейку A1;Select cell A1.

    2. На ленте Вставка выберите элемент Таблица.On the Insert ribbon, select Table.

    3. в диалоговом окне выберите Таблица с заголовками и нажмите кнопку ОК.In the dialog box, select My table has headers, and then select OK.

      Создание таблицы

      Теперь файл Excel имеет формат таблицы.Your Excel file is now in a table format. Дополнительные сведения о формате таблицы в Excel см. в статье Форматирование таблицы Excel.See Format the data as a table for more information about table formatting in Excel.

    4. Присвойте этой таблице имя Drawings:Name the table Drawings:

      Изменение имени таблицы на Drawings

  3. Сохраните файл Excel в OneDrive для бизнеса, задав ему имя SavePen.xlsx.Save the Excel file to OneDrive for Business as SavePen.xlsx.

  4. В службе PowerApps создайте пустое приложение.In PowerApps, create a blank app.

  5. В приложении добавьте учетную запись OneDrive для бизнеса в качестве источника данных:In your app, add the OneDrive for Business account as a data source:

    1. откройте вкладку Представление и щелкните Источники данных;Click or tap the View tab, and then click or tap Data sources.

    2. выберите Добавление источника данных, а затем — OneDrive для бизнеса;Click or tap Add data source, and then click or tap OneDrive for Business.

    3. щелкните SavePen.xlsx;Click or tap SavePen.xlsx.

    4. выберите таблицу Drawings и нажмите кнопку Подключиться.Select the Drawings table, and then click or tap Connect.

      Подключиться

      Теперь таблица Drawings отображается как источник данных.Now, the Drawings table is listed as a data source.

  6. На вкладке Вставка выберите Текст, а затем — Ввод с помощью пера.On the Insert tab, select Text, and then select Pen input.

  7. Измените имя нового элемента управления на MyPen:Rename the new control MyPen:

    Переименовать

  8. На вкладке Вставка добавьте элемент управления Кнопка и в качестве значения свойства OnSelect задайте следующую формулу:On the Insert tab, add a Button control, and set its OnSelect property to this formula:

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

  9. Добавьте в приложение элемент управления Коллекция изображений (вкладка Вставка > Коллекция) и назначьте его свойству Items значение Drawings.Add an Image gallery control (Insert tab > Gallery), and set its Items property to Drawings. Свойство Image для элемента управления "Коллекция" автоматически получает значение ThisItem.Image.The Image property of the gallery control is automatically set to ThisItem.Image.

    Упорядочите элементы управления, чтобы экран выглядел следующим образом:Arrange the controls so that your screen resembles the following:

    Пример экрана

  10. Нажмите клавишу F5 или щелкните значок предварительного просмотра (Press F5, or select Preview ( кнопка предварительного просмотра ).).

  11. Нарисуйте что-нибудь в элементе управления MyPen, а затем щелкните элемент управления "Кнопка".Draw something in MyPen, and then select the button.

    Теперь первое изображение в элементе управления "Коллекция" демонстрирует ваш новый рисунок.The first image in the gallery control displays what you drew.

  12. Дорисуйте еще что-нибудь и снова нажмите кнопку.Add something else to your drawing, and select the button.

    Теперь второе изображение в элементе управления "Коллекция" демонстрирует ваш новый рисунок.The second image in the gallery control displays what you drew.

  13. Закройте окно предварительного просмотра, нажав клавишу ESC.Close the preview window by pressing Esc.

    После этого в учетной записи облачного хранилища автоматически создастся папка SavePen_images.In your cloud storage account, a SavePen_images folder has been automatically created. Эта папка содержит сохраненные изображения с идентификаторами в качестве имен файлов.This folder contains your saved images with IDs for their file names. Если папка не отображается, обновите окно браузера (например, нажмите клавишу F5).To show the folder, you may need to refresh the browser window by, for example, pressing F5.

    В файле SavePen.xlsx в столбце Image указаны пути к новым изображениям.In SavePen.xlsx, the Image column specifies the path to the new images.

Известные ограниченияKnown limitations

Просмотрите эти ограничения для совместного использовании данных Excel в организации.For information about how to share Excel data within your organization, review these limitations.

Дополнительные сведенияFor more information

Протестируйте свое приложение на разных платформах, в том числе в окне браузера и на телефоне.Be sure to test your app on different platforms, including in a browser window and on a phone.

Дополнительные сведения о более расширенных сценариях с отправкой файлов мультимедиа напрямую в разные источники данных см. в записи блога с советами специалистов по сохранению изображений и об отправке изображений с помощью настраиваемых соединителей.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.

Кроме того, файлы можно отправить в источник данных при помощи функции Patch.Another way to upload files to a data source is to use the Patch function.