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

Завершено

В 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 мы создадим список, содержащий сведения обо всех категориях продуктов: диваны, стулья, таблицыи ковры.

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

   

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

   

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

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

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

   • Оставьте флажок (чекбокс) Показать в навигации сайта включённым.

   • Выберите Создать.

     

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

После создания списка пришло время добавить данные. Здесь "данные" означает сведения о любом конкретном продукте. Сведения о продукте включают в себя следующие сведения: Имя, Изображение, Цена, Измерения, Вес, Цвет, Первичный Материал, Область, Высота и трехмерная модель/изображение продукта для просмотра в смешанной реальности.

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

   • Имя: одна строка текста
   • ImageLink: одна строка текста
   • цена: одна строка текста
   • Размеры: одна строка текста
   • Вес: одна строка текста
   • цвет: одна строка текста
   • PrimaryMaterial: одна строка текста
   • высота: число
   • глубина: число
   • Ширина: число
   • Цена/см2: Число
   • КатегорияПродукта: одна строка текста
   • FileType: одна строка текста

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

   

   Введите данные столбца на вкладке Создать столбец и выберите Сохранить.

   

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

   Заметка

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

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

   настраиваемую папку Power Apps

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

   

   Заметка

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

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

   

   Заметка

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

   Заметка

   Вам не потребуются значения высоты, глубины и ширины для списка категорий ковра . Эта категория продукта использует площадь, измеренную во время измерения в сеансе MR, и выдаст цену ковра в соответствии с вычисленной площадью. Однако мы добавили столбец 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выберите опцию Data.

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

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

   

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

   

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

   

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

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

1. На левой панели Power Apps Studioвыберите параметр "Дерево". У вас уже должен быть пустой экран в Power Apps Studio; Если нет, на вкладке главная щелкните стрелку вниз рядом с Новый экран, который открывает список типов экрана. Затем выберите Пустой, чтобы создать пустой экран.

   

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

   

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

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

   

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

   

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

   

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

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

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

   • видимые: false

     

     Заметка

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

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

   Navigate('Home Page',ScreenTransition.Fade)
   

   

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

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

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

   

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

   

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

   

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

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

   

   Заметка

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

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

   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. На экране Продукты на вкладке Вставка выберите Галлериу>Вертикальную, чтобы добавить элемент управления галереей на экран.

   

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. Настройте свойствополя коллекции> в области свойств , выбрав Изменить:

   • Назначьте price заголовку субтитров1.

   • Назначьте заголовок Title в заголовок Title1.

     

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

4. Настройте размер Gallery_products по мере необходимости. Чтобы добавить ImageLink в заголовок Image1, выберите Image в галерее и настройте свойство Image на вкладке Property, добавив следующую строку кода:

   ThisItem.ImageLink
   

   

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

   

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

   

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

   Navigate('Home Page',ScreenTransition.Cover)
   

   

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

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

   

   Совет

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

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