Как настроить Power Apps грид для удобного редактирования и просмотра данных

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

А узнать больше про это решение можно в нашем видео:

Наша задача

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

Как это выглядит

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

Варианты рендеринга

В процессе кастомизации мы столкнулись с двумя основными вариантами рендеринга:

• Рендеринг отображения — это процесс, при котором отображаются данные в гриде без возможности редактирования.

• Рендеринг редактирования — это когда пользователь может изменить значения в ячейке и сразу видеть обновленный результат.

  
  

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

Панель

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

Нюанс Editable Grid

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

Технологии

Для реализации кастомизации мы использовали несколько технологий. Одной из ключевых технологий стало использование React-компонентов для рендеринга ячеек и панелей. Мы также активно использовали Fluent UI компоненты, так как это нативные элементы для Microsoft, что гарантирует совместимость с Dynamics 365 и другими инструментами в экосистеме Microsoft.

Код

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

Деплой

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

Билдинг

Процесс билдинга был стандартным для Power Apps. Мы собрали решение, скомпилировали его и затем загрузили на среду разработки. Билдинг включает в себя сборку всех необходимых компонентов и проверку совместимости с платформой Power Apps.

Релиз

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

Заключение

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