Power Apps SharePoint Button

In this Microsoft Power Apps Tutorial, users will get to know all about Power Apps SharePoint buttons. Also, we will discuss below topics such as:

• What is Power Apps Button?
• Power Apps SharePoint button customize
• Power Apps SharePoint save/submit button
• Power Apps SharePoint new button
• Power Apps SharePoint hide button
• Power Apps SharePoint radio button
• Power Apps SharePoint cancel/close button
• Power Apps SharePoint button hide
• Power Apps SharePoint choice field button
• Power Apps SharePoint refresh button
• Power Apps SharePoint disable save button

What is Power Apps Button?

Power Apps Button is an input control that allows the user to click to perform certain actions within the app. When the user clicks on the button, the event will occur based on the code you specified.

Before working on Power Apps button with SharePoint, make sure to sign in to the Power Apps with your office user ID or Microsoft 365 ID. In this following topic, we will discuss how to use a Power Apps button with SharePoint.

To work with the Power Apps button, first, we need to create a canvas app on Power Apps. The following steps are:

• Sign in to the Power Apps.
• Go to Apps (on the left panel) -> Click on +New app > Canvas. It will open a page to create the canvas app from blank.
• Give a name to the canvas app and select the format as Tablet or mobile -> Create.

Now, we can see a blank canvas app will open on Power Apps studio where we will perform all the above topics using the button.

To find the button control on Power Apps, the following steps are:

• On Power App studio, go to the Insert tab -> Click on the Button.
• Once you will add the button control, a button will appear on the default screen or screen1.

In the right panel, we can see the different types of button properties, where we can give a look at the button and many more. We will see these in the following topics.

Power Apps SharePoint button customize

Here we will see how to customize a button on Power Apps. Such as giving a text to the button, customizing the color, border, text color, height, etc.

Giving text to the button

We can give a text to the button as per our requirement. To do this, the following steps are:

• At Power Apps studio, click on the button.
• On the properties pane, click on the text.
• Give a text to the button.

Or,

• Click on the button.
• On the text properties, give any text to the button in-between ” “.

Customizing the button

Also, we will customize the button color, font, font color, and size. In the properties panel, we can find all the properties to customize the button on the Power Apps.

This is how to do customization on the Power Apps SharePoint button.

Power Apps SharePoint save/submit button

Here we will see how to work with SharePoint using a save button. For this, we have to integrate the canvas app with a SharePoint data source.

• Suppose, we have a SharePoint list based on Projects.

• Now we will integrate this SharePoint list into the canvas app. The following steps are:
  • On the Power Apps studio, go to Data -> Click on +Add data -> Search SharePoint under the Connectors -> Select the SharePoint site -> Choose the SharePoint list -> Click on Connect.

• Now, we can see the list on the Data of the Power Apps studio.

• Now we will add a Power Apps Edit Form on the default screen. From this form, we will save the data on the SharePoint list via a button.
  • On the default screen, go to the Insert tab -> Click on the Forms -> Select Edit.

• We can see an edit form will appear on the screen. Connect this form to the data source i.e. Projects. On the left panel, select the data source from the drop-down list. It will show all the SharePoint fields on the Power Apps form.
• On the Form’s properties, set the default mode as New. Do some customization to give a proper appearance to the form such as Background color, Font, and adding a label to the form.

• Now, add a Button control to the form. Give a text to the button as ‘Save‘ on the text property. On the button’s OnSelect property insert the below formula.

OnSelect = SubmitForm(Form1)

Where,

Form1 = Power Apps Edit Form name

NOTE:

Here, we have renamed the button control from the above options.

• Now save the app. Go to File > Save as > The cloud > Save. It will save the app on the cloud. Click on Play to play this in the preview mode. Let us insert data in the form and click on the Save button.

• We can see the data got saved on the SharePoint list:

This is how to work with Power Apps SharePoint save/submit button.

Power Apps SharePoint New button

• Now we will add a Button control to the form, when the user clicks on that button it will display a new form on the screen.
• For this, add a new button to the form. Give a text as ‘New‘ in the text property of the button.
• On the ‘OnSelect’ property, set the below formula:

OnSelect = NewForm(Form1)

Where,

Form1 = Power Apps Edit form name

• Now save and publish the app. Once the data is saved, when the user clicks on the New button, a new form will appear on the Power Apps screen.

This is how to work with the Power Apps SharePoint New button.

Power Apps SharePoint cancel/close button

• Here we will see how to work with a cancel button on the Power Apps form. When a user clicks the Cancel button, any changes made to the form are not saved.
• Similarly, add another button to the form and give text as ‘Cancel‘ on the text property. Also, you can set a background color as well.
• On the OnSelect property of the Cancel button, insert the below function:

OnSelect = ResetForm(Form1)

Where,

Form1 = Edit form name

This is how we can work with the Power Apps SharePoint cancel/close button.

Power Apps SharePoint disable save button

• Here we will see how to disable a button on Power Apps from. Suppose, when a user clicks on the Save button, the button will be disabled.
• But this button will work only one time on the app. That means it will be clicked only once by the user.

Let’s do this on the save button and the following steps are:

• On the Power Apps studio, click on the Save button.
• Set the below function on the OnSelect property of the save button.

OnSelect= SubmitForm(Form1);
          UpdateContext({VarDisable: DisplayMode.Disabled})

Here,

1. VarDisable is the context variable name.
2. DisplayMode.Disabled is one of the display mode properties.

• Again, set the DisplayMode property as Displaymode.

DisplayMode = DisplayMode

• Now save and publish the app. Play this app and insert sample data on the form. We can see once the button is clicked, it will be disabled like below:

