Розділ 3. Створення прототипу з мінімумом програмування

Примітка

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

Kiana скептично ставиться до low-code рішень і Power Apps. Однак Кіана та Марія вирішують разом створити додаток, щоб допомогти польовим технікам перевіряти запаси (і замовляти запчастини, якщо це необхідно), запитувати базу знань і перевіряти наступну зустріч, поки вони не в офісі під час сервісних дзвінків. Кіана і Марія планують використати цей досвід для вивчення процедур додавання елементів керування та використання формул у Power Apps.

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

Пункт 1. Керування запасами для виїздів

Початкова мета Марії — створити компоновану програму, що відображає список деталей і дає змогу користувачу переглядати відомості про будь-яку деталь. Зрештою, користувач повинен також мати можливість замовити деталь; проте ця початкова версія програми буде просто прототипом і поки ще не буде підключена до серверної частини. Отримавши відгук від Калеба, провідного польового техніка, Марія працюватиме з Kiana над інтеграцією полотняного додатка з системою інвентаризації, що працює локальний.

Марії дуже добре знайома наявна система керування запасами, і вона розуміє відомості, що там зберігаються. Марія починає зі створення книги Excel, яка містить таблиці, що містять імітаційні дані з деталями деяких зразків частин. У таблиці містяться поля ID (Ідентифікатор), Name (Ім’я), CategoryID (Ідентифікатор категорії), Price (Ціна), Overview (Огляд), NumberInStock (Кількість на складі) і Image (Зображення) (URL-адреса, яка веде на зображення деталі). Цю книгу можна використовувати для створення та тестування програми canvas, щоб переконатися, що вона правильно відображає необхідні дані. Цей робочий зошит Марія зберігає в обліковому записі OneDrive з ім’ям BoilerParts.xlsx.

Примітка

Копію цієї книги можна знайти в папці Assets у репозиторії Git для цього посібника.

Якщо ви розробник реляційних баз даних, ви помітите, що книга Excel містить денормалізоване подання даних. Наприклад, у реляційній базі даних стовпець CategoryID швидше за все представлявся би числовим ідентифікатором, який згадувався би в окремих таблицях із відомостями про цю категорію, зокрема, ім’я.

Примітка

URL-адреси у стовпці Image — поки що просто покажчики місця заповнення. У готовій програмі ці URL-адреси буде замінено на реальні адреси файлів зображень.

Виконайте зазначені кроки, щоб створити програму у Power Apps.

1. Увійти до Power Apps.

2. На сторінці Головна в області Почати з даних виберіть Excel Online.

   

3. На сторінці Підключення виберіть OneDrive для бізнесу, а тоді виберіть Створити.

   

4. На сторінці OneDrive для бізнесу виберіть файл BoilerParts.xlsx.

   

5. Виберіть таблицю у файлі Excel (Марія при створенні таблиці використовувала ім’я за замовчуванням, Table1) і виберіть Підключити.

   

6. Зачекайте, поки Power Apps згенерує програму.

   

7. Після створення програми з'явиться екран Огляд, на якому відображатимуться поля CategoryID, ID та Image для кожного рядка таблиці деталей у книзі.

   

8. Ті поля, що зараз відображаються, не дуже допомагають інженерам вибрати продукт. В області, де відображається екран Огляд, виберіть підпис Теплообмінник у першому рядку даних. У рядку формул виберіть властивість Text у розкривному списку. Змініть значення цієї сутності на ThisItem.Name. Текст у першому полі кожного рядка переключиться і почне відображати ім'я деталі.

   Примітка

   На зображенні нижче підпис Теплообмінник, що спочатку відображався у формі, змінився на ім'я продукту 3.5 W/S Heater.

   

9. Повторіть попередній крок для підписів ID і Image. Змініть властивість Text поля ID на CategoryID, а властивість Text поля Image на Overview. Тепер екран Огляд має виглядати як на зображенні нижче, і він, скоріш за все, буде більш корисним для виїзних інженерів при виборі деталей.

   

