How to create design a SharePoint list form in PowerApps

  • To get the power apps link in the ribbon we need to enable the List experience to NewExperience. To do that please follow the below steps.

a. Click on the list settings -> Advance Settings -> List Experience set to New Experience


  • Now from any SharePoint view click on “PowerApps” and the click “Customize forms”option.


  • When the form will appear in the left toolbox click the “…” in the fromScreen1 and click on the Duplicate screen. Repeat the steps two times to make sure you have 3 screens for New, Edit, View.


  • Rename the screen and the SharePoint control accordingly by clicking “…” and the rename button.


  • Now to open the “newscreen”, “editscreen” and the “viewscreen” for the correct api operation by the end user we need to set some properties in the form.

a. Please select “SharePointIntegration” in the left navigation and then set the values for the events “OnCancel”, “OnEdit”, “OnNew”, “OnSave”, “OnView”.




OnCancel:-

If(SharePointFormMode="CreateForm", ResetForm(NewForm),

If(SharePointFormMode="EditForm", ResetForm(EditForm)))

OnEdit:-

Set(SharePointFormMode,"EditForm");EditForm(EditForm)

OnNew:-

Set(SharePointFormMode, "CreateForm"); NewForm(NewForm)

OnSave:-

If(SharePointFormMode="CreateForm", SubmitForm(NewForm),

If(SharePointFormMode="EditForm", SubmitForm(EditForm)))

OnView:-

Set(SharePointFormMode, "ShowForm"); ViewForm(ViewForm)


  • Now from the left navigation select the new form and in the right panel click the edit fields to add the field into you screen.



  • Repeat the steps for the viewform and Edit form also and add the fields that you want to show from the list.

  • For the all three form it is important to keep the default mode of the form accordingly. From the below screen shot find how to do so.



  • After all these set up is ready we need to save and publish our form to reflect to the list form. And to do so follow the below steps.

a. Click “File” from top navigation.

b. Click “Save”. “Publish to SharePoint” button will be visible.

c. Click “Publish to SharePoint”



  • For all the three screens we need to set the property of “LoadingSpinner” value to “LoadingSpinner.Data” to refresh the current data to the form.


  • Do a complete refresh of your SharePoint page using “Ctrl+F5” and try to open your newly design power apps designed form.