Edit

Share via

HTML text control in Power Apps

  • Article

A box that shows text and converts HTML tags to formatting.

Description

An HTML text control not only shows plain text and numbers but also converts HTML tags, such as non-breaking spaces.

Note

HTML text control assumes the HtmlText is relatively positioned. If you need to use an absolute position for your HTML text, wrap the text around a relatively positioned div. For example, "<div style='position:relative'>" & varPageContent & "</div>"

Note

For some HTML elements default browser styling might be deleted. For instance, for HTML list (<ul>, <ol>) you will need to write your own inline styles to get the default styling back. For example,

<ul style='display: block;
           list-style-type: disc;
           margin-block-start: 1em;
           margin-block-end: 1em;
           margin-inline-start: 0px;
           margin-inline-end: 0px;
           padding-inline-start: 40px;'>
  ...
</ul>

Key properties

Color – The color of text in a control.

Font – The name of the family of fonts in which text appears.

HtmlText – Text that appears in an HTML text control and that may contain HTML tags.

Additional properties

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – The background color of a control.

Height – The distance between a control's top and bottom edges.

HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

OnSelect – Actions to do when the user selects a control.

Note

OnSelect is ignored for hyperlinks within the content referenced inside HtmlText property.

PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – The distance between text in a control and the top edge of that control.

Size – The font size of the text that appears on a control.

Tooltip – Explanatory text that appears when the user hovers over a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Find( FindString, WithinString )

Example

  1. Add a Label control, name it Source, and set its Text property to this string:

    "<p>We've&nbsp;done an unusually &quot;deep&quot; globalization and localization.<p>"

    Don't know how to add, name, and configure a control?

  2. Add an HTML text control, and set its HtmlText property to this value:
    Source.Text

    The HTML text control shows the same text as the Label control but converts the tags to the appropriate characters.

Accessibility guidelines

ARIA mapping for elements inside the HTML text control are not defined automatically by Power Apps.

Color contrast

There must be adequate color contrast between:

  • Color and Fill
  • Text with custom colors and its background

Keyboard support

  • The control can't act as a button. It doesn't have TabIndex and keyboard users won't be able to focus on it.
  • The control can contain interactive parts in HtmlText like <a> elements, but the app setting **Simplified tab indexes" must be enabled. Otherwise, the tab navigation order will be wrong.