10. Функція пошуку на екрані Огляд за замовчуванням використовує початково вибрані при створенні екрана поля — в цьому випадку, CategoryID, ID і Image. Результати сортуються за значенням CategoryID. Доцільно переключитися на роботу із полями Name, CategoryID і Overview та сортуванням результатів за полем Name, тобто, за ім’ям. Виберіть елемент керування BrowseGallery1 в області Подання дерева. У розкривному списку у лівій частині рядка формул виберіть властивість Items. Потягніть нижній край рядка формули вниз, щоб формула відображалося повністю. Формула містить такий вираз:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
    

    

11. Змініть вираз Пошуку, щоб там згадувалися поля Name, CategoryID та Overview, використавши зазначену нижче формулу.

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))
    

12. Назва у заголовку форми не є корисною, і тема за замовчуванням не збігається з корпоративним оформленням компанії VanArsdel. На екрані Огляд виберіть підпис Table1 і в рядку Формула змініть властивість Text підпису на "Переглянути деталі" (додайте до значення подвійні лапки).

13. На панелі інструментів виберіть Тема (можливо, потрібно буде розгорнути панель інструментів, щоб відобразилися інші елементи), а потім виберіть тему Ліс. Кольори та стиль на екрані Огляд зміняться відповідно до теми.

    

Додавання зручності екрану «Докладно»

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

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

   

2. У заголовку екрана Докладно в області посередині виберіть підпис Table1. В області праворуч на вкладці Властивості змініть властивість Text на Відомості про деталь.

   Примітка

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

   

3. В області Подання дерева, у DetailScreen1, виберіть DetailForm1. В області праворуч на вкладці Властивості виберіть Редагувати поля поруч із елементом Поля. В області посередині вибирайте й перетягуйте поля так, щоб вони відображалися в зазначеному нижче порядку, зверху вниз:

   • Унікальне ім'я
   • CategoryID
   • Зведення
   • Ціна
   • NumberInStock
   • Image
   • ІДЕНТИФІКАТОР

   

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

   

5. В області Подання дерева, у DetailForm1, виберіть CategoryID_DataCard1. Цей елемент є елементом керування DataCard, який відображає ім'я поля (яке називається ключ) та його значення.

   

   В області праворуч на вкладці Додатково виберіть Розблокувати для зміни властивостей. У розділі Дані змініть поле DisplayName на "Категорія" (включіть лапки).

   Примітка

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

   

6. Повторіть попередній крок, щоб змінити ключ для NumberInStock_DataCard1 на "Кількість на складі" (додайте лапки).

7. Потрібно змінити форматування поля Ціна, щоб дані в ньому відображалися, як грошова одиниця. В області Подання дерева, у DetailForm1, в Price_DataCard1 виберіть DataCardValue7. Це поле, в якому відображається значення поля Ціна. В області DataCardValue7 праворуч, на вкладці Додатково змініть властивість Text на Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

   Вираз Parent.Default — це позиція даних, до якої прив'язаний батьківський елемент керування (картка даних DataCard), у нашому випадку — стовпець Ціна. Функція Text відформатує це значення із використанням формату, зазначеного у другому аргументі; у цьому прикладі це локальна грошова одиниця із двома десятковими розрядами.

8. На картці даних зображення має відображатися зображення деталі, а не URL-адреса файлу зображення. В області Подання дерева, у DetailForm1, у Image_DataCard1 виберіть DataCardValue3, а тоді виберіть Видалити, щоб вилучити цей елемент керування.

9. Виберіть Image_DataCard1. В області ліворуч виберіть + Вставити. В області Вставка розгорніть Медіа-вміст і виберіть Зображення.

   

10. Поверніться до області Подання дерева та переконайтеся, що елемент керування текстом Зображення1 додано до елемента керування Image_DataCard1.

    

11. В області Подання дерева виберіть Image_DataCard1. В області праворуч на вкладці Додатково змініть Висоту на 500, щоб для показу зображення було достатньо місця.

    

12. В області Подання дерева виберіть Зображення1. Установіть властивості, як зазначено нижче.

    • Image: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Width: 550
    • Height: 550

    Примітка

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

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

1. В області Подання дерева виберіть EditScreen1. Виберіть кнопку з трьома крапками, а потім виберіть Видалити, щоб усунути цей екран.

   

2. В області Подання дерева виберіть DetailsScreen1. Зауважте, що Power Apps Studio на цьому екрані відображатиме повідомлення про помилку. Ця помилка трапляється, оскільки DetailsScreen1 містить вирази, що посилаються на екран EditScreen1, який більше не існує.

3. У заголовку сторінки DetailsScreen1 виберіть піктограму олівця (IconEdit1). Властивість OnSelect для цього елемента керування містить вираз EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). При виборі піктограми Редагувати цей вираз виконуватиметься й намагатиметься перейти до екрана EditScreen1.

   

4. В області Подання дерева виберіть IconEdit1, а потім – Видалити. Ця піктограма більше не потрібна.

5. Виберіть IconDelete1, а тоді виберіть Видалити. Ця піктограма використовується для видалення поточної деталі, і вона також нам не потрібна.

   

6. Зауважте, що текст Відомостей про частину зник з заголовку, і натомість Power Apps Studio відображає повідомлення про помилку. Це сталося, оскільки ширина елемента керування для підпису, що відображає цей текст, є обчислюваною. В області Подання дерева виберіть LblAppName2. Розгляньте властивістьWidth. Значення цієї властивості є результатом виразу Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Змініть вираз для властивості Width на Parent.Width - Self.X. Повідомлення про помилку має зникнути, і текст Відомості про деталь має знову з'явитися в заголовку екрана.

8. В області Подання дерева виберіть BrowseScreen1. На цьому екрані також відображатиметься повідомлення про помилку. Піктограма + на панелі інструментів (IconNewItem1) дає змогу користувачу додати нову деталь. Властивість OnSelect для цієї піктограми посилається на екран EditScreen1.

   

9. Виберіть IconNewItem1, а тоді виберіть Видалити. Як і раніше, з тієї самої причини текст у заголовку екрана зникає, і з'являється повідомлення про помилку.

10. В області Подання дерева, у BrowseScreen1, виберіть LblAppName1. Змініть вираз для властивості Width, видаливши посилання на IconNewItem1.Width. Новий вираз має виглядати так: Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    

11. Проблему із заголовком все ще не вирішено. Хоча текст Огляд деталей знову з'явився, повідомлення про помилку все одно відображається, а піктограми оновлення та сортування знаходяться в неправильних місцях. В області Подання дерева виберіть IconSortUpDown1. Знайдіть властивість X для цього елемента керування. Ця властивість визначає горизонтальне положення піктограми в заголовку. Наразі вона розраховується на основі ширини елемента керування IconNewItem1.

    

12. Змініть вираз для властивості X на Parent.Width - Self.Width.

13. В області Подання дерева виберіть IconRefresh1. Змініть вираз для властивості X на Parent.Width - IconSortUpDown1.Width - Self.Width. Усі помилки тепер мають зникнути.

Збереження та тестування програми

Тепер ви можете зберегти та протестувати програму.

1. Виберіть Файл > Зберегти як.

2. В області Зберегти як виберіть Хмара, введіть ім'я VanArsdelApp і виберіть Зберегти.

   

3. Виберіть стрілку назад, щоб повернутися на Головний екран.

   

4. Натисніть клавішу F5, щоб переглянути програму. На сторінці Огляд деталей виберіть кутову дужку вправо (>) праворуч від будь-якої деталі. Відобразиться екран Докладно для цієї деталі.

   

5. Виберіть кутову дужку вліво (<) у заголовку екрана Докладно, щоб повернутися на екран Огляд.

6. На екрані Огляд деталей введіть текст у полі Пошук. Під час введення елементи будуть фільтруватися й відображатимуться лише ті, що відповідають тексту в полях Name, CategoryID і Overview.

   

7. Закрийте вікно попереднього перегляду та поверніться до Power Apps Studio.

Пункт 2. Виїзна база знань

Для доступу до бази знань Марія і Калеб (технік) задумали простий інтерфейс, де користувач уводить термін для пошуку, і програма відображає всі статті бази знань, в яких згадується цей термін. Марія розуміє, що цей процес використовуватиме пов'язано з пошуком Azure Cognitive Search, але вона не має — та й не хоче — вивчати, як він працює. Тому Марія вирішує просто надати базовий інтерфейс користувача, а пізніше попрацювати з Кіаною, щоб додати фактичний функціонал.

Марія вирішує створити новий екран на основі шаблону Список, доступного в Power Apps Studio.

1. На панелі інструментів Power Apps Studio екрана Головний виберіть Новий екран і виберіть Список.

   

2. У заголовку екрана виберіть підпис, що відображає текст [Title]. Змініть властивість Text на "Запит" (включіть лапки).

   

3. У заголовку екрана виберіть знак «плюс» (+), а тоді виберіть Видалити. Піктограма + повинна дати змогу користувачу додавати до списку інші елементи. База знань доступна лише для запитів, тому ця функція не потрібна.

   

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

4. В області Подання дерева прокрутіть вниз до розділу Screen1 і виберіть LblAppName3. Змініть властивість Width на формулу Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

   

5. В області Подання дерева виберіть IconSortUpDown2. Змініть властивість X на формулу Parent.Width - IconSortUpDown2.Width.

6. В області Подання дерева виберіть IconRefresh2. Змініть властивість X на формулу Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Це має усунути всі помилки на цьому екрані.

7. Виберіть Файл > Зберегти.

8. У полі Примітка щодо версії введіть текст Додано інтерфейс бази знань і виберіть Зберегти.

9. Поверніться на Головний екран і виберіть F5, щоб переглянути новий екран. Він повинен виглядати, як на зображенні нижче.

   

   Зауважте, що якщо вибрати піктограму > поряд із будь-яким із записів-заповнювачів, функції відомостей наразі не працюватимуть. Ви займетесь цим пізніше, коли ви інтегруватимете пошук Azure Cognitive Search у програму.

10. Закрийте вікно попереднього перегляду та поверніться до Power Apps Studio.

Пункт 3. Виїзне планування і примітки

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

• ID (ідентифікатор зустрічі)
• Customer ID (унікальний ідентифікатор для клієнта)
• Ім’я клієнта
• Адреса клієнта
• Problem Details (текстовий опис проблеми, яка виникла в клієнта)
• Contact Number (Контактний телефон)
• Статус
• Appointment Date (Дата зустрічі)
• Час зустрічі
• Примітки (текстовий опис із примітками, що додаються інженером)
• Зображення (фото приладдя, в робочому стані після ремонту або в якості додаткового зображення для приміток інженера)

Примітка

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

Марія зберігає цей файл в обліковому записі OneDrive з ім’ям Appointments.xlsx. Пам’ятаючи, що раніше в книзі використовувалося ім’я таблиці за замовчуванням, а заголовок доводилося змінювати на різних екранах, що генерувалися, Марія перейменовує таблицю в книзі на Зустрічі.

Примітка

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

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

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

Примітка

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

Щоб створити програму для зустрічей

1. У рядку меню Power Apps Studio виберіть Файл.

   

2. В області ліворуч виберіть Створити. В основній області виберіть поле OneDrive для бізнесу — макет для телефону.

   

3. В області Підключення виберіть Appointments.xlsx.

   

4. У файлі Excel виберіть таблицю Appointments та виберіть Підключити.

   

