Power Apps Rich text editor control – How to use

This Power Apps tutorial will teach us all about Power Apps Rich text editor control. Also, we will see how to use this control in a canvas app.

Recently, we got a requirement from one of our clients in the USA to use a rich text editor control in their Power Apps app.

Before working with this control in our app, we need to know what the purpose of this control is, what are the properties, how to add this control, etc. Also, we will discuss below topics such as:

• Power Apps Rich text editor control properties, limitations, and it’s components
• Is there any way to set the background color in a Rich text editor?
• Power Apps Rich text editor control highlight
• How to reset a Rich text editor control in Power Apps?
• How to set a default value in Power Apps Rich text editor control?
• Add hyperlinks in a Rich text editor control in Power Apps
• How to enable spell check in Power Apps Rich text control

Keep reading this tutorial, to get brief information on this topic.

What is a Power Apps Rich text editor control?

The Power Apps Rich Text Editor control is a powerful tool for entering and formatting text in an application. It has an easy-to-use interface for building and manipulating text with formatting choices including bold, italic, underline, font size, font color, and more.

The Rich text editor control offers the user a WYSIWYG text formatting area. HTML is the input and output format for the control.

Currently, the control supports the below features such as:

• Format font in bold, italic, and underlined.
• Customize the font color, size, and highlight color.
• Ordered and unordered list.
• Add a hyperlink to the text.
• Remove formatting.
• Font alignment.

This is what a Power Apps rich text editor control looks like.

Properties

Here, we will discuss some important key properties that come under the Power Apps Rich text control. Such as:

• AccessibleLabel: Screen readers should be labeled. Should explain what the attachments are for.
• DisplayMode: If the control allows for file insertion and removal (Edit), shows very clearly data (View), or is disabled (Disabled).
• EnableSpellCheck: Whether or not the browser’s spell checking is activated. This feature will only check spelling in the browser’s default language. This property isn’t supported by Power Apps for Windows.
• Default: Input property for the editor’s initial text value.
• BorderColor: Allow to define the control’s border color.
• Height: The space between the top and bottom edges of the control.
• Visible: It allows the visibility or hiding of a control.

Add Power Apps rich text editor control

In this section, we will see how to add a rich text editor control within the Power Apps screen. For this, the following steps are:

• Once you signed in to Power Apps, create a blank canvas app.
• On the Power Apps default screen, navigate to Insert (on the top bar) > Input > Rich text editor > Select.

From here, the control allows us to add text, hyperlink, customize the font family, size, etc. We will see how to interact with all of these components within the Rich text control in the following section.

This is how to add a Rich text editor control to a Power Apps screen.

Limitations of Power Apps Rich text editor control

The Power Apps Rich Text control has several limitations that we should be aware of:

• With Power Apps Studio, we can only interact with the rich text editor control when in preview mode.
• The following restrictions apply when pasting pictures into the rich text editor:
  • When pictures are duplicated, programs represent them differently.
  • Image style (inline vs URL)
  • Support for Cross-Origin Resource Sharing (CORS)

• Some browsers will catch the picture as raw image data, while others may acquire a reference to a URL that may not be available after copying.

Components of a Power Apps Rich text editor control

Power Apps Rich text editor control provides various components to enhance the editing experience. Here, we are going to cover some key components of the Rich Text Editor control in Power Apps:

• Toolbar: The toolbar contains various formatting options that users can utilize to modify the text. It typically includes options like bold, italic, underline, font color, font size, alignment, bullet points, numbering, and more as shown below:

• Text Formatting: The Rich Text Editor control allows users to apply formatting to selected text or modify the formatting of the entire text within the editor. Users can change the font family, font size, and font color, and apply bold, italic, underline, and other text formatting options using the formatting options from the toolbar.

• Hyperlinks: Users can insert hyperlinks within the Rich Text Editor control. This allows them to create clickable links to external websites, documents, or other pages within the app.

• Lists: The control supports both bulleted and numbered lists. Users can easily create and manage lists within the editor by selecting the text and applying the appropriate list formatting.

