In this post, you will learn how to build a custom SharePoint List Form with PowerApps. Here, we will focus on the basics and get you through a few challenges along the way. As we dive in, some of the topics we cover include: SharePoint Integration connector, modifying the form, adding a button, and how to delete the form.
Let’s get started!
Create Your Form
First of all, you will need to create a SharePoint list using the modern SharePoint experience. If you don't use the modern SharePoint experience to create your list, you're not going to have the same options we'll work with and discuss within this post. If you have used the modern SharePoint experience, you’ll see “PowerApps” on the top bar. For this example, we have created a list that includes:
CEO
Driver
PowerApps Guru
Dog
To start, click on the first item, “CEO.” Once you do this, you’ll see that the default SharePoint List Experience opens, which you can then edit. At the top, you have the option to “Customize.” If you click on “Customize,” PowerApps will launch after about 20-30 seconds.
Now, you can see that PowerApps and SharePoint work together to create a list form. Here you can see various fields. Some fields are editable, and others are not. And, just like that, you can create a fully functional form.
Now you need to click on one of the Data Cards. Whatever property shows up in the fx column, hit space, and then go back and delete it. Basically, you’ve made a change and deleted it. Then go to “File” and “Save.” And, in a few seconds, that will save your app. Next, click “Publish to SharePoint”.
Trick: If you do use the link SharePoint gives you, you have to wait for PowerApps to load and unload all the time. Instead, take advantage of the link they provide you in the “Save Menu” you’ve just used and right-click on it and hit: “Open Link in New Tab.” This way, you have one environment working on PowerApps and one with SharePoint. This will cut down on the back and forth between pages–which can be finicky. So, now you can work between the two tabs more easily.
Now go back to your SharePoint list and click on “CEO.” You will see a new list. If you click on “Edit All”, you can see your PowerApps app and which fields are editable and not edible. Here, you can “Save,” “Cancel,” and “Copy Link,” etc. Now you have a custom form.
(If you are new to PowerApps and SharePoint, there is a YouTube tutorial that you may want to watch first and come back to this post. You can find the link to the video here.)
Modifying Your Form
Next, switch back to your PowerApps tab, and you’ll see from a PowerApps point of view the automatic process created a “Form Screen 1” on the left-hand side. Underneath this, you’ll see they have only put one SharePoint Form.
Take note that this is a little different from the default Sharepoint App that has 3 screens. (One for viewing, one for editing and new, and one for finding the item in the list.) Here they have all these in one screen instead. Understandably, this will take a little getting used to. But, they have based this form on how you have got here. So, how you got here is going to determine what ‘form mode’ the form is in.
The way you can figure this out is that if you click on “SharePoint Integration” on the top left-hand side, and then click on the “Data Source” dropdown. This is where you control the form. If you click on “View”, it opens up the form and puts the form mode in View. And “Edit” puts the form mode in Edit.
This is important for two reasons:
It figures out what mode to be in. Showing you and giving you the proper experience you want.
This is helpful as you explore more in-depth custom solutions down the line.
Next, we’ll look at editing the actual forms. When you have the edit experience, you’ll see that you have several fields that you can’t edit. So, let’s try and get rid of these. So, go back to your SharePoint list and click on the “Modified Data Card”. Then click on the “Data Source” dropdown menu and go to “Visible.” Right now, you will see that it’s set to “True” in the fx formula. To change this, instead of “True”, enter “sharepointform1.mode=Formmode.View, true, false”. This simple formula will help clean up your editing experience and hide the things you can’t edit.
However, you don’t want to deal with this formula all the time. And, we know that you can’t group Data Cards together. But here is what you can do:
Editor Form Screen (you were just on Modified) Now, you go back to your Data Source dropdown menu. Select the ‘Visible’ property and change the property to: “Modified_DataCard1.Visible.”
‘ ID’ is another one you may want to hide, so paste: “Modified_DataCard1.Visible.” again to hide it.
You can then do it for ‘Author’ too. Paste: “Modified_DataCard1.Visible.”
The last one is ‘Created’, so change this to: “Modified_DataCard1.Visible.”
So now, when the form is in ‘New’ and ‘Edit’ mode you are not going to have to worry about this.
Now, “Save”, and Hit “Publish To SharePoint.” If you hit “Refresh”, and hit “Edit”, you’ll see the properties are still here. Remember, you will need to refresh again. Now you’ll see the changes that have been made. Be sure to hit refresh often, as this will help eliminate any hiccups.
Take note: One of the downsides of hiding these fields is that it can lead to trouble down the line. You might forget you’ve hidden them, or maybe someone else needs to edit your app. To prevent this, you will need to create documentation. Go to “Form Screen 1”, click on “Home Screen” Click on “Screen 1,” then “New Screen” and you’ll see it pop up at the bottom. Call this “Documentation.” Next, insert a label and make it bigger, and place some text in here, such as this, "Modified_DataCard1.Visible hides the non-edible properties." You can now create documentation for your own benefit, and there is no way app users can access it.
Create a Button
Now, let's customize this app a bit more by adding a button. To start, grab the form box border and pull it up. So now you have a blank space to do something with. Let’s make a button that emails a link to users here. First, you are going to add a text input on the form. Click “Text” then “Input.” Now drag the text box down.
Next, get rid of the default text in the fx formula. Click on “HintText” and then “Enter an email address” Then rename “TextInput 1” to “EmailTo” for example. Then hit “Button” on the top. Next, add “Data Source” to the button. A pop-up menu will appear on your right. Next, click on “+ add data source.” As an example, here you can choose the Outlook option. (If you need a tutorial on how to create emails, watch this video.)
Now that you’ve added this, select the button and in the fx formula delete the default text and add: “Office365.SendEmail (EmailTo.Text, Check out this item, “SharePointIntergration. Selected”. You’ll now see all the properties for the current item you are working with. Then choose the “Link Property” option. Finally, you can change the text on the actual button and call it, “Email Link.”
Now, go to “File,” “Save”, and hit “Publish in Sharepoint.” Now, go back to your PowerApps and hit refresh to save yourself from any frustrations. Click on “CEO.” The pop-up menu will now show your new button and you can test it. Place your email address in the box above the button. Hit the button below “Email a Link,” and you should see an email in your inbox. There will be a link within the body of the email that will open the item in your browser.
What happens if you don’t like the form?
Maybe you want to delete the form or start over? To do this, go to “List Settings.” Under “List Settings” you’ll see “Form Settings.” Here you will see three choices that you can select:
1. Use a custom form created by PowerApps: You will only use this option if you want to use SharePoint’s out of the box form.
2. Use the default Sharepoint form: If you want to get rid of your form altogether, use this option. That will switch it back to the SharePoint out of the box form. Now you’ll see “Delete Custom Form” appear below this option. That will delete it completely.
3. Use a Custom Form outlined in InfoPath: We won’t go into this option in this post.
A Few More Things to Consider:
Anyone using this SharePoint List needs to have a PowerApps license to use your PowerApps form.
If someone else logs in, they will need to allow all the data connections. For example, because you added the email link, the new person logging in will need to agree to these.
So, there you go. Now you know how to customize a SharePoint List Form with PowerApps. While we have used some basic examples, we hope that this forms a good foundation that will help you to customize your SharePoint list even more. And open up your minds to a variety of creative solutions.
Build Your Own App with PowerApps Today
Power Apps provides a rapid application development environment to build custom apps for both your personal or business needs. Apps built using PowerApps have a responsive design and can run seamlessly on your browser, and mobile or tablet devices. Whether you need assistance with an issue or complete project services, PowerApps is here to help. To watch the full video tutorial on how to Customize a SharePoint List Form with PowerApps, click here.
Comments