# Add Copilot into Rich Text Control

Hello, my friends,

Did you use the Copilot on Email form?

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FPEUBrFuFs4atrbMjLMME%2FCleanShot%202024-05-11%20at%2008.41.07%402x.png?alt=media&#x26;token=b212efc6-5219-439a-91a9-86cd7e76f4c5" alt=""><figcaption><p>Copilot in the Email</p></figcaption></figure>

Both my client and I have tested this solution and found it effective. Copilot can enhance these suggestions by making them clearer, more concise, and more engaging.

Subsequently, I discovered that **this Copilot functionality** can be **integrated** with the **Rich Text Editor control** for **any desired entity**, enhancing its functionality.

## 1. How to add the Rich Text Editor control?

{% hint style="info" %}
**Reference link:** <https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/copilot-control>
{% endhint %}

I created a custom entity called "**Devices"** in my Sales Hub app.\
After that, I created a field "<mark style="color:red;">**Note**</mark>" - with type: *<mark style="color:red;">**Multiple lines of text**</mark>*

Okay.. firstly, I will add the *Rich Text Editor control* for the field "Note" on the Device's main form without any customizations.

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2Fxny32bpIvIZKC93i4owA%2FAdd_Rich_Text_Control_device_form.png?alt=media&#x26;token=d1e9d12e-e52f-48c6-8531-7757e58f4fee" alt=""><figcaption><p>Origin Rich Text Editor Control - on Device form</p></figcaption></figure>

The original Rich Text Editor control (green box) has no **Copilot** butto&#x6E;**.**&#x20;

## 2. Customize Rich Text Editor Control - Add Copilot button

### 2.1 Create Web Resource - add Copilot to rich text editor control

Now, I will create the Web Resource to add the Copilot button in the Rich Text Editor control on the Device Main form.

In my solution, I created a web resource as below. You can find the sample code from [MS Link.](https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/copilot-control)

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FvFmeWnf0l4XjAUMWqObE%2FWeb%20Resource%20Copilot%20Rich%20Text.png?alt=media&#x26;token=0850a8b2-3fa7-49ca-9166-b3c07d4ab4c1" alt="" width="563"><figcaption><p>Web Resource to add "Copilot" button in the Rich Text Editor control</p></figcaption></figure>

My sample code as below:

```javascript
// JavaScript
{"defaultSupportedProps": {
    "extraPlugins": "copilotrefinement",
    "toolbarLocation": "bottom",
    "toolbar":[{ "items": ["CopyFormatting","FontSize", "Bold", "Italic", "Underline", "BGColor", "CopilotRefinement"]}]
}
}
```

{% hint style="info" %}
For more Rich Text Editor control customization, you can find the [**Link**](https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/rich-text-editor-control)**.**
{% endhint %}

### 2.2 Add Web Resource into Rich Text Editor control on the form

Finally, we need to add this web resource for the Rich Text Editor control on entity Form - as my sample is **Device form.** Then **Save and Publish** the form.

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FGxHpvP6BlXdnoeFLkeil%2FAdd_WebResource_to_RichTextEditor_onForm.png?alt=media&#x26;token=9cc22f77-3300-4b98-987d-381fdb86a33c" alt=""><figcaption><p>Add Relative URL (of Web Resource) in the Static Value of the Rich Text Editor control</p></figcaption></figure>

{% hint style="info" %}
As Microsoft Recommendation:&#x20;

*"If you want to* [*customize the editor*](https://learn.microsoft.com/en-us/power-apps/maker/model-driven-apps/rich-text-editor-control#customize-the-rich-text-editor-control)*, enter the <mark style="color:red;">relative URL</mark> of its configuration file, a JavaScript web resource that contains the properties you want to change, in the <mark style="color:red;">**Static value**</mark> box. If you leave this field empty, the editor uses its default configuration".*
{% endhint %}

### Testing now\...

Check the result now\... :relaxed:

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FCUbEJ3zxlTCtkF8S5KE5%2FTes_Copilot_RichTextEditor.gif?alt=media&#x26;token=c330dd67-44fd-400d-8543-f64d7d2a0f2d" alt=""><figcaption><p>Testing - Copilot in Rich Text Editor</p></figcaption></figure>

**At present,** the Copilot feature for Rich Text Editor control is limited to refining paragraphs, but there is hope that this functionality will become more robust soon.

Thank you for reading & Hoping well. :tada: :goal:\
\&#xNAN;**\[NTD]yns.asia**