This is how we can use different types of Power Apps rich text editor control.

Change background color in Power Apps Rich text editor

Currently, Power Apps Rich text editor control will not allow setting a background color. But we can give highlights to a specific text.

Highlight text in Rich text editor in Power Apps

Here, we will see how to highlight a text(s) within the Power Apps rich text editor control. For this, we are going to use the above example and the following steps are:

• Preview the above rich text editor control, and select a specific text.
• Expand the toolbar or click on the ‘…‘ option.
• Click on the Background Color option.
• Select a color as per your need.
• That’s it! We can see that the selected text will be highlighted below:

This is how to highlight a text within the Power Apps Rich text editor control.

How to set default value in Power Apps Rich text editor control

In this section, we will see how to set a default value within a Power Apps Rich text editor control. Typically, while we add a rich text editor control to the Power Apps screen, it will appear with some default text as shown below:

• On the preview mode, enter some text into the upper rich text editor control. As we can see, when we reload the app, the inserted text is vanished and just the default value is displayed.
• In such a case, we can set a default value to the Power Apps Rich text editor control. For this, we can add such contents or text on the Default property of the control.
• In our case, we want to display some list of items within the Power Apps Rich text editor control. Insert the below expression on the control’s Default property.

Default = "<P>By using Rich Text Editor control, we can do the below </P>
<ol>
  <li>Format the font color</li>
  <li>Highlight the Font</li>
  <li>Customize the font style</li>
</ol>"

Now, just save and publish the app. We can see that if we refresh the app, now the default value will not be changed.

This is how to set a default value to the Power Apps rich text editor control.

Reset Power Apps Rich text editor control

We’ll look at how to reset a Power Apps Rich text editor control in this section. That is, if the user enters any rich text into the control, the control will be refreshed if the reset icon or button is selected.

For this, the following steps are:

• On the Power Apps screen, add a rich text editor control.
• Add a reset icon and place it on the top of the control.
• Insert the below expression on the icon’s OnSelect property.

OnSelect = Reset(RichTextEditor1)

Where RichTextEditor1 is the name of the Power Apps Rich text editor control.

Here, we have removed all the default values from the control’s Default property to keep it blank. Let’s preview the app and insert some rich text into the control. We can see the control will be refreshed once the reset icon is clicked.

This is how to reset Power Apps rich text editor control.

Insert hyperlinks in a Power Apps Rich text editor control

In this section, we will see how to add a hyperlink to a Power Apps Rich text editor control. For this, the following steps are:

• On the Power Apps screen, add a Rich text editor control.
• On the preview mode, insert some content into the control.

• Select a specific text and click on the link option from the toolbar. (Or you can click on Ctrl + K).
• Insert the URL in the URL bar and click on OK.

After we click OK, the desired text will show in blue with underlining.

This is how to add hyperlinks to the PowerApps Rich text editor control. While we right-click on the hyperlink, it will display the option to open in a new tab as shown below:

This is how to work with hyperlinks within the Power Apps Rich text editor control.

Enable spell check in Power Apps Rich text control

In Power Apps Rich text editor control, there is an option named ‘Enable spell check‘ that allows to user to check the spelling as per the browser whether it is correct or not.

We can enable and disable this option by its toggle as shown below:

Let’s preview the app and insert some text into the control.

We can see the proper spelling suggestion if we select the text and right-click.

This is how to enable spell check option within the Power Apps Rich text editor control.

Conclusion

I hope now you can use the powerful rich text editor in your apps in Power Apps. I have explained how to add this control in an app and do other operations like:

• Highlight texts inside the control
• Reset rich-text editor
• Set a default value in a Power Apps rich text control
• Add hyperlinks in a Rich text editor control
• Enable spell check in Power Apps Rich text control, etc.

You may also like:

• Power Apps Print Function
• create multiple tabs form in Power Apps
• Get Gallery Item By ID in Power Apps
• Get Value from Text input in Power Apps