1 min read

Part 11: Create an event handler to link the catalog and catalog success page

  • 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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.