Глава 3. Создание прототипа с минимумом кода

Примечание

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

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

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

Пункт 1. Управление полевыми запасами

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

Мария хорошо знакома с существующей системой управления запасами и понимает содержащуюся в ней информацию. Мария начинает с создания книги Excel с таблицами, содержащими фиктивные данные с деталями для некоторых примеров запасных частей. Поля в таблице: ИД, Название, ИД категории, Цена, Обзор, Кол-во в наличии и Изображение (URL-адрес, который ссылается на изображение запасной части). Эту книгу можно использовать для создания и тестирования приложения на основе холста, чтобы убедиться, что оно правильно отображает необходимые данные. Мария сохраняет эту книгу в своей учетной записи OneDrive с именем BoilerParts.xlsx.

Примечание

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

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

Примечание

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

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

1. Войдите в Power Apps.

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

   

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

   

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

   

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

   

6. Подожди пока Power Apps сгенерирует приложение.

   

7. Когда приложение будет сгенерировано, вы увидите экран Обзор, на котором отображаются поля ИД категории, ИД и Изображение из каждой строки таблицы запасных частей в книге.

   

8. Поля, которые отображаются в настоящее время, не очень полезны, чтобы помочь инженеру выбрать продукт. На панели, отображающей экран Обзор, выберите подпись Теплообменник в первой строке данных. В строке формул выберите свойство Текст из раскрывающегося списка. Измените значение этого свойства на ThisItem.Name. Текст в первом поле каждой строки будет переключаться на отображение названия запасной части.

   Примечание

   На следующем изображении подпись Теплообменник, первоначально отображаемая в форме, изменилась на название продукта, Обогреватель S 3,5 Вт.

   

9. Повторите предыдущий шаг для подписей ИД и Изображение. Измените свойство Текст поля ИД на ИД категории, а свойство Текст поля Изображение на Обзор. Экран Обзор теперь должен выглядеть так, как показано на следующем изображении, который выездной инженер, скорее всего, сочтет полезным для выбора запасных частей.

   

10. Функция поиска экрана Обзор по умолчанию использует поля, которые были изначально выбраны при создании экрана — в этом случае ИД категории, ИД и Изображение. Результаты отсортированы по полю ИД категории. Имеет смысл переключить это на поля Название, ИД категории и Обзор с сортировкой результатов по полю Название. Выберите элемент управления BrowseGallery1 на панели Представление в виде дерева. В раскрывающемся списке в левой части строки формул выберите свойство Элементы. Перетащите нижний край строки формул вниз, чтобы формула была полностью видна. Формула содержит следующее выражение:

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

    

11. Измените выражение Поиск для ссылки на поля Название, ИД категории и Обзор, используя следующую формулу:

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

12. Заголовок в заголовке формы бесполезен, а тема по умолчанию не соответствует корпоративному стилю VanArsdel. На экране Обзор выберите подпись Таблица1, и в строке Формула измените свойство Текст подписи на "Обзор запасных частей" (заключите значение в двойные кавычки).

13. На панели инструментов выберите Тема (возможно, вам придется развернуть панель инструментов, чтобы отобразить больше элементов), затем выберите тему Лес. Цвета и стиль для экрана Обзор изменятся в соответствии с темой.

    

Сделайте экран сведений более полезным

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

1. На панели Представление в виде дерева прокрутите вниз и выберите DetailScreen1. На этом экране отображаются сведения о той запасной части, которую пользователь выбирает на экране Обзор.

   

2. В заголовке экрана Сведения на средней панели выберите подпись Таблица1. На правой панели на вкладке Свойства измените свойство Текст на Сведения о запасных частях.

   Примечание

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

   

3. На панели Представление в виде дерева в пункте DetailScreen1 выберите DetailForm1. На правой панели на вкладке Свойства выберите Изменить поля рядом с меткой Поля. На средней панели выберите и перетащите поля, чтобы они отображались в следующем порядке, сверху вниз:

   • имени
   • ИД категории
   • Обзор
   • Цена
   • Кол-во в наличии
   • Изображения
   • ИД

   

4. Выберите поле ИД, выберите многоточие, которое появляется справа от поля, затем выберите Удалить в появившемся раскрывающемся меню. Это действие удаляет поле ИД из формы.

   

5. На панели Представление в виде дерева в пункте DetailForm1 выберите CategoryID_DataCard1. Этот элемент является элементом управления DataCard, отображающим имя поля (называемого ключ) и его значение.

   

   На правой панели на вкладке Дополнительно выберите Снимите блокировку для изменения свойств. В разделе Данные измените поле Отображаемое имя на "Категория" (включая кавычки).

   Примечание

   Как и в случае со вкладкой Свойства, многие свойства на вкладке Дополнительно также доступны через строку формул. Чтобы установить эти свойства, вы можете использовать строку формул, если хотите.

   

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

