Power Platform : PowerApps – SharePoint custom forms: Build separate forms for New, View and Edit list item

“Don’t give up, Great things take time.”

.

Hello Everyone,

Hope you all are doing well.

Today in this article I am going to discuss about how to customize separate forms for New, View and Edit forms in PowerApps.

We have good number of articles on Power Platform, please have a look.

https://knowledge-junction.in/category/technology-articles/power-platform/

So without getting late, lets get started.

Background

In one of our project requirement is to create separate forms for New, View and Edit for the list item in SharePoint. We customize the forms and prepare 3 different forms for New, View and Edit mode and used the formula to show the respective customized form.

Introduction

SharePoint:

Microsoft SharePoint is a cloud-based service that helps organizations share and manage content, knowledge, and applications to:

• Empower teamwork
• Quickly find information
• Seamlessly collaborate across the organization

SharePoint List:

A list is a collection of data that we can share with our team members and people who we’ve provided access to. We’ll find a number of ready-to-use list templates to provide a good starting point for organizing list items.

Customize Forms:

In SharePoint list by default we have same form for the New, View and Edit the list Item. By customizing the forms using PowerApps, we can build separate forms for New, Edit and View forms.

PowerApps:

Power Apps is a suite of apps, services, and connectors, as well as a data platform, that provides a rapid development environment to build custom apps for our business needs. Using Power Apps, we can quickly build custom business apps that connect to our data stored either in the underlying data platform or in various online and on-premises data sources (such as SharePoint, Microsoft 365, Dynamics 365, SQL Server, and so on).

Canvas App:

A canvas app is commonly seen in tablet or mobile apps when embedded in a Power BI dashboard. It’s exactly how it sounds – we get a blank canvas. From that, we can drag, drop, move, resize and reformat the components where we need them to build our user interface.

Highlights

• Customize forms
• Duplicate screens
• Rename screens
• Formulas on different forms
• Formulas on save and cancel form

Detailed Steps

• We wanted to show a simple example on how we can create separate forms for New, View and Edit an item.
• For this example, we will start with a simple SharePoint list, which is a custom list used to record New Employee Details.

• We can create a custom form for this list by using PowerApps > Customize forms, but the default generated form will use the same form for New, View or edit an item.
• We are going to customize the form further by creating separate forms for the three scenarios.

Step 1: 

• We are going to click again on “Customize” from the default form to launch PowerApps Studio.

Step 2: 

• Once inside PowerApps Studio, we are going to duplicate our FormScreen1 twice to create three screens in our app.

• It is easier to duplicate the screens rather than create them new as it will set the DataSource, Item and OnSuccess properties of the forms correctly.

Step 3: 

• Let’s rename the screens & forms so they are easier to use in formulas.

Step 4: 

• We now need to set the formulas to show the different forms when actions are taken by the user.
• We are going to select the SharePointIntegration control and set the formulas to navigate to the screen and set the form in correct mode.
• We are going to also create a variable “SharePointFormMode” which we will use in Step 5.

To achieve this, we set the following formulas on SharePointIntegration control:

• OnNew – 

Set(SharePointFormMode, "NewForm"); NewForm(NewItemForm); Navigate(NewScreen, ScreenTransition.None)

• OnEdit – 

Set(SharePointFormMode, "EditForm"); EditForm(EditItemForm); Navigate(EditScreen, ScreenTransition.None)

• OnView – 

Set(SharePointFormMode, "ViewForm"); ViewForm(ViewItemForm); Navigate(ViewScreen, ScreenTransition.None)

Step 5: 

• To handle the form submission and reset correctly, we update the formula for OnSave & OnCancel.
• We use the variable created in Step 4 to decide which form to submit or reset.

We set the following formulas on SharePointIntegration control:

• OnSave – 

If(SharePointFormMode="NewForm", SubmitForm(NewItemForm), If(SharePointFormMode="EditForm", SubmitForm(EditItemForm)))

• OnCancel – 

If(SharePointFormMode="NewForm", ResetForm(NewItemForm), If(SharePointFormMode="EditForm", ResetForm(EditItemForm)))

Step 6: 

• We can now customize each form differently as we want. We can change the number of fields shown on each form or add helpful text on each screen.

Step 7: 

• To finish, we Save and Publish the form, then go back to our SharePoint list and try the different scenarios to see three different forms now:

• With those 7 steps, we now have different forms on New, View and Edit the items of our list.

.

Hope this article will help us to build separate forms for New, View and Edit on SharePoint list item using PowerApps.

Also get my article updates on my social media handles.

LinkedIn – https://www.linkedin.com/in/khasim-shaik-8784a1232/

Twitter – https://twitter.com/KhasimShaik2009

Facebook – https://www.facebook.com/profile.php?id=100078255554660

Thank you for your support, will catch up with new article soon.

Keep learning and keep sharing.

Have a great day.

Thanks.