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