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

Picker コンポーネントは、 を使用mgt-getして Microsoft Graph APIのクエリを実行し、ドロップダウン コントロールをレンダリングして、リソースの配列から 1 つのリソースを選択できるようにします。

例

次の例は、コンポーネントを mgt-picker 使用してユーザーのタスク リストからタスク リストを選択する方法を示しています。 コード エディターを使用して、プロパティと属性がコンポーネントの動作をどのように変更させるかを確認することができます。

プロパティと属性

いくつかの属性を使用して、コンポーネントの動作を変更することができます。 コンポーネントには、 などの resource 必須属性があります。たとえば、 /users や key-name などです displayName。

key-name では、入れ子になった値もサポートされます。 たとえば、次の応答では次のようになります。

{
    "@odata.context": "https://graph.microsoft.com/v1.0/$metadata#applications/$entity",
    "id": "03ef14b0-ca33-4840-8f4f-d6e91916010e",
    "verifiedPublisher": {
            "displayName": "publisher_contoso",
            "verifiedPublisherId": "9999999",
             "addedDateTime": "2021-04-24T17:49:44Z"
    },
    "certification": {
           "isPublisherAttested": true,
           "isCertifiedByMicrosoft": true,
           "lastCertificationDateTime": "2021-05-11T23:26:20Z",
           "certificationExpirationDateTime": "2022-05-11T23:26:20Z",
           "certificationDetailsUrl": "https://video2.skills-academy.com/microsoft-365-app-certification/forward/azure/631a96bc-a705-4eda-9f99-fdaf9f54f6a2"
    },
    "tags": [],
    "tokenEncryptionKeyId": null,
    "api": {
        "requestedAccessTokenVersion": 2,
        "acceptMappedClaims": null,
        "knownClientApplications": [],
        "oauth2PermissionScopes": [],
        "preAuthorizedApplications": []
    },
    "appRoles": [],
    "web": {
        "redirectUris": [],
        "homePageUrl": null,
        "logoutUrl": null,
        "implicitGrantSettings": {
            "enableIdTokenIssuance": false,
            "enableAccessTokenIssuance": false
        }
    }
}

属性値key-nameは または verifiedPublisher.displayNameですweb.homePageUrl。

CSS カスタム プロパティ

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

<mgt-picker
  class="picker"
  resource="me/todo/lists"
  scopes="tasks.read, tasks.readwrite"
  key-name="displayName"
></mgt-picker>

.picker {
  --picker-background-color: grey;
  --picker-list-max-height: 200px;
}

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

メソッド

イベント

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

テンプレート

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

テンプレートの使用例

<mgt-picker resource="me/todo/lists" scopes="tasks.read, tasks.readwrite" key-name="displayName">
  <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-picker>

Microsoft Graph のアクセス許可

このコンポーネントに必要なアクセス許可は、Microsoft Graph から取得するデータによって異なります。 Microsoft Graph Toolkit は、現在のユーザーが指定 scopesされた の少なくとも 1 つに同意したことを確認します。 Microsoft Graph で使用できるアクセス許可の詳細については、「Microsoft Graph のアクセス許可のリファレンス」を参照してください。

認証

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

キャッシュ

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

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

ローカリゼーション

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