---
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-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. 

    }

**関連タスク**   

* [カタログアイテムコンポーネントインスタンスの構成](https://servicenow-prod.fluidtopics.net/uMIUbD3mFoXump0sHmyh7Q "ユーザーが Web サイトに埋め込み、Web サイトからアイテムまたはサービスを要求できるように、カタログアイテムコンポーネントインスタンスを構成します。")
* [サードパーティ Web サイトにカタログアイテムコンポーネントインスタンスを埋め込む](https://servicenow-prod.fluidtopics.net/FCbUkLBVkGZGWFm72xGPtg "顧客がサードパーティの Web サイトでカタログアイテムコンポーネントインスタンスの使用を開始できるように、構成したカタログアイテムコンポーネントインスタンスのグローバルコードとコンポーネントコードを埋め込みます。")  
**関連資料**   

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