Ознайомлення з формами в компонованих програмах

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

Розміщуйте різні елементи керування на різних екранах, щоб легше було їх розрізняти.

Цей розділ описує, як можна доповнити ці елементи керування формулами, щоб реалізувати взаємодію із користувачем.

Вимоги

• Зареєструйтеся у Power Apps, а потім увійдіть, вказавши ті ж облікові дані, що використовували під час реєстрації.
• Дізнайтесь, як налаштувати елемент керування у Power Apps.

Ознайомтеся із створеною програмою

Power Apps може автоматично створити програму, використовуючи дані із заданого джерела даних. Кожна така програма містить три екрани з елементами керування, що були описані раніше, та формули, що їх з'єднують. Виконуйте ці програми «як є», налаштовуйте їх для досягнення певних цілей або ж вивчайте, як вони працюють, щоб дізнатися про корисні концепції, які зможете застосовувати до власних програм. У зазначених нижче розділах ми вивчимо екрани, елементи керування та формули, завдяки яким працює створена програма.

Екран перегляду

На цьому екрані присутні зазначені нижче ключові формули.

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

Установіть значення для властивості Items галереї, щоб відобразити у галереї записи з джерела даних. Наприклад, встановіть для цієї властивості значення Assets, щоб показати записи із джерела даних із цим ім’ям.

Пошук записів для відображення або редагування буде недоступний, а натомість користувачі зможуть створити запис, вибравши символ «+» понад галереєю. Такого результату можна досягти, якщо створити елемент керування Зображення, всередині якого відображатиметься «+», та задати зазначену нижче формулу для його властивості OnSelect.
NewForm( EditForm1 ); Navigate( EditScreen1, None )

Ця формула відкриває екран Редагування та створення, на якому розташовано елемент керування Редагування форми із іменем EditForm1. Формула також переключає форму в режим Створити, в якому у формі відображаються значення за замовчуванням, що отримуються з джерела даних, тому користувач може легко створити запис з нуля.

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

У нашому прикладі для властивості Text цього елемента керування задано значення ThisItem.AssignedTo, що відповідає полю у джерелі даних Assets (Активи). В якості значення властивості Text для інших трьох елементів керування Текстовий підпис задано аналогічні формули, а кожен елемент керування відображатиме інше поле з джерела даних.

Виберіть елемент керування Фігура (стрілка) і переконайтеся, що в якості значення його властивості OnSelect встановлено зазначену нижче формулу.
Navigate( DetailScreen1, None )

Коли користувач знайде потрібний запис у BrowseGallery1, він або вона зможе вибрати стрілку для цього запису, щоб побачити більше відомостей про запис на екрані DetailScreen1. При виборі стрілки користувач змінює значення властивості Selected елемента BrowseGallery1. У цій програмі ця властивість визначає, який запис відображається не лише на екрані DetailScreen1, а й запис для редагування на екрані Редагування та створення, що з’явиться, якщо користувач вирішить оновити запис.

Екран подробиць

На цьому екрані присутні зазначені нижче ключові формули.

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

DetailForm1 є головним елементом на екрані і відображає запис, вибраний користувачем у галереї (оскільки властивість Item форми має значення BrowseGallery1.Selected). У властивості DataSource форми також зазначаються метадані, що стосуються джерела даних, наприклад, зручна назва для кожного поля.

DetailForm1 містить кілька елементів керування Картка. Для отримання додаткових відомостей ви можете вибрати сам елемент керування Картка або вкладений до нього елемент керування.

Властивість DataField елемента керування Картка визначає, яке поле відображатиметься карткою. У цьому випадку зазначена властивість має значення AssetID. На картці присутній елемент керування Текстовий підпис, для якого для властивості Text задано значення Parent.Default. У цьому елементі керування відображатиметься значення За замовчуванням для картки, яке задається за допомогою властивості DataField.

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

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

Екран редагування та створення

На цьому екрані присутні зазначені нижче ключові формули.

