SharePoint custom forms: Build separate forms to create, show or edit the list item.
We announced the availability of Custom forms for SharePoint yesterday and today I wanted to show a simple example on how you can create separate forms to create, show or edit an item.
For this example, we will start with a simple SharePoint list, which is a custom list used to track service requests.
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 creating, showing or editing 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 my 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, "CreateForm"); NewForm(CreateItemForm); Navigate(CreateScreen, ScreenTransition.None) -
OnEdit –
Set(SharePointFormMode, "EditForm"); EditForm(EditItemForm); Navigate(EditScreen, ScreenTransition.None) -
OnView –
Set(SharePointFormMode, "ShowForm"); ViewForm(ShowItemForm); Navigate(ShowScreen, 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="CreateForm", SubmitForm(CreateItemForm), If(SharePointFormMode="EditForm", SubmitForm(EditItemForm))) -
OnCancel –
If(SharePointFormMode="CreateForm", ResetForm(CreateItemForm), 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 to create, show or edit the items of our list.
As a next step, learn more about custom forms or understand how the integration works. Also, engage with us and other users in PowerApps community.
