PowerApps: Edit Form

PowerApps: Edit and Submit Form

Premise

In my previous posts, I had demonstrated how to,

In this post, I’ll show how to add an edit form to PowerApps and then, submit the same to its source. In this case, a SharePoint List.

Edit Forms in PowerApps

Just like a display form, PowerApps also has an edit form. The beauty of this form is that all the controls gets added automatically as per their respective field types. For ex, a textbox will appear for a string field and a choice/drop-down for choice field. It makes creating cross-platform apps very easy. So, let’s check out the steps then,

  • Add a new PowerApps Edit Form, from the top menu item bar in PowerApps studio.

    PowerApps: Add Edit Form
    Add Edit Form
  • An empty form will be added to the form. Below form has been modified to take up the full width and height.

    PowerApps: Edit Form
    Edit Form
  • We need to first set the data source of this form. Click on the Data option of the property pane.

    PowerApps: Edit Form Data Source
    Edit Form Data Source
  • Add the data source. In this case, SharePoint List. If no data source is configured then, you have to add a data source first.

    PowerApps: Add Data Source
    Add Data Source
  • The form will now automatically generate all the fields from its source. This feature is really amazing. Without writing any single line of code, PowerApps generate respective input fields automatically based on the given types.

    PowerApps: Empty Form
    Empty Form
  • Set the item property of this edit form. In this case, we’re passing the value from a previous screen. Hence, I am using the same here.

    PowerApps: Edit Form Item
    Edit Form Item
  • Let’s add a Save icon now. We’ll use this icon to update the current item value.
    PowerApps: Insert Save Icon
    Insert Save Icon

    PowerApps: Save Icon
    Save Icon
  • On the OnSelect event of the form, write the following code to update the item.
    SubmitForm(Form1)
    

    Form1 is the name of our form. Writing this much code will now ensure that, all our changes will be reflected to the source.

    PowerApps: SubmitForm
    SubmitForm
  • Now that we have the update code in place, lets also ensure that all our changes are successfully saved. To do this, go to the OnSuccess event of the form and write the following code. This event gets triggered only after the item has been updated successfully.
    Notify("Data saved successfully", NotificationType.Success)
    

    PowerApps: OnSuccess
    OnSuccess
  • Similarly, add a notification on the OnFailure event for any unexpected failures as well. It gets triggered if, for any reason, the update process fails.
    Notify(Form1.Error, NotificationType.Error)
    

    PowerApps: OnFailure
    OnFailure

Success message will be displayed when the item gets updated at the source.

PowerApps: Success Notification
Success Notification

For any unexpected error, we can display the error message to the user.

PowerApps: Error Notification
Error Notification

PowerApps create a new item on update

PowerApps uses the Id field to determine whether a request is for creating a new item or updating an existing one. The key here, is to always include the Id field in your request. If we don’t provide this field then, all our request will be considered as a new item request. SharePoint, in that case, will create a new item for each such requests.

Key Takeaways

  • Make sure to always provide the unique id for update. Otherwise, a new item will get created.
  • Always make use of the, OnSuccess and OnFailure event handlers. Otherwise, we can never say for sure if, the item has been successfully updated.
  • PowerApps selects the number of fields, to be added to the form, based on the default Content-Type of the sorce list. If you have more than one Content-Type on the source then, the first visible Content-Type for the new button will be selected by PowerApps. That’s how it populates the form.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.