---
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) 所要時間：12分

データビジュアル化コンポーネントインスタンスを構成して、ユーザーが Web サイトに埋め込み、任意の ServiceNow テーブルから単一スコア、円グラフ、ドーナツグラフ、または半ドーナツグラフの形式で情報を直接表示できるようにします。

## 始める前に

データ可視化コンポーネントインスタンスを構成するには、次のセットアップが必要です。

* インスタンスで Web 埋め込み可能 を有効にします。詳細については、「[Web 埋め込み可能 のアクティブ化](https://servicenow-prod.fluidtopics.net/3DKvoXXZsHZc4u08RQRTQQ "カスタマーサービス (sn_cx_components) の ServiceNow コンポーネント、ゲストの Web コンポーネント (sn_guest_component)、および Web 埋め込み可能コア (sn_embeddable_core) を有効にして、インスタンスで Web 埋め込み可能 を有効にすることができます。このアプリケーションは、まだインストールされていない関連プラグインを確立します。")」を参照してください。
* [カスタム URL をインスタンス URL として設定](https://servicenow-prod.fluidtopics.net/wS0HjuvEaanOh7TGO_kH7Q "使用するインスタンス構成に、ServiceNow URL の代わりにカスタム URL を追加します。このカスタム URL により、サードパーティの Cookie がオフになっている場合でも、ブラウザで埋め込みコンポーネントに引き続きアクセスできるようになります。")。
* OpenID Connect (OIDC) 認証または非 OIDC 認証を使用して、 ServiceNow コンポーネントを認証します。詳細については、「[OIDC を使用した ServiceNow コンポーネントの認証](https://servicenow-prod.fluidtopics.net/ddfwYpuYBuQ8FHVjg_URrA "OpenID Connect (OIDC) 認証を使用して自動ログインとログアウトを設定し、Web サイトや埋め込みコンポーネントで単一のログイン/ログアウトや同時ログイン/ログアウトを行えるようにします。")」と「[ServiceNow コンポーネントの非 OIDC 認証](https://servicenow-prod.fluidtopics.net/oUu5w6cTytujPpcjcjZshg "Web サイトで OpenID Connect (OIDC) 認証を使用しない場合は、JSON Web トークン (JWT) トークンを生成して ServiceNow コンポーネントを認証します。")」を参照してください。
{#config-data-viz-comp__ul_brf_cqf_ccc}

必要なロール:sn_embeddable_core.emb_admin

## 手順

1. 移動先 すべてWeb 埋め込み可能ホームページ.
2. ホームページで、\[モジュールの作成\] を選択するか、既存のモジュールを使用します。  
   新しいモジュールの作成の詳細については、「 [モジュールを作成](https://servicenow-prod.fluidtopics.net/dDeTk~6YSf1NJjA_4gpmpQ "Web サイトで使用されるコンポーネントインスタンスを管理するためのモジュールを作成します。モジュールを作成するか、構築済みのモジュールを使用して要件に応じて編集することができます。")」を参照してください。
3. モジュールページの \[コンポーネント\] タブで、データビジュアル化コンポーネントインスタンスを既存または新規のグループに追加します。  
   グループを作成してからコンポーネントインスタンスを追加する方法の詳細については、「 [グループの作成とコンポーネントインスタンスの追加](https://servicenow-prod.fluidtopics.net/TmdEAY0orFj5nCaIhB5y2A "ページやセクションなどのサードパーティの Web サイト構造をモデル化するグループを作成します。デフォルトのグループを使用するか、新しいグループを作成して、そのページまたはセクションのコンポーネントインスタンスを管理します。")」を参照してください。
4. データビジュアル化コンポーネントのインスタンスプロパティを構成します。  
   * \[プレビュー\] タブには、コンポーネントプロパティで設定された選択肢に従ってリアルタイムデータが表示されます。
   * データビジュアル化コンポーネントインスタンスに関連するコンポーネントプロパティの説明については、「 [データ可視化のコンポーネントプロパティ](https://servicenow-prod.fluidtopics.net/rITKBtrhwHiuf54fRcrj_w "コンポーネントプロパティを使用すると、サードパーティの Web サイトでのデータ可視化コンポーネントインスタンスの動作を構成できます。")」を参照してください。
   {#config-data-viz-comp__ul_jlw_yjw_cfc}
5. \[ CORS ルール \] タブを選択して、CORS ルールを構成します。  
   CORS ルールの構成の詳細については、「 [ServiceNowコンポーネントを埋め込む前に CORS (クロスオリジンリソース共有) ルールを構成する](https://servicenow-prod.fluidtopics.net/myQcJ8PC1kM9u7dlhnsbCw "ServiceNow コンポーネントと Web コンポーネントを埋め込む Web サイト間のクロスドメイン要求を有効にするように CORS ルールを設定します。")」を参照してください。
6. \[ コンポーネント \] タブを選択します。  
   アプリケーションスコープに関するメッセージが表示された場合は、スコープを \[カスタマーサービスの Web コンポーネント \] に変更して、レコードを編集できるようにします。
7. \[埋め込みコードの取得\] を選択します。  
   グローバルコードとコンポーネントコードの両方を表示するポップアップウィンドウが表示されます。
8. \[グローバル コード\] タブで、生成されたコードを確認し、\[ グローバル コードのコピー\] を選択します。  
   グローバルコードは、サードパーティのウェブページに一度だけ追加する必要があります。

       import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';

       await init({
           theme: 'fad87d2ca304121029a4d1aed31e610f',  /* sys_id of the theme to use for the embeddable components in your website */
           baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */
           authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */
           module: '591800ffc1243610f87714367ed47c6a', /* Demo module */
           pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */
           guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */
           cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */
       });

       function getTokenCallBack() {
           var idToken; /* Get the id token for the current user */
           return Promise.resolve(idToken);
       }

       function getGuestJWTTokenCallBack() {
           var guestToken; /* Get the guest token for the current user */
           return Promise.resolve(guestToken);
       }

       /* Uncomment below function to handle guest session */
       // await startGuestSession();

       /* Uncomment below functions to handle login and logout once the user logs into your website */
       // await login();
       // await logout();

9. **オプション:** \[コンポーネントコード\] タブで、\[ イベントハンドラーを有効にする \] 切り替えスイッチをスライドさせて、Web サイトでのユーザーインタラクションによってトリガーされたイベントを処理します。  
   注:  
   イベントハンドラーを有効にすると、コンポーネントコードも変更されます。Web 埋め込み可能 におけるイベントハンドラーの詳細については、「[データ可視化コンポーネントのイベントハンドラー](https://servicenow-prod.fluidtopics.net/zHVNXutI0xhl1VpiKq9B9g "コンポーネントは、特定の条件が満たされたとき、またはユーザーのインタラクション時にイベントをトリガーします。このイベントを使用して、サードパーティ Web ページのコードを介してアクションを実行できます。")」を参照してください。
10. \[コンポーネントコード\] タブで、生成されたコードを確認し、\[コンポーネントコードをコピー (Copy component code)\] を選択します。  
    生成されたコンポーネントコードには、イベントハンドラーとドーナツグラフの構成も含まれています。

        <!--  
            Module: Demo module
            Group: Group 1
            Instance: Data visualization 1
        -->
        <sn-embedx-visualization-donut
        	sort-by="value"
        	data-labels-type="value"
        	data-sources='[{"allowRealTime":true,"dataCategories":["trend","group","simple"],"filterQuery":"active=true^sys_updated_onONLast 7 days@javascript:gs.beginningOfLast7Days()@javascript:gs.endOfLast7Days()","id":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","isDatabaseView":false,"label":"Case","preferredVisualizations":["d24d53f60350de7a652caf3188a46ed2"],"reportSourceSysId":null,"sourceType":"table","tableOrViewName":"sn_customerservice_case"}]'
        	metrics='[{"aggregateFunction":"COUNT","axisId":"primary","dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","id":"ZEdGaWJHVnpibDlqZFhOMGIyMWxjbk5sY25acFkyVmZZMkZ6WlRFM01qVTBNall4T0Rjek9EYz0xNzI1NDI2MTg4NjYx","numberFormat":{"customFormat":false}}]'
        	group-by='[{"disableRanges":false,"groupBy":[{"dataSource":"dGFibGVzbl9jdXN0b21lcnNlcnZpY2VfY2FzZTE3MjU0MjYxODczODc=","groupByField":"state","isChoice":true,"isPaBucket":false,"isRange":false}],"hideZeroValues":true,"maxNumberOfGroups":"ALL","numberOfGroupsBasedOn":"NO_OF_GROUP_BASED_ON_PER_METRIC","showOthers":false}]'
        	additional-group-by-config='[{"id":"state","label":"State"},{"id":"account","label":"Account"}]'
        	truncation-type="end"
        	show-register
        	register-position="bottom"
        	register-orientation="horizontal"
        	legend-horizontal-alignment="center"
        	ranges-config='null'
        	color-config='null'
        	show-header
        	header-color='null'
        	title-color='null'
        	sort-by-order="desc"
        	empty-state-illustration="no-data"
        	empty-state-heading="No data available."
        	empty-state-heading-level="3"
        	empty-state-content="There are no scores available for the selected criteria. Contact your admin for more info."
        	empty-state-alignment="vertical-centered"
        	number-of-periods="3"
        	period="M"
        	user-info='"@context.session.user"'
        	shared-context='null'
        	colors='{}'>
        </sn-embedx-visualization-donut>
        <!--
         The component also includes the following additional properties:
         show-border
         drilldown-label
         show-data-labels
         max-label-size
         show-register-on-same-line
         show-register-value
         legend-max-item-width
         legend-expand-to-fit
         show-register-percentage
         wrap-title
         show-header-separator
         header-title
         description
         refresh-request
         show-additional-group-by-selector
         show-metric-label
         show-total-value
         enable-click-and-stay
         show-data-table
         enable-custom-empty-state
         apply-date-range
         show-absolute-period
         score-type
         start-time
         end-time
         use-current-date-for-end
         show-extended-error-messages
         auto-aggregate-periods
        -->

        <script type="module">
        	import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
        	
        	const snEmbedxVisualizationDonut = document.querySelector('sn-embedx-visualization-donut');

        	getEmbeddables(["sn-embedx-visualization-donut"]);

        	const eventHandlers = {
        		'NOW_VIS_WRAPPER#PROPERTY_OVERRIDE' : (e) => {
        			// Dispatched when the visualization overrides its property. For example when the user selects a different group by from the alternative group by selection
        			var {properties} = e.detail.payload;
        			console.log(properties);
        		},
        		'NOW_VIS_WRAPPER#SELECTED' : (e) => {
        			// Dispatched when the user selects/de-selects element on data visualizations, typically to filter other content on the page
        			var {title, type, isSelected, params, data} = e.detail.payload;
        			console.log(title, type, isSelected, params, data);
        		},
        		'NOW_VIS_WRAPPER#CLICKED' : (e) => {
        			// Dispatched when the visualization is clicked
        			var {title, type, params, data} = e.detail.payload;
        			console.log(title, type, params, data);
        		}
        	};

        	setEvents(snEmbedxVisualizationDonut, eventHandlers);
        </script>

## タスクの結果

グローバルコードとコンポーネントコードをサードパーティアドミニストレーターと共有して、サードパーティの Web サイトにデータ可視化コンポーネントインスタンスを埋め込む準備ができました。

## 次のタスク

[サードパーティの Web サイトにデータ可視化コンポーネントインスタンスを埋め込む](https://servicenow-prod.fluidtopics.net/HlMtwcNC28hEqZIFAaro1A "顧客がサードパーティの Web サイトでデータ可視化コンポーネントインスタンスの使用を開始できるように、構成したデータ可視化コンポーネントインスタンスのグローバルコードとコンポーネントコードを埋め込みます。")
**関連資料**   

* [データ可視化のコンポーネントプロパティ](https://servicenow-prod.fluidtopics.net/rITKBtrhwHiuf54fRcrj_w "コンポーネントプロパティを使用すると、サードパーティの Web サイトでのデータ可視化コンポーネントインスタンスの動作を構成できます。")
* [データ可視化コンポーネントのイベントハンドラー](https://servicenow-prod.fluidtopics.net/zHVNXutI0xhl1VpiKq9B9g "コンポーネントは、特定の条件が満たされたとき、またはユーザーのインタラクション時にイベントをトリガーします。このイベントを使用して、サードパーティ Web ページのコードを介してアクションを実行できます。")
* [データ可視化コンポーネントのサンプルコード](https://servicenow-prod.fluidtopics.net/qYd~7CUmo3L2IsJEya3jbQ "イベントがトリガーされたときのアクションを定義するためのサンプルコードが用意されています。コンポーネントを Web ページに埋め込む前に、ユースケースのサンプルコードを更新します。")