PowerApp Custom Forms and Flow – Creating a Feedback Form Part 1

Last month Microsoft announced a long waited functionality where you can use PowerApps to customize the modern list forms in Office 365. Customizing the OOTB SharePoint list forms is something we have done for years already, and everyone has done customizations in multiple different ways.

But when the new modern lists were announced, all of those old ways were useless. I do understand the shouts and anger that came out of this. Starting from last month the first release tenants have been able to use PowerApps and Flow to create custom forms. We can finally do something real with list forms.

Here are few articles related to custom form with PowerApps.

• Customize SharePoint list forms with PowerApps and many more enhancements
• Customize a SharePoint list form using PowerApps

Over the time, I have created many types of Feedback forms in my SharePoint projects. The most simple solution is to use SharePoint list and let the users send feedback with OOTB form. But maybe there has been a need to give some instructions to the users or notify someone when new feedback created. To do this, you need to do some level of customization. Sometimes even some coding.

The best part of the new features in Office 365 is that changes can now be done without coding (almost, in many cases, etc. 😉 ) Even a power users can create customization with PowerApps and Flow. This is exactly what I’m about to show in this series.

My example form has the following requirements.

1. Give a possibility to add some text and instructions to the users when they are giving the feedback.
2. Show the necessary fields for feedback gathering.
3. Save the details to SharePoint list.
4. Create a new task on a backlog list in Planner.
5. Give a quick view and search for existing feedback items.

Custom List for Feedbacks

1. Step one which is the easiest one. Just create a new list to your SharePoint Online site.
   • Make sure that the list type is modern. I did create the list to the new modern team site that comes along the Office 365 Group.

Now add two new columns to the list. The quickest way to do this is by clicking the + sign on the view.

1. Create the following fields
   • Description – Multiple lines of text
   • Feature Type – Choice with values; New Feature, Question, Update, and Bug
2. And now you do have a simple feedback form ready to use!

PowerApp for Custom Forms

Now, let’s start to customize the form. Open the PowerApps menu from the list toolbar and select Customize forms. This will open and create the PowerApps application for your lists forms. Let’s take a look at few things before we make any changes.

1. Click the SharePointIntegration link on the left and select Advanced tab from the right.
   • You can see the basic settings of the SharePoint integration from this screen.
   • DataSource is pointing to the list you created, and Action selection is pointing to custom forms.
2. Notice that all Action events are pointing to only one form.
   • Different action types are handling the data mode automatically so calling your form with ViewForm action will show to form in read-only mode.
   • One thing to remember here is that in OOTB only one form is used. If you make any changes, these changes will reflect on all views types.
3. To solve this issue, we need to create a new screen and form for our custom form.
   • Follow the steps given in this amazing post from PowerApps community: https://powerapps.microsoft.com/en-us/blog/separate-custom-forms/

   

4. I ended up to create only two screens seen in the image above. One screen is for View and Edit, the other is for New item creation. You still have to update the values for each action setting in the SharePointIntegration. My settings are as follows (remember to use the names you set on your screens).
   • OnNew – Set(SharePointFormMode, “CreateForm”); NewForm(CustomNewForm); Navigate(NewFormScreen, ScreenTransition.None)
   • OnEdit – Set(SharePointFormMode, “EditForm”); EditForm(CustomViewForm); Navigate(ViewFormScreen, ScreenTransition.None)
   • OnView – Set(SharePointFormMode, “ShowForm”); ViewForm(CustomViewForm); Navigate(ViewFormScreen, ScreenTransition.None)
   • OnSave – If(SharePointFormMode=”CreateForm”, SubmitForm(CustomNewForm), If(SharePointFormMode=”EditForm”, SubmitForm(CustomNewForm)))
   • OnCancel – If(SharePointFormMode=”CreateForm”, ResetForm(CustomNewForm), If(SharePointFormMode=”EditForm”, ResetForm(CustomNewForm)))
     
5. Now let’s make some changes to the New form. Delete the fields that are unnecessary like date fields etc.
   • Select the Title_DataCard from the CustomNewForm table and increase the height.
   • Lower the Title field and add two new Label controls at the beginning of the form.
   • Add the instructions in these new labels and make any other change you like.
   • You also have to change the mode of the Description box (DataCardValue2_1) to Multiline.
   • Now save and publish the forms.

Navigate to the Feedback list and try to create a new item. You should now see our custom form in use. Create one item and open it and you should see a different form in use.

In next part we will add a Flow send our Feedback to Planner.

Part 2: https://mikkokoskinen.com/2017/12/06/creating-a-feedback-form-part-2-connecting-the-flow/