Open a custom Freedom UI page from a custom button on Opportunity edit page and pass the Opportunity record Id to the custom page

Hello,

I'm trying to implement a custom page that is opened by clicking a custom button on the opportunity edit page. In the custom page, I'm trying to retrieve the opportunity record id but it is null everytime. Here below you can find my current implementation.

In Opportunity edit page, i've implemented the following.

define("UsrOpportunities_FormPage_em4fpxb", /**SCHEMA_DEPS*/["@creatio-devkit/common"]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/(sdk)/**SCHEMA_ARGS*/ {
	return {
		viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
			...
			{
				"operation": "insert",
				"name": "BtnOpenPodManager",
				"values": {
					"type": "crt.Button",
					"caption": "#ResourceString(BtnOpenPodManager_caption)#",
					"color": "primary",
					"clickMode": "default",
					"clicked": { "request": "usr.OpenPodManager" },
					"size": "large",
					"iconPosition": "only-text",
					"visible": true
				},
				"parentName": "ActionButtonsContainer",
				"propertyName": "items",
				"index": 0
			},
			...
		]/**SCHEMA_VIEW_CONFIG_DIFF*/,
		...
		handlers: /**SCHEMA_HANDLERS*/[
			{
				request: "usr.OpenPodManager",
				handler: async (request, next) => {
					const handlerChain = sdk.HandlerChainService.instance;
					const oppId = request.$context?.Id;
 
					console.log("Opportunity Id:", oppId); // record id available
 
					await handlerChain.process({
						type: 'crt.OpenPageRequest',
						schemaName: 'UsrOpportunityPodManagerPage',
						$context: request.$context,
						modelInitConfigs: [{defaultValues: [{OpportunityId: oppId}]}], // setting the record Id to pass it to the custom page
						scopes: [...request.scopes]
					});
 
					return next?.handle(request);
				}
			}
		]/**SCHEMA_HANDLERS*/,
	};
});

In Custom page, I've implemented the following:

define("UsrOpportunityPodManagerPage", [], function () {
	return {
		...
		handlers: [
			{
                request: "crt.HandleViewModelInitRequest",
                handler: async (request, next) => {
                    const ctx = request.$context || {};
                    let opptyId = ctx.OpportunityId; // trying to read the opportunity record Id
 
                    // Propagate
                    ctx.OpportunityId = opptyId;
                    const res = await next?.handle(request);
 
					console.log("[PodManager] OpportunityId:", opptyId); // the value is null everytime
 
                    return res;
                }
            },
			...
		],
		...
	};
});

The issue is that in the crt.HandleViewModelInitRequest the value of ctx.OpportunityId is null.

What I'm doing wrong? How I can solve this issue?

Thanks,

Matteo

Like 0

Like

1 comments

Hi Matteo,

crt.OpenPageRequest in Freedom UI does not support page parameters. As a workaround you can implement this using the browser’s native BroadcastChannel API to pass values.

Here is an example:

Sender page handler

handlers: /**SCHEMA_HANDLERS*/[
	{
		request: "usr.OpenPodManager",
		handler: async function (request, next) {
			const handlerChain = sdk.HandlerChainService.instance;
			const oppId = await request.$context.Id;
 
			// Wait for the receiver page to signal it's ready
			const bc = new BroadcastChannel("Ready");
			bc.onmessage = (event) => {
				if (event.data?.type === "Ready") {
					// Send the value to the receiver page
					const sender = new BroadcastChannel("OpportunityId");
					sender.postMessage({
						type: "OpenReceiverPage",
						payload: { OpportunityId: oppId }
					});
					sender.close();
					bc.close();
				}
			};
 
			// Open the receiver page
			await handlerChain.process({
				type: 'crt.OpenPageRequest',
				schemaName: 'UsrOpportunityPodManagerPage',
				$context: request.$context,
				scopes: [...request.scopes]
			});
 
			return next?.handle(request);
		}
	}
]/**SCHEMA_HANDLERS*/

Receiver page handler

handlers: /**SCHEMA_HANDLERS*/[
	{
		request: "usr.HandleViewModelInitRequest",
		handler: async function (request, next) {
			await next?.handle(request);
 
			// Notify the sender page that the receiver page is ready to receive data
			const readyChannel = new BroadcastChannel("Ready");
			readyChannel.postMessage({ type: "Ready" });
			readyChannel.close();
 
			 // Listen for the data from the receiver page
			const bc = new BroadcastChannel("OpportunityId");
			bc.onmessage = (event) => {
				if (event.data?.type === "OpenReceiverPage") {
					const oppId = event.data.payload?.OpportunityId;
				}
			};
		}
	}
]/**SCHEMA_HANDLERS*/
Show all comments