hello everyone razza here in this video I will show you how to create an editable grid experience in canvas power apps we will use the gallery control add modern input controls and frame and editable table like experience in power apps using a very simple method so let's check this video out in action [Music] let's begin creating an editable table experience you can select any data source of your choice for the demo I will be utilizing a SharePoint list a list that has different types of columns text lookup multi select Choice person single select Choice I'll go and insert the container control in this control I will be placing a gallery in which I will be placing the modern input controls now why the container container has a nice drop shadow effect in the container let's insert a vertical Gallery I'll make sure the gallery expands the full width and height of the container the layout of the gallery I'll set blank to begin with in this Gallery I'll be inserting my controls for item is a text control I'll edit the gallery and insert the modern text input control I'll place it on the top left note to use modern controls you need to ensure that under app settings updates modern controls and themes is turned on this control I'll rename as dxt work item the gallery items property I will connect this to my SharePoint list which is called work tracker that's the list that I connected in the power app dxt item it's value property I will set as this item dot this will list out all the columns from my SharePoint list the title column I renamed to work item so I'll say this item. title and this will give me the title of those work items the gallery if I edit the first item is the template item of the gallery I'll reduce the height my list has five rows if there were more items they will list out right here and this is a vertical Gallery so it will get a vertical scroll experience project is a lookup column here I will use the modern drop- down control I'll place it right next to the work item items property will be since it's a lookup column choices of my list name dot the name of my column which is project and this will Now list out the lookup column values the drop- down control has a property called default selected items I will set this as this item dot project there we go these are all the values coming from my SharePoint list this drop down I'll rename it as dropdown project category multi select Choice column in my gallery I'll insert the modern combo box control items property will be choices of my data source dot the name of my column which is category and this combo box I'll allow multiple selections and also make sure to rename this to combo box category notice it has all those Choice options coming from my SharePoint list multi select combo box default selected items will be this item dot category you can see all the values showcased from my sh Point list assign to is a person type column in the gallery I'll insert another modern combo box for the items property I will use under data I have already connected The Office 365 users connector so for the items property of this combo box I will use Office 365 users Dot search user V2 search term will be self. search text and I'll pick the top 999 records and from here I'll get the value the same items property code I will copy and for the combo box default selected items I'll paste that code and instead of self. search text this item do assigned to that's my person type column do email and then for the combo box Fields edit add field here I will show the display name and these are the users coming from the person column and finally progress is a single select choice column I'll insert the modern drop down control for the drop downs items property choices of my SharePoint list dot column name which is progress so this will get all the progress Choice options and default selected items will be this item dot progress this Gallery I'll call it as Gallery work items so the gallery is a direct connection to my data source and within the gallery I am showcasing the column values inside different modern input controls now at this point I can start making changes to any of the control values this is a people picker experience how does the user save these updates to the data source for that I'll insert the modern button control I'll position it on the top right I'll call it save on select of the button is where I need to write the logic to save the data in the gallery back to my SharePoint list and I would like to do that by firing a single query by using the patch function my formula will be as follows I need a collection of the items from that Gallery I will use the formula clear collect call work items and the data in the collection will come from the items of that Gallery the gallery is called Gallery work items so for all of gallery work items. all items here I can start framing The Columns that I would like to patch back to my data source I'll open curly braces that's the record object not notation First Property I'll load is title title will come from txt work item. value that's my modern text input control comma project project will be my drop-down project do selected next one is category combo box category do selected items assigned to that's a person type column in my data source now the way we patch person type columns is as follows we need an object that has the claims token Department display name email job title and picture in the claims token I I need to give the email of the person so I'll get that from my combo box control do selected do mail property display name combobox do selected. display name email combobox do selected. mail that completes assigned to and finally it's my progress column which will come from my dropdown progress dot selected I'll close my record close the for all function close the clear collect function format text this is what the formula looks like now at this point if I try and click save this collection call work items will be loaded with data since I will be patching this existing data back to my data source when the user clicks save one of the important things that we need to ensure is that the primary key of that table we need to ensure we are setting that in this collection for SharePoint ID is the primary key for all lists so for ID I will use this record do ID this time if I click save this collection will also include the ID of the record all I have to do is use the patch function to patch to my data source this collection called call work items now here if you notice it's resulting in an error in my scenario and that's because the collection that I'm generating I'm including the display names of my columns in SharePoint there is the concept of a display name and an internal name for example project if I try and sort on this column you will see in the top it says sort field equal to project that's the actual internal name let's take another column category you can sort or filter let's say I filter on this column notice on the top column name that it is filtering on is called category zero because that's the internal name of the column so I have to make sure that I use only column internal names here assign to in my case is called assign to zero now that I have the right column internal names you see my patch function doesn't result in any error and at this point if I go and click save all the updates that I made will now be saved in my backend data source I had picked assign to as James for one of the items I had renamed the title from Project plan to project plan one and so and so forth let's try and change the status of three items to completed save done there we go three items have turned completed so you can see how easily I can save the current state of my grid to my data source in one go to create a new item in my data source here I'll add the modern button control I'll position this here I'll call it new on select I will use the following formula patch to my data source defaults of my data source a new record is what I would like to create and here I need to create my record that I want to patch in curly braces one of the easiest things I can do is in save this was my record I'll simply copy go to new and P P that code here title so when a new record is created I would like to call it as new work item project in my data source is a required field it's a lookup column so the way I'll have to set it is as follows I have to provide the ID of the item from my lookup list if you explore my project table id1 is internal I would like to default to internal to begin with the way I'm setting it is id1 value I can leave as empty category it's not a required field so I'll set that to blank same thing goes for assign two and for progress as well I'll set it to blank so now if I click new there it creates a new item in my data source and at this point I can go and start updating the item I'll save the updates would be saved in my list this exact same concept is what I have built upon further Gallery with modern controls the gallery items property is my data source and because I'm directly connected to my data source I can also apply filtering sorting logic to this I've done multiple videos on gallery sorting and filtering I've applied those same Concepts here show me all the work items that are completed where the priority is high currently it's being sorted on create a date change the sort direction or sorted based based on title I can reset my filters I can create items I can delete items I can make updates and save beyond that I've also given a checkbox experience where I can select multiple items and take actions in bulk like delete the selected items or make copies of those selected items I can also select all the records that have been loaded for that gallery and take action let's say I'll copy all of these items and now I have a total of 16 records there's the vertical scroll so that's the full modern grid experience in action if you enjoyed this video then do like comment and subscribe to my YouTube channel Channel and thank you so much for watching