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.

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.

Power Apps Modern Button Control
Power Apps Modern Button Control

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:

PropertiesDescription
TextText that appears on the Modern Button Control.
TypeThere 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 modeThere 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 labelWhen a user chooses the control, screen readers will read this text out.
PositionX – 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
SizeWidth – The gap between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
AcceptsFocusIt specifies whether the tab key or the SetFocus function can be used to focus on the button.
AppearanceAppearance is the same as the Button type either Primary or Secondary.
ContentLanguageIndicates the audience’s language (for example, “en-US”)
OnChangeUnknown purpose.
OnSelectActions that will be carried out after pressing the button.
VisibleSpecifies whether to display or hide the control.
Power Apps Modern Button Control Properties

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.
Enable Power Apps Modern Controls
Enable Power Apps Modern Controls
  • 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.
How to enable Power Apps Modern Controls
How to enable Power Apps Modern Controls

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.

Example:

  • 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.
How to use Power Apps Modern Button Control
How to use Power Apps Modern Button Control

The below screenshot represents the SharePoint list (Scheduled Events) that I have used for this scenario.

PowerApps Modern Button
PowerApps Modern Button

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.
Add a Power Apps Modern Button Control
Add a Power Apps Modern Button Control

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.
PowerApps Modern Button Control
PowerApps Modern Button Control

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.
How to use Power Apps Modern Button Control
How to use Power Apps Modern Button Control

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.
Use Power Apps Modern Button Control
Use Power Apps Modern Button 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).
Power Apps Modern Button
Power Apps Modern Button
  • Now, by using various properties (like Columns, Layout, Color, Border, Font, etc.), you can design your display form as per your need.
Modern Button in Power Apps
Modern Button in Power Apps

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
Modern Button control in Power Apps
Modern Button control in Power Apps

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.
Modern Button control in PowerApps
Modern Button control in PowerApps
  • 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
            )
        )
    )
)
How to use Modern Button control in Power Apps
How to use Modern Button Control in Power Apps
  • 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
Use Modern Button control in Power Apps
Use Modern Button control in Power Apps

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).
Modern Button in PowerApps
Modern Button in PowerApps
  • Click on the Publish this version button.
Use PowerApps Modern Button
Use PowerApps Modern 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.
How to work with Power Apps Modern Button control
How to work with Power Apps Modern Button control

This is how to use Modern Button Control in Power Apps.

Conclusion

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: