Разработка пользовательской страницы для приложения на основе модели

Статья
03/15/2023

В этой статье представлены советы по созданию настраиваемой страницы для использования в приложении на основе модели.

Важно!

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

Поддерживаемые элементы управления на настраиваемой странице

Разработка настраиваемых страниц в настоящее время поддерживает подмножество элементов управления приложения на основе холста. В таблице ниже перечислены поддерживаемые в настоящее время элементы управления.

CONTROL	Тип элемента управления	Примечания.
Подпись¹	Отображение
Текстовое поле¹	Входные данные
Средство выбора даты¹	Входные данные
Кнопка¹	Входные данные
Поле со списком¹	Входные данные
Флажок¹	Входные данные
Переключатель¹	Входные данные
Группа переключателей¹	Входные данные
Ползунок¹	Входные данные
Оценка¹	Входные данные
Контейнер с вертикальной компоновкой	Компоновка	Новый адаптивный контейнер с горизонтальной компоновкой
Контейнер с горизонтальной компоновкой	Компоновка	Новый адаптивный контейнер с горизонтальной компоновкой
Редактор форматированного текста	Входные данные
Галерея	Список
Значок	Мультимедиа
Изображения	Мультимедиа
Форма редактирования	Входные данные
Форма отображения	Входные данные
Компоненты кода	Пользовательское	Добавление компонентов кода на пользовательскую страницу
Компоненты холста (предварительная версия)	Пользовательское	Добавление компонентов холста на пользовательскую страницу

¹ Элемент управления — это новый современный элемент управления. Элементу управления представлен для приложений на основе холста в Teams. Элементу управления основан на библиотеке Fluent UI с Power Apps Component Framework.

Поддержка настраиваемых компонентов для настраиваемой страницы

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

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

Дополнительные сведения:

Включение гибкого макета с помощью элемента управления контейнера

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

Установите минимальную высоту и ширину экрана в объекте Приложение, чтобы убрать полосы прокрутки на уровне страницы и использовать вертикальную полосу прокрутки тела.

MinScreenHeight=200
MinScreenWidth=200

При желании размер пользовательского дизайна страницы можно настроить в Настройки > Отображение, где Размер задано как Настраиваемый. Затем установите Ширина и Высота как более подходящий пользовательский размер страницы рабочего стола, такой как ширина 1080 и высота 768. Изменение этого параметра после добавления элементов управления на экран может привести к сбросу некоторых свойств макета.

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

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Горизонтальный перенос контейнера с изменяемой высотой

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

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Дочерние контейнеры или элементы управления непосредственно под этим контейнером должны иметь минимальную ширину, которая позволяет странице умещаться в пределах ширины 300 пикселей. Учитывайте заполнение контейнера или элемента управления, а также родительских контейнеров.

Вертикальный перенос контейнера с гибкой шириной

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

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Дочерние контейнеры или элементы управления непосредственно под этим контейнером должны иметь минимальную высоту, которая позволяет странице умещаться в пределах ширины 300 пикселей. Учитывайте заполнение контейнера или элемента управления, а также родительских контейнеров.

Больше информации: Создание гибкого макета.

Контейнер с вертикальной компоновкой с фиксированным верхним колонтитулом, гибким текстом, фиксированным нижним колонтитулом

В Контейнер с вертикальной компоновкой задайте Выровнять (по горизонтали) как Растянуть
Вставьте три элемента Контейнер с горизонтальной компоновкой в родительском Контейнер с вертикальной компоновкой
В первом и третьем дочерних элементах управления контейнера с вертикальной компоновкой выключите Растянуть по высоте и уменьшите высоту до необходимого места, например Высота=80.

Контейнер с горизонтальной компоновкой с двумя четными дочерними контейнерами

В родительском контейнере с горизонтальной компоновкой задайте Выровнять (по вертикали) как Растянуть.
Вставьте два элемента управления Контейнер с вертикальной компоновкой в родительском Контейнер с горизонтальной компоновкой.

Стилизация элементов управления настраиваемой страницы для согласования с элементами управления приложений на основе модели

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

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

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

Примечание

Масштабирование текста настраиваемой страницы составляет 1,33, поэтому вам нужно разделить цель FontSize на 1,33, чтобы получить желаемый размер.

Тип подписи	Целевой FontSize	Используемый FontSize
Заголовок страницы	17	12.75
Обычные подписи	14	10.52
Маленькие подписи	12	9.02

Основные и дополнительные элементы управления нуждаются в следующих изменениях стиля:

Основные кнопки
```
Color=RGBA(255, 255, 255, 1)
Fill=RGBA(41,114,182,1)
Height=35
FontWeight=Normal
```
Дополнительные кнопки
```
Color=RGBA(41,114,182,1)
Fill=RGBA(255, 255, 255, 1)
BorderColor=RGBA(41,114,182,1)
Height=35
FontWeight=Normal
```

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

Различные элементы, такие как элементы управления, компоненты холста и кода, контейнеры и т. д., могут иметь вкладки в зависимости от их положения в макете настраиваемой страницы. Навигация по вкладкам соответствует Z-порядку навигации. Отдельные позиции табуляции внутри более крупных группирующих элементов, таких как компоненты и контейнеры, перемещаются в первую очередь, прежде чем вкладка переместится к следующему элементу в дереве объектной модели документа (DOM).

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

Примечание

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