Microsoft Graph Toolkit の分類ピッカーコンポーネント

注意

Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。詳細については、非推奨のお知らせを参照してください。

分類ピッカーは、Microsoft Graph APIに対して分類のクエリを実行し、用語を含むドロップダウンコントロールをレンダリングできるコンポーネントであり、指定した用語セットのidまたは指定した用語セットidと指定した用語idの組み合わせに基づいて 1 つの用語を選択できます。

コンポーネントは、指定された用語セットまたは用語の下に存在する第 1 レベルの用語を取得します。用語セット ID のみが指定されている場合は、その用語セットの下の第 1 レベルの用語が返されます。用語セット ID と用語 ID の両方を指定すると、指定した用語の下の第 1 レベルの用語が返されます。

手記この機能では、現在、用語ストアからの用語の 1 つの 選択がサポートされています。

例

次の例は、 mgt-taxonomy-picker コンポーネントを使用して用語セットから用語を選択する方法を示しています。

HTML
React

mgt.dev でこの例を開きます。

プロパティと属性

いくつかの属性を使用して、コンポーネントの動作を変更することができます。必須の属性が term-set-id。

属性	プロパティ	説明	型
term-set-id	termsetId	必須。第 1 レベルの用語を取得する用語セットの ID。	文字列
term-id	termId	省略可能。第 1 レベルの用語を取得する用語の ID。指定しない場合、関数は、 `term-set-id`で指定された用語セットの下にある第 1 レベルの用語を取得します。この用語は、ID `term-set-id`を持つ用語セットの下の用語のいずれかである必要があることに注意してください。	文字列
site-id	siteId	省略可能。用語セットが存在するサイトの ID。指定しない場合、用語セットはテナントレベルであると見なされます。	文字列
version	version	省略可能。 GET 要求を行うときに使用する API バージョン。既定値は `beta` です。	文字列
placeholder	placeholder	省略可能。コンボボックスで使用するプレースホルダー。既定値は `Select a term` です。	string
ロケール	ロケール	省略可能。表示する必要がある用語のロケール。用語に異なる言語で複数のラベルがある場合にのみ便利です。	文字列
default-selected-term-id	defaultSelectedTermId	省略可能。既定で選択する用語の ID。	文字列
position	position	省略可能。ドロップダウンの位置。 'above' または 'below' を指定できます。既定値は `below` です	文字列
無効	無効	省略可能。分類ピッカーを無効にするかどうかを設定します。無効にすると、ユーザーは用語を検索または選択できません。	該当なし
cache-enabled	cacheEnabled	省略可能。設定すると、リソースからの応答がキャッシュされることを示します。既定値は `false` です。	Boolean
cache-invalidation-period	cacheInvalidationPeriod	省略可能。 (ミリ秒単位) `cacheEnabled`と組み合わせて設定すると、キャッシュが無効化期間に達するまでの遅延がこの値によって変更されます。既定値は `0` で、既定の無効化期間が使用されます。	番号

次の例では、コンポーネントの動作を変更して、指定した用語セットの第 1 レベルの子用語をフェッチします。

<mgt-taxonomy-picker
  term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
></mgt-taxonomy-picker>

次の例では、コンポーネントの動作を変更して、指定した用語の最初のレベルの子用語をフェッチします。

<mgt-taxonomy-picker
  term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
  term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"
></mgt-taxonomy-picker>

次の例では、コンポーネントの動作を変更して、指定した用語の第 1 レベルの子用語のフランス語ラベルをフェッチします。

<mgt-taxonomy-picker
  term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
  term-id="a56caeb7-3b7d-4d22-93a9-0232e12905f6"
  locale="fr-FR"
></mgt-taxonomy-picker>

次の例では、コンポーネントの動作を変更して、指定したサイトに存在する指定した用語セットの最初のレベルの子用語をフェッチします。

<mgt-taxonomy-picker
  term-set-id="7889007a-fb0e-449f-b629-dedf63ae53de"
  site-id="contoso.sharepoint.com,0962bcef-48f1-4460-baa8-b7286dcb249b,ba412b3c-951a-4322-ac37-0fe6307b5987"
></mgt-taxonomy-picker>

次の例では、コンポーネントの動作を変更して、指定した用語セットの第 1 レベルの子用語をフェッチし、既定で選択するように指定した用語を設定します。

