New Multi Lookup Select Component in Creatio Freedom UI Usage and Workaround

Overview of the Component

The setup of this new multiselect control involves two key steps:

1. Creating an Object to Store Data
   You first create an object that includes two lookup columns. One column holds the selected lookup value (for example, “Contact”), and the other connects the multiselect entries to the current record (for example, “Account”).

Adding A new Object

1. Adding Contact lookup
   

   Adding Account lookup
   

The example displayed is created to connecting multiple Contact to A single Account

2. Adding the Multiselect Control to the Page
   Drag the multiselect control from the component icon onto the page. In its settings, configure:
   
   • Select lookup: Choose the lookup source from which users will select values.
   • Multiselect value storage: Link to the newly created object that holds the record’s selected values.
   • Apply filter by page data: Connect the multiselect to the current page’s data source.

Once set up, users can add multiple values from the lookup, and each selection creates a corresponding row in the related list.

Shortcomings in “Add” Mode

While the component works well when editing an existing record, there are two key shortcomings discovered when using it in an “add” or model/mini page context:

3. Foreign Key Constraint Error on New Records
   When attempting to add a new value in an add page, the system may throw the error:
   

   23503: insert or update on table "UsrMuItiContactlnAccount" violates foreign key constraint "FKImBZBpEIYcV8tLhm1jnSSWl"
   This issue typically occurs because the record is not yet saved—meaning there isn’t a valid primary key or reference to associate with the new multiselect entry.

4. Inactivity on Form Pages in Add Mode
   In form pages where the record is in “add” mode, the multiselect component remains unresponsive or “unclickable” until the record is saved. This behavior prevents users from interacting with the control, undermining the intended streamlined user experience.
   

Workarounds to Overcome These Issues

The solution to both issues involves ensuring that the record is saved before the multiselect control is utilized. By forcing a save operation, you establish the necessary references and context for the multiselect component to function correctly.

1. Saving the Record in a Model/Mini Page

To resolve the foreign key constraint error on add pages, a custom handler can be implemented that listens for a specific attribute change (in this example, ActivityDS_UsrScheduleDateTime_arkp9vi) and triggers a save operation. Once the record is saved, the component can properly reference the new record’s ID. Consider the following handler:

{
    request: "crt.HandleViewModelAttributeChangeRequest",
    handler: async (request, next) => {
        try {
            if (request.silent === false) {
                if (request.attributeName === 'ActivityDS_UsrScheduleDateTime_arkp9vi') {
 
                    console.log("Event 2 Triggered");
 
                    const saveResult = await request.$context.executeRequest({
                        type: "crt.SaveRecordRequest",
                        preventCardClose: true,
                        $context: request.$context
                    });
                    console.log("Record saved successfully:", saveResult);
                    const saveResultId = await request.$context.Id;
                    console.log("Record ID", saveResultId);
 
                    // Additional logic could be added here to navigate or update UI
                    return saveResult;
                }
            }
            return await next?.handle(request);
        } catch (error) {
            console.error("Error in attribute change handler:", error);
            return await next?.handle(request);
        }
    }
}

How It Works:

• The handler monitors changes to a specified attribute.
• Upon detecting the attribute change and confirming that the request is not silent, it executes a crt.SaveRecordRequest to save the new record.
• Once saved, the record obtains a valid ID, thus allowing subsequent multiselect operations to avoid the foreign key constraint error.

2. Activating the Multiselect on Form Pages

For form pages in add mode, the same principle applies: the record must be saved before the multiselect control becomes interactive. A similar handler can be used to save the record when the relevant attribute changes. This ensures that as soon as the record is saved, the multiselect component becomes active and clickable:

{
	request: "crt.HandleViewModelAttributeChangeRequest",
	handler: async (request, next) => {
		try {
			if (request.silent === false) {
				if (request.attributeName === 'ActivityDS_UsrScheduleDateTime_arkp9vi') {
 
					 console.log("Event 2 Triggered");
 
					const saveResult = await request.$context.executeRequest({
 
						type: "crt.SaveRecordRequest",
						preventCardClose: true,
						$context: request.$context
 
					});
					console.log("Record saved successfully:", saveResult);
					const saveResultId = await request.$context.Id;
					console.log("Record ID",saveResultId);
					if (saveResultId)
					{
 
						const handlerChain = sdk.HandlerChainService.instance;
						await handlerChain.process({
 
							type: "crt.OpenPageRequest",
							$context: request.$context,
							schemaName: "UsrPage_hio598w",
							// Replace with your actual page schema name
							modelInitConfigs: [
 
								{
									action: sdk.ModelInPageAction.Edit,
									// Open the record in edit mode
									recordId: saveResultId
								}
 
							]
						});
					}
					return saveResult;
				}
			}
 
			return await next?.handle(request);
		} catch (error) {
			console.error("Error in attribute change handler:", error);
			return await next?.handle(request);
		}
	}
}

How It Works:

• Attribute Monitoring: The handlers detect a specific attribute change that signals the user is beginning to interact with the canvas.
• Record Saving: A save operation is executed, ensuring the record obtains a valid ID.
• For Form Pages: Once the record is saved, the handler forcibly navigates to the edit mode using the handler chain service, ensuring the multiselect component is active and fully interactive.

Have a suggestion or another workaround?
If you have any additional ideas, recommendations, or alternative workarounds, please comment below and let us know.