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 — there is the ability to edit data real-time in a fast and efficient way.

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.

Scenario

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.

Implementation

Components

• A data source (this example uses the Common Data Service)

• Form – used for new items

• Gallery – used to display existing items and

• Text input controls – used to update existing items
   

Step 1: Add a data source

• Go to View > Data sources

• Add an existing connection or create a new one to the desired data source

• View documentation on adding data sources in canvas apps

   

Step 2: Set up a form control

This step adds a form control to add new items.

• Insert a new Form control by clicking Insert > Forms > Edit Form

• 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 property to New (or FormMode.New)

• Make sure to add a button to submit the form – Button.OnSelect = NewForm(Form)

• See additional documentation on the form control here

   

Step 3: Set up the gallery

To edit items in-line, insert a gallery control with text input boxes.

• Insert a new gallery – Insert > Gallery > Blank vertical

• In the template, add a text input for each field in the table you want to be able to edit – Insert > Text > Text input

• For each text input box:

  • Set TextInput.Default = ThisItem.<fieldName>
    

  • Set TextInput.OnChange = Patch(Products, ThisItem, { <fieldName>: TextInput.Text })
    

     

Step 4: Toggle the display mode (optional)

In some cases it is a good idea to disable the gallery until the user specifies they want to update the data.

• Add an ‘edit’ icon and set the following:

  • icon.OnSelect = Set(galleryDisplayMode = DisplayMode.Edit)

  • icon.Visible = galleryDisplayMode = DisplayMode.Disabled

• Add a ‘stop edit’ icon and set the following

  • icon.OnSelect = Set(galleryDisplayMode = DisplayMode.Disabled)

  • icon.Visible = galleryDisplayMode = DisplayMode.Edit

• Update the following properties:

  • Gallery.DisplayMode = galleryDisplayMode

  • Screen.OnStart = Set(galleryDisplayMode, DisplayMode.Disabled)

     

Example resources

You can download the PowerApp and CDS Products entity 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.

• Import the CDS entity 'Products'

  • by going to https://web.powerapps.com/ > [Gear icon in top right] > Advanced customizations > All solutions

  • Click on Import, upload the ProductSchema.zip file in the dialog window, then click Import

  • Select Publish all customizations, then Close the window when complete.

• Import the PowerApp to the same Environment

  • by going to https://web.powerapps.com/ > Apps > Import app (preview)

  • Select the ProductCatalogApp.zip