Як і на екрані Подробиці, елемент керування формою, що має назву EditForm1, є головним на екрані Редагування та створення. Крім того, властивість Item форми EditForm1 має значення BrowseGallery1.Selected, тому форма відображатиме запис, який користувач вибрав на екрані BrowseScreen1. На екрані Подробиці усі поля відображаються в режимі «лише для читання», а на формі EditForm1 користувач, використовуючи елементи керування, може оновлювати значення одного або кількох полів. Форма також використовує властивість DataSource для доступу до метаданих, які стосуються цього джерела даних, наприклад, зручної назви для кожного поля і розташування, в якому потрібно зберігати зміни.

Якщо користувач вибере піктограму "X", щоб скасувати оновлення значень, функція ResetForm відкине всі незбережені зміни, а функція Back відкриє екран Подробиці. Екрани Подробиці і Редагування та створення відображатимуть один і той самий запис, доки користувач не вибере інший запис на екрані BrowseScreen1. Значення полів у цьому записі будуть такими, як їх було збережено востаннє, і не віддзеркалюватимуть жодних змін, внесених, але не збережених користувачем.

Якщо користувач змінить одне або кілька значень у формі, а потім вибере піктограму «галочка», функція SubmitForm надішле до джерела даних зміни, внесені користувачем.

• Якщо зміни буде успішно збережено, буде виконано формулу, зазначену для властивості OnSuccess форми, і функція Back() відобразить екран подробиць, на якому відображатиметься оновлений запис.
• Якщо зміни не буде збережено, буде виконано формулу OnFailure форми, але нічого не зміниться, оскільки формула пуста. Екран Редагування та створення залишиться відкритим, і користувач матиме можливість скасувати зміни або виправити помилку. LblFormError1 відобразить зрозуміле користувачеві повідомлення про помилку, встановлене в якості значення властивості Error форми.

Як і елемент керування Відображення форми, елемент керування Редагування форми містить елементи керування Картка, на яких розташовані інші елементи керування, що відображають різні поля запису.

На попередньому зображенні вибрана картка відображає поле AssetID і містить елемент керування Введення тексту, щоб користувач міг редагувати значення цього поля. (На відміну від цього, на екрані подробиць відображається те ж саме поле в елементі керування Текстовий підпис, доступному тільки для читання.) Властивість Default елемента керування Введення тексту має значення Parent.Default. Якщо користувач створював запис, а не редагував наявний, цей елемент керування відобразить початкове значення, яке користувач зможе змінити для нового запису.

В області праворуч можна показувати або приховувати картки, змінювати їх взаємне розташування або налаштувати їх так, щоб вони відображали поля у різних типах елементів керування.

Створення програми з нуля

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

Визначте дані для тестування

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

Щоб точно виконувати усі вказівки з цього розділу, створіть список із назвою «Ice Cream», що містить зазначені нижче дані.

• Створіть програму для телефонів з нуля і підключіть її до джерела даних.

  Примітка

  Програми для планшетів дуже схожі, але ви зможете використовувати інший макет екрана, щоб краще використовувати додатковий простір на екрані.

  Приклади, що наведено нижче у цьому розділі, використовують джерело даних на ім'я Ice Cream.

Огляд записів

Швидко отримуйте певні відомості з запису, знаходячи його в галереї на екрані перегляду.

1. Додайте Вертикальну галерею та змініть макет на такий, що містить лише Заголовок.

   

2. Встановіть для властивості Items галереї значення Ice Cream.

3. Задайте значення для властивості Text першого текстового підпису в колекції як ThisItem.Title, якщо вона має якесь інше значення.

   Тепер текстовий підпис відображатиме значення з поля Title (Заголовок) для кожного запису.

   

4. Змініть розмір галереї, щоб заповнити екран, а тоді укажіть значення 60 для її властивості TemplateSize.

   Екран виглядатиме подібно до наведеного прикладу, де відображено усі записи з джерела даних.

   

Переглянути відомості

Якщо в галереї не відображаються потрібні відомості, виберіть стрілку для якого-небудь запису, щоб відкрити екран подробиць. Елемент керування Відображення форми на цьому екрані відображає більше полів, можливо, навіть, усі поля для вибраного запису.

Елемент керування Відображення форми використовує дві властивості для відображення запису.

