Blog

Controls - How to convert HTML to Text

A frequent requirement is to convert HTML to text. This issue arises frequently when app builders attempt to display values from SharePoint rich text columns. This post summarises the methods to display rich text content in Power Apps, and how to convert HTML to text.

A question that arises frequently is, how do I convert HTML to text, or how do I display rich text content through a Power Apps screen? This post describes the main techniques that we can use.

Example scenario

To demonstrate the typical use case scenario, let's take a SharePoint list of issues. This list contains an issue description column that is set up as a 'multiple lines of text' column. The 'enhanced rich text' setting is enabled for this column.

With this list, users have entered records directly through SharePoint. The screenshot here illustrates an example of a richly formatted record.



If we now create a form that's based on this SharePoint list, here's how the default display form looks. The form displays the HTML markup, rather than the properly formatted text. This can be particularly confusing for app builders who are unaware that what they see here is HTML.

How to display SharePoint rich text values on a form

The easiest and correct way to display this data on a form is to use the 'View rich text' control. We can configure a card to use this control by clicking Field > Edit, and changing the control type from 'View text' to 'View rich text'.


The same method applies on an edit form. We would change the control type to 'Edit rich text'.

How to strip HTML characters / convert rich text to plain text

In the case where we want to strip the rich text formatting and to display the plain text only, we can call the PlainText function.

This can be very helpful in cases where input values come from external sources such as RSS feeds or social media, and we want to strip all extrenuous formatting.

The PlainText function accepts a single value (an HTML or XML string), and the return value from this function is the plain text equivalent. The screenshot here illustrates the use of this function.


How to convert HTML to text using the Content Conversion connector

In most cases, the PlainText function is the best way to perform XML/HTML text conversions. For completeness, another way to convert HTML to text is to use the "Content Conversion" connector. This connector exposes a single method called HtmlToText.


The key difference between this and the PlainText function is that HtmlToText is a behavior function. This effectively means that we can call it from a button, but not apply it directly to the text property of a control.

A example use for this connector could be an app that retrieves HTML input from a data source, applies some logic to process this input , and passes the output to a Flow or some other data source.

To use this method, we first add the "Content Conversion" connector to our app.


Here's an example of the formula that we can add to the OnSelect property of a button to convert static a piece of HTML into text, and to store the result in a variable.

Set(varPlainText,
    ContentConversion.HtmlToText("<div>Example HTML Input</div>")
)

Conclusion

A common requirement is to display rich text SharePoint content on a form, or to convert HTML to text. This post summarised the techniques we can use to perform these tasks.
Previous
Next
Related posts