<mgt-taxonomy-picker
  term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
  default-selected-term-id="7ab1d163-f691-4676-88b3-c2d8921b73eb"
></mgt-taxonomy-picker>

CSS カスタムプロパティ

mgt-taxonomy-picker コンポーネントは、オーバーライドを提供するために、次の CSS カスタムプロパティを定義します。

<mgt-taxonomy-picker
  class="taxonomy-picker"
  term-set-id="138a652e-7f23-46f6-b480-13da2308c235"
></mgt-taxonomy-picker>

.taxonomy-picker {
  --taxonomy-picker-background-color: grey;
  --taxonomy-picker-list-max-height: 200px;
  --taxonomy-picker-background-color: black;
  --taxonomy-picker-placeholder-color: white;
  
}

詳細については、「コンポーネントのスタイリング」を参照してください。

メソッド

メソッド	説明
refresh(force?:boolean)	メソッドを呼び出してデータを更新します。既定では、UI はデータが変更された場合にのみ更新されます。強制的にコンポーネントを更新するには、`true` を渡します。

イベント

イベント	いつ出力されるか	カスタムデータ	キャンセル	泡	カスタムテンプレートを使用する
`selectionChanged`	ユーザーがドロップダウンで選択内容を変更したときに発生します。	型の選択された用語 `TermStore.Term`	不要	はい	はい

イベントの処理の詳細については、「イベント」を参照してください。

テンプレート

mgt-taxonomy-picker コンポーネントは、外観を定義するために使用できるいくつかのテンプレートをサポートしています。テンプレートを指定するには、コンポーネント内に <template> 要素を含め、 data-type を次のいずれかの値に設定します。

データ型	データコンテキスト	説明
error	Microsoft Graph からのエラー。	このテンプレートは、要求の作成中にエラーが発生した場合に使用されます。
loading	該当なし	このテンプレートは要求が行われている間に使用されます。
no-data	該当なし	このテンプレートは、要求がデータを返さなかった場合に使用されます。

テンプレートの使用例

<mgt-taxonomy-picker term-set-id="138a652e-7f23-46f6-b480-13da2308c235">
  <div>Loading template</div>
    <template data-type="loading">
      Loading
    </template>
    <template data-type="no-data">
      <div>No data</div>
    </template>
    <template data-type="error">
      <div>Error</div>
    </template>
  </div>
</mgt-taxonomy-picker>

Microsoft Graph のアクセス許可

このコンポーネントは、以下の Microsoft Graph API とアクセス許可を使用します。呼び出される API ごとに、ユーザーには少なくとも 1 つのアクセス許可が一覧表示されている必要があります。

構成	アクセス許可	API
default	TermStore.Read.All、TermStore.ReadWrite.All	/termStore/sets/{setId}/children
default	TermStore.Read.All、TermStore.ReadWrite.All	/termStore/sets/{setId}/terms/{termId}/children
`site-id` が設定されている	TermStore.Read.All、TermStore.ReadWrite.All	/sites/{site-id}/termStore/sets/{set-id}/children
`site-id` が設定されている	TermStore.Read.All、TermStore.ReadWrite.All	/sites/{site-id}/termStore/sets/{set-id}/terms/{term-id}/children

Microsoft Graph で使用できるアクセス許可の詳細については、「Microsoft Graph のアクセス許可のリファレンス」を参照してください。

認証

このコントロールは、認証ドキュメントに記述されているグローバル認証プロバイダーを使用して、必要なデータを取得します。

キャッシュ

キャッシュを有効にして構成するには、 cacheEnabled プロパティと cacheInvalidationPeriod プロパティを使用します。既定では、 mgt-taxonomy-picker コンポーネントは応答をキャッシュしません。

オブジェクトストア	キャッシュされたデータ	解説
`response`	用語について Microsoft Graph から取得した応答を完了します。

詳細については、「キャッシュ」を参照してください。

ローカリゼーション

コントロールは、ローカライズできる次の変数を公開します。ローカライズを設定する方法の詳細については、「コンポーネントのローカライズ」を参照してください。

文字列名	既定値
comboboxPlaceholder	`Select a term`
loadingMessage	`Loading...`
noTermsFound	`No terms found`
termsetIdRequired	`The termsetId property or termset-id attribute is required`

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-09-05