5. Зачекайте, поки програма створюється. Коли з'явиться нова програма, вона міститиме екран Огляд, екран Докладно та екран Редагувати і використовуватиме тему за замовчуванням.

   

6. В області Подання дерева в розділі BrowseScreen1, під BrowseGallery1 виберіть Image1 і натисніть Видалити. На екрані Огляд мають бути лише зустрічі, а не пов’язані із ними зображення.

   

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

7. В області Подання дерева, у BrowseGallery1, виберіть Title1. Змініть значення властивості X на 16. Замініть формулу у властивості Width на Parent.TemplateWidth - 104. Це має усунути всі помилки на цьому екрані.

8. В області Подання дерева, у BrowseGallery1, виберіть Body1. Наразі в цьому елементі керування відображаються відомості про контактний телефон клієнта. Змініть значення в властивості Text на ThisItem.'Customer Name' (додайте одинарні лапки).

   

   Тепер на екрані Огляд відображаються відомості про ім’я клієнта.

9. В області Подання дерева виберіть BrowseGallery1. За допомогою рядка формул перевірте вираз у властивості Items. Елемент керування шукає зустрічі, використовуючи дату зустрічі, час та контактний телефон. Змініть цю формулу, щоб шукати за іменем клієнта, а не за номером телефону.

   SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
   

   Зауважте, що зустрічі впорядковано за датою, а потім за часом (перші два відображувані поля).

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

11. В області Подання дерева виберіть LblAppName1. Змініть формулу для властивості Width. на Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

12. В області Подання дерева виберіть IconRefresh1. Змініть значення для властивості X на Parent.Width - IconSortUpDown1.Width - Self.Width.

13. В області Подання дерева виберіть iconSortUpDown1. Змініть значення для властивості X на Parent.Width - Self.Width.

14. В області Подання дерева виберіть BrowseScreen1, а потім виберіть кнопку із трьома крапками (...). У розкривному меню, що з'явиться, виберіть Перейменувати та змініть ім'я екрана на BrowseAppointments.

    

15. Використовуючи такі ж дії, змініть ім’я елемента керування BrowseGallery1 на BrowseAppointmentsGallery.

Тепер екран Огляд готовий.

Щоб створити екрана відомостей

Тепер ви можете звернути увагу на екран Докладно.

1. В області Подання дерева прокрутіть вниз до розділу DetailsScreen1. Можна побачити, що відомості представлені в алфавітному порядку за іменами полів, а деяку корисну інформацію, наприклад, поле Примітки, взагалі не показано.

   

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

   • Дата зустрічі
   • Час зустрічі
   • Ідентифікатор клієнта
   • ІДЕНТИФІКАТОР

3. Виберіть + Додати поле і додайте перелічені нижче поля.

   • Примітки
   • Відомості про проблему
   • Статус

   

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

   • Ім’я клієнта
   • Адреса клієнта
   • Контактний телефон
   • Відомості про проблему
   • Статус
   • Примітки
   • Image

5. В області Подання дерева виберіть Notes_DataCard1. Змініть значення властивості Height на 320.

   

6. В області Подання дерева видаліть IconDelete1. Інженери не повинні мати можливості видаляти зустрічі із системи.

7. Виберіть LblAppName2 та змініть значення властивості Width на Parent.Width - Self.X - IconEdit1.Width.

8. Використовуючи метод, описаний вище, змініть назву DetailsScreen1 на AppointmentDetails.

Для редагування екрана «Редагування»

Останній, поки що, екран, на який потрібно звернути увагу, — це екран Редагування.

1. В області Подання дерева виберіть EditScreen1.

2. В області Подання дерева в розділі EditScreen1 виберіть EditForm1. В області праворуч на вкладці Властивості виберіть Редагувати поля поруч із елементом Поля.

3. Видаліть зазначені нижче поля.

   • Адреса клієнта
   • ІДЕНТИФІКАТОР
   • Ідентифікатор клієнта
   • Дата зустрічі
   • Час зустрічі

4. Додайте зазначені нижче поля.

   • Відомості про проблему
   • Статус
   • Примітки

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

   • Ім’я контактної особи
   • Номер клієнта
   • Відомості про проблему
   • Статус
   • Примітки
   • Image

6. Виберіть поле Ім'я клієнта та розгорніть його, щоб переглянути властивості. Змініть Тип елемента керування на Перегляд тексту. Ця зміна робить елемент керування доступним лише для читання; зручно бачити ім'я клієнта на екрані Редагування, але змінити його інженер не зможе.

   

7. Виберіть поле Контактний телефон та розгорніть його, щоб переглянути властивості. Змініть Тип елемента керування на Перегляд тексту. Це поле також має бути доступним лише для читання.

8. Виберіть поле Примітки, розгорніть його та змініть Тип елемента керування на Редагування багаторядкового тексту. Це налаштування дає змогу інженеру додавати докладні примітки, які можуть займати кілька рядків.

9. Виберіть поле Стан, розгорніть його та змініть Тип елемента керування на Припустимі значення.

10. В області Подання дерева виберіть Status_DataCard5. В області праворуч на вкладці Властивості виберіть Розблокувати для зміни властивостей. Прокрутіть униз до властивості AllowedValues і змініть текст на ["Виправлено", "Замовлено деталі", "Не вирішено"] (додайте квадратні дужки). Інженер поля зможе встановити для параметра Стан лише одне з цих визначених значень.

    

11. В області Подання дерева перейменуйте EditScreen1 як EditAppointment.

Тепер ви можете зберегти та протестувати програму.

1. Виберіть Файл > Зберегти як.

2. В області Зберегти як виберіть Хмара, введіть ім'я VanArsdelAppointments, і виберіть Зберегти.

3. Виберіть стрілку назад на панелі інструментів Power Apps Studio, щоб повернутися на Головний екран.

4. Натисніть клавішу F5, щоб переглянути програму. На сторінці Зустрічі виберіть піктограму > поряд із будь-якою зустріччю. Має відобразитись екран Докладно для вибраної зустрічі. У заголовку виберіть Редагувати, щоб змінити зустріч. Перевірте вказані нижче дані.

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

   Примітка

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

   

Поєднання екранів в єдину програму

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

1. Відкрийте нове вікно браузера та увійдіть до Power Apps Studio за допомогою відомостей свого облікового запису.

2. В області ліворуч виберіть Програми, виберіть VanArdselApp, а потім виберіть Редагувати.

   

3. На панелі інструментів виберіть Новий екран, і виберіть Пустий. В результаті ви додасте у програму новий екран, на який зможете скопіювати елементи керування з екрана Огляд програми VanArsdelAppointments.

   

4. Новий екран матиме назву Screen2. В області Подання дерева перейменуйте його на BrowseAppointments.

5. Повторіть попередній крок іще двічі, щоб додати ще два екрани (Screen3 і Screen4).

6. Перейменуйте Screen3 на AppointmentDetails, а Screen4 — на EditAppointment.

7. На панелі інструментів Power Apps Studio ліворуч виберіть піктограму Дані. В області Дані виберіть Додати дані. У розкривному списку Виберіть джерело даних, у полі Пошук, введіть OneDrive, а тоді виберіть OneDrive для бізнесу.

   

8. Виберіть файл Excel Appointments.xlsx, виберіть таблицю Appointments, а тоді виберіть Підключити.

9. Переключіться на вікно браузера, в якому відображається програма VanArsdelAppointments.

10. На панелі інструментів виберіть Тема (можливо, потрібно буде розгорнути панель інструментів, щоб відобразилися інші елементи), а потім виберіть тему Ліс. Така ж тема використовується програмою VanArsdel.

