Упражнение. Разработка дополнительных страниц и электронной почты в Power Apps

10 мин

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

Страница создания заметок

Пользователь может сделать фотографии во время просмотра в сеансе MR и отобразить их в галерее. На странице заметок можно хранить текстовые заметки и изображения, сделанные в ходе сеанса MR .

Создайте два новых пустых экранов и переименуйте их Product_notes и Carpet_notes.
Создайте страницу Product_notes: выберите выпадающий список Input, а затем выберите Text input. Переименуйте его TextInput_products.
Выберите галерею>"горизонтальная", чтобы включить горизонтальный тип галереи. Вы будете хранить фотографии, сделанные во время просмотра сеанса MR в этой галерее. Переименуйте галерею View_products.
Поместите коллекцию в другую часть экрана. Сохраните только изображение, удалив подзаголовок и заголовок. Увеличьте изображение.
Выберите коллекцию и настройте свойство Items, добавив следующую строку:
```
ViewInMR1.Photos
```
Все фотографии, сделанные в режиме view в сеансе MR, хранятся в этой коллекции для дальнейшего использования.
Вставьте метку в верхней части экрана. Выберите параметр метки, а затем выровняйте его по центру . Настройте положение, цвет и текст в соответствии с вашими потребностями. Переименуйте его Notes_label.
Мы поместим значок Назад поверх ранее добавленной метки , чтобы помочь пользователю перейти к домашней странице. Чтобы добавить значок назад, на вкладке Вставка разверните раскрывающийся список значков, а затем выберите значок назад.
Поместите значок Назад правильно и настройте свойство OnSelect, добавив следующее:
```
Navigate(Product_details,ScreenTransition.Cover)
```
Перейдите на экран Product_details и добавьте значок Note из раскрывающегося списка Icons на вкладке Insert.
Настройте свойство OnSelect значка заметки, добавив следующую строку:
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Повторите ту же процедуру для Notes_carpets.

Заметка

Мы не будем включать функциональность View в MR для категории ковров. Для страницы Notes_carpets исключите добавление элемента управления коллекции для хранения фотографий, сделанных во время представления в сеансе MR.

Совет

Вы можете протестировать приложение, нажав клавишу F5 на клавиатуре или нажав кнопку Воспроизвести в правом верхнем углу Power Apps Studio.

Страница "Создание сводки заказа"

Добавьте кнопки в экраны Product_details и Carpet_details. Переименуйте кнопки Order_product и Order_carpet. Измените отображаемый текст кнопок на Order.
Создайте два новых пустых экранов и переименуйте их Order_products и Order_carpets.
Выберите экран Product_details и настройте свойство OnSelect кнопки Order следующим образом:
```
Navigate('Order_products',ScreenTransition.Cover)
```
Выполните ту же процедуру для экрана Carpet_details.
На странице Order_products вставьте метки Product, Price, Colorи Notes и переименуйте их соответствующим образом.
Вставьте пустые метки рядом с Продукт, Цена, Цвети Заметки, как показано на рисунке.
Настройте свойство Text этих пустых меток следующим образом:
- продукт:
```
Gallery_products.Selected.Name
```
- цена:
```
Gallery_products.Selected.Price
```
- цвет:
```
Gallery_products.Selected.Color
```
- Заметки:
```
TextInput_products.Text
```
Добавьте еще одну метку в верхней части и измените отображаемый текст на итог заказа. Измените размер шрифта и шрифт в соответствии с вашими потребностями.
Разверните раскрывающийся список коллекции и выберите горизонтальный. Сохраните только изображение; удалите другие компоненты галереи . Переименуйте Order_gallery_products
Настройте свойство Items этой галереи, добавив следующую строку:
```
ViewInMR1.Photos
```
Добавьте три ярлыка и измените отображаемый текст на Введите свою электронную почту, чтобы получить подтверждение заказа!, почтовый идентификатор организации: и почтовый идентификатор клиента: соответственно.
Разверните раскрывающийся список ввода и выберите текстовый ввод . Добавьте на экран два компонента ввода текста и поместите их, как показано на изображении. Переименуйте их Input1_products и Input2_products.
Настройте свойство текста подсказки, добавив Введите идентификатор почты:; не храните значение в свойстве по умолчанию. Настройте размер шрифта и цвет в соответствии с вашими нуждами.
Добавьте кнопку на вкладке Вставка и настройте ее свойство Text путем добавления Confirm.
Разверните раскрывающийся список значков и выберите значки "Назад" и "Главная". Поместите их правильно, как показано на изображении.
Настройте свойство OnSelect этих двух значков следующим образом:
- Вернуться:
```
Navigate(Product_details,ScreenTransition.CoverRight)
```
- Главная:
```
Navigate('Home Page',ScreenTransition.CoverRight)
```
Выполните ту же процедуру для Order_carpets.

Создание конечной страницы

Создайте пустой экран и переименуйте его в 'Конечную страницу'.
Добавьте метку и измените отображаемый текст на Заказ успешно отправлен!. Разместите метку на экране по требуемому расположению.
Добавьте кнопку в нижней части экрана. Настройте свойство text кнопки, добавив Shop еще. Давайте направим пользователя на домашнюю страницу: выберите кнопку Магазин больше, затем добавьте следующую строку в свойство OnSelect.
```
Navigate('Home Page',ScreenTransition.Cover)
```
Разверните раскрывающийся список мультимедиа и выберите изображение, чтобы добавить компонент изображения на конец страницы.
Поместите изображение, как показано на изображении. Выберите файл логотипа.

Совет

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

Отправка сообщений электронной почты с помощью Power Apps

Выберите вкладку данных и нажмите + Добавить данных. Разверните соединителей, затем выберите Office 365 Outlook, чтобы добавить его в качестве одного из соединителей для этого приложения.
Откройте Order_products и затем настройте свойство OnSelect кнопки Confirm, добавив следующие строки:
```
Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary"," Your order is successfully submitted! Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & " Thank you for shopping with us! ");
Navigate('End page',ScreenTransition.Cover)
```
Заметка

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

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

Тестирование приложения на мобильном устройстве

Выберите ссылку для скачивания для устройства:
- Для iOS (iPad или iPhone) перейдите в App Store.
- Для Android перейдите в Google Play.
Откройте Power Apps на мобильном устройстве и войдите с помощью учетных данных учетной записи Майкрософт.
Приложения, которые вы использовали недавно, будут отображаться на экране по умолчанию при входе в Power Apps mobile.

главная — это экран по умолчанию при входе. В нем отображаются приложения, которые вы использовали недавно, и приложения, помеченные как избранное.
Чтобы запустить приложение на мобильном устройстве, выберите плитку приложения. Если это первый раз, когда вы запускаете приложение холста с помощью Power Apps mobile, на экране отображаются жесты прокрутки.
Чтобы закрыть приложение, проведите пальцем с левого края приложения вправо. На устройствах Android можно также нажать кнопку Назад и подтвердить, что вы намеревались закрыть приложение.

Заметка

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