PowerApps: How to Customize “Save” and “Cancel” Buttons

Sooner or later it will happen…you will set up a new SharePoint list and want to customize the form. Your first instinct might be to bust out InfoPath. Don’t do it! Unless you have been living under a rock, you are aware that InfoPath is officially on its way out; PowerApps is the new orange. 

You jump in and bravely click the “Customize” button in your list. You make your changes and open your form. One thing you may notice is the default “Save” and “Cancel” buttons on the bottom of the form are missing. Yes, they can be found at the top, but we got attached to those buttons being at the bottom. For our sanity, let’s add them back!

Add “Save” and “Cancel” Buttons to SharePoint Online List Forms

1. Click “Customize” either from an item form or the list command bar to open PowerApps. 
2. Once in the PowerApps Studio, your first instinct will be to click “Insert” –> “Button.” Don’t! If we did that, our buttons would be tied in context of our fields and end up free-floating, covering fields. First, we need to put our buttons inline in a container called a “DataCard.”
   1. In the “Fields” pane, click the 3 dots and choose “Add a custom card.” Now you can close the Fields pane.
   2. 
      
3. If you expand the left nodes of the SharePoint Form, you will see your new DataCard. You can also view it if you scroll down on the form in the canvas. Click to select the DataCard then click “Add an item from the Insert Tab.”
4. From the “Insert” menu, click “Button” twice. You will now have 2 buttons in the box. 
5. In the “Properties” pane, change the button’s text values to “Save“ and “Cancel.”

Be a good PowerApps user and rename the button names in the left tree node to something relevant like “CancelBtn” and “SaveBtn. You will end up with something like this:

i. 

 We need to 2 more things – set their color, and tell them what to do. 

1. To mimic the default further, we need to change the “Cancel” color to gray. 

i. Highlight the button and change its color via the color picker. Feel free to change their text size and color as desired.

2. Time to make them functional:

i. Click the “Save“ button, and click into the “Fx formula box” above the canvas. Paste the following – SubmitForm(SharePointForm1):

ii. Click the “Cancel” button and in the formula box, paste the following – RequestHide().

We’re done! Click “File” –> “Save” then “Publish to SharePoint.”

Now admire your work! Open an existing item or a new form and check out your buttons:

And they work! Welcome to the wonderful world of PowerApps! If you need assistance working with PowerApps or customizing SharePoint list forms, give us a call: 704 895 2500.