{"id":39,"date":"2018-09-20T10:10:51","date_gmt":"2018-09-20T17:10:51","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/editable-tables\/"},"modified":"2018-09-20T10:10:51","modified_gmt":"2018-09-20T17:10:51","slug":"editable-tables","status":"publish","type":"power-apps","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/editable-tables\/","title":{"rendered":"Editable Tables"},"content":{"rendered":"
Designing a productivity application to have related data and functions in one place is good practice because more can be done without having to switch back and fourth between screens. That is why many people like Excel \u2014 there is the ability to edit data real-time in a fast and efficient way.<\/p>\n
In PowerApps, you can implement the same concept by providing it as a front end to any data source, with the ability to customize it even more.<\/p>\n
<\/p>\n
A small business owner has a catalog of product information that is updated each time she gets a new shipment. Needing to input every item herself, these logging processes can be time-consuming, and sometimes error-prone. She builds a quick PowerApp that can log new items and change item data in line on the same screen, directly to the data source. With this app, she can interact with the data in the database quickly without having to connect through a separate interface, and she can include other important data and functions in the same application to host everything in the same space.<\/p>\n
<\/p>\n
A data source (this example uses the Common Data Service)<\/p>\n<\/li>\n
Form \u2013 used for new items<\/p>\n<\/li>\n
Gallery \u2013 used to display existing items and<\/p>\n<\/li>\n
Text input controls \u2013 used to update existing items
\n\t\u00a0<\/p>\n<\/li>\n<\/ul>\n
Go to View > Data sources<\/strong><\/p>\n<\/li>\n Add an existing connection or create a new one to the desired data source<\/p>\n<\/li>\n View documentation on adding data sources in canvas apps<\/a><\/p>\n \t\u00a0<\/p>\n<\/li>\n<\/ul>\n This step adds a form control to add new items.<\/p>\n Insert a new Form control by clicking Insert > Forms > Edit Form<\/strong><\/p>\n<\/li>\n In the flyout, connect the data source to the one you just connected to, or manually update the DataSource property in the formula bar. Change the Form.DisplayMode<\/strong> property to New<\/strong> (or FormMode.New)<\/p>\n<\/li>\n Make sure to add a button to submit the form \u2013 Button.OnSelect = NewForm(Form)<\/p>\n<\/li>\n See additional documentation on the form control here<\/a><\/p>\n \t\u00a0<\/p>\n<\/li>\n<\/ul>\n To edit items in-line, insert a gallery control with text input boxes.<\/p>\n Insert a new gallery – Insert > Gallery > Blank vertical<\/strong><\/p>\n<\/li>\n In the template, add a text input for each field in the table you want to be able to edit – Insert > Text > Text input<\/strong><\/p>\n<\/li>\n For each text input box:<\/p>\n Set TextInput.Default<\/strong> = ThisItem.<fieldName><\/strong> Set TextInput.OnChange = Patch(Products, ThisItem, { <fieldName>: TextInput.Text }) \t\t\u00a0<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n In some cases it is a good idea to disable the gallery until the user specifies they want to update the data.<\/p>\n Add an \u2018edit\u2019 icon and set the following:<\/p>\n icon.OnSelect = Set(galleryDisplayMode = DisplayMode.Edit)<\/strong><\/p>\n<\/li>\n icon.Visible = galleryDisplayMode = DisplayMode.Disabled<\/strong><\/p>\n<\/li>\n<\/ul>\n<\/li>\n Add a \u2018stop edit\u2019 icon and set the following<\/p>\n icon.OnSelect = Set(galleryDisplayMode = DisplayMode.Disabled)<\/strong><\/p>\n<\/li>\n icon.Visible = galleryDisplayMode = DisplayMode.Edit<\/strong><\/p>\n<\/li>\n<\/ul>\n<\/li>\n Update the following properties:<\/p>\n Gallery.DisplayMode = galleryDisplayMode<\/strong><\/p>\n<\/li>\n Screen.OnStart = Set(galleryDisplayMode, DisplayMode.Disabled)<\/strong><\/p>\n \t\t\u00a0<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n \u200bYou can download the PowerApp <\/a>and CDS Products entity<\/a> schema shown in the blog here. If you use the accompanying CDS entity, import the solution to add it to your Environment with a CDS 2.0 instance.<\/p>\n Import the CDS entity ‘Products’<\/p>\n by going to\u00a0https:\/\/web.powerapps.com\/ > [Gear icon in top right] > Advanced customizations > All solutions<\/strong><\/p>\n<\/li>\nStep 2: Set up a form control<\/h3>\n
\n
\n<\/p>\n<\/li>\nStep 3: Set up the gallery<\/h3>\n
\n
\n
\n<\/a><\/p>\n<\/li>\n
\n<\/a><\/strong><\/p>\nStep 4: Toggle the display mode (optional)<\/h3>\n
\n
\n
\n
\n
Example resources<\/h2>\n
\n
\n