Hi @IronPotato,
do you know how to perform this miracle?
I am having the same issue as @nwilliam . I managed passing params down to the page collection page using a controller, but my event won't bubble up from the child page (page collection) to the parent page. I had the same issue when creating custom components, but it is possible to fix it by adding the event manually in the "eventMappings" (page definition) of that component. Unfortunately this does not seem to work for Viewport Components with Page Collections.
On the child page I added a dispatch event on the body, that is triggered by a click event on a button:
On the parent page I added the same event in the body's handle event section:
Now calling this handled event like in the above video does not work for me.
Hi @IronPotato,
do you know how to perform this miracle?
I am having the same issue as @nwilliam . I managed passing params down to the page collection page using a controller, but my event won't bubble up from the child page (page collection) to the parent page. I had the same issue when creating custom components, but it is possible to fix it by adding the event manually in the "eventMappings" (page definition) of that component. Unfortunately this does not seem to work for Viewport Components with Page Collections.
On the child page I added a dispatch event on the body, that is triggered by a click event on a button:
On the parent page I added the same event in the body's handle event section:
Now calling this handled event like in the above video does not work for me.
here's the step by step guide.
1. Add Handled Event (first) on your Parent Page (examples MESSAGE, NEW_MESSAGE, in my case TOTAL) with payload variables (example name: message, label: Message, type: String) and save the page.
2. Go to your child page (refresh page if you have it open in separate TAB) and go to your component where you want to trigger event to parent. Add event handler and select your new event from Inherited event handlers and save the page. (THIS WILL CREATE EVENT RELAY ON YOUR CHILD PAGE WHICH YOU WILL VERIFY BY GOING INTO PAGE EVENTS. IT WILL ADD "Relay" SUFFIX TO YOUR EVENT ON PAGE LEVEL AND IT WILL ALSO CREATE DISPATCHED EVENTS AUTOMATICALLY).
3. Under your new message relay (in my example TOTAL Relay (Default)) add your event and pass there @payload.message (your payload variable) if its not already added for you.
4. Go back to your parent page and under page events add your event under Page event mappings. This will add this event on page level where you can execute/refresh/log anything you need. Simple test would be to add client script where you just simply console.log('this is from child');
5. Now refresh your Application Page and test the result.
We are done!
EXTRA BONUS TIP: once relay event is created it will add sys_id into this event and you can event trigger them from client scripts.
You can invoke them like this: api.emit('TOTAL_RELAY_eca5c71a47f37d109fe397da116d43f7', {
message: 'Hello World!'
})
Hope that helps. Please make this post helpful if you it will work for you.
🙂
Thank you @IronPotato for the great step by step guide!
I was able to do it this way for the normal "viewport", but if I choose "Page collections" I don't get the parent's event in my "Inherited event handlers" (Step 2).
My work around is to first create a viewport, do step 1 and 2, then create another one using "Page collections" and manually add the previously created events in the page definition of that child page:
Then I can follow your steps 3-5 and it works!
I'm on Washington btw.
