Freedom UI DataGrid: handle hover on a cell/row. Tooltip on masked column

Hello Krzysztof,

I have not found any native or supported way to handle hover events for a DataGrid cell or row. Using DOM-based workarounds such as querySelector(...).addEventListener(...) is not recommended, because the DOM structure is internal and may change in future Creatio updates.

As a supported workaround for displaying a tooltip, I tested the following approach.

The crt.EncryptedInput component supports the tooltip property. Since the Creatio DataGrid allows you to customize how cells are displayed, I added a custom cell to the DataTable (crt.DataGrid) and used crt.EncryptedInput inside it:

{
	"operation": "merge",
	"name": "DataTable",
	"values": {
		"columns": [
			{
				// ... other columns ...
			},
			{
				"id": "EncryptedTooltipColumn",
				"code": "PDS_EncryptedTooltip",
				"caption": "#ResourceString(PDS_EncryptedTooltip)#",
				"cellView": {
					"type": "crt.EncryptedInput",
					"control": "$Items.PDS_UsrEncryptedString",
					"readonly": true,
					"tooltip": "$Items.PDS_Id | usr.UnmaskValue"
				}
			}
		]
	}
}

Where:

• id - unique identifier for the column
• code - unique column code, must be formed according to the pattern [data source code]_[column code], for example PDS_DeleteAction
• caption - resource string macro for the column header
• cellView - cell view config, where you can specify any input or bind it to a column value

Why is the tooltip property bound to $Items.PDS_Id and not to $Items.PDS_UsrEncryptedString? The reason is in how the value unmasking works in Creatio.

To see the value in the UI, you need to click on the “Show value” icon next to the value input field:

If you inspect how the "Show value" option is working, you will find that it calls for the "ValueUnmaskingService" internal web service and its "GetUnmaskedValue" endpoint:

You need to pass this endpoint an object containing a schema name, a column name, and a record ID.

Therefore, the custom converter receives the record ID and uses the Creatio DevKit SDK to retrieve the unmasked value:

converters: /**SCHEMA_CONVERTERS*/{
	"usr.UnmaskValue": async function(value) {
		const httpClientService = new sdk.HttpClientService();

		const endpoint = "ServiceModel/ValueUnmaskingService.svc/GetUnmaskedValue";
		const body = {
			"schemaName": "SchemaName", // use your schema name
			"columnName": "UsrEncryptedString", // use your column name
			"recordId": value
		};

		const response = await httpClientService.post(endpoint, body);

		return response.body.unmaskedValue;
	}
}/**SCHEMA_CONVERTERS*/

After saving the configuration, open the page in the Freedom UI page designer and set the column title:

The result is that the encrypted value remains displayed through crt.EncryptedInput, while the tooltip shows the unmasked value.:

One important concern is performance. When the list page opens, in addition to the main SelectQuery, Creatio sends a separate request to 0/ServiceModel/ValueUnmaskingService.svc/GetUnmaskedValue for every record currently present in the DOM. This may affect page loading time if the list contains many visible records: