1 min read
Part 11: Create an event handler to link the catalog and catalog success page
Navigate to UI Builder
- Navigate to Now Experience Framework > Experiences.
- Open the Experience for Panda Tech.
- On the right side of the form, Besides the Admin panel, Click on the (i) Icon to open the Admin panel.
- Click Open UI Builder.
Alternatively,
- Navigate to Now Experience Framework > UI Builder.
- From My experience, Click Panda Tech.
Create Client Script to handle submission event
- Open Catalog page.
- From the left side of the page, Click Client Script
- Click + Add to create new client script
- Set Script name as Handle catalog submission
- In the script section add following code snippet
const { payload: params } = event; const route = "catalog-success"; api.emit('NAV_ITEM_SELECTED', { route, params });
- Click Save on the top to save the page
Understanding the code snippet
- The catalog Item component triggers the event “Request generated”
- This event pass params to the event hook client script (Line 1 to 3 in the above snippet)
- We pass these params to the catalog-success route
- This params object if you console it looks like this.
{ table: "sc_request", sysId: "6533b5681b6ee41055d39acf034bcb76", number: "REQ0010006" }
Add event handler on catalog submission
- Open Catalog page.
- Click Cat Item component from the Content panel.
- From Properties window, click Events
- Click + Add a new event handler
- Select Handle catalog submission from scripts section and click Add
- Click Save on the top to save the page
Test the configuration
- Navigate to Request > External Monitor
- Click Order now
- End result should be something like this.
Great!! We have successfully hooked event catalog submission page