Предыдущий

Следующая

Упражнение. Добавление источника данных в приложение на основе холста и проектирование функциональных страниц

Завершено

В Power Apps можно подключить данные к уже существующему приложению или приложению, создаваемому с нуля. Приложение может подключаться к SharePoint, Microsoft Dataverse, Salesforce, OneDrive или любому другому источнику данных.

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

Создание сайта SharePoint

1. Войдите на портал SharePoint с учетными данными организации в Майкрософт.

2. Нажмите + Создать сайт на начальной странице SharePoint, чтобы создать сайт SharePoint.

   

3. На начальной странице SharePoint расположены следующие сведения.

   • Выберите тип сайта; Выбор — это сайт коммуникации или сайт группы. Выберите Коммуникационный сайт.

   • Введите подходящее имя для сайта; Например, Easy Sales.

   • При необходимости добавьте описание сайта (необязательно).

   • Выберите в раскрывающемся списке необходимый язык.

4. Нажмите кнопку Готово, чтобы создать сайт SharePoint для загрузки данных.

   

Современный сайт SharePoint будет создан и готов к использованию в течение нескольких секунд. Теперь в созданном сайте вы можете создать список, библиотеку документов, страницу и т. д.

Примечание.

При выборе сайта группы также создается группа Microsoft 365.

Создание списка SharePoint

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

Для нашего приложения Easy Sales мы создадим список, содержащий сведения обо всех категориях товаров: Sofas (Диваны), Chairs (Стулья), Tables (Столы) и Carpets (Ковры).

1. В созданном сайте SharePoint с именем Easy Sales нажмите раскрывающийся список + Создать и выберите Список для создания списка SharePoint.

   

2. В окне Создание списка выберите Пустой список, чтобы создать список SharePoint с нуля.

   

3. Настройте область создания следующим образом:

   • Введите подходящее имя для списка; Например, Easy Sales.

   • Заполните описание, если это необходимо (необязательно).

   • Оставьте установленным флажок Показывать в структуре навигации по сайту.

   • Нажмите кнопку создания.

     

Добавление данных в список SharePoint

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

1. В созданном списке Easy sales нажмите + Добавить столбец, чтобы добавить столбец определенного типа. Ниже приведен список столбцов, которые необходимо создать, с указанием их имен и типов в формате имя столбца — тип столбца.

   • Имя: одна строка текста
   • ImageLink: одна строка текста
   • Цена: одна строка текста
   • Измерения: одна строка текста
   • Вес: одна строка текста
   • Цвет: одна строка текста
   • PrimaryMaterial: одна строка текста
   • Высота: число
   • Глубина: число
   • Ширина: число
   • Цена/cm2: Число
   • ProductCategory: одна строка текста
   • FileType: одна строка текста

   Выберите тип столбца из раскрывающегося списка; например, выберите одну строку текста.

   

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

   

   Повторите ту же процедуру для остальных столбцов в предыдущем списке.

   Примечание.

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

2. После добавления столбцов необходимо добавить в них фактические данные. Начните добавлять данные в столбцы, скачав настраиваемую папку, содержащую все сведения о товарах для всех четырех списков. Чтобы получить доступ к данным, выберите следующую ссылку, нажмите кнопку "Дополнительные действия с файлами" (...) в правом верхнем углу страницы и нажмите кнопку "Скачать".

   Настраиваемая папка Power Apps

3. Нажмите + Создать, чтобы добавить элемент, и введите необходимые сведения, указанные в скачанном файле Excel. Нажмите кнопку Сохранить, чтобы сохранить введенные сведения.

   

   Примечание.

   Представление сетки позволяет свободно добавлять сведения в разные строки или столбцы.

4. Начните добавлять данные в соответствующие столбцы, как показано на рисунке:

   

   Примечание.

   Если вы хотите включить собственные изображения, можно добавить общедоступные ссылки в Интернете на них в столбец ImageLink. Чтобы получить ссылку на изображение, щелкните правой кнопкой мыши и выберите Копировать адрес изображения.

   Примечание.

   Для списка категории ковры вам не понадобятся значения высоты, глубины и ширины. Эта категория продукта будет принимать значение площади, измеренное в ходе сеанса смешанной реальности, и возвращать цену в соответствии с вычисленной площадью. Однако мы добавили столбец Price/cm2 (цена за квадратный сантиметр) для вычислений.

Создать подключение

Теперь, когда все данные, необходимые для приложения, хранятся в списке SharePoint, мы установим подключение в Power Apps. После установки подключения можно легко получить доступ к данным SharePoint через приложение.

1. Чтобы начать создание подключения, войдите в Power Apps и выберите Подключение в левой панели навигации. Затем нажмите + Новое подключение в левом верхнем углу.

2. Выберите параметр SharePoint. Мы выбираем SharePoint , так как мы храним необходимые данные в списках SharePoint .

   

3. Чтобы подключиться к SharePoint Online, выберите Подключение напрямую (облачные службы), а затем нажмите кнопку "Создать", а затем при появлении запроса укажите учетные данные.

   

4. Соединение будет создано, и вы сможете создать приложение с нуля.

   Примечание.

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

Давайте начнем создавать приложение Easy Sales на основе данных SharePoint, а затем добавьте данные из других источников, если это нужно. Выполнив эту процедуру, вы сможете спроектировать некоторые основные страницы приложения. Например, вы научитесь проектировать экран-заставку, страницу продукта и страницу списка продуктов. Мы также будем обращаться к данным, хранящимся в списке SharePoint, с помощью элемента управления коллекции Power Apps.

Открытие пустого приложения

1. Перейдите на домашнюю страницу Power Apps , а затем выберите " Создать " в меню слева. Выберите пустое приложение, а затем выберите "Создать" в разделе "Пустое приложение холста".

   

2. Укажите имя приложения; например , Easy-Sales. Выберите Телефон и нажмите кнопку Создать.

   

   Power Apps Studio создаст пустое приложение для телефонов.

   Примечание.

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

3. Если откроется диалоговое окно Вас приветствует Power Apps Studio, выберите в нем Пропустить.

   

Подключение к данным

Чтобы включить данные в приложение Power App, необходимо подключиться к данным через соединители в приложении. Так как мы храним все данные в списке SharePoint, мы будем выбирать SharePoint в качестве одного из соединителей.

1. В левой части Power Apps Studio выберите параметр Данные.

2. После открытия панели Данные нажмите кнопку Добавить данные, чтобы подключиться к данным.

3. В окне Выбор источника данных разверните раздел Соединители и выберите параметр SharePoint.

   

4. В предыдущем упражнении мы уже создали подключение. Выберите созданное соединение, чтобы добавить данные в приложение. Выберите созданный сайт SharePoint с именем Easy Sales.

   

5. После выбора сайта SharePoint Easy Sales отобразятся все списки, созданные в этом сайте. Затем выберите список SharePoint, созданный для приложения, и нажмите кнопку Соединить.

   

6. Все необходимые данные подключены и готовы к использованию в приложении. Теперь можно приступить к созданию приложения.

Создание экрана-заставки

1. Выберите параметр Представление в виде дерева в левой части окна Power Apps Studio. В Power Apps Studio уже должен отображаться пустой экран. Если это не так, на вкладке Главная щелкните стрелку вниз рядом с пунктом Создать экран, чтобы открыть список типов экрана. Затем выберите Пустой, чтобы создать пустой экран.

   

2. Переименуйте экран-заставку, выбрав значок с тремя точками (...) рядом с именем экрана и выбрав параметр "Переименовать".

   

3. Выберите только что созданный экран, чтобы изменить его свойства на вкладке Свойства в правой части экрана.

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

   

5. Установите для расположения изображения значение Подогнать, чтобы оно занимало весь заданный размер. Параметр Подогнать масштабирует изображение пропорционально и не обрезает его.

   

6. На вкладке Вставка разверните раскрывающийся список Ввод и выберите Таймер. Затем перетащите кнопку на экран и разместите ее в любом нужном месте.

   

7. Чтобы изменить некоторые свойства таймера, можно либо использовать раскрывающийся список свойства в левом верхнем углу, либо воспользоваться панелью Свойства. Задайте следующие свойства:

   • Автозапуск: true

   • Длительность: 2000

   • Видимый: false

     

     Примечание.

     По умолчанию длительность измеряется в миллисекундах. Поскольку 1 секунда = 1000 миллисекунд, то в качестве значения длительности мы указали 2000.

8. Мы хотим, чтобы экран-заставка отображался только 2 секунды, а затем осуществлялся переход на домашнюю страницу. Создайте пустой экран, как мы делали на предыдущем шаге, и переименуйте его в Home Page. После этого выберите кнопку таймера, добавленную на экран-заставку, и настройте свойство OnTimerEnd. Замените значение false на следующее содержимое:

   Navigate('Home Page',ScreenTransition.Fade)
   

   

9. Сохраните приложение, перейдя к пункту меню Файл>Сохранить. Затем выберите параметр Облако и нажмите Сохранить.

Создание домашней страницы

1. Выберите экран Home Page, созданный ранее. Чтобы вставить четыре кнопки, перейдите на вкладку Вставка и выберите параметр Кнопка, чтобы добавить кнопки на экран. Измените размер и расположение этих кнопок по вашему усмотрению. Переименуйте их как Sofas_button, Chairs_button, Tables_button и Carpets_button соответственно.

   