• Властивість DataSource. Ім'я джерела даних, в якому зберігається запис. Ця властивість заповнює панель праворуч полями та визначає коротке ім'я і тип даних (рядок, число, дата тощо) для кожного поля.
• Властивість Item. Запис, який буде відображено. Ця властивість часто пов’язується із властивістю Selected елемента керування Галерея, завдяки чому користувач може вибрати запис у елементі керування Галерея, а потім побачити деталізацію для цього запису.

Коли значення властивості DataSource встановлено, ви можете додавати та видаляти поля в області праворуч і змінювати спосіб їх відображення.

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

Щоб додати елемент керування Відображення форми, виконайте зазначені нижче дії.

1. Додайте екран, а потім додайте до нього елемент керування Відображення форми
2. Встановіть значення для властивості DataSource елемента керування формою як Ice Cream.

В області праворуч ви можете вибрати поля, які відображатимуться на екрані, а також який тип картки відображатиме кожне поле. При внесенні змін в області праворуч значення властивості DataField для кожного з елементів керування Картка встановлюватиметься відповідно до поля, із яким користувач буде взаємодіяти. Екран повинен виглядати подібно до наведеного нижче прикладу.

Нарешті, потрібно підключити елемент керування Відображення форми до елемента керування Галерея, щоб ми могли переглядати подробиці для певного запису. Щойно ми встановимо значення для властивості Item, у наший формі з’явиться перший запис з галереї.

• Установіть значення властивості Item елемента керування Відображення форми як Gallery1.Selected.

  Відомості про вибраний елемент відобразяться у формі.

  

Чудово! Тепер подбаємо про навігацію: як користувач відкриватиме екран подробиць з екрана галереї і як відкриватиме екран галереї з екрана подробиць.

• Додайте на екран елемент керування Кнопка, задайте його властивість Text так, щоб відображалося Назад, а тоді задайте її властивість OnSelect як Back().

  Ця формула поверне користувача назад до галереї, коли він закінчить перегляд подробиць.

  

Тепер повернемося до елемента керування Галерея і додамо трохи елементів навігації на екран подробиць.

1. Перейдіть на перший екран, на якому розміщено наш елемент керування Галерея, і виберіть стрілку в першому елементі у галереї.

2. Установіть для властивості OnSelect цієї фігури зазначену нижче формулу.
   Navigate( Screen2, None )

   

3. Натисніть клавішу F5, а потім виберіть стрілку в галереї, щоб відобразити відомості про елемент.

4. Виберіть кнопку Назад, щоб повернутися до галереї продуктів, а потім натисніть клавішу Esc.

Редагування відомості

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

Елемент керування Редагування форми використовує дві властивості для відображення та редагування запису.

• Властивість DataSource. Ім'я джерела даних, в якому зберігається запис. Аналогічно до елемента керування Відображення форми, ця властивість заповнює панель праворуч полями та визначає коротке ім'я і тип даних (рядок, число, дата тощо) для кожного поля. Ця властивість також визначає, чи є значення кожного поля дійсним, перш ніж надсилати його до джерела даних, що використовується.
• Властивість Item. Запис для редагування, який часто пов’язується із властивістю Selected елемента керування Галерея. У такий спосіб можна вибрати запис у елементі керування Галерея, відобразити його на екрані подробиць і відредагувати на екрані Редагування та створення.

Щоб додати елемент керування Редагування форми, виконайте зазначені нижче дії.

1. Додайте екран, додайте елемент керування Редагування форми, а потім установіть властивість форми DataSource як Ice Cream.
2. Установіть властивість Item як Gallery1.Selected.

Тепер можна вибирати поля для відображення на екрані. Крім того, можна вибрати, який тип картки відображатиме кожне поле. При внесенні змін в області праворуч значення властивості DataField для кожного з елементів керування Картка встановлюватиметься відповідно до поля, із яким користувач буде взаємодіяти. Екран повинен виглядати подібно до наведеного нижче прикладу.

Ці дві властивості аналогічні властивостям елемента керування Відображення форми. І цього достатньо для відображення відомостей про запис.

