Power Apps Modern Button Control [Complete Guide]

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.

Also, Read this complete tutorial to learn more about Power Apps Button OnSelect

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.

Check out: Power Apps Modern Dropdown Control [Complete Tutorial]

Power Apps Modern Button Control Properties

The below table represents all important properties of the Power Apps Modern Button Control:

Properties	Description
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”)
OnChange	Unknown purpose.
OnSelect	Actions that will be carried out after pressing the button.
Visible	Specifies whether to display or hide the control.

Check out: Power Apps Button 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.

Have a look: Power Apps Modern Badge Control [Complete Guide]

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.

Example:

• In Power Apps, I have a Gallery control as well as 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)
)

Where,

1. VarGalleryItem = Variable name
2. 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 in order 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.

Furthermore, you may like some more Power Apps Tutorials:

• Power Apps Modern Information Button Control [Complete Guide]
• Power Apps Modern Progress Bar [Detailed Guide]
• How to Show Hide Power Apps Label Control On Button Click
• PowerApps Timer Control: How to use + start and reset with button
• Power Apps radio button [With real examples]

In this Power Apps tutorial, we learned 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.