2. Измените отображаемый текст кнопок, чтобы указать категории товаров, такие как "Sofas" (Диваны), "Chairs" (Стулья), "Tables" (Столы) и "Carpets" (Ковры).

   

3. Эти кнопки будут использоваться для перехода к списку товаров в различных категориях. Для этого нам необходимо отфильтровать продукты из списка SharePoint на основе категории продукта. Создайте два новых пустых экрана и переименуйте их в Products (Товары) и Carpets (Ковры).

   

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

   Navigate(Products,ScreenTransition.Cover, {ID:1});
   

   

   Примечание.

   ID является переменной контекста с некоторым присвоенным значением. Это значение передается на страницу назначения, упомянутую в функции Navigate. Значение, присваиваемое переменной, фильтрует продукты на основе категории продукта.

5. Повторите ту же процедуру для оставшихся трех кнопок. Опять же, обязательно укажите правильные имена экранов в функции Navigate. Например, для настройки свойства OnSelect для кнопок Chairs (Стулья), Tables (Столы) и Carpets (Ковры) используйте следующие функции Navigate соответственно:

   Navigate(Products,ScreenTransition.Cover, {ID:2});
   

   Navigate(Products,ScreenTransition.Cover, {ID:3});
   

   Navigate(Carpets,ScreenTransition.Cover)
   

   Совет

   Чтобы сохранить внесенные изменения, перейдите на вкладку Файл в верхней части экрана и выберите параметр Сохранить. Для сохранения изменений можно также использовать сочетание клавиш CTRL + S.

   Примечание.

   Синтаксис функции Navigate по умолчанию: Navigate(Screen [, Transition [, UpdateContextRecord]])

   • Экран: обязательный. Отображаемый экран.
   • Переход: необязательный. Визуальный переход, используемый при переходе между текущим экраном и следующим. Значение по умолчанию — None.
   • UpdateContextRecord: необязательно. Запись, содержащая имя как минимум одного столбца и значение каждого из них. Эта запись обновляет переменные контекста нового экрана таким же образом, как при передаче их функции UpdateContext.

   Совет

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

Использование элемента управления "Коллекция"

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

1. На экране Products (Товары) на вкладке Вставка выберите Коллекция>Вертикальная, чтобы добавить на экран элемент управления Коллекция.

   

2. Переименуйте его в Gallery_products. На вкладке Свойства на панели слева настройте свойство Items (Элементы), как указано ниже:

   If(
   ID = 1,
   Filter('Easy Sales',(ProductCategory = "Sofa")),
   ID = 2,
   Filter('Easy Sales',(ProductCategory = "Chair")),
   ID = 3,
   Filter('Easy Sales',(ProductCategory = "Table")),
   ID = 4,
   Filter('Easy Sales',(ProductCategory = "Carpet")))
   

   

   Мы отфильтруем продукты, хранящиеся в списке SharePoint, на основе категории продуктов. Для процесса фильтрации используются переменные контекста.

3. Настройте свойство Gallery>Fields (Колекция > Поля) на панели Свойства, нажав кнопку Изменить.

   • Для поля Subtitle1 (Подзаголовок1) установите значение Цена.

   • Для поля Title1 (Заголовок1) установите значение Заголовок.

     

   При назначении предыдущих полей вы увидите, как данные отражаются в коллекции.

4. При необходимости измените размер элемента Gallery_products. Чтобы добавить ImageLink в заголовок Image1, выберите Image (Изображение) в коллекции и настройте свойство Image на вкладке Свойства, добавив следующую строку кода:

   ThisItem.ImageLink
   

   

5. Теперь вставьте метку в верхней части экрана, выбрав параметр "Метка ". Затем настройте расположение, цвет и текст, как показано на рисунке.

   

6. Добавьте значок Назад над добавленной ранее меткой, чтобы пользователи при необходимости могли вернуться на домашнюю страницу. Чтобы добавить значок Назад, разверните раскрывающийся список Значки и щелкните значок Назад.

   

7. При необходимости поместите значок "Назад" и измените его цвет отображения. Настройте свойство OnSelect, добавив следующий код:

   Navigate('Home Page',ScreenTransition.Cover)
   

   

8. Выполните ту же процедуру для страницы Carpets. Настройте свойство Items (Элементы) коллекции, добавленной на страницу Carpets (Ковры), следующим образом:

   Filter('Easy Sales',ProductCategory = "Carpet")
   

   

   Совет

   Чтобы сохранить внесенные изменения, перейдите на вкладку Файл в верхней части экрана и выберите параметр Сохранить. Для сохранения изменений можно также использовать сочетание клавиш CTRL + S.

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

Продолжить