Are you familiar with Power Apps Modern Button Control? Not much? No worries! In this Power Apps tutorial, we will learn everything about Power Apps Modern Button Control, its properties, and how to enable Power Apps Modern Controls.
Additionally, we will explore how to use Modern Button Control in the Power Apps Canvas app.
Power Apps Modern Button Control
Power Apps Modern Button control is an input control that allows users to interact with the app by clicking or tapping on it. Its goal is for the user to start actions and move around an interface.
For example, Suppose I have a Power Apps Modern Button Control named Click Here. When I click this button, it will redirect or navigate to another page (SharePointDotNet.com). This is called a Button action.
This is the overview of Power Apps Modern Button Control.
Power Apps Modern Button Control Properties
The below table represents all important properties of the Power Apps Modern Button Control:
|Text||Text that appears on the Modern Button Control.|
|Type||There are two types: Primary and Secondary|
“Primary” highlights the button’s role as the main action. The word “Secondary” highlights the button in a way that indicates a secondary action.
|Display mode||There are three views: |
Edit – The user can enter the data
View – Allows only to display data
Disabled – The control is greyed out with disabled mode
|Accessible label||When a user chooses the control, screen readers will read this text out.|
|Position||X – Distance between the control’s left side and the screen’s left edge|
Y – Distance between the top of the control and the top edge of the screen
|Size||Width – The gap between the control’s left and right sides.|
Height – Distance between the control’s top and bottom.
|AcceptsFocus||It specifies whether the tab key or the SetFocus function can be used to focus on the button.|
|Appearance||Appearance is the same as the Button type either Primary or Secondary.|
|ContentLanguage||Indicates the audience’s language (for example, “en-US”)|
|OnSelect||Actions that will be carried out after pressing the button.|
|Visible||Specifies whether to display or hide the control.|
Enable Power Apps Modern Controls
To begin with, you must enable one feature (Try out the modern controls) on the Power Apps Settings page whenever you use any of the Power Apps Modern Controls.
You won’t be able to see the Modern controls in Power Apps if you don’t enable this option. To enable the Power Apps Modern Controls, follow the instructions below:
- Open Power Apps and Sign in with your valid Microsoft credentials.
- Create a New Canvas app where you want to use the Power Apps Modern Controls.
- Open the created Canvas app -> Go to Settings (from the top right corner) -> Select Upcoming features -> Click on the Preview tab -> Turn on to Try out the modern controls as shown below.
- Save and Publish the canvas app once.
- Next, Click on the Insert tab (from the top) -> scroll down, and expand Modern controls -> Select any Power Apps Modern controls (Badge, Button, Checkbox, etc.) as per your need.
This is how to enable Modern Controls in Power Apps.
How to Use Power Apps Modern Button Control
Next, we will see how to use Modern Button Control in the Power Apps Canvas app. Let’s take a simple scenario.
- In Power Apps, I have a Gallery control and a Display form as shown in the image below. Power Apps Gallery control contains all the data from a SharePoint List (Scheduled Events).
- When a user clicks on the Modern Button control (NEXT EVENT DETAILS), I want to show all the information about upcoming or following events in the Power Apps Display Form.
The below screenshot represents the SharePoint list (Scheduled Events) that I have used for this scenario.
Follow the steps below to achieve this.
Step – 1:
- Sign in to Power Apps with your valid Microsoft credentials.
- Create a New Blank Canvas app (Apps -> + New App -> Canvas).
- Provide a name to the app (Power Apps Modern Button Control) -> Choose the Layout as Tablet -> Click on Create.
Step – 2:
- Next, we must connect the SharePoint list data source connector to the app. To do so, go to the Data tab (from the left nav) -> Click + Add data -> Search SharePoint in the search bar -> Select SharePoint data source connector.
- If you are using it for the first time, then you need to create a new connection, otherwise click on the existing SharePoint connection as below.
Step – 3:
- Connect to the SharePoint site by providing the SharePoint Site URL or you can connect it by tapping the existing SharePoint site under the Recent sites category.
- Choose your SharePoint list (Scheduled Events) -> Click on Connect.
Step – 4:
- Add a Power Apps Gallery control (+ Insert -> Vertical Gallery) and rename it to Scheduled Event Gallery.
- Select the gallery control and change its Layout to Title and subtitle. Connect the SharePoint list data source (Scheduled Events) to the gallery control.
Step – 5:
- In the same way, insert a Power Apps Display Form (+ Insert -> Search Display Form -> Select Display Form) next to the gallery control.
- Select the Display form -> Go to Properties pane (right side of the page) -> Expand Data source -> Select SharePoint list (Scheduled Events).
- Now, by using various properties (like Columns, Layout, Color, Border, Font, etc.), you can design your display form as per your need.
Step – 6:
- Next, go to the Screen’s OnVisible property and apply the code below:
OnVisible = Set( VarGalleryItem, First('Scheduled Event Gallery'.AllItems) )
- VarGalleryItem = Variable name
- Scheduled Event Gallery = Power Apps Gallery control name
Step – 7:
- Here, we will add a Power Apps Modern Button control (+ Insert -> Expand Modern controls -> Click on Button).
- Select the Button control and set its Text property to NEXT EVENT DETAILS.
- Select the Modern Button (NEXT EVENT DETAILS) and apply the code below on its OnSelect property as:
OnSelect = Set( VarGalleryItem, If( VarGalleryItem.ID = Last('Scheduled Event Gallery'.AllItems).ID, First('Scheduled Event Gallery'.AllItems), First( Filter( 'Scheduled Event Gallery'.AllItems, ID > VarGalleryItem.ID ) ) ) )
- The item that is now selected in the gallery is denoted by “VarGalleryItem” in this formula. The “Last” function is used in the formula to determine whether the current item is the last one in the gallery.
- If so, the “First” function in the formula returns the first item in the gallery when it reaches the last item in the gallery or your data source.
- The formula uses the “Filter” function to locate the first item in the gallery with an ID greater than the current item to “represent the next item to the current selected item” if the current item is not the last item in the gallery.
Step – 8:
- To display the next selected record details, select the Display form and set its Item property to the created variable i.e.
Item = VarGalleryItem
Step – 9:
- Now everything is done in Power Apps. Finally, we need to save and publish the app. Click on the Save button (from the top right corner).
- Also, Publish the app (next to the save button).
- Click on the Publish this version button.
Step – 10:
- To test the app, close it and reopen it again. Preview the app and you can see the display form will appear with the first item details.
- Click on the NEXT EVENT DETAILS button, it will show you the second item details. Similarly, again if you will tap on the modern button control, it will display you the third record details and so on.
This is how to use Modern Button Control in Power Apps.
This Power Apps tutorial taught us everything about Power Apps Modern Button Control, its properties, and how to enable Power Apps Modern Controls.
Additionally, we explored how to use Modern Button Control in the Power Apps Canvas app.
You may also like:
- Different Types of Apps in Microsoft Power Apps
- Power Apps Licensing And Pricing
- Power Apps Screen Templates
- Share a Power Apps App Within an Organization
Bijay Kumar Sahoo is a highly accomplished professional with over 15 years of experience in the field of SharePoint and related technologies. He has been recognized as a Microsoft MVP (Most Valuable Professional) more than 9 times, starting from April 2014, for his exceptional contributions to the SharePoint community. Bijay is also a prolific author, having written two books on SharePoint – “Microsoft Power Platform – A Deep Dive” and “SharePoint Online Modern Experience Practical Guide“. His deep insights into SharePoint are also shared on his popular YouTube channel EnjoySharePoint where he teaches SharePoint to a global audience (From various countries like the United States of America, Canada, the United Kingdom, Australia, New Zealand, etc). Read more…