Power Apps Modern Badge Control [Complete Guide]

Do you know what is a Power Apps Modern Badge control and how it works? No worries!

In this Power Apps tutorial, we will learn everything about Power Apps Modern Badge, its properties, and how to use a Modern Badge Control in Power Apps.

Apart from that, we will get to know how to enable Power Apps Modern Controls in the Canvas app.

Also, Read: Power Apps Modern Dropdown Control [Complete Tutorial]

Power Apps Modern Badge Control

An informational token called a Power Apps badge that displays brief details like a user’s task indicator. Typically, it offers a quick way to see the notification or vital message without reading a lengthy text.

The below screenshot represents how the Power Apps Modern Badge control looks like.

Power Apps Modern Badge
Power Apps Modern Badge

Power Apps Modern Badge Properties

The below list represents all the essential Properties of Power Apps Modern Badge Control.

PropertyDescription
ContentThe text which will be shown inside the badge control.
ContentLanguageDefines the audience’s language (for example, “en-US”).
DisplayModeThere are three modes:
Edit – The user can enter the data.
View – Allows only to display data.
Disabled – The control is greyed out with disabled mode.
Appearance There are four types of appearances. Such as:
Filled:
Power Apps Badge
Ghost:
Power Apps Badge Control
Outline:
Power Apps Modern Badge Control
Tint:
PowerApps Modern Badge
ColorThere are eight different badge colors. Such as:
Brand:
PowerApps Badge Control
Danger:
Power Apps Badge Control Properties
Important:
PowerApps Badge Properties
Informative:
Power Apps Badge Properties
Severe:
Badge in Power Apps
Subtle:
Modern Badge in Power Apps
Success:
Modern Badge control Power Apps
Warning:
Modern Badge control PowerApps
ShapeThere are three different badge shapes. Such as:
Circular:
Badge control Power Apps
Square:
Badge control PowerApps
Rounded:
Badge PowerApps
OnChangeActions that will be carried out when the value changes.
PositionThere are two types of badge positions:
– 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.
SizeThere are two types of sizes:
Width – The gap between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
VisibleIt defines whether to display or hide the Power Apps Badge control.

These are all about Power Apps Badge control properties.

See also  Power Apps Different Home Screen Based On Different User

Have a look at: Power Apps Modern Progress Bar [Detailed Guide]

Add Modern Badge Control in Power Apps

Now, we will see how to insert a Modern Badge Control in Power Apps.

We must first activate the “Try out the modern controls” option on the Power Apps Canvas app’s settings page.

If you don’t enable this option, you won’t be able to see the Modern controls in Power Apps. Follow these steps to enable Power Apps Modern Controls:

  • Sign in to Power Apps with your Microsoft credentials.
  • Create a New Blank Canvas app (Apps -> + New App -> Canvas).
Add Modern Badge in Power Apps
Add Modern Badge in Power Apps
  • Provide a unique name for the canvas app (Power Apps Modern Badge Control) -> Choose the Format as Tablet -> Click on Create.
PowerApps Modern Badge Control
PowerApps Modern Badge Control
  • Go to Settings (from the top) from the Power Apps Screen -> Select Upcoming features -> Click Preview -> Turn on to Try out the modern controls as shown below.
  • Save and Publish the Power Apps canvas app once.
Badge control in Power Apps
Badge control in Power Apps
  • On the Power Apps Screen, expand the + Insert tab (from the top) -> Scroll down, and expand Modern controls -> Select Badge as below.
  • The Power Apps Badge’s default name will be BadgeCanvas1. You can also rename it to suit your needs.
Modern Badge control in Power Apps
Modern Badge control in Power Apps
  • Similarly, the Badge’s default content will be “AB“. You can change it by using the Content property:
Content = "Hello TSinfo Technologies"

You must need to provide an inverted comma ” “ as shown below.

Modern Badge Control in PowerApps
Modern Badge Control in PowerApps

This is how to add a Modern Badge Control in Power Apps.

See also  Power Apps Disable Button

Check out: Power Apps Modern Button Control [Complete Guide]

How to Use Power Apps Modern Badge Control

We will discuss how to work with Power Apps Modern Badge control here.

As you can see the image below represents five different Power Apps badges with various appearances. Let’s explore them one by one.

Power Apps Modern Badge
Power Apps Modern Badge

Reboot Your System:

Content: "Reboot Your System"
Appearance: Filled
Color: Danger
Shape: Square

Need Any Help?:

Content: "Need Any Help?"
Appearance: Filled
Color: Brand 
Shape: Circular

Reboot Completed:

Content: "Reboot Completed"
Appearance: Filled
Color: Success 
Shape: Circular

You Are Saved:

Content: "You Are Saved!!"
Appearance: Filled
Color: Important 
Shape: Rounded

Enjoy Power Apps:

Content: "Enjoy Power Apps"
Appearance: Filled
Color: Subtle 
Shape: Rounded
  • To preview it, first, Save and Publish the app from the top right corner.
  • Click on the Publish this version button.
Power Apps Badge Examples
Power Apps Badge Examples
  • Finally, close the Canvas app and then reopen it in Play mode to view it.

This is how to Use Modern Badge Control in Power Apps.

Furthermore, you may like some more Power Apps and Dataverse tutorials:

This Power Apps tutorial explained all the details about Modern Badge Control in Power Apps, its important various properties, and how to use a Power Apps Modern Badge Control with an example.

See also  PowerApps Search User

Additionally, we learned how to enable Power Apps Modern Controls in the Canvas app.

Happy Posting!

>