---
sourceDocument: Australia Customer Service Management
sourceDocumentLink: https://www.servicenow.com/docs/r/customer-service-management

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Sample code for the Catalog item component

# Sample code for the Catalog item component {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Sample code is provided to define an action when an event is triggered. Update the sample code for your use case before embedding the component on your webpage.

## Sample code {#we-catalog-item-sample-code__section_nyw_2yn_c2c}

    { 

    'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_NOTIFICATION_SENT' : (e) => { 

    // This event is dispatched when the component provides a notification for the end user. 

    var {items} = e.detail.payload; 

    console.log(items); 

    }, 

    'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_ERROR' : (e) => { 

    // This event is dispatched when a property validation or internal error occurs. 

    var {errorMessage, errorType} = e.detail.payload; 

    console.log(errorMessage, errorType); 

    }, 

    'SN_EMBEDX_CATALOG_ITEM_FORM#RECORD_CREATION_SUCCEEDED' : (e) => { 

    // This event is dispatched if the record was successfully created. 

    var {table, record_sys_id} = e.detail.payload; 

    console.log(table, record_sys_id); 

    }, 

    'SN_EMBEDX_CATALOG_ITEM_FORM#BUTTON_CLICKED' : (e) => { 

    // This event is dispatched if any button is clicked on the confirmation message. 

    var {table, record_sys_id, button_variant} = e.detail.payload; 

    var primaryURL = '/caseview'; // Replace with the URL of the case view page 

    var secondaryURL = '/browse'; // Replace with the URL of the secondary page 

     

    if(button_variant == 'primary') { 

    // Construct the URL for the Case View component with URL parameters 

    const caseViewURL = primaryURL+'?emb_table='+table+'&emb_recordid='+record_sys_id; 

    open(caseViewURL,'_self'); // Open case record when primary button is clicked 

    } 

    else { 

    // Open the Case View component in the same tab 

    open(secondaryURL,'_self'); 

    } 

    }, 

    'SN_EMBEDX_CATALOG_ITEM_FORM#RECORD_CREATION_FAILED' : (e) => { 

    // This event is dispatched if the record creation has failed. 

    }, 

    'SN_EMBEDX_CATALOG_ITEM_FORM#COMPONENT_READY' : (e) => { 

    // This event is dispatched when a component is ready and usable. 

    }

**Related tasks**   

* [Configure the Catalog item component instance](https://www.servicenow.com/docs/y9Vr4tAESkk8rUUhFFhuRQ "Configure the Catalog item component instance so that your users can embed it on their website to request an item or service from their website.")
* [Embed the Catalog item component instance on the third-party website](https://www.servicenow.com/docs/d3RyVEBKRIYzzTSITFz8EA "Embed the global code and component code of the Catalog item component instance that you configured so that you can enable your customers to start using the Catalog item component instance on your third-party website.")  
**Related reference**   

* [Component properties for the Catalog item](https://www.servicenow.com/docs/TcdpT7H8UFZREAAIESesOQ "Component property enables you to configure the behavior of the Catalog item component instance on the third-party website.")
* [Event handler in the Catalog item component](https://www.servicenow.com/docs/WiatSNq3h5rrYeM9bFC~xg "A component triggers an event when a certain condition is met or on user interaction. The event can be used to execute an action through a code on a third-party webpage.")