Елемент керування Редагування форми надає більше можливостей, оскільки підтримує функцію SubmitForm, яка записує зміни у джерело даних. ЇЇ слід використовувати у елементах керування «Кнопка» або «Зображення» для збереження змін, внесених користувачем.

• Додайте елемент керування Кнопка, встановіть його властивість Text так, щоб відображалося Зберегти, а для властивості OnSelect укажіть зазначену нижче формулу.
  SubmitForm( Form1 )

Щоб додати елементи навігації, які приводитимуть на цей екран і дозволятимуть перейти з нього до інших екранів, виконайте зазначені нижче дії.

1. Додайте ще один елемент керування Кнопка, встановіть його властивість Text так, щоб відображалося Скасувати, а для властивості OnSelect укажіть зазначену нижче формулу.
   ResetForm( Form1 ); Back()

   Ця формула відкидає всі незбережені зміни та відкриває попередній екран.

   

2. Установіть для властивості OnSuccess форми значення Back().

   Після успішного збереження оновлень автоматично відкриється попередній екран (в цьому випадку екран подробиць).

   

3. На екрані Відображення додайте кнопку, встановіть її властивість Text так, щоб відображалося Редагувати, а для властивості OnSelect укажіть зазначену нижче формулу.
   Navigate( Screen3, None )

   

Ви створили базову програму з трьома екранами, яка дозволяє переглядати і вводити дані. Щоб спробувати її в дії, відкрийте екран із галереєю, а потім натисніть клавішу F5 (або виберіть кнопку зі стрілкою «попередній перегляд», що вказує уперед, у верхньому лівому кутку екрана). Рожева точка вказує, де користувач клацає або торкається екрана на кожному кроці.

Створення записів

Користувач взаємодіє із однією формою Редагувати як для оновлення, так і для створення записів. Якщо користувач хоче створити запис, функція NewForm переключає форму у режим Створення.

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

Коли користувач буде готовий зберегти новий запис, буде виконано функцію SubmitForm. Після успішного надсилання форма повертається до режиму EditMode (Редагування).

На першому екрані додайте кнопку Створити.

1. На екрані з галереєю додайте елемент керування Кнопка.

2. Установіть для властивості Text цієї кнопки значення Створити та укажіть для властивості OnSelect наведену нижче формулу.
   NewForm( Form1 ); Navigate( Screen3, None )

   Ця формула переводить елемент керування Редагування форми на екрані Screen3 у режим Створення і відкриває цей екран, щоб користувач міг заповнити його значеннями.

Коли відкриється екран «Редагування та Створення», форма буде пустою, готовою для додавання нового елемента користувачем. Коли користувач вибере кнопку Зберегти, функція SubmitForm забезпечить, що запис буде створено, а не оновлено. Якщо користувач вибере кнопку Скасувати функція ResetForm переключить форму назад у режим Редагування, а функція Back відкриє екран для перегляду галереї.

Видалення запису

1. На екрані Відображення додайте кнопку і настройте її властивість Text так, щоб відображалося Видалити.

2. Для властивості кнопки OnSelect встановіть зазначену нижче формулу.
   Remove( 'Ice Cream', Gallery1.Selected ); Back()

   

Обробка помилок

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

Якщо з якоїсь причини функція SubmitForm не спрацьовує, властивість Error елемента керування Редагування форми міститиме повідомлення про помилку, яке необхідно показати користувачу. Отримавши ці відомості, користувач повинен мати змогу виправити проблему та повторно надіслати запис, або ж скасувати оновлення.

1. На екрані «Редагування та Створення» додайте елемент керування Текстовий підпис, а потім розташуйте його попід кнопкою Зберегти. Так будь-яку помилку буде легко побачити, коли користувач вибере цей елемент керування, щоб зберегти зміни.

2. Установіть властивість Text елемента керування Текстовий підпис так: Form1.Error.

   

У програмі, яку Power Apps автоматично створює з даних, властивість AutoHeight цього елемента керування має значення True, щоб він не займав жодного місця, якщо помилок немає. Властивості Height та Y елемента керування Редагування форми також налаштовуються динамічно, з огляду на те, що елемент керування збільшується, якщо виникає помилка. Для отримання додаткових відомостей створіть автоматично програму з наявних даних і вивчіть значенні цих властивостей. Текстове поле буде дуже коротким, якщо помилок не виникне, тому для того, щоб вибрати цей елемент керування вам може знадобитися відкрити подання Додатково (що доступне на вкладці Подання).

