RICH TEXT EDITOR CONTROL IN POWERAPPS

A rich text editor is an input field for text editing, that allows advanced styling options like heading levels, bold, italic, bullet lists, text size, numbered lists, hyperlinks, and clear formatting. The rich text editor control provides the app using a WYSIWYG (What You See Is What You Get) editing area for formatting text.

The article explains how to use the rich text editor control in PowerApps and the limitation with SharePoint list.

Table Of Contents:

Setup the SharePoint List

Connect to the SharePoint List from PowerApps

Insert the edit form

Edit the form

Bring in the rich text editor control

Insert a button control to submit form

Play around with the rich text editor

Working with SharePoint Multiple line of text

Limitation with rich text editor in PowerApps and enhanced text editor in SharePoint

Setup The SharePoint List

Create a SharePoint list called Text Editor.

· Short Description (single-line text)

· Long Description (multi-line text)

Connect to SharePoint from PowerApps

Open Power Apps Studio, navigate to the data tab on the left-navigation menu and connect to the SharePoint list created above

Insert an Edit Form

Insert an edit form from the insert menu and connect to your data source, Text Editor.

Edit the form

Delete the title and attachment data card. Then, turn the columns option in the edit form properties to 1.

Bring in the rich text editor control

Now, I will show you an easy way to bring in your rich text control without deleting the existing text control.

Click on the data card, go to the field properties of the card and change the text control type to edit rich text.

Insert a Button to Submit the Form

Insert a button and write the code below in the OnSelect property of the button.

Also, change the text property to Submit

Play around with the rich text editor

In preview mode on the app, type in “play around with rich text editor” in the short description section without any styling.

Also type in “play around with rich text editor” in the long description but apply some styling. Now, submit the form and check the SharePoint list.

Insert a gallery

Let’s bring in a gallery to view submitted items.

Insert a gallery from the Insert tab, connect to your SharePoint List then write the code below on the item property of the form.

Insert a Button to Submit the Form

Insert a button and write the code below in the OnSelect property of the button.

Also, change the text property to New Form

Working with SharePoint Multiple line of text

SharePoint List have the enhanced rich text, but it is only for the SharePoint multiple line of text. Now, let enable the enhanced rich text in SharePoint

Limitation with rich text editor in PowerApps and enhanced rich text in SharePoint

Now, let’s try saving a screenshot image in our form.

The first limitation is working with SharePoint single line of text. The single line of text takes up to 255 characters, the html text for any image exceeds 255 characters. It is advisable to always use SharePoint multiple line of text when working with rich text editor in PowerApps.

Next, let’s use a plain text in the short description section and submit a new request. Also, check the SharePoint List

The second limitation is working with multiple line of text. The enhanced rich text in SharePoint Multiple line of text does not recognize an image type hence, it does not save the image.

However, there is a workaround for the second limitation, simply use the plain text on your SharePoint Multiple line of text and your image will be saved.