11. На панелі інструментів ліворуч виберіть піктограму Подання дерева, виберіть екран BrowseAppointments і натисніть Ctrl+A. Ця дія вибере усі елементи керування на екрані.

12. Натисніть Ctrl+C, щоб скопіювати ці елементи керування до буфера обміну.

13. Поверніться до вікна браузера, в якому відображається програма VanArsdelApp.

14. На панелі інструментів ліворуч виберіть піктограму Подання дерева, а тоді виберіть екран BrowseAppointments.

15. Натисніть Ctrl+V, щоб вставити елементи керування на вибраний екран.

    Примітка

    Іноді заголовок екрана відображається надто низько. Щоб усунути цю проблему, виберіть елементи керування IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 і RectQuickActionBar1_1 в області Подання дерева (утримуйте натиснутою клавішу Shift при клацанні, щоб вибрати одночасно кілька елементів керування) і перемістіть їх вище в області подання конструктора, використовуючи мишу або клавіші зі стрілками.

16. Поверніться до вікна браузера, де знаходиться програма VanArsdelAppointments, а тоді виберіть та скопіюйте елементи керування на екрані AppointmentDetails (Ctrl+A, а потім Ctrl+C).

17. Поверніться до вікна браузера, де відображається програма VanArsdelApp, виберіть екран AppointmentDetails і вставте елементи керування (Ctrl+V). За необхідності скоригуйте позицію елементів керування у заголовку екрана.

    Примітка

    Ви побачите повідомлення про помилку в заголовку екрана AppointmentDetails. Ця помилка виникає, оскільки екран посилається на елементи керування на екрані EditAppointment, який поки що не скопійовано. Після виконання наступних кроків ця помилка має зникнути.

18. Поверніться до вікна браузера, де знаходиться програма VanArsdelAppointments, а тоді виберіть та скопіюйте до буфера обміну елементи керування на екрані EditAppointment.

19. Поверніться до вікна браузера, де відображається програма VanArsdelApp, виберіть екран EditAppointment і вставте елементи керування. Знову ж таки, за потреби перемістіть елементи керування у заголовку.

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

21. В області Подання дерева виберіть екран BrowseScreen1. Перейменуйте цей екран на BrowseParts.

22. Перейменуйте екран DetailsScreen1 на PartDetails.

23. Перейменуйте екран Screen1 на Knowledgebase.

    Примітка

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

Додавання Головного екрана до програми

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

1. У програмі VanArsdelApp на панелі інструментів виберіть Новий екран, і виберіть Пустий.

2. В області Подання дерева перейменуйте Screen2 на Головний.

3. На панелі інструментів виберіть Вставити. У списку елементів керування розгорніть Медіа-вміст і виберіть Зображення. На екран буде додано відповідний елемент керування.

   

4. Установіть значення X для елемента керування 16, а значення Y — 22. Змініть Width на 605, а Height на 127. Змініть Положення зображення на Заповнити.

   

5. Не переходячи з вкладки Властивості, в розкривному списку Зображення виберіть + Додати файл зображення, а потім передайте зображення VanArsdelLogo.png до елемента керування.

   Примітка

   Це зображення ви можете знайти в папці Assets у репозиторії Git для цього посібника.

   

6. Зі списку елементів керування додайте до форми чотири елементи керування Текстовий підпис та розташуйте їх так, щоб вони були один під іншим під емблемою VanArsdel.

   

7. Виберіть верхній елемент керування Текстовий підпис. В області праворуч на вкладці Властивості установіть властивість Text як Наступна зустріч. Встановіть Розмір шрифту 30 і скористайтесь палітрою кольорів, щоб установити зелений колір шрифту (щоб він відповідав емблемі).

   

8. Виберіть другий елемент керування Текстовий підпис. Змініть значення в властивості Text на First(Appointments).'Customer Name' (додайте одинарні лапки). Ця формула завантажує ім'я клієнта з першого рядка таблиці зустрічей.

   

   Примітка

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

9. Виберіть третій елемент керування Текстовий підпис і встановіть для властивості Text значення First(Appointments).'Appointment Date'.

10. Задайте властивість Text четвертого текстового підпису як First(Appointments).'Appointment Time'. Установіть для властивості Розмір шрифту значення 30.

11. Зі списку елементів керування додайте елемент керування Прямокутник. Установіть для елемента керування зазначені нижче значення властивостей.

    • Display mode: View
    • X: 0
    • Y: 632
    • Width: 635
    • Height: 1

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

12. Додайте три елемента керування Кнопка на екран, розташуйте їх вертикально через рівні проміжки під роздільником. Установіть властивість Text для верхньої кнопки як Зустрічі, властивість Text для середньої кнопки як Деталі і властивість Text для нижньої кнопки як База знань.

    

13. Виберіть кнопку Зустрічі. Змініть вираз у дії OnSelect на формулу Navigate(BrowseAppointments, ScreenTransition.Fade). Ця дія відображає екран зустрічей, коли користувач вибирає кнопку.

    

14. Задайте дію OnSelect для кнопки Деталі як Navigate(BrowseParts, ScreenTransition.Fade).

15. Задайте дію OnSelect для кнопки База знань як Navigate(Knowledgebase, ScreenTransition.Fade).

На додачу до переходів з Головного екрана на інші екрани системи, необхідно додати для користувачів можливість повернутися на Головний екран з екранів Зустрічі, Деталі та База знань. Марія вирішує додати кнопки «Назад» на ці екрани.

1. В області Подання дерева виберіть екран BrowseParts

2. Виберіть елемент керування RectQuickActionBar1, щоб перевести на нього фокус.

3. Виберіть меню Вставка та виберіть Додати піктограму. Помістіть піктограму ліворуч від елемента керування RectQuickActionBar1. Зауважте, що піктограма приховає частину підпису Огляд деталей.

   

4. У меню Подання дерева змініть ім'я нового елемента керування піктограмою на IconReturn1.

5. Змініть формулу у дії OnSelect на вираз Back(ScreenTransition.Fade). Функція Back («Назад») переміщує користувача на попередній відвіданий екран.

6. На вкладці Властивості змініть властивість «Icon» на < ліворуч.

7. У заголовку екрана виберіть підпис Огляд деталей. Змініть значення властивості X на IconReturn1.Width + 20. Підпис Огляд деталей тепер не повинен частково перекриватися.

   

8. Повторюючи процес, описаний у кроках з 16 до 22, додайте піктограму із іменем IconReturn2 до елемента керування RectQuickActionBar3 на екрані Knowledgebase.

9. Аналогічно додайте піктограму із іменем IconReturn3 на елемент керування RectQuickActionBar1_1 на екрані BrowseAppointments.

10. В області Подання дерева виберіть об’єкт Програма. Змініть властивість StartScreen на вираз Home. Це гарантує, що головний екран відображатиметься щоразу, коли програма запускається:

    

    Примітка

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

Нарешті, можна протестувати програму.

1. Виберіть Файл > Зберегти. У полі Примітки до версії введіть Повна версія з головним екраном і виберіть Зберегти.

2. Клацніть стрілку назад, щоб повернутися на Головний екран, а потім натисніть клавішу F5, щоб запустити програму.

3. Переконайтеся, що відображається Головний екран програми.

4. Виберіть Зустрічі. Має відобразитися екран зустрічей.

5. Виберіть стрілку назад, щоб повернутися на Головний екран.

6. Виберіть Деталі. Має відобразитися огляд деталей.

7. Виберіть стрілку назад, щоб повернутися на Головний екран.

8. Виберіть База знань. Має з'явитися екран для запиту у базі знань.

9. Виберіть стрілку назад, щоб повернутися на Головний екран.

10. Закрийте вікно попереднього перегляду та поверніться до Power Apps Studio.

Прототип програми готовий.

Назад Вперед