Defaulting the TO address in the Creatio Freedom UI Email Message Composer

The Freedom UI Message Composer component is used for things like posting a message to a feed or sending an email message. When you’re using it for sending an email message, the EmailComposer sub component is used. This article will cover how to default the “TO” of the email.

Scenario

In this scenario, I will be adding the Message Composer to the contact edit page. I’ve added it to the Timeline tab, so it works in a similar way to how it does on the Case edit page. The end result will be that you can send the contact an email from the Timeline tab in the same way as sending an email from a case. The To of the email will default to the email address of the contact.

Retrieving the Contact Email Address

The first thing we’ll need to do is to be able to get the contact’s email address. The email address itself doesn’t exist on the contact page. What you’re seeing on the contact page is the Communication Options component, which displays the email and phone numbers. So, this means that we can’t just retrieve the email from an attribute since it’s not part of the page’s data source. However, we’ll add the Email and Name to the page’s datasource by merging them in the viewModelConfigDiff. See an article on that topic here. Our code to add those will look as follows:

viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[
	{
		"operation": "merge",
		"path": [
			"attributes"
		],
		"values": {
			"ContactEmail": {
				"modelConfig": {
					"path": "PDS.Email"
				}
			},
			"ContactName": {
				"modelConfig": {
					"path": "PDS.Name"
				}
			}
		}
	}
]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,

With those added to the page’s data source, we’ll be able to retrieve them normally using those attributes.

Setting the Email Message Composer’s TO Attribute

The Email Message Composer’s TO field is bound to an attribute that will be the same as the EmailComposer’s name (The EmailComposer, not the MessageComposer), followed by “_To”. If my EmailComposer component is named “EmailComposer_tznu5e0” the attribute for the To will be “EmailComposer_tznu5e0_To”. One thing to note, this attribute is expecting an array of strings, not jus a single string. We’ll get the email value when the page loads and model is ready, then set the To attribute using the following code:

{
	request: "crt.HandleViewModelInitRequest",
	handler: async (request, next) => {
		await next?.handle(request);
                  
		request.$context.events$.subscribe((async (evt) => {
			const modelMode = await request.$context.getPrimaryModelMode();

			if (modelMode === "update" && evt?.type === "finish-load-model-attributes" && evt?.payload?.ContactEmail && evt?.payload?.ContactName) {
				// get email and name values from loaded data
				const email = await request.$context.ContactEmail;
				const name = await request.$context.ContactName;
				const toAddress = (email ? name + " <" + email + ">" :"");
				
				// set as "To" - make sure to enclose email in an array
				request.$context.EmailComposer_tznu5e0_To = [ toAddress ];
			}
        
		}));
	}
}

The end result will look as follows: