Hi Sundaram R,
You cant use "SEND MESSAGE" in a page collections variant event mappings,
So custom events from a page collection wont reach the parent page using the same method as subpages.
Recommended you to Use a client state to communicate. Below are the steps to implement:
Step1: Create a client state in the parent page
1. Go to the Parent page in UI builder.
2. In the right panel, click "Client State"
3. Create a new client state:
Name: collectionEvent
Type: Object
Default: {}
Step 2: Set the state from the page collection page
1. Open the page inside the page collection
2. select the component that will trigger the event (e.g a button)
3. Add an event handler:
Action: Set Client State.
Target State: collectionEvent
value:
{
"type: "MY_CUSTOM_EVENT,
"message": "Hello from page collection"
}
Step 3: Handle the event in the parent page. You can use two options here based on your feasibility
Option A: Use a view model
1. Add a view model to the parent page.
2. Use the below code:
export default function ViewModel ( { state } ) {
effect (() => {
if (state.collectionEcebt?.type === 'My_CUSTOM_EVENT') {
console.log('Received event:', state.collectionEvent.message);
//Handle event here
//Optional: Reset the state after handling
state.collectionEvenr = {};
}
}, [state.collectionEvent]);
return {};
}
Option B: Use Conditional Wrapper (No Code)
1. Add a Conditional Wrapper component.
2. Bind the condition to:
$client.state.collectionEvent.type === 'My_CUSTOM_EVENT'
3. Inside the wrapper, place any components or actions you want to trigger.
*This approach allows any page inside a page collection to communicate with the parent page using client state - a clean, supported workaround.
If my response helped please mark it correct and close the thread so that it benefits future readers.
Regards,
Madhuri
