Розробка настроюваної сторінки для модельної програми

Стаття
03/16/2023

У цій статті наведено поради для розробки настроюваної сторінки для використання в модельній програмі.

Важливо

Настроювані сторінки — це нова функція зі значними змінами продуктів, яка наразі має багато відомих обмежень, наведених в розділі Відомі проблеми з настроюваними сторінками.

Підтримувані елементи керування на настроюваній сторінці

Наразі створення настроюваних сторінок підтримує підмножину елементів керування компонованих програм. Наведена нижче таблиця перелічує елементи керування, які підтримуються на даний момент.

Ctrl	Тип елемента керування	Примітки
Надпис¹	Відобразити
Текстове поле¹	Вхідні дані
Вибір дати¹	Вхідні дані
Кнопка¹	Вхідні дані
Поле зі списком¹	Вхідні дані
Прапорець¹	Вхідні дані
Перемикач¹	Вхідні дані
Група перемикачів¹	Вхідні дані
Повзунок¹	Вхідні дані
Оцінка¹	Вхідні дані
Вертикальний Контейнер	Макет	Новий адаптивний горизонтальний контейнер для макета
Горизонтальний Контейнер	Макет	Новий адаптивний горизонтальний контейнер для макета
Текстовий редактор	Вхідні дані
Галерея	Список
Піктограма	Медіафайли
Image	Медіафайли
Редагувати форму	Вхідні дані
Форма перегляду	Вхідні дані
Компоненти коду	Спеціальний	Додавання компонентів коду до настроюваної сторінки
Компоненти полотна (підготовча версія)	Спеціальний	Додавання компонентів полотна до настроюваної сторінки

¹ Цей елемент керування – новий та сучасний. Елемент керування було введено для компонованих програм в Teams. Елемент керування оснований на бібліотеці Fluent UI, загорнутій в Power Apps Component Framework.

Підтримка настроюваних компонентів для настроюваної сторінки

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

Загалом, підхід розширення з мінімумом коду простіший у розробці, тестуванні, та має меншу вартість обслуговування. Рекомендуємо спочатку оцінити компоненти полотна, а компоненти коду використовувати, лише якщо існує потреба в більш складному і розширеному настроюванні.

Додаткові відомості:

Увімкнення адаптивного макету за допомогою керування контейнерами

Адаптивні макети настроюваних сторінок визначаються шляхом створення ієрархії елементів керування "Горизонтальний контейнерів макету" та "Вертикальний контейнерів макету". Ці елементи керування наведено в конструкторі компонованих програм у розділі «Макет» на вкладці «Вставлення».

Установіть мінімальну висоту та ширину об’єкта програми, щоб замість смуги прокручування на рівні сторінки використовувати смугу прокручування вертикального тексту.

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 із візуальним вирівнюванням допомагає користувачам легко переходити між настроюваними сторінками при використанні клавіатури або невізуального екрана. Зауважте, що на відміну від автономних компонованих програм, настроювані елементи керування сторінками та інші елементи взаємодії з користувачем не потрібують явного призначення номерів вкладок. Сучасні елементи керування не мають властивості TabIndex, та використовують семантичну структуру HTML для переходів.

Різноманітні елементи керування, компоненти полотна та коду, контейнери, тощо можна розмістити у вкладках на основі їх розташування в настроюваному макеті сторінки. Переходи по вкладках слідують порядку переходів по осі Z. Окремі позиції табуляції у більших елементах групування, наприклад компонентах чи контейнерах, переходять першими, перш ніж вкладка переходить до наступного елемента в дереві об'єктної моделі документа (DOM).

Нижче наведено приклад переходів в сторінці, що містить елементи керування, компонентами коду і полотна, та контейнери.

Примітка

Перекривання елементів керування та інших елементів на настроюваній сторінці не призведе до злиття їх DOM, тому позиції табуляції можуть втратити синхронізацію з візуальним макетом. Це також стосується динамічного позиціонування елементів за допомогою формул.