Оновлення даних

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

1. На екрані із елементом керування Галерея додайте елемент керування Кнопка і настройте його властивість Text так, щоб відображалося Оновити.

2. Установіть зазначену нижче формулу для властивості для властивості OnSelect цього елемента керування.
   Refresh( 'Ice Cream' )

   

Пошук у галереї і сортування

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

Якщо користувач вибере кнопку сортування, порядок сортування в галереї буде змінено на протилежний. Щоб досягти цього, використовується змінна контексту щоб відстежувати поточний напрямок сортування галереї. Якщо користувач вибере кнопку, значення змінної буде оновлено, а напрямок змінено на протилежний. В якості значення для властивості OnSelect кнопки сортування задано таку формулу: UpdateContext( {SortDescending1: !SortDescending1} )

Функція UpdateContext створює контекстну змінну SortDescending1, якщо вона ще не існує. Функція зчитуватиме значення цієї змінної і встановлюватиме її значення на логічно протилежне за допомогою ! оператора. Якщо значення True (істина), то воно стане False (хибність). Якщо значення False (хибність), то воно стане True (істина).

У формулі для властивості Items елемента керування Галерея використовується ця контекстна змінна, а також текст у елементі керування TextSearchBox1.

Sort( 
    If( IsBlank(TextSearchBox1.Text),
        Assets,
        Filter( Assets, TextSearchBox1.Text in Text(ApproverEmail) ) 
    ),
    ApproverEmail,
    If(SortDescending1, Descending, Ascending) 
)

Розгляньмо це докладно.

• На перший погляд, ми бачимо функцію Sort, яка приймає три аргументи: таблицю, поле для сортування та напрямок, в якому слід сортувати.

  • Напрямок сортування береться з контекстної змінної, яка перемикається, коли користувач вибирає елемент керування ImageSortUpDown1. Значення True/False перетворюється на константи Descending (за спаданням) та Ascending (за зростанням).
  • Поле для сортування жорстко задано як ApproverEmail. Якщо ви змінюватимете поля, що відображаються в галереї, слід буде змінити і цей аргумент.

• Зсередини, у нас є функція Filter, яка приймає таблицю в якості аргументу і вираз для оцінки для кожного запису.

  • Таблиця — це необроблене джерело даних Assets (Активи), яке є відправною точкою перед фільтрацією або сортуванням.
  • Вираз виконує пошук входжень рядка з TextSearchBox1 у значеннях, які приймає поле ApproverEmail. Зауважимо знов, якщо ви змінюватимете поля, що відображаються в галереї, слід буде змінити і цей аргумент також.
  • Якщо поле TextSearchBox1 пусте, користувач хоче побачити усі записи, і функцію Filter буде пропущено.

Це лише один приклад; ви можете створити власну формулу для властивості Items, залежно від потреб програми, поєднуючи функції Filter, Sort та інші функції та оператори.

Дизайн екрана

Дотепер ми не обговорювали інші способи розподілу елементів керування між екранами. Це пояснюється тим, що існує багато варіантів, і найкращим вибором буде той, що відповідатиме потребам і вимогам саме вашої програми.

Оскільки простору на екранах телефонів зазвичай замало, скоріш за все ви захочете оглядати, відображати та редагувати/створювати записи на різних екранах. У цьому розділі кожен з екранів відкривається за допомогою функцій Navigate та Back.

На планшеті можна оглядати, відображати та редагувати/створювати записи на двох або навіть на єдиному екрані. У останньому випадку вам не знадобляться функції Navigate та Back.

Якщо користувач працює на єдиному екрані, слід бути обережніше у випадку, коли користувач не може змінити свій вибір у Галереї та потенційно може втратити зміни в елементі керування Редагування форми. Щоб не дати користувачеві під час внесення змін, які ще не було збережено, вибрати інший запис, установіть для властивості Disabled галереї зазначену нижче формулу.
EditForm.Unsaved