Обзор компонентов холста

Замечание

• В этом разделе описываются компоненты холста, охватывающие возможности расширения пользовательского интерфейса с низким кодом. Профессиональные разработчики также могут использовать платформу компонентов Power Apps для сборки компонентов кода.
• Вы также можете использовать компоненты холста в приложениях на основе модели с помощью пользовательских страниц и библиотеки компонентов. Дополнительные сведения см. в разделе "Добавление компонентов холста" на настраиваемую страницу в приложении на основе модели.

Компоненты — это повторно используемые строительные блоки для приложений на основе холста. Разработчики приложений могут создавать пользовательские элементы управления для использования внутри приложения или между приложениями с помощью библиотеки компонентов. Компоненты могут использовать расширенные функции, такие как пользовательские свойства, и включать сложные возможности. В этой статье представлены концепции компонентов и некоторые примеры.

Компоненты полезны при создании больших приложений, имеющих аналогичные шаблоны элементов управления. Если вы обновите определение компонента внутри приложения, все экземпляры в приложении будут отражать ваши изменения. Компоненты также сокращают дублирование усилий, устраняя необходимость копирования и вставки элементов управления и повышения производительности. При использовании библиотеки компонентов компоненты способствуют совместной разработке и стандартизируют внешний вид и стиль в организации.

Чтобы узнать, как использовать компоненты в приложениях на холсте, просмотрите это видео:

Компоненты в приложениях на основе холста

Вы можете создать компонент из приложения, как описано в этой статье, или путем создания нового компонента внутри библиотеки компонентов. Используйте библиотеку компонентов, если необходимо использовать компоненты на нескольких экранах приложения. Можно также скопировать существующие компоненты в существующую или новую библиотеку компонентов.

Чтобы создать компонент в приложении, перейдите к Представление в виде дерева, выберите вкладку Компоненты, затем выберите Создать компонент:

При выборе Создать компонент открывается пустой холст. Добавьте элементы управления в составе определения компонента на холсте. Если вы редактируете компонент на холсте, вы обновляете экземпляры того же компонента на других экранах приложения. Приложения, которые повторно используют уже созданный компонент, также могут получать обновления компонента после публикации изменений компонента.

Вы можете выбрать компонент из списка существующих компонентов на левой панели после выбора экрана. Когда вы выбираете компонент, вы вставляете экземпляр этого компонента на экран так же, как вставляете элемент управления.

Компоненты, доступные внутри приложения, отображаются в пользовательской категории в списке компонентов, представленном в виде дерева. Компоненты, импортированные из библиотек компонентов, отображаются в категории компонентов библиотеки :

Замечание

Компоненты, рассмотренные в этой статье, отличаются от платформы компонентов Power Apps, которая позволяет разработчикам и разработчикам создавать компоненты кода для приложений на основе модели и холста. Дополнительные сведения см. в обзоре платформы компонентов Power Apps.

Пользовательские свойства

Компонент может получать входные значения и выдавать данные, если вы создаете одно или несколько пользовательских свойств. Эти сценарии являются расширенными и требуют от вас понимания формул и контрактов привязки.

Замечание

Экспериментальная функция расширенных свойств компонентов предоставляет еще больше возможностей для свойств, включая функции и функции поведения. Дополнительные сведения см. в разделе Свойства компонента холста (экспериментальная функция)

Входное свойство — это то, как компонент получает данные для использования в компоненте. Входные свойства отображаются на вкладке Свойства правой панели, если выбран экземпляр компонента. Вы можете настроить входные свойства с помощью выражений или формул так же, как вы настраиваете стандартные свойства в других элементах управления. Другие элементы управления имеют входные свойства, такие как свойство Default элемента управления Ввод текста.

Выходное свойство используется для вывода данных или состояния компонента. Например, свойство Selected на элементе управления Галерея является выходным свойством. Когда вы создаете выходное свойство, вы можете определить, какие другие элементы управления могут ссылаться на состояние компонента.