This is how to disable a save button on Power Apps.

Power Apps SharePoint radio button

Here we will see how to use the SharePoint choice column on Power Apps form and submit data on the SharePoint list.

• We have prepared a SharePoint list named ‘Product‘ that contains a choice field i.e. ParentCompany.

• Now we will use this choice column on the Power Apps form from where we will submit data on the SharePoint list. The following steps are:

1. On Power Apps studio, add an Editform on the screen. Go to Insert tab > Forms > Edit.
2. Add the SharePoint data source to the form from the SharePoint connector. Select the SharePoint list. It will reflect all the SharePoint fields on the Power Apps form.
3. Add a button (Submit) to submit the data from Power Apps to the SharePoint list. On the ‘OnSelect‘ property of the set the below functions.

OnSelect = SubmitForm(Form1)

Where,

Form1 = Power Apps Edit form name

4. Now we will remove the Combo box from the form under the ‘ParentCompany‘. Add a ‘Radio’ input inside the ‘ParentCompany_Datacard‘. Select the Datacard > Insert tab > Input > Radio.

5. Click on the Radio control, then set the below function on the ‘Items’ property.

Items = Choices([@Product].ParentCompany)

Here, the Product is the list name and ParentCompany is the choice column of the SharePoint list.

6. Again, click on the ‘ParentCompany DataCard‘ and set the below function on the Update property.

Update = ParentCompanyRadio.Selected

Here, we have renamed the Radio3 to ParentCompanyRadio.

7. Now save and publish the app. Click on play icon and insert the data on the Power Apps form.

8. Let’s click on the Submit button, we can see the data got stored in the SharePoint list (Product).

This is how to use the SharePoint choice field in the Power Apps button.

Power Apps SharePoint Runflow button

Here we will see how to save data in the SharePoint list via Power Automate on Power Apps button.

• For example, we have a SharePoint list of ‘Employees‘:

• We have created a simple form on Power Apps using the above SharePoint list. Also, added a button input from where the will be submitted to the list.

• To connect with the Power Automate, the following steps are:

1. On the Power Apps studio, go to the Action tab > Power Automate > +Add flow > Create a new flow.

2. It will open the Power Automate page with a ‘PowerApps‘ trigger. Click on +New step > Create item (under SharePoint) > Select the Action. It will add under the trigger. Provide the below properties on ‘this create‘ item action such as:

• Site Address- Provide your SharePoint site address
• List Name- Provide the list name
• Title, First Name, Last Name, System Code- Click on ‘Ask in PowerApps’ in the dynamic contents. It will automatically fill the fields.

3. Give a flow name on the top left corner and click on the Save. It will reflect on the Power Apps’ Power Automate panel.

4. Click on the Submit button and insert the below function on the ‘OnSelect’ property:

OnSelect = SaveItemOnSharePoint.Run(DataCardValue5,DataCardValue6,DataCardValue7,DataCardValue8); ResetForm(Form2)

Here, DataCardValue5,6,7,8 are the text input control names. Form2 is the editform name.

5. Now Save and Publish the app. Play the app and insert sample data in the form.

We can see the data got submitted on the SharePoint list. This is how to do the Power Apps SharePoint Runflow button.

Power Apps SharePoint refresh button

Here we will see how to refresh the SharePoint data source on Power Apps via a button clicked. As per this requirement, when a user presses the button, the data source is refreshed.

Solution-1: Refresh the SharePoint data source via Power Apps

To refresh the data source via a Power Apps button, the following steps are:

• On the Power Apps studio, add a button control to the screen. Click on Insert > Button.
• Rename the button as ‘Refresh‘.
• On the ‘OnSelect‘ property of the button, insert the below:

OnSelect = Refresh(Name of the datasource name or SharePoint list name)

Solution-2: Refresh the SharePoint data source via the Power Apps screen

There is another way to refresh the SharePoint data source via the Power Apps screen. For this, insert the below function on the screen’s ‘OnVisible‘ property.

OnVisible = Refresh(Product)

Once the formula has been applied to the screen, simply save, publish, and exit the app. When we reopen the app, we can see that the data source has been refreshed.

This is how to refresh the SharePoint data source using the Power Apps button.

Power Apps SharePoint button hide

Here we will see how to hide a button on Power Apps.

• When we add a button control to the screen, we can see a Visible property with an on/off toggle on the Properties panel.

• When we set the toggle ‘Off‘ on the Visible property, then the button will hide from the screen or form.

• Also, there is another way to hide the button in the screen or form i.e. by using the Button’s Visible property (By default, this property will be true). Just we need to change it to false to this Visible property i.e.

Visible = False

This is how to work with Power Apps SharePoint button hide.

Also, you may like below Power Apps Tutorials:

• Power Apps in SharePoint
• Power Apps Radio Button
• Power Apps Data Table
• Microsoft Power Apps tutorial for beginners – Build an app in Power Apps
• Power Apps Navigate Function + 16 Examples
• Power Apps WeekNum and ISOWeekNum Function with Examples
• PowerApps form benefits for SharePoint
• PowerApps tips and tricks
• PowerApps nested gallery control example
• Automatically scroll Gallery control in PowerApps

Conclusion

From this Power Apps tutorial, we have learned all about the Power Apps SharePoint button such as:

• What is Power Apps Button?
• Power Apps SharePoint button customize
• Power Apps SharePoint save/submit button
• Power Apps SharePoint New button
• Power Apps SharePoint cancel/close button
• Power Apps SharePoint disable save button
• Power Apps SharePoint radio button
• Power Apps SharePoint Runflow button
• Power Apps SharePoint Refresh button
• Power Apps SharePoint button hide