How to use Power Apps label control?

This Power Apps tutorial will teach you how to use a text label control within Power Apps.

Recently, we got a requirement to work with the text label control while working with the Power Apps canvas app.

Here, we will see what is a Power Apps label control and how to use this control in our canvas apps. Along with these, we will discuss the below topics based on the Power Apps label control such as:

• Power Apps label control key properties
• Working with Power Apps label control
• Create Power Apps label control with text input
• Power Apps label control line break
• Power Apps label text from a data source
• Power Apps label add link or hyperlink

What is Power Apps label control?

In Power Apps, there is a display control named Text label. This control is used to display the data such as text, number, currency, and dates.

A label displays data specified as a representational string of text that appears exactly as you enter it, or as a formula that evaluates to a string of text. Labels are commonly used to show a specific type of information about an item outside of any other control (such as a headline that defines a screen), as a label that helps to identify another control, or in a gallery.

This is what a Power Apps text label control looks like.

Key properties of the Power Apps text label control?

Now, we’ll explore the key properties that come under the Power Apps text label control. Some of the most important key properties are:

• AutoHeight: Set to true to allow the label’s height to auto-grow to show all text. Set to false to truncate the text to the specified height.
• Color: It defines the text color in a control.
• Font: It defines the name of the font family in which text appears i.e., Open Sans, Arial, Georgia, etc.
• Text: It defines the text that is displayed on a control or entered by the user into a control.
• DelayOutput: It is used to postpone action during text input by setting the value to true.
• DisplayMode: It allows the control of whether the user input (Edit), displays data only (View), or is disabled (Disabled).
• Fill: It defines the control’s background color.
• TextWeight: It specifies whether the text in the control is bold, semibold, normal, or light.
• Live: It defines how a screen reader announces changes to the label’s Text property value such as Off, Polite, and Assertive.
  • If the live value is set to Off, the screen reader does not announce changes.
  • Similarly, if the value is set to Polite, the screen reader finishes speaking before announcing any changes that occurred while the screen reader was speaking.
  • If you set the value to Assertive, the screen reader interrupts itself to announce any changes that occurred while the screen reader was speaking.
• OnSelect: When a user taps or clicks a control, actions are taken.
• Overflow: If the Wrap property of the control is set to true and the value of the control’s Text property contains more characters than the control can display at one time, whether a scrollbar appears in a label.
• Role: The semantic significance of label text, such as Heading 1. It does not change the label’s style, but it makes the output semantically correct for screen readers to interpret.
• Size: The font size of text displayed on a control.

How to work with a Power Apps label control?

In this section, we will see how to work with a label control within the Power Apps. Before working with the Power Apps text label control, we need to prepare a canvas app where we can add this control. The following steps are necessary:

Preparing Power Apps Canvas Apps

• Sign in to the Power Apps with your respective Microsoft credential.
• Navigate to Create (Left Navigation) > Blank app > Blank canvas app > Create.
• Provide a name to the canvas apps and select the apps’ format (i.e., Tablet or Mobile). Click on Create.
• It will generate a blank canvas app with a blank screen where we can add text label control.

Adding Power Apps text label control

Next, we will add a text label control to the Power Apps screen. The following steps are needed:

• On the above screen, navigate to the Insert tab > Expand Popular or Display > Text label > Select.
• The control will appear on the Power Apps screen as shown below:

• To display, you can add any text to the label control. Assume we want to display a text within the control, such as Los Angeles.
• Insert the text with the following expression into the label control’s Text property.

Text = "Los Angeles"

This is how to add and display text within the Power Apps label control.

Create Power Apps label control with text input

In this section, we’ll look at how to create a Power Apps label control with text input. That is, we will create a Power Apps label control to display the data retrieved from the text input.

To work with this, we are going to use the above Power Apps label control and the following steps are:

• Add a text input control to the above screen. Go to Insert tab > Input > Text Input > Select.
• Insert the below expression on the label’s Text property to display the data from the text input.

Text = TextInput1.Text

Where TextInput1 is the name of the Power Apps text input control.

Now we’ll save and publish the app. In the preview mode, launch the app. As we can see, when we insert any data, such as text or numbers, it displays that data in the label control, as shown below:

This is how to create Power Apps label control with text input. Similarly, we can display the selected date from a date picker control in the Power Apps label control.

Power Apps label control line break

In this section, we’ll look at how to insert a line break in the Power Apps text label control. Assume we have multiline text that is displayed in a single line within the label control.

As per the requirement, we want to insert a line break between sentences when displaying data using the Power Apps text label control.

To work with this, the following steps are:

• To add the line break in the Power Apps text label control, we need to add an HTML tag i.e., </br>.
• Since the Power Apps text label control does not support HTML tags, we will replace it with another Power Apps Display control i.e., HTML Text.
• Insert the following expression into the HTML Text control’s HtmlText property.

HtmlText = "Hey, <b> Scott </b>.<br> <br>How are you?"

This is how to add a line break to the Power Apps label control.

Power Apps label text from a data source

In this section, we will see how to display data within the Power Apps data label that comes from a data source.

Suppose we have a SharePoint list named Products List having different types of columns and data as shown below:

As per the requirement, we want to display the first item in the above list’s Title column within a Power Apps text label control. To implement this in Power Apps, the following steps are:

• Connect the SharePoint list to the Power Apps. On the Power Apps screen, go to Data > Add data > choose the SharePoint site address > select the specific SharePoint list > Connect.
• Add a data table to the screen and connect it with the SharePoint list to display the data. (In our case we only display the Title column).

• To display the first item from the above list’s Title column, add a label control to the Power Apps screen.
• Insert the below expression on the label’s Text property.

Text = First('Products List').Title

Where ‘Products List’ is the name of the SharePoint data source and Title is the name of the column.

Once the formula is applied, the label control will display the first item of the data source’s column.

This is how to work with the Power Apps label control using data sources.

Power Apps label add link or hyperlink

In this section, we’ll look at how to add a link or hyperlink to the Power Apps label control. That is, we will add a link to the Power Apps label control, and when the user clicks on it, it will redirect to the link.

To implement this, the following steps are:

• On the Power Apps screen, add a label control.
• Change the text color to Blue.
• Set the text’s Underline as true.

• To make it clickable and add a link, insert the below expression on the label’s OnSelect property.

OnSelect = Launch( "https://www.enjoysharepoint.com/category/power-apps/")

Let’s run the app and see how clicking on the label control redirects to the specified link and opens a new tab, as shown below:

This is how to make Power Apps label control clickable.

Conclusion

From this Power Apps Tutorial, we learned what is Power Apps Text label control and how to work with this control based on different scenarios such as:

• Key properties of the Power Apps text label control?
• How to work with a Power Apps label control?
• Preparing Power Apps Canvas Apps
• Adding Power Apps text label control
• Create Power Apps label control with text input
• Power Apps label control line break
• Power Apps label text from a data source
• Power Apps label add link or hyperlink

You may also like:

• PowerApps multi-select dropdown
• How to display images within Power Apps from a SharePoint list?
• How to filter SharePoint choice field within Power Apps?
• How to use PowerApps search() function SharePoint list?