7. Вам необходимо настроить форматирование поля Цена для отображения данных в виде денежной суммы. На панели Представление в виде дерева в разделе DetailForm1 в пункте Price_DataCard1 выберите DataCardValue7. Это поле, в котором отображается значение поля Цена. На панели DataCardValue7 справа на вкладке Дополнительно измените свойство Текст на Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

   

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

8. Карточка данных изображения должна отображать изображение запасной части, а не URL-адрес файла изображения. На панели Представление в виде дерева в разделе DetailForm1 в пункте Изображение_DataCard1 выберите DataCardValue3, затем выберите Удалить чтобы удалить этот элемент управления.

9. Выберите Image_DataCard1. В левой области выберите + Вставить. На панели Вставка разверните Мультимедиа, затем выберите Изображение.

   

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

    

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

    

12. На панели Представление в виде дерева выберите Image1. Задайте следующие свойства:

    • Изображение: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Ширина: 550
    • Высота: 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. Изучите свойство Ширина. Значение этого свойства является результатом выражения Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

   

7. Измените выражение для свойства Ширина на Parent.Width - Self.X. Ошибка должна исчезнуть, а текст Сведения о запчасти должен снова появиться в заголовке экрана.

8. На панели Представление в виде дерева выберите BrowseScreen1. На этом экране также будет отображаться сообщение об ошибке. Значок + на панели инструментов (IconNewItem1) позволяет пользователю добавить новую запасную часть. Свойство OnSelect для этого значка ссылается на экран EditScreen1.

   

9. Выберите IconNewItem1, затем выберите Удалить. Как и раньше, текст в заголовке экрана исчезает, и отображается сообщение об ошибке, и по той же причине.

10. На панели Представление в виде дерева в пункте BrowseScreen1 выберите LblAppName1. Измените выражение для свойства Ширина, удалив ссылку на 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. На экране Обзор запасных частей введите текст в поле Поиск. По мере ввода элементы будут отфильтрованы, чтобы отображались только те, у которых есть соответствующий текст в поле Название, ИД категории или Обзор.

   

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

Пункт 2. База знаний для выездных сотрудников

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

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

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

   

2. В заголовке экрана выберите метку, отображающую текст [Заголовок]. Измените свойство Текст на "Запрос" (включая кавычки).

   

3. В заголовке экрана выберите знак плюс (+), затем выберите Удалить. Значок + предназначен для того, чтобы пользователь мог добавлять дополнительные элементы в список. База знаний предназначена только для запросов, поэтому в этой функции нет необходимости.

   

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

4. На панели Представление в виде дерева прокрутите вниз до раздела Screen1 и выберите LblAppName3. Измените свойство Ширина на формулу 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 в приложение.

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

Пункт 3. Планирование и заметки для выездных работ

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

• ИД (идентификатор встречи)
• ИД клиента (уникальный идентификатор клиента)
• Название клиента
• Адрес клиента
• Сведения о проблеме (текстовое описание проблемы, с которой столкнулся клиент)
• Номер контакта
• Состояние
• Дата встречи
• Время встречи
• Примечания (текстовое описание с любыми примечаниями, добавленными инженером)
• Изображение (фотография прибора в рабочем состоянии после ремонта или в качестве дополнительного изображения для заметок инженера)

Примечание

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

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

Примечание

Эта книга доступна в папке Ресурсы в репозитории GitHub для этого руководства.

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

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

Примечание

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

Чтобы создать приложение для встреч

1. В строке меню Power Apps Studio выберите Файл.

   

2. В левой области выберите Создать. На главной панели выберите поле OneDrive для бизнеса - макет для телефона.

   

3. На панели Подключения выберите Appointments.xlsx.

   

4. В файле Excel выберите таблицу Встречи, затем выберите Подключить.

   

5. Подожди, пока не будет создано приложение. Когда появится новое приложение, оно будет содержать экран Обзор, экран Сведения и экран Изменить, использующие тему по умолчанию.

   

6. На панели Представление в виде дерева в разделе BrowseScreen1 в пункте BrowseGallery1 выберите Image1, затем выберите Удалить. Экран Обзор должен просто перечислять встречи, без каких-либо связанных с ними изображений.

   

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

7. На панели Представление в виде дерева в пункте BrowseGallery1 выберите Title1. Измените значение в свойстве X на 16. Измените формулу в свойстве Ширина на Parent.TemplateWidth - 104. Это должно устранить все ошибки для экрана.

8. На панели Представление в виде дерева в пункте BrowseGallery1 выберите Body1. Этот элемент управления в настоящее время отображает сведения о контактном телефоне клиента. Измените значение в свойстве Текст на ThisItem.'Customer Name' (включая одинарные кавычки).

   

   Сведения на экране Обзор теперь отображают имя клиента.

