注意
Microsoft Graph Toolkit は非推奨です。 2025 年 9 月 1 日から、2026 年 8 月 28 日に完全な退職が予定されています。 開発者は、Web エクスペリエンスを構築するために、Microsoft Graph SDK またはその他のサポートされている Microsoft Graph ツールを使用して移行する必要があります。 詳細については、 非推奨のお知らせを参照してください。
mgt-search-resultsを使用して、HTML で直接 Microsoft Graph に検索クエリを実行できます。 このコンポーネントでは、既定の結果の種類のレンダリングが提供されますが、テンプレートの完全なカスタマイズも提供されます。
例
次の例は、最も関連するドキュメントに対する mgt-search-results コンポーネントの使用を示しています。 コード エディターを使用して、プロパティと属性がコンポーネントの動作をどのように変更させるかを確認することができます。
プロパティと属性
いくつかの属性を使用して、コンポーネントの動作を変更することができます。 必要な属性は query-string され、 entity-typesされます。
| 属性 | プロパティ | 説明 |
|---|---|---|
| query-string | queryString | Microsoft Search に送信するクエリ。 |
| entity-types | entityTypes | 応答で予期される 1 つ以上の種類のリソース。 指定できる値は、list、site、listItem、message、event、drive、driveItem、person、externalItem、頭字語、ブックマーク、chatMessage です。 既定値は driveItem、 listItem、 siteです。 |
| content-sources | contentSources | 外部アイテムで使用するコンテンツ ソース。 |
| paging-max | pagingMax | ページング コントロールでクリックできるページの最大数。 既定値は 7 です。 |
| query-template | queryTemplate | 複雑な検索シナリオで使用するクエリ テンプレート。 クエリ テンプレートは現在、ベータ エンドポイントでのみサポートされています。 |
| fetch-thumbnail | fetchThumbnail | 結果のサムネイルを Microsoft Graph からフェッチするかどうかを設定します。 既定値は false です。 |
| enable-top-results | enableTopResults | これにより、メッセージのハイブリッド並べ替えがトリガーされます。最初の 3 つのメッセージが最も関連性が高いメッセージです。 このプロパティは、 entityType=messageにのみ適用されます。 既定値は false です。 |
| scopes | scopes | プロパティを使用している場合は文字列の配列、属性を使用している場合はコンマ区切りのスコープ (オプション)。 コンポーネントでは、これらのスコープ (サポートされているプロバイダー) を使用して、ユーザーが適切なアクセス許可に同意していることを確認します。 |
| size | size | 取得するページのサイズ。 最大値は 1000。 既定値は 10 です。 |
| フィールド | フィールド | リソースごとに返されるフィールドが含まれます。 |
| version | version | 要求を行うときに使用する省略可能な API バージョン。 既定値は v1.0 です。 |
| cache-enabled | cacheEnabled | ブール値 (オプション)。 設定すると、リソースからの応答がキャッシュされることを示します。
refresh()が呼び出された場合、またはpollingRateが使用中の場合はオーバーライドします。 既定値は false です。 |
| cache-invalidation-period | cacheInvalidationPeriod | オプションのミリ秒単位。
cacheEnabledと組み合わせて設定すると、キャッシュが無効化期間に達するまでの遅延がこの値によって変更されます。 既定値は 30000 で、既定の無効化期間が使用されます。 |
| 該当なし | error | 要求が成功しなかった場合の Microsoft Graph からの読み取り専用エラー。 |
CSS カスタム プロパティ
mgt-search-results コンポーネントは、以下の CSS カスタム プロパティを定義します。
<mgt-search-results
class="search-results"
query-string="contoso"
entity-types="driveItem"
></mgt-search-results>
.search-results {
--answer-border-radius: 10px;
--answer-box-shadow: 0px 2px 30px pink;
--answer-border: dotted 2px white;
--answer-padding: 8px 0px;
}
詳細については、「コンポーネントのスタイリング」を参照してください。
メソッド
| メソッド | 説明 |
|---|---|
| refresh(force?: boolean) | メソッドを呼び出してデータを更新します。 既定では、UI はデータが変更された場合にのみ更新されます。 強制的にコンポーネントを更新するには、true を渡します。 |
イベント
| イベント | いつ出力されるか | カスタム データ | キャンセル | 泡 | カスタム テンプレートを使用する |
|---|---|---|---|---|---|
dataChange |
コンポーネントがデータを読み込んだ後に発生します。 |
{ response: any, error: any }.
response プロパティには、Microsoft Graph から取得した応答が含まれています。
error プロパティには、エラーが発生した場合のエラーに関する情報が含まれます。 |
不要 | 不要 | はい |
イベントの処理の詳細については、「 イベント」を参照してください。
テンプレート
mgt-search-results コンポーネントは、外観を定義するために使用できるいくつかの テンプレート をサポートしています。 テンプレートを指定するには、コンポーネント内に <template> 要素を含め、 data-type を次のいずれかの値に設定します。
| データ型 | データ コンテキスト | 説明 |
|---|---|---|
| default | Microsoft Graph からの応答。 | 既定値は、Microsoft Graph からの応答全体をレンダリングするために使用できます。 |
| 結果-* | 返された value 配列のデータ アイテム |
グラフからの応答に項目の配列が含まれると予想される場合は、default テンプレートの代わりに result-* テンプレートを使用します。
result-* テンプレートは、リソースによって返される各項目に対して自動的に繰り返されます。
result-* テンプレートは、準備が整うとすぐにアイテムのレンダリングを開始します (既定のテンプレートとは異なります)。
entityTypeごとに 1 つずつ、複数のresult-* テンプレートを使用できます (プロパティと属性の使用可能なentity-typeを参照してください) |
| error | Microsoft Graph からのエラー。 | このテンプレートは、要求の作成中にエラーが発生した場合に使用されます。 |
| loading | 該当なし | このテンプレートは要求が行われている間に使用されます。 |
| no-data | 該当なし | このテンプレートは、要求がデータを返さなかった場合に使用されます。 |
Microsoft Graph のアクセス許可
このコンポーネントに必要なアクセス許可は、Microsoft Graph から取得するデータによって異なります。 アクセス許可の詳細については、「 Microsoft Search API を使用してデータを照会する」を参照してください。
サブコンポーネント
mgt-search-results コンポーネントは、このコンポーネントに必要な権限以外のアクセス許可を必要とする可能性がある 1 つ以上のサブコンポーネントで構成されます。 詳細については、各サブコンポーネントのドキュメントを参照してください。
認証
このコントロールは、認証ドキュメントに記述されているグローバル認証プロバイダーを使用して、必要なデータを取得します。
キャッシュ
キャッシュを有効にして構成するには、 cacheEnabled プロパティと cacheInvalidationPeriod プロパティを使用します。 既定では、 mgt-search-results コンポーネントは応答をキャッシュしません。
| オブジェクト ストア | キャッシュされたデータ | 解説 |
|---|---|---|
response |
によって実行されるクエリに対して Microsoft Graph から取得された完全な応答 mgt-search-results |
詳細については、「 キャッシュ」を参照してください。
ローカリゼーション
コントロールは、ローカライズできる次の変数を公開します。 ローカライズを設定する方法の詳細については、「 コンポーネントのローカライズ」を参照してください。
| 文字列名 | 既定値 |
|---|---|
| 更新日時 | modified on |
| 戻る | Back |
| next | Next |
| ページ | pages |
| page | Page |