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

Примечание

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

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

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

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

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

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

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

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

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

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

Примечание

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

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

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

Примечание

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

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

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

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

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

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

Примечание

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

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

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

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

   

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

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

   

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

   

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

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

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

   

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

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

   ![Пользовательское свойство ввода на вкладке "Свойства".](./media/create-component/properties-tab.png "Пользовательское свойство ввода на вкладке "Свойства"")

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

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

   Table({Item:"SampleText"})
   

   

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

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

   MenuComponent.Items
   

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

10. Необязательно — установите в элементе управления Галерея для свойства BorderThickness значение 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
   

   ![Область "Дополнительно".](./media/create-component/advance.png "Область "Дополнительно"")

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

   MenuComponent_1.Selected
   

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

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

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

Действия

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

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

Когда Доступ к области приложения включен, из компонента доступны следующие элементы:

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

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

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

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

Примечание

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

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

Примечание

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

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

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

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

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

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

![Диалоговое окно "Импорт компонентов".](./media/create-component/import-component-screen.png "Диалоговое окно "Импорт компонентов"")

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

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

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

Примечание

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

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

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

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

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

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

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

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

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

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

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

Вы можете сохранить приложение локально, используя пункт Файл > Сохранить как:

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

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

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

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

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

См. также

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

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).