Следующая пошаговая инструкция объясняет эти понятия.

Создание примера компонента

В этом примере вы создадите компонент меню, похожий на следующий рисунок. И вы можете изменить текст позже, чтобы использовать его на нескольких экранах, в приложениях или в обоих:

Замечание

Мы рекомендуем вам использовать библиотеку компонентов при создании компонентов для повторного использования. Обновление компонентов внутри приложения делает обновления компонентов доступными только внутри приложения. При использовании библиотеки компонентов вам будет предложено обновить компоненты, если компоненты внутри библиотеки обновлены и опубликованы.

Создание нового компонента

1. Создайте приложение на основе холста с нуля.

2. В Представление в виде дерева выберите Компоненты, затем выберите Создать компонент, чтобы создать новый компонент.

   

3. Выберите новый компонент на левой панели, выберите многоточие (…), а затем выберите Переименовать. Введите или вставьте имя как MenuComponent.

4. На правой панели установите ширину компонента как 150 и его высоту как 250, затем выберите Создать пользовательское свойство. Вы также можете установить высоту и ширину на любое другое значение в зависимости от ситуации.

   

5. В полях Отображаемое имя, Имя свойства и Описание введите или вставьте текст как Пункты.

   

   Не включайте пробелы в имя свойства, так как при написании формулы вы будете ссылаться на компонент по этому имени. Например, ComponentName.PropertyName.

   Отображаемое имя появляется на вкладке Свойства правой панели, если вы выбираете компонент. Описательное отображаемое имя поможет вам и другим производителям понять цель этого свойства. Описание появляется во всплывающей подсказке, если вы наведете курсор мыши на отображаемое имя этого свойства на вкладке Свойства.

6. В списке Тип данных выберите Таблица, затем выберите Создать.

   

   Свойство Пункты устанавливается в значение по умолчанию на основе типа данных, который вы указали. Вы можете установить для него значение, соответствующее вашим потребностям. Если вы указали тип данных Таблица или Запись, вы можете захотеть изменить значение свойства Items в соответствии со схемой данных, которую вы хотите ввести в компонент. В этом случае вы измените его на список строк.

   Вы можете установить значение свойства в строке формул, если выберете имя свойства на вкладке Свойства на правой панели.

   

   Как показано на следующем рисунке, вы также можете редактировать значение свойства на вкладке Дополнительно правой панели.

7. Задайте для свойства Items компонента следующую формулу в качестве значения.

   Table({Item:"SampleText"})
   

   

8. В компоненте вставьте пустой вертикальный элемент управления Галерея и выберите для параметра Макет на панели свойств значение Заголовок.

9. Убедитесь, что в списке свойств отображается свойство Items (как это делается по умолчанию). Затем задайте для этого свойства значение следующего выражения:

   MenuComponent.Items
   

   Таким образом, свойство Items элемента управления Галерея читает и зависит от входного свойства Items компонента.

10. (Необязательно) Задайте свойству BorderThickness элемента управления Gallery значение 1 и свойству TemplateSize значение 50. Вы также можете обновить значения толщины границы и размера шаблона на любое другое значение в зависимости от ситуации.

Добавление компонента на экран

Затем добавьте компонент на экран и укажите таблицу строк для отображаемого компонента.

1. На левой панели выберите список экранов, а затем выберите экран по умолчанию.

   

2. На вкладке Вставить откройте меню Компоненты, затем выберите MenuComponent.

   

   Новый компонент называется MenuComponent_1 по умолчанию.

3. Задайте для свойства Items компонента MenuComponent_1 следующую формулу:

   Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
   

   Этот экземпляр похож на этот рисунок, но вы можете настроить текст и другие свойства каждого экземпляра.

   

Создание и использование выходного свойства

До сих пор вы создали компонент и добавили его в приложение. Затем создайте выходное свойство, которое отражает элемент, выбранный пользователем в меню.

1. Откройте список компонентов, затем выберите MenuComponent.

2. В правой панели выберите вкладку Свойства, затем выберите Создать пользовательское свойство.

