Adding Custom Rich Text Editors to a Page in Creatio

Most sections in Creatio have an Attachment and Notes tab. On this tab you’ll see a rich text editor that allows for HTML content with fonts, text size, colors, tables, and even embedded images. You can create custom rich text editors, just like this one, with just a few simple steps. Your end result will be a fully-functioning rich text editor, just like the one that comes out of the box.

STEP 1: Add an Unlimited Text Field to the Page

The first step is to add the column that will store the contents of the rich text editor. This should be an unlimited length text field. Add this to the page where you’d like the rich text editor to display.

STEP 2: Modify the Text Field in the Diff

Next, you’ll need to locate the text field you added in step #1 in the diff of the page code. The easiest way to do this is to just do a CTRL+F/Command+F and search for the field name. Once you locate it, you’ll add the following into the “values” part of the field:

"contentType": Terrasoft.ContentType.RICH_TEXT

That alone is enough to make the control appear as a rich text editor (Note, sometimes the wizards will change this to “contentType”: 4 – which is also valid and nothing to worry about). However, if you want to be able to add images to the rich text, you’ll also need to add the following (also added to the “values” section):

"controlConfig": {
	"imageLoaded": {
		"bindTo": "insertImagesToNotes"
	},
	"images": {
		"bindTo": "NotesImagesCollection"
	}
}

This will bind the image handling in the rich text editor to the ones that already exist on the page. Lastly, rich text controls look nicer without the label, so I’d also add the following to the “values” as well:

"labelConfig": {
	"visible": false
}

The complete element in the diff will look something like the following:

{
	"operation": "insert",
	"name": "UsrMarketingSignaturee7ab2c68-170d-458b-a3bc-d7ca046ee2cc",
	"values": {
		"layout": {
			"colSpan": 24,
			"rowSpan": 1,
			"column": 0,
			"row": 0,
			"layoutName": "MarketingProfileTabGridLayout2c810a4b"
		},
		"bindTo": "UsrMarketingSignature",
		"enabled": true,
		"contentType": Terrasoft.ContentType.RICH_TEXT,
                 "labelConfig": {
			"visible": false
		},
		"controlConfig": {
			"imageLoaded": {
				"bindTo": "insertImagesToNotes"
			},
			"images": {
				"bindTo": "NotesImagesCollection"
			}
		}
	},
	"parentName": "MarketingProfileTabGridLayout2c810a4b",
	"propertyName": "items",
	"index": 0
}

Now the rich text control will be fully functioning, just like the ones out of the box.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) and Creatio (bpm'online) news and product updates!

You have Successfully Subscribed!