In this Power Apps Tutorial, we will discuss using HTML text control in Power Apps.
Recently, we got a requirement to work with the HTML text control while working with the Power Apps.
Here, we will see what Power Apps HTML text is and how to use this control in our canvas app. Along with these, we will discuss the below topics based on Power Apps HTML text.
- Power Apps HTML text control key properties
- Power Apps HTML text control limit
- Add Power Apps HTML text control
- Working with Power Apps HTML text control or Power Apps HTML text control with HTML
- Power Apps HTML text control new line
- Power Apps HTML text control with image
- Power Apps HTML text control hyperlink
Power Apps HTML text control
Power Apps HTML text control is a type of control in the Microsoft Power Apps platform that allows you to display rich text content in your app. With this control, you can format text using HTML tags to add headings, links, lists, and other styling options to your text.
The HTML text control in Power Apps is a powerful tool for creating rich and interactive content in your apps, making engaging your users easier and creating a more immersive experience.
Power Apps HTML text control key properties
There are various types of key properties under the Power Apps HTML text control. Below, we have described a few properties such as:
- BorderColor: The border color of a control.
- BorderStyle: Whether the border of a control is Solid, Dashed, Dotted, or None.
- DisplayMode: Whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
- Fill: A control’s background color.
- OnSelect: The following actions are taken when a user selects a control.
- Size: The font size of the text that appears on a control.
- Tooltip: When a user hovers over a control, informational text appears.
- Color: The text color is in control.
- Font: The name of the font family in which text is displayed.
- HTMLText: Text appearing in an HTML text control may include HTML tags.
Power Apps HTML text control limit
The Power Apps HTML Text Control allows you to display rich text with support for various HTML tags. However, there are some limitations to the amount of HTML code that can be displayed in this control.
- The maximum size of the HTML content that can be displayed in the HTML Text Control is 16,384 characters. If the HTML content exceeds this limit, the control will display an error message indicating that the content is too large.
- To avoid this limitation, you can split the HTML content into smaller chunks and display them in separate HTML Text Controls.
- Another option is to use the HTML control to display only a portion of the content and provide a button or link to navigate to a separate page or control to view the remaining content.
Add Power Apps HTML text control
Now, we will see how to add an HTML text control to the Power Apps studio. For this, the following steps are:
- On the Power Apps screen, navigate to Insert > Display.
- Under Display, we can find the HTML text control.
- Select the control to appear on the screen. By default, the control will appear with text embedded with HTML tags as shown below:
This is how to add HTML text control to the Power Apps.
Working with Power Apps HTML text control or Power Apps HTML text control with HTML
In this section, we will see how to work with the Power Apps HTML text control by adding different components such as texts, colors, headings, paragraphs, etc. That means we will build a Power Apps HTML text control using HTML tags that appear below:
In the preceding screenshot, we created an HTML text control with HTML tags that displays a notice based on a company’s monthly meetings. To create this, the following steps are:
- On the Power Apps screen, add an HTML text control.
- Add a text label control to the screen and expand it to give the screen a header appearance. Also, give a background color and text to the label control as per the need. (Ex: Notice)
- Similarly, select the HTML text control and insert the below expression including HTML tags on the HtmlText property.
HtmlText = "<H1><center><font color= Red> TSINFO Monthly Meeting </font></center></H1> Dear employees, <br/> <p> We would like to invite you to attend our upcoming monthly meeting. The meeting will be held on <b>28th March 2023 at 4:00pm in 5th Floor Conference hall</b>. We kindly ask that you make every effort to attend as we will be discussing important updates and announcements related to our company.</p>Thank you for your attention and we look forward to seeing you there.<br/><br/>Best regards,<br/>Team HR<br/>TSInfo"Where,
- <H1>…</H1> is defines the header.
- <center>…</center> allows us to keep the text in center alignment.
- <font color>…</font> defines the header’s font as red.
- <br/> is used to give a break.
- <p>…</p> is used to keep the text in a paragraph.
- <b>…</b> is used to display the text in bold.
Once the expression is applied to the control, it will appear as shown below:
This is how to work with the HTML Text Controls inside Power Apps.
Check out, How to format a currency column in Power Apps?
Power Apps HTML text control new line or line break
The primary purpose of adding a line break is to separate different sections or paragraphs of text, making the content easier to read and understand. Adding line breaks in a text is to improve the readability, organization, and aesthetic appeal of the content.
In this section, we will see how to create a new line or add a line break within the Power Apps HTML text control.
When we add multiline text to the Power Apps Html control, it will all appear on the same line. However, it is possible to insert a line break using HTML tags to display the sentence in separate lines, as shown below:
To add a line break into the Power Apps HTML text control, the following steps are:
- Add an HTML text control to the Power Apps screen.
- Insert some multiline text on the control’s HtmlText property.
- To give a line break in each line, add a “<br/>” tag at the end of each line.
Ex:
HtmlText = "Hello, <br/>I hope you are doing well.<br/> There is an issue while installing the app."As a result, the text will appear as below:
Hello,
I hope you are doing well.
There is an issue while installing the app. Here, I am going to add some multiline line text on a Power Apps HTML text property using the line break.
Hello, <b>Sonam</b> <br/> Good evening <br/> I hope you are doing well. <br/> Let's have a quick call to discuss on Lawrence Project.<br/>Thank You."Once we applied the multiline texts with the above expression, the text will appear as shown below:
This is how to add a line break in the Power Apps HTML text control.
Power Apps HTML text control with image
The Power Apps, allows us to add an image to the HTML text control. To add an image, we can use a specific HTML tag, i.e., <img> with the image URL.
Let’s see how to add an image to the Power Apps HTML text control. For this, the following steps are:
- On the Power Apps screen, add an HTML text control.
- Suppose, I am going to display an image via a URL that is taken from the browser. Insert the below expression on the control’s HtmlText property.
HtmlText = "<Center>HTML text control with <font color=blue>Image</font></center>
<img src=""https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg""
alt=""Flower With Butterfly"">"Once the formula is applied, we can see the image will appear on the Power Apps HTML text control as shown below:
This is how to add an image to the Power Apps HTML text control.
Read: How to Display Dataverse Choices in Power Apps Gallery
Power Apps HTML text control hypertext
In this section, we will see how to add hypertext or hyperlinks to the Power Apps HTML text control. By using a specific HTML tag ‘<a href>’, we can add hyperlinks to the Power Apps HTML text control.
For this, the following steps are:
- On the Power Apps screen, add an HTML text control.
- Insert the below expression on the ‘HtmlText‘ property with an URL to create a hypertext on the control.
HtmlText = "Want to expertiese on PowerApps?<br/> Click here <font color = Purple><a href=""https://www.enjoysharepoint.com/category/power-apps/"">Power Apps<a/></font>"Once the formula is applied to the control, a hyperlink will be created as below:
When we click on the link, it will redirect to the specific URL on a new tab as shown below:
This is how to add a hyperlink to the Power Apps HTML text control.
Conclusion
From this Power Apps Tutorial, we learned all about Power Apps HTML text control. Along with this, we have covered below topics:
- Power Apps HTML text control
- Power Apps HTML text control key properties
- Power Apps HTML text control limit
- Add Power Apps HTML text control
- Working with Power Apps HTML text control or Power Apps HTML text control with HTML
- Power Apps HTML text control new line or line break
- Power Apps HTML text control with image
- Power Apps HTML text control hypertext
You may also like:
- How to use Power Apps label control?
- PowerApps multi-select dropdown
- How to display images within Power Apps from a SharePoint list?
- How to filter SharePoint choice field within Power Apps?
After working for more than 15 years in Microsoft technologies like SharePoint, Office 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (9 times). I have also worked in companies like HP, TCS, KPIT, etc.