---
sourceDocument: オーストラリアのカスタマーサービス管理 (CSM)
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/customer-service-management

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリアのカスタマーサービス管理 (CSM)

ft:clusterId :

    - csm

bundleId :

    - csm

workflow :

    - Customer and Industry


---

# カタログ参照コンポーネントのサンプルコード

# カタログ参照コンポーネントのサンプルコード {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：3分

イベントがトリガーされたときのアクションを定義するためのサンプルコードが用意されています。コンポーネントを Web ページに埋め込む前に、ユースケースのサンプルコードを更新します。

## サンプルコード {#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); 

    } 

     
**関連タスク**   

* [カタログ参照コンポーネントインスタンスの構成](https://servicenow-prod.fluidtopics.net/~lwiMXAb5XMph2D7Ju5onA "ユーザーが Web サイトに埋め込み、さまざまなカタログやカテゴリのカタログアイテムを参照および検索できるように、カタログ参照コンポーネントインスタンスを構成します。")
* [サードパーティ Web サイトにカタログ参照コンポーネントを埋め込む](https://servicenow-prod.fluidtopics.net/EYt137N2IGCam6wywl6_YA "インスタンスで構成したカタログ参照コンポーネントのグローバルコードとコンポーネントコードを埋め込み、顧客がサードパーティの Web サイトでコンポーネントの使用を開始できるようにします。")  
**関連資料**   

* [カタログ参照のコンポーネントプロパティ](https://servicenow-prod.fluidtopics.net/us6HCwcUXum7JIKb4NcgwQ "コンポーネントプロパティを使用すると、サードパーティの Web サイトでのカタログ参照コンポーネントの動作を構成できます。")
* [カタログ参照コンポーネントのイベントハンドラー](https://servicenow-prod.fluidtopics.net/RQ7LOZOWAGuRAxiEsko96w "コンポーネントは、特定の条件が満たされたとき、またはユーザーのインタラクション時にイベントをトリガーします。このイベントを使用して、サードパーティ Web ページのコードを介してアクションを実行できます。")