All Content
Timespan
explore our new search
Power Apps Editable Grid using Gallery & Modern Controls (2023)
Power Apps
May 1, 2023 12:30 PM

Power Apps Editable Grid using Gallery & Modern Controls (2023)

by HubSite 365 about Reza Dorrani

Principal Program Manager at Microsoft Power CAT Team | Power Platform Content Creator

Citizen DeveloperPower AppsPower SelectionM365 Hot News

In this step-by-step tutorial video, we will learn how to build an Editable Grid like experience in Power Apps using Gallery & new Modern Controls.

Power Apps Editable Grid using Gallery & Modern Controls (2023) is a new feature being developed for Power Apps that will allow users to create an editable grid of data using a combination of Gallery and Modern Controls. This feature will allow users to easily create an interactive, customizable grid of data that can be edited on a form or displayed in a gallery.

In this step-by-step tutorial video, we will learn how to build an Editable Grid like experience in Power Apps using Gallery & new Modern Controls. This is an excel like Grid experience similar to Quick Edit Mode in SharePoint Lists or Grid view in Dataverse or InfoPath Repeating Tables.

We will use Power Apps Galleries to create the editable grid, perform CRUD operations, Undo changes, Save Grid Updates to data source with a single Patch function thereby improving performance, filter grid or gallery with full delegation support, Sort grid data and a lot more.

We will leverage SharePoint as a data source but the same experience can be applied to Excel, Dataverse, SQL etc.

Modern controls in Canvas Power Apps are a new set of controls that are based on Microsoft’s own Fluent design system. Modern controls are quicker and simpler for makers to configure. Modern controls are designed with a focus on accessibility, usability, and performance (fast) that makes them visually appealing, highly functional, and intuitive to use.

Here's a link to download the Responsive Editable Grid:

[https://github.com/rdorrani/PowerApps/blob/master/EditableGrid]

Table of Contents:

  • 00:00 - Introduction to Editable Grid in Power Apps
  • 00:45 - How to create Editable Grid using Gallery and Modern Controls in
  • PowerApps
  • 01:45 - Grid based on new Power Apps modern controls
  • 02:15 - Start building Power Apps Editable Table / Grid
  • 04:19 - Load default values of modern controls in Gallery / Grid from SharePoint
  • list
  • 07:36 - Save Power Apps Editable Grid updates to SharePoint using Patch function
  • 15:55 - Grid column headers
  • 16:41 - Undo Grid Changes
  • 17:52 - Add new row to Power Apps Grid / Gallery
  • 19:15 - Sort Power Apps Gallery as Editable Grid
  • 20:35 - Delete row from Power Apps Gallery as Grid
  • 21:29 - Filter Power Apps Gallery as Editable Grid
  • 23:14 - Power Apps Editable Grid Example
  • 23:41 - Subscribe to Reza Dorrani Channel

We will add a gallery connected to data source, add fields showing data source values and make them editable. Insert gallery. Insert the gallery (for example ...

Like it or not, editable grids like the Quick Edit of SharePoint (including copy ... When we try to simulate the editable table using a Gallery and other ...