Microsoft Graph Toolkit の分類ピッカー コンポーネント
分類ピッカーは、Microsoft Graph APIに対して分類のクエリを実行し、用語を含むドロップダウン コントロールをレンダリングできるコンポーネントであり、指定した用語セットまたは指定した用語セットididと指定したid用語の組み合わせに基づいて 1 つの用語を選択できます。
コンポーネントは、指定された用語セットまたは用語の下に存在する最初のレベルの用語を取得します。 用語セット ID のみが指定されている場合は、その用語セットの最初のレベルの用語が返されます。 用語セット ID と用語 ID の両方を指定すると、指定した用語の下の第 1 レベルの用語が返されます。
メモ この機能では、現在、用語ストアからの用語の 1 つの 選択がサポートされています。
例
次の例は、コンポーネントを mgt-taxonomy-picker 使用して用語セットから用語を選択する方法を示しています。
プロパティと属性
いくつかの属性を使用して、コンポーネントの動作を変更することができます。 必要な属性は です term-set-id。
| 属性 | プロパティ | 説明 | 型 |
|---|---|---|---|
| term-set-id | termsetId | 必須。 最初のレベルの用語を取得する用語セットの ID。 | String |
| term-id | termId | オプション。 第 1 レベルの用語を取得する用語の ID。 指定しない場合、関数は で指定された用語セットの下の最初のレベルの用語を term-set-id取得します。 この用語は、ID を持つ用語セットの下の用語のいずれかである必要があることに注意してください term-set-id。 |
String |
| site-id | siteId | オプション。 用語セットが存在するサイトの ID。 指定しない場合、用語セットはテナント レベルであると見なされます。 | String |
| version | version | 省略可能です。 GET 要求を行うときに使用する API バージョン。 既定値は beta です。 |
String |
| placeholder | placeholder | 省略可能です。 コンボ ボックスで使用するプレースホルダー。 既定値は、Select a term です。 |
string |
| ロケール | ロケール | 省略可能です。 表示する必要がある用語のロケール。 これは、用語に異なる言語で複数のラベルがある場合にのみ役立ちます。 | String |
| default-selected-term-id | defaultSelectedTermId | 省略可能です。 既定で選択する用語の ID。 | String |
| position | position | オプション。 ドロップダウンの位置。 'above' または 'below' を指定できます。 既定値は below です |
String |
| 無効 | 無効 | 省略可能です。 分類ピッカーを無効にするかどうかを設定します。 無効にすると、ユーザーは用語を検索または選択できません。 | 該当なし |
| cache-enabled | cacheEnabled | 省略可能です。 設定されている場合、リソースからの応答がキャッシュされることを示します。 既定値は false です。 |
Boolean |
| cache-invalidation-period | cacheInvalidationPeriod | 省略可能です。 (ミリ秒単位)と cacheEnabled組み合わせて設定すると、キャッシュが無効化期間に達するまでの遅延がこの値によって変更されます。 既定値は 0 で、既定の無効期間を使用します。 |
番号 |
次の例では、指定した用語セットの最初のレベルの子用語をフェッチするようにコンポーネントの動作を変更します。
<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>
次の例では、 コンポーネントの動作を変更して、指定した用語の最初のレベルの子用語のフランス語ラベルをフェッチします。
<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>
次の例では、コンポーネントの動作を変更して、指定した用語セットの最初のレベルの子用語をフェッチし、指定した用語を既定で選択するように設定します。
<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 のアクセス許可のリファレンス」を参照してください。
認証
このコントロールは、認証ドキュメントに記述されているグローバル認証プロバイダーを使用して、必要なデータを取得します。
キャッシュ
キャッシュを有効にして構成するには、 プロパティと プロパティをcacheInvalidationPeriod使用しますcacheEnabled。 既定では、 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 |