3. В полях Отображаемое имя, Имя свойства и Описание введите или вставьте текст как Выбран.

4. В поле Тип свойства выберите Вывод, затем выберите Создать.

   

5. На вкладке Дополнительно установите для значения свойства Выбран это выражение, при необходимости настроив цифру в названии коллекции:

   Gallery1.Selected.Item
   

   

6. На экране приложения по умолчанию добавьте подпись и установите для ее свойства Text это выражение, при необходимости изменив цифру в имени компонента:

   MenuComponent_1.Selected
   

   MenuComponent_1 является именем по умолчанию экземпляра, а не именем определения компонента. Вы можете переименовать любой экземпляр.

7. Удерживая нажатой клавишу Alt, выберите каждый пункт в меню.

   Элемент управления Подпись отражает пункт меню, который вы выбрали в последнее время.

Область

Свойства ввода и вывода четко определяют интерфейс между компонентом и его основным приложением. По умолчанию компонент инкапсулирован, что упрощает повторное использование компонента в приложениях, требуя использования свойств для передачи информации в компонент и из него. Ограничения области действия делают контракт данных компонента простым и связным и помогают включать обновления определений компонентов, особенно в приложениях с библиотеками компонентов.

Но иногда компонент может захотеть поделиться источником данных или переменной с хостом. Этот общий доступ особенно полезен, если компонент предназначен только для использования в одном конкретном приложении. В этих случаях вы можете напрямую получить доступ к информации на уровне приложения, включив переключатель Доступ к области приложения на панели свойств компонента:

При включении области приложения Access следующие элементы доступны в компоненте:

• Глобальные переменные
• Коллекции
• Элементы управления и компоненты на экранах, например элемент управления TextInput
• Табличные источники данных, такие как таблицы Dataverse

При отключении этого параметра компонент не может получить доступ к любому из предыдущих элементов. Функции set и Collect по-прежнему доступны, но результирующие переменные и коллекции относятся к экземпляру компонента и не предоставляются приложению.

Не табличные источники данных, такие как Хранилище BLOB-объектов Azure или настраиваемый соединитель, доступны, включен ли этот параметр или отключен. Думайте об этих источниках данных как о ссылке на ресурс среды, а не на ресурс приложения. Когда компонент переносится в приложение из библиотеки компонентов, эти источники данных также переносятся из среды.

Компоненты в библиотеке компонентов никогда не могут получить доступ к области приложения, так как нет отдельной области приложения для ссылки. Таким образом, этот параметр недоступен в данном контексте и фактически отключен. После импорта в приложение и, если настройка разрешена создателем компонентов, переключатель можно включить, а компонент можно изменить, чтобы использовать область приложения.

Замечание

• Вы можете вставлять экземпляры компонентов на экран в библиотеке компонентов и просматривать этот экран в целях тестирования.
• Библиотека компонентов не отображается при использовании Power Apps Mobile.

Импорт и экспорт компонентов (выведено из обращения)

Замечание

Эта функция больше не поддерживается. Библиотеки компонентов — это рекомендуемый способ многократного использования компонентов в приложениях. При использовании библиотеки компонентов приложение поддерживает зависимости от используемых компонентов. Создатель приложений оповещается, когда становятся доступны обновления зависимых компонентов. Следовательно, все новые повторно используемые компоненты должны создаваться внутри библиотек компонентов.

Возможность импорта и экспорта компонентов отключена по умолчанию, так как эта функция отключена. Хотя рекомендуемый метод для работы с компонентами — использовать библиотеки компонентов, вы по-прежнему можете включить эту функцию на основе каждого приложения в качестве исключения, пока эта функция не будет удалена. Для этого редактируйте ваше приложение в Power Apps Studio, а затем перейдите в раздел Настройки>Предстоящие возможности>Устаревшее> Установите Экспорт и импорт компонентов в положение Вкл.

После включения этой функции вы можете использовать следующие возможности для импорта и экспорта компонентов.