9. На панели Представление в виде дерева выберите BrowseGallery1. Используя строку формул, изучите выражение в свойстве Элементы. Элемент управления выполняет поиск встреч по дате, времени и контактному номеру встречи. Измените эту формулу для поиска по имени клиента, а не по номеру контакта:

   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. Измените формулу для свойства Ширина. на 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. Перетащите каждое поле так, чтобы оно отображались в следующем порядке, сверху вниз:

   • Название клиента
   • Адрес клиента
   • Номер контакта
   • Сведения о проблеме
   • Состояние
   • Заметки
   • Изображения

5. На панели Представление в виде дерева выберите Notes_DataCard1. Измените свойство Высота на 320.

   

6. На панели Представление в виде дерева удалите IconDelete1. Инженеры не должны иметь возможность удалять встречи из системы.

7. Выберите LblAppName2 и измените значение свойства Ширина на Parent.Width - Self.X - IconEdit1.Width.

8. Используя технику, описанную ранее, измените имя DetailsScreen1 на AppointmentDetails.

Для изменения экрана редактирования

Последний экран, на который требуется сейчас обратить внимание, это экран Изменить.

1. На панели Представление в виде дерева выберите EditScreen1.

2. На панели Представление в виде дерева в разделе EditScreen1 выберите EditForm1. На правой панели на вкладке Свойства выберите Изменить поля рядом с меткой Поля.

3. Удалите следующие поля:

   • Адрес клиента
   • ИД
   • ИД клиента
   • Дата встречи
   • Время встречи

4. Добавьте следующие поля:

   • Сведения о проблеме
   • Состояние
   • Заметки

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

   • Имя контакта
   • Номер клиента
   • Сведения о проблеме
   • Состояние
   • Заметки
   • Изображения

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, выберите таблицу Встречи, затем выберите Подключить.

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 в Home.

3. На панели инструментов выберите Вставить. В списке элементов управления разверните Мультимедиа, затем выберите Изображение. Элемент управления будет добавлен на экран.

   

4. Установите для положения X элемента управления значение 16, а для положения Y — значение 22. Измените значение Ширина на 605, а значение Высота на 127. Измените Положение изображения на Заполнить.

   

5. Оставаясь на вкладке Свойства в раскрывающемся списка Изображение выберите + Добавить файл изображения, затем отправьте изображение VanArsdelLogo.png в элемент управления.

   Примечание

   Этот файл изображения доступен в папке Ресурсы в репозитории GitHub для этого руководства.

   

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

   

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

   

8. Выберите второй элемент управления Текстовая подпись. Измените значение в свойстве Текст на First(Appointments).'Имя клиента' (включая одинарные кавычки). Эта формула извлекает имя клиента из первой строки таблицы встреч.

   

   Примечание

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

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

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

11. Из списка элементов управления добавьте элемент управления Прямоугольник. Определите следующие свойства для этого элемента управления:

    • Режим отображения: Просмотр
    • X: 0
    • Y: 632
    • Ширина: 635
    • Высота: 1

    Этот элемент управления действует как визуальный разделитель в середине экрана.

12. Добавьте три элемента управления Кнопка на экран, расположенные вертикально и равномерно разнесенные под разделителем. Установить для свойства Текст верхней кнопки значение Встречи, для свойства Текст средней кнопки значение Запчасти, а для свойства Текст нижней кнопки значение База знаний.

    

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. На вкладке Свойства измените свойство "Значок" на < Слева.

7. В заголовке экрана выберите подпись Обзор запчастей. Измените свойство X на IconReturn1.Width + 20. Подпись Обзор запчастей больше не должна быть частично скрыта.

   

8. Следуя процессу, описанному в шагах с 16 по 22, добавьте значок с именем IconReturn2 к элементу управления RectQuickActionBar3 на экране База знаний.

9. Точно так же добавьте значок с именем IconReturn3 в элемент управления RectQuickActionBar1_1 на экране BrowseAppointments.

10. На панели Представление в виде дерева выберите объект App. Измените свойство StartScreen на выражение Home. Это гарантирует, что экран Главный отображается при каждом запуске приложения:

    

    Примечание

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

Наконец, вы можете протестировать приложение.

1. Выберите Файл > Сохранить. В поле Примечания к версии введите Полная версия с главным экраном, затем выберите Сохранить.

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

3. Убедитесь, что появляется экран Главный приложения.

4. Выберите Встречи. Должен появиться экран встреч.

5. Чтобы вернуться на экран Главный, нажмите кнопку со стрелкой "Назад".

6. Выберите Запчасти. Должен появиться браузер запасных частей.

7. Чтобы вернуться на экран Главный, нажмите кнопку со стрелкой "Назад".

8. Выберите База знаний. Должен появиться экран запроса базы знаний.

9. Чтобы вернуться на экран Главный, нажмите кнопку со стрелкой "Назад".

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

Теперь создание прототипа приложения завершено.

Назад Далее