How to add a rich text editor on CDS field

Recently, I was working on one of our IPs involving CDS (common data service) entity form with different data type fields. My requirement was to use multiline text area field with rich text editor control. So, I was thinking how can I use the ready-made rich text editor component to fulfill my needs.

In this blogpost, I will take you guys step by step to understand how we can set it up. But before we move any further let’s get to know what can you do with this awesome component?

It’s very interesting that in Microsoft release wave 2, you can have ready-made rich text editor with awesome features. Such as, adding multiple formats, including bold/italic/underline, change font color, add highlighting, inline images, inline tables, etc.

Let’s walk through step by step to add this component in our multiline text field to fulfill our requirement.

  • Navigate to https://make.powerapps.com
  • Add a field in CDS table named as “Demo Field”. You can change as per your requirement
  • Navigate to advance option and set the field character length 1,048,576. (maximum)
  • Click Finish to create the field – Save entity

texteditor1 - How to add a rich text editor on CDS field

  • Open the Form where you want to add that field
  • In the Form Editor, find the field you just created and add it to the form and in the Formatting option, increase the Field Height to 10. You can adjust according to your needs.
  • Save, and then Publish
  • Click the Switch to Classic option

texteditor2 - How to add a rich text editor on CDS field

This will open Classic Solution Designer in a new browser tab. Here you can find the field you just created on the form in the same place.

  • Double-click the field to open it for editing and the Field Properties box will appear
  • Select the control tab and click Add controls

texteditor3 - How to add a rich text editor on CDS field

texteditor4 - How to add a rich text editor on CDS field

  • Scroll down a little and select the Rich Text Editor – Click Add

texteditor5 - How to add a rich text editor on CDS field

  • Next Select all radio buttons in the rich text editor control to make it the default control for this field – Click OK

texteditor6 - How to add a rich text editor on CDS field

  • Click the Save button and after few seconds, click the Publish button.

We are all done! Now, let’s go back to our application, refresh the browser to get the published changes, and we will see the rich text editor field that can be used!

texteditor7 - How to add a rich text editor on CDS field

I hope found this blog post helpful. Please feel free to contact us at info@kaispe.com or you can visit our website www.kaispe.com.

Leave a Reply

avatar
  Subscribe  
Notify of