Импорт компонентов из другого приложения

Чтобы импортировать один или несколько компонентов из одного приложения в другое приложение, выберите "Импорт компонентов" в меню "Вставка ", а затем используйте раскрывающееся меню "Настраиваемый ". Или используйте Компоненты в дереве на левой панели.

В диалоговом окне перечислены все приложения, которые содержат компоненты, которые вы можете редактировать. Выберите приложение, затем выберите Импортировать, чтобы импортировать самую последнюю опубликованную версию всех компонентов в этом приложении. После импорта по крайней мере одного компонента можно изменить копию и удалить все, что вам не нужно.

Вы можете сохранить приложение с существующими компонентами в файл локально, затем повторно использовать файл, импортировав его. Вы можете использовать файл для импорта компонентов в другое приложение.

Если приложение содержит измененную версию того же компонента, вам будет предложено решить, заменить ли измененную версию или отменить импорт.

После создания компонентов в приложении другие приложения могут использовать компоненты из этого приложения, импортируя их.

Замечание

Если компонент, который вы импортировали из другого приложения, изменен в исходном приложении, вы должны вручную снова импортировать компонент в приложение-потребитель, чтобы получить последние изменения компонента. Вместо этого используйте библиотеки компонентов для работы с обновлениями компонентов более эффективно.

Экспорт компонентов из вашего приложения

Вы можете экспортировать компоненты в файл и загрузить их для импорта в другое приложение.

Выберите Экспорт компонентов в разделе Компоненты в дереве на левой панели:

Вы также можете использовать меню Вставить, затем выберите вместо этого раскрывающееся меню Пользовательский.

При выборе пункта Экспорт компонентов компоненты загружаются в файл:

Загруженный файл компонента использует расширение имени файла .msapp.

Импорт компонентов из экспортированного файла компонентов

Чтобы импортировать компоненты из файла экспортированных компонентов, выберите Импорт компонентов из меню Вставить, а затем используйте раскрывающееся меню Пользовательский или используйте Компоненты в дереве на левой панели. В диалоговом окне компонентов выберите Отправить файл вместо выбора любых других компонентов или приложений:

В диалоговом окне Открыть найдите местоположение файла компонентов и выберите пункт Открыть, чтобы импортировать компоненты внутри приложения.

Импорт компонентов из экспортированного приложения

Вы можете сохранить приложение локально, выбравкоманду "Сохранить> как":

После сохранения приложения можно повторно использовать его компоненты, импортируя их из файла. Дополнительные сведения см. в предыдущем разделе по импорту компонентов из экспортированного файла компонентов.

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

• При наличии двух или нескольких экземпляров одного компонента в приложении нельзя настроить пользовательское свойство ввода для значения пользовательского выходного свойства в одном или разных экземплярах. Это действие приведет к появлению предупреждающего сообщения о циклической ссылке. Чтобы обойти это ограничение, создайте копию компонента внутри приложения.
• Добавление и запуск потоков Power Automate в библиотеках компонентов не поддерживается.
• Вы не можете сохранять источники данных или элементы управления, содержащие данные из этих источников данных (например, формы, адаптивные сетки или таблицы данных) с компонентами.
• Невозможно вставить компонент в коллекцию или форму (включая SharePoint форму).
• Компоненты не поддерживают функцию UpdateContext, но вы можете создавать и обновлять переменные в компоненте, используя функцию Set. Область действия этих переменных ограничена компонентом, но вы можете получить к ним доступ из-за пределов компонента через пользовательские свойства вывода.

Дальнейшие шаги

Узнайте, как использовать библиотеку компонентов для создания хранилища повторно используемых компонентов.

См. также

• Библиотека компонентов
• Управление жизненным циклом приложений библиотеки компонентов (ALM)
• Сопоставление полей ввода компонента
• Добавление мультимедиа к компоненту
• Формулы поведения для компонентов
• Платформа компонентов Power Apps
• Добавление компонентов холста на настраиваемую страницу в приложении на основе модели