User Experience: Designing for Rich Text in PowerApps

The Business Case

We have been working with a client on a PowerApps project that involves capturing content in the Rich Text Editor control, saving it and later recalling it for display to different users.

The Rich Text Struggle

Including Rich Text in Apps can be tricky from a User Experience perspective. The typical concern is that a user may add some VERY Rich Text into a well planned interface and make it look totally inconsistent.

The Solution

We wrote this post and are providing the sample to show how Rich Text doesn’t have to disrupt the otherwise well planned look and feel of your app’s user experience. Our tool in this solution is the extremely simple yet effective PlainText() function.

Here is the sample app we create to show how Rich Text can be managed elegantly in your PowerApp.  Here’s a link to a video preview ( https://youtu.be/E0Kwtwbn6sQ ).

Here is the sample app we create to show how Rich Text can be managed elegantly in your PowerApp. Here’s a link to a video preview (https://youtu.be/E0Kwtwbn6sQ).

PlainText() vs. Rich Text

You can keep your app looking clean while supporting Rich Text thanks to PowerApps PlainText() function. It is extremely simple to use. All you need to do is pass in a string of HTML or XML and the PlainText function does the heavy lifting - it strips the tags out of your string.

We even added a toggle into the demo so that you can compare the effect of the PlainText Function on raw Rich Text.

Displaying Plain Text in a Label vs. an HTML Control

PlainText in a Label vs HTML Text.PNG

The result of the Plain Text function is a string of text. However, it will display differently in a label when compared with how it will be displayed in an HTML Text control.

The main difference being that the label still observes line returns that were present in the original HTML.

40 Second Video Walk through

If you’d like to see this with your own eyes, here’s a quick video walk through of our application. You’ll see how the app:

  • Captures and Stores Rich Text Data

  • Displays Rich Text Data as Plain Text in a Gallery (for easy reading)

  • Toggles content between rich text and plain text modes

 
 

Download the Demo App

If you’d like to try this app out for yourself, it doesn’t require any connectors and can be downloaded here:

Here’s a quick video walk through of the solution for you to see it working for yourself.