---
sourceDocument: Australia Customer Service Management
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/customer-service-management

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Customer Service Management

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# Sample code for the Catalog browse component

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

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

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-browse-samp-code__section_rcm_ndt_zfc}

    { 

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

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

    }, 

    'CATALOG_BROWSE#CATALOG_ITEM_SELECTED' : (e) => { 

    // This event is dispatched when a catalog item is selected. 

    var {catalog_item_details} = e.detail.payload; 

    // Logic to construct the URL based on the catalog item details 

    let redirectURL; 

    const type = catalog_item_details.type; 

     

    if (type === 'catalog_item' || type === 'record_producer') { 

    redirectURL = '/catalog_form?emb_recordid=' + catalog_item_details.sys_id; 

    } else if (type === 'content_item') { 

    const content_type = catalog_item_details.content_type; 

    if (content_type === 'kb') { 

    redirectURL = '/article_view?emb_recordid=' + catalog_item_details.kb_article; 

    } else if (content_type === 'external') { 

    redirectURL = catalog_item_details.url; 

    } else if (content_type === 'dynamic') { 

    const dynamicContentItemDetails = catalog_item_details.dynamicContentItemDetails; 

    // Check for 'Playbook' dynamic content type 

    if(dynamicContentItemDetails.dynamicContentType === 'c0e6a71443923110f6669c7385b8f20a') 

    redirectURL = '/playbook_intake?emb_playbook_title=' + dynamicContentItemDetails.content.title + '&emb_table=' + dynamicContentItemDetails.content.table + '&emb_record_generator=' + dynamicContentItemDetails.content.query + '&emb_playbook_experience=' + dynamicContentItemDetails.content.playbook_experience; 

    } 

    } 

    // Redirect to the respective component page 

    open(redirectURL, '_self'); 

    }, 

    'CATALOG_BROWSE#COMPONENT_EMPTY' : (e) => { 

    // This event is dispatched when a component has nothing to display. 

    }, 

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

    // This event is dispatched when a component encounters an error. 

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

    console.log(errorMessage, errorType); 

    } 

     
**Tarefas relacionadas**   

* [Configure the Catalog browse component instance](https://servicenow-prod.fluidtopics.net/Bsy6dSGklRHNcSBnlmYhBA "Configure the Catalog browse component instance so that your user can embed it on their website to browse and search catalog items from different catalogs and categories.")
* [Embed the Catalog browse component on the third-party website](https://servicenow-prod.fluidtopics.net/uo23vzZ9rP9UI8Ce5CBKAQ "Embed the global code and component code of the Catalog browse component that you configured in your instance so that you can enable your customers to start using the component on your third-party website.")  
**Referência relacionada**   

* [Component properties for the Catalog browse](https://servicenow-prod.fluidtopics.net/rOYjuCwug33geYO53mWR4g "Component property enables you to configure the behavior of the Catalog browse component on the third-party website.")
* [Event handlers in the Catalog browse component](https://servicenow-prod.fluidtopics.net/1fcf0eWYoS9SGNYtvg5KiQ "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.")