演習 - SharePoint リストデータを表示する SPFx Basic カード ACE を作成する - Training

25 分

この演習では、SharePoint リスト内の項目を表示し、ユーザーがリストに項目を追加できるようにする基本カードテンプレートを使用して、SharePoint Framework (SPFx) アダプティブカード拡張機能 (ACE) を作成します。

前提条件

Viva Connections用の ACE を開発するには、テナントに Microsoft 365 テナント、SharePoint Online、Viva Connectionsを設定する必要があります。テナントを準備するには、次のリソースを使用します。

ワークステーションに必要な開発者ツールもインストールする必要があります。

重要

ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。

SharePoint リストを作成してデータを格納する

最初の手順は、このコンポーネントに表示するデータを保持する新しい SharePoint リストを作成することです。

ブラウザーで、この演習で作成するプロジェクトをテストする SharePoint サイトに移動します。

[ 新規 ] を選択し、使用可能なオプションから [一覧表示 ] を選択します。

新しいリストエクスペリエンスのスクリーンショット。

[ リストの作成 ] ダイアログで、[ 空のリスト] を選択します。

一覧の [名前] を ACE データ に設定し、[ 作成] を選択します。

ブラウザーが更新されて新しい一覧が表示されたら、[ 列の追加] を選択し、[ テキスト] を選択して、[ 次へ ] ボタンを選択します。 [ 列の作成 ] パネルで、次の値を入力し、[保存] を選択 します。

名前: 説明
型: 1 行のテキスト

リストを作成したら、いくつかの項目を追加します。

SPFx プロジェクトを作成して準備する

コマンドプロンプトを開き、SPFx プロジェクトを作成するフォルダーに移動します。その後、次のコマンドを実行して SharePoint Yeoman ジェネレーターを起動します。

yo @microsoft/sharepoint

表示されるプロンプトを完了するには、次のコマンドを使用します。

ソリューション名は何ですか?: AceSharePointRest
作成するクライアント側コンポーネントの種類:アダプティブカード拡張機能
どのテンプレートを使用しますか?: 基本カードテンプレート
アダプティブカード拡張機能の名前は何ですか?: SharePoint REST

プロジェクトに必要なフォルダーをプロビジョニングした後、ジェネレーターは npm install を自動的に実行することで、すべての依存関係パッケージをインストールします。 NPM がすべての依存関係のダウンロードを完了したら、Visual Studio Code でプロジェクトを開きます。

既定の ACE プロジェクトをテストして調べる

少し時間を取って、既定の ACE プロジェクトエクスペリエンスを調べ、プロジェクトのしくみを理解しましょう。

コンソールで、次のステートメントを実行します。

gulp serve --nobrowser

ブラウザーで、リストを作成したのと同じサイトの SharePoint ホストワークベンチに移動して、アイテムを一覧表示します。たとえば、リスト URL がの場合、 https://contoso.sharepoint.com/sites/MSLearningTeam/Lists/ACE%20data/AllItems.aspxホストされているワークベンチの URL はです https://contoso.sharepoint.com/sites/MSLearningTeam/_layouts/15/workbench.aspx。

アイコンを + 選択し、ツールボックスから SharePoint REST を選択します。

SPFx ツールボックスのスクリーンショット。

SPFx Web パーツと同様に、ACE コンポーネントの上にマウスポインターを置き、鉛筆アイコンを選択してプロパティウィンドウを開くことができます。

ACE の編集エクスペリエンスのスクリーンショット。

右上隅にある [X ] を選択して、プロパティウィンドウを閉じます。

SPFx Web パーツとは異なり、ページが編集モードまたは表示モードの場合、ACE の動作は異なります。ページは現在編集モードです。上部のナビゲーションの右上にある [プレビュー ] ボタンを選択して、カードを操作する表示モードに切り替えます。

ページが表示モードの場合の ACE のスクリーンショット。

キャンバスの側面にあるすべての編集ツールと ACE コンポーネントが表示されなくなっていることに注意してください。

ACE の既定のビューは CardView です。選択可能で、ボタンを含めることができます。既定の ACE を選択すると、新しいタブにリンクが開きます。これは、 ./src/adaptiveCardExtensions/sharePointRest/cardView/CardView.ts ファイルの onCardSelection() アクセサーメソッドで実装されます。このメソッドは、 QuickView、外部リンク、または何も実行できません。

public get onCardSelection(): IQuickViewCardAction | IExternalLinkCardAction | undefined {
  return {
    type: 'ExternalLink',
    parameters: {
      target: 'https://www.bing.com'
    }
  };
}

CardView には、0 個、1 つ、または 2 つのボタンを含めることができます。カードサイズが [大] に設定されている場合にのみ、2 つのボタンが表示されます。

CardView のボタンはアクセサーメソッドを cardActions() 使用して実装されます。このメソッドは、1 つまたは 2 つのボタンを返すことができます。このメソッドによって返されるオブジェクトは、ボタンが選択されたときにどうなるかを決定します。たとえば、既定のプロジェクトのコードでは、ボタンによって QuickView が開きます。

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
  return [
    {
      title: strings.QuickViewButton,
      action: {
        type: 'QuickView',
        parameters: {
          view: QUICK_VIEW_REGISTRY_ID
        }
      }
    }
  ];
}

ACE QuickView のスクリーンショット。

QuickView は、2 つのファイルを使用して実装され、ACE コンポーネントに登録されます。

QuickView のレンダリングは、アダプティブカードの定義を含む JSON ファイルで定義されます。既定のプロジェクトの QuickView の JSON ファイルは 、./src/adaptiveCardExtensions/sharePointRest/quickView/template/QuickViewTemplate.json です。

QuickView は、 ./src/adaptiveCardExtensions/sharePointRest/quickView/QuickView.ts ファイルで定義されています。このファイルは、SPFx にレンダリングで使用されるアダプティブカードの JSON、レンダリングにバインドするデータ、カードで特定のアクションが発生したときに呼び出されるハンドラーメソッド onAction() を提供します。

すべての CardView と QuickView は、ACE コンポーネント内のそれぞれのナビゲーターに登録する必要があります。これは通常、サンプルプロジェクトの onInit() ACE コンポーネントの ./src/adaptiveCardExtensions/sharePointRest/SharePointRestAdaptiveCardExtension.ts のメソッドで実装されます。

public onInit(): Promise<void> {
  this.state = { };

  this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
  this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());

  return Promise.resolve();
}

この既定のプロジェクトを使用して、SharePoint リスト内のデータの読み取りと書き込みを動的にしましょう。

SharePoint REST API サービスヘルパーを追加する

SharePoint REST サービスをプロジェクトに追加して、作成したすべての読み取りと書き込みを SharePoint リストに処理しましょう。

プロジェクトに新しいファイル ./src/adaptiveCardExtensions/sharePointRest/sp.service.ts を作成し、次のコードを追加します。

import { AdaptiveCardExtensionContext } from '@microsoft/sp-adaptive-card-extension-base';
import { SPHttpClient } from '@microsoft/sp-http'

export interface IListItem {
  id: string;
  title: string;
  description: string;
  index: number;
}

export const fetchListTitle = async (spContext: AdaptiveCardExtensionContext, listId: string): Promise<string> => {
  if (!listId) { return Promise.reject('No listId specified.'); }

  const response = await (await spContext.spHttpClient.get(
    `${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')/?$select=Title`,
    SPHttpClient.configurations.v1
  )).json();

  return Promise.resolve(response.Title);
}

export const fetchListItems = async (spContext: AdaptiveCardExtensionContext, listId: string): Promise<IListItem[]> => {
  if (!listId) { return Promise.reject('No listId specified.'); }

  const response = await (await spContext.spHttpClient.get(
    `${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')/items?$select=ID,Title,Description`,
    SPHttpClient.configurations.v1
  )).json();

  return Promise.resolve(response.value.map(
    (listItem: any, index: number) => {
      return <IListItem> {
        id: listItem.ID,
        title: listItem.Title,
        description: listItem.Description,
        index: index
      };
    }
  ));
}

const getItemEntityType = async (spContext: AdaptiveCardExtensionContext, listId: string): Promise<string> => {
  const response: { ListItemEntityTypeFullName: string } = await (await spContext.spHttpClient.get(
    `${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')?$select=ListItemEntityTypeFullName`,
    SPHttpClient.configurations.v1
  )).json();

  return response.ListItemEntityTypeFullName;
}

export const addListItem = async (
  spContext: AdaptiveCardExtensionContext,
  listId: string,
  listItemTitle: string,
  listItemDescription: string): Promise<void> => {

    // get the entity type of list item
    const entityListItemType = await getItemEntityType(spContext, listId);

    // create item to send to SP REST API
    const newListItem: any = {
      '@odata.type': entityListItemType,
      Title: listItemTitle,
      Description: listItemDescription
    };

    await spContext.spHttpClient.post(
      `${spContext.pageContext.web.absoluteUrl}/_api/web/lists/GetById(id='${listId}')/items`,
      SPHttpClient.configurations.v1,
      {
        headers: {
          'ACCEPT': 'application/json; odata.metadata=none',
          'CONTENT-TYPE': 'application/json'
        },
        body: JSON.stringify(newListItem)
      }
    );

    return Promise.resolve();
}

このサービスは、プロジェクト全体で使用する次のものをエクスポートします。

addListItem(): このメソッドは、指定したリストに新しい項目を作成します。
fetchListTitle(): このメソッドは、指定したリストのタイトルを取得します。
fetchListItems(): このメソッドは、指定したリスト内のすべての項目を取得します。

SharePoint リストデータを表示するようにコンポーネントを更新する

プロジェクトにコア依存関係がいくつか追加されたので、ACE が最初にページに読み込まれるときに、いくつかのコア機能の初期化を実装してみましょう。これには、ACE の状態を構成し、ユーザーが読み取りと書き込みを行う SharePoint リストの ID を設定できるようにする必要があります。

ユーザーが SharePoint リスト ID を設定できるように ACE を更新する

ファイル ./src/adaptiveCardExtensions/sharePointRest/SharePointRestAdaptiveCardExtension.ts 内の ACE クラスを見つけて、VS Code で開きます。

インターフェイスを ISharePointRestAdaptiveCardExtensionProps 見つけて、プロパティを listId 追加して、ドライバーの状態レコードを含む SharePoint リストの ID を格納します。

export interface ISharePointRestAdaptiveCardExtensionProps {
  title: string;
  listId: string;
}

ファイル ./src/adaptiveCardExtensions/sharePointRest/SharePointRestPropertyPane.ts を見つけて開きます。新しいを PropertyPaneTextField 配列に groupFields 追加して、ドライバーの状態レコードを含むリストの ID を設定するオプションをユーザーに追加します。

groupFields: [
  PropertyPaneTextField('title', {
    label: strings.TitleFieldLabel
  }),
  PropertyPaneTextField('listId', {
    label: 'List ID (GUID)'
  })
]

最後に、 SharePointRestAdaptiveCardExtension.ts ファイルに戻り、次のメソッドをクラスに SharePointRestAdaptiveCardExtension 追加します。 SPFx ランタイムは、プロパティウィンドウのプロパティの値が変更されると、このイベントを発生させます。

このメソッドは後で更新します。

protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
  if (propertyPath === 'listId' && newValue !== oldValue) {
    // TODO onPropertyPaneFieldChanged
  }
}

ACE の状態と初期カードビューを更新する

ファイル内の既存importのステートメントの後に、次importのステートメントを追加します。

import {
  fetchListItems,
  fetchListTitle,
  IListItem
} from './sp.service';

状態インターフェイス ISharePointRestAdaptiveCardExtensionState を見つけて、次のコードに示すようにいくつかのプロパティを追加します。

export interface ISharePointRestAdaptiveCardExtensionState {
  listTitle: string;
  listItems: IListItem[];
  currentIndex: number;
}

既存 onInit() のメソッドで state プロパティを初期化します。既存 this.state = { }; のものを次のコードに置き換えます。

this.state = {
  currentIndex: 0,
  listTitle: '',
  listItems: []
};

次に、ステートメントの直前return Promise.resolve();に次のコードをメソッドにonInit()追加して、リストのタイトルとリスト内のすべての項目を取得し、状態を初期化するときに設定した空の値を上書きします。

if (this.properties.listId) {
  Promise.all([
    this.setState({ listTitle: await fetchListTitle(this.context, this.properties.listId) }),
    this.setState({ listItems: await fetchListItems(this.context, this.properties.listId) })
  ]);
}

このコードではキーワードを await 使用しますが onInit() 、メソッドシグネチャはを Promise返しますが、必要な async キーワードはありません。メソッド宣言を onInit() 更新して、次のキーワードを含めます。

public async onInit(): Promise<void> { .. }

ACE コンポーネントに対してパブリックプロパティと状態が構成されたので、ユーザーがプロパティウィンドウでリスト ID を更新する場合のケースを処理する必要があります。

メソッドを onPropertyPaneFieldChanged() 見つけて、を // TODO onPropertyPaneFieldChanged 次のコードに置き換えます。

if (newValue) {
  (async () => {
    this.setState({ listTitle: await fetchListTitle(this.context, newValue) });
    this.setState({ listItems: await fetchListItems(this.context, newValue) });
  })();
} else {
  this.setState({ listTitle: '' });
  this.setState({ listItems: [] });
}

この時点で、ACE コンポーネントは SharePoint リスト内のタイトルと項目を読み取ります。次に、ACE レンダリングでその情報を表示してみましょう。

ACE CardView を更新する

CardView から始めましょう。

VS Code で ./src/adaptiveCardExtensions/sharePointRest/cardView/CardView.ts ファイルを 見つけて開きます。

既存 data() のメソッドを次のコードで更新して、一覧に表示されるプライマリテキストを変更します。

public get data(): IBasicCardParameters {
  return {
    title: this.properties.title,
    primaryText: (this.state.listTitle)
      ? `View items in the '${this.state.listTitle}' list`
      : `Missing list ID`,
  };
}

次に、メソッドを onCardSelection() 見つけます。これを変更して、返されたオブジェクトを次のコードに置き換えることで、外部リンクではなく QuickView を起動します。

return {
  type: 'QuickView',
  parameters: {
    view: QUICK_VIEW_REGISTRY_ID
  }
};

最後に、オブジェクトへの strings 次の参照をコメントアウトまたは削除します。

import * as strings from 'SharePointRestAdaptiveCardExtensionStrings';

ACE QuickView を更新する

クイックビューのアダプティブカードを更新して、SharePoint リストのデータをカルーセルとして表示しましょう。

./src/adaptiveCardExtensions/sharePointRestCrud/quickView/template/QuickViewTemplate.json ファイルを見つけて開き、その内容を次のコードに置き換えます。

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": "30px",
          "items": [
            {
              "type": "Image",
              "url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5\" /></svg>",
              "size": "Small",
              "width": "30px",
              "selectAction": {
                "type": "Action.Submit",
                "id": "-1",
                "title": "Previous"
              },
              "isVisible": "${previousEnabled}",
              "horizontalAlignment": "Left"
            }
          ],
          "verticalContentAlignment": "Center"
        },
        {
          "type": "Column",
          "width": "auto",
          "items": [
            {
              "type": "Container",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "(${id}) ${title}",
                  "horizontalAlignment": "Center",
                  "size": "Medium",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "TextBlock",
                  "text": "${description}",
                  "horizontalAlignment": "Center",
                  "size": "Default",
                  "wrap": true
                }
              ]
            }
          ]
        },
        {
          "type": "Column",
          "width": "30px",
          "items": [
            {
              "type": "Image",
              "url": "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5\" /></svg>",
              "size": "Small",
              "width": "30px",
              "selectAction": {
                "type": "Action.Submit",
                "id": "1",
                "title": "Next"
              },
              "isVisible": "${nextEnabled}",
              "horizontalAlignment": "Right"
            }
          ],
          "verticalContentAlignment": "Center"
        }
      ],
      "spacing": "None",
      "horizontalAlignment": "Center",
      "height": "stretch",
      "style": "emphasis",
      "bleed": true
    }
  ]
}

次に、QuickView クラスを更新しましょう。

./src/adaptiveCardExtensions/sharePointRestCrud/quickView/QuickView.ts ファイルを見つけて開きます。

セクションを imports 更新することから始めます。

パッケージからインポートされたインターフェイスへの IActionArguments 参照を @microsoft/sp-adaptive-card-extension-base 追加します。
```
import {
  ISPFxAdaptiveCard,
  BaseAdaptiveCardView,
  IActionArguments    // << add
} from '@microsoft/sp-adaptive-card-extension-base';
```
次のコードを追加して、プロジェクトに追加した SharePoint サービスファイルからインターフェイスをインポートします。
```
import { IListItem } from '../sp.service';
```

次に、既存 IQuickViewData のインターフェイスを更新してインターフェイスを IListItem 拡張し、さらに 2 つのプロパティを追加します。

export interface IQuickViewData extends IListItem {
  previousEnabled: boolean;
  nextEnabled: boolean;
}

次に、メソッドを data() 次のコードに更新します。これにより、SharePoint リストから取得された現在選択されている項目と、さらに 2 つのプロパティがアダプティブカードレンダリングエンジンのオブジェクトとして返されます。このオブジェクトのプロパティは、アダプティブカードテンプレート内の特定の要素にバインドされます。

public get data(): IQuickViewData {
  return {
    previousEnabled: this.state.currentIndex !== 0,
    nextEnabled: this.state.currentIndex !== (this.state.listItems.length - 1),
    ...(this.state.listItems[this.state.currentIndex])
  };
}

次に、QuickView のアダプティブカードからの申請を処理する新しいメソッド onAction()を追加します。このシナリオでは、SharePoint リストから取得した項目を順番に 2 つの画像を使用します。

public onAction(action: IActionArguments): void {
  if (action.type !== 'Submit') { return ;}

  let currentIndex = this.state.currentIndex;
  this.setState({ currentIndex: currentIndex + Number(action.id) });
}

最後に、オブジェクトへの strings 次の参照をコメントアウトまたは削除します。

import * as strings from 'SharePointRestAdaptiveCardExtensionStrings';

動的 ACE をテストする

ACE をテストして、QuickView が動作していることを確認します。以前にローカル Web サーバーを停止した場合は、コンソールで次のコマンドを実行して再起動します。

gulp serve --nobrowser

SharePoint でホストされているワークベンチに移動して、ACE を表示します。

ACE コンポーネントの上にマウスポインターを合わせ、鉛筆アイコンを選択してプロパティウィンドウを開きます。

リスト ID を設定する ACE の編集エクスペリエンスのスクリーンショット。

[リスト ID] ボックスに SharePoint リストの ID を 入力し、右上隅にある [X ] アイコンを選択してプロパティウィンドウを閉じます。

ヒント

リストの ID は、リストの設定ページ URL から取得できます。

まずリストを参照し、スイートバーの歯車アイコンを選択してから、[ リスト設定 ] リンクを選択します。

リスト設定のページのクエリ文字列には、などの List=%7B93f11b8b-6201-4199-b263-3ca78408a73b%7DList プロパティが含まれています。これは、で {}囲まれた GUID を含む URL でエンコードされた文字列です。プレフィックスと%7Dサフィックスを%7B削除して、リストの ID を取得します。たとえば、このリスト ID はです 93f11b8b-6201-4199-b263-3ca78408a73b。

リスト設定ページを取得する方法のスクリーンショット。

CardView の [クイックビュー ] ボタンを選択します。

QuickView の新しい更新されたレンダリングと、リスト内のすべての項目を順番に表示する矢印のセットが表示されます。

更新された QuickView レンダリングのスクリーンショット。

コンポーネントを更新してリストに項目を追加する

この最後のセクションでは、SharePoint リストに項目を追加する新しい QuickView を追加します。これは、QuickViews を使用してフォームからデータを収集する方法を示しています。

./src/adaptiveCardExtensions/sharePointRest/quickView フォルダーに新しいファイル NewItemQuickView.ts を作成し、次のコードを追加します。

import {
  ISPFxAdaptiveCard,
  BaseAdaptiveCardView,
  IActionArguments
} from '@microsoft/sp-adaptive-card-extension-base';
import {
  ISharePointRestAdaptiveCardExtensionProps,
  ISharePointRestAdaptiveCardExtensionState,
} from '../SharePointRestAdaptiveCardExtension';
import {
  fetchListItems,
  addListItem
} from '../sp.service';

export interface INewItemQuickView { }

export class NewItemQuickView extends BaseAdaptiveCardView<
  ISharePointRestAdaptiveCardExtensionProps,
  ISharePointRestAdaptiveCardExtensionState,
  NewItemQuickView
> {

  public get data(): NewItemQuickView {
    return undefined;
  }

  public get template(): ISPFxAdaptiveCard {
    return require('./template/NewItemQuickView.json');
  }

  public onAction(action: IActionArguments): void {
    if (action.type === 'Submit') {
      (async () => {
        // save item
        await addListItem(
          this.context,
          this.properties.listId,
          action.data.title,
          action.data.description
        );

        // refresh items
        this.setState({ listItems: await fetchListItems(this.context, this.properties.listId) });

        // remove quickview
        this.quickViewNavigator.close();
      })();
    }
  }

}

この QuickView の興味深い部分はメソッド onAction() です。メソッドに渡されたオブジェクトのプロパティを使用して data 、アダプティブカードの入力コントロールから情報を action: IActionArguments 取得する方法に注目してください。

項目をリストに保存すると、項目の一覧が更新され、ACE のコンポーネント状態で項目コレクションが更新され、QuickView が閉じます。

次に、QuickView のレンダリングを実装します。 ./src/adaptiveCardExtensions/sharePointRestCrud/quickView/template に新しいファイル NewItemQuickView.json を作成し、次のコードを追加します。

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [{
    "type": "Container",
    "separator": true,
    "items": [
      {
        "type": "Input.Text",
        "id": "title",
        "label": "Title",
        "placeholder": "Title",
        "isMultiline": false
      },
      {
        "type": "Input.Text",
        "id": "description",
        "label": "Description",
        "placeholder": "Description",
        "isMultiline": true
      },
      {
        "type": "ActionSet",
        "actions": [{
          "type": "Action.Submit",
          "id": "save",
          "title": "Save",
          "style": "positive"
        }]
      }
    ]
  }]
}

この新しい QuickView を使用するには、それを登録する必要があります。

./src/adaptiveCardExtensions/sharePointRest/SharePointRestAdaptiveCardExtension.ts ファイルを開きます。
1. NewItem QuickView をインポートするには、次importのステートメントを追加します。
```
import { NewItemQuickView } from './quickView/NewItemQuickView';
```
2. CardView と QuickView の ID を宣言する定数を見つけて、新しい QuickView に次の ID を追加します。
```
export const NEW_ITEM_QUICK_VIEW_REGISTRY_ID: string = 'SharePointRestCrud_NEW_ITEM_QUICK_VIEW';
```
3. クラスの onInit() メソッド内で SharePointRestAdaptiveCardExtension 、StartTrip QuickView を登録したステートメントを既存の this.quickViewNavigator.register() 呼び出しの後に次のコードを追加します。
```
this.quickViewNavigator.register(NEW_ITEM_QUICK_VIEW_REGISTRY_ID, () => new NewItemQuickView());
```

最後の手順では、CardView を更新して新しい項目をトリガーします。

./src/adaptiveCardExtensions/sharePointRest/cardView/CardView.ts ファイルを見つけて開きます。

からエクスポートされた新しい QuickView ID を、そのモジュールから SharePointRestCrudAdaptiveCardExtension インポートされた既存のオブジェクトの一覧に追加します。

import {
  ISharePointRestCrudAdaptiveCardExtensionProps,
  ISharePointRestCrudAdaptiveCardExtensionState,
  QUICK_VIEW_REGISTRY_ID,
  NEW_ITEM_QUICK_VIEW_REGISTRY_ID    // << add
} from '../SharePointRestCrudAdaptiveCardExtension';

最後に、既存 cardButtons() のアクセサーを次のコードに置き換えます。この更新された実装では、プロパティウィンドウでリスト ID が設定されている場合にのみ、[ 項目の追加 ] ボタンが表示されるようになります。このボタンを選択すると、新しい QuickView が起動します。

public get cardButtons(): [ICardButton] | [ICardButton, ICardButton] | undefined {
  if (!this.properties.listId) {
    return undefined;
  } else {
    return [{
        title: 'Add item',
        action: {
          type: 'QuickView',
          parameters: { view: NEW_ITEM_QUICK_VIEW_REGISTRY_ID }
        }
      }];
  }
}

クイックビュー ACE の追加項目をテストする

新しい QuickView が機能していることをテストしてみましょう。以前にローカル Web サーバーを停止した場合は、コンソールで次のコマンドを実行して再起動します。

gulp serve --nobrowser

SharePoint でホストされているワークベンチに移動して、ACE を表示します。 CardView の [項目の追加] ボタンを選択します。

新しい QuickView の新しいフォームが表示されます。

QuickView フォームのスクリーンショット。

新しい項目を一覧に追加し、CardView を選択して最初のクイックビューを起動します。矢印コントロールを使用して、追加した新しい項目が表示されるまで項目を順番に切り替えます。

この演習では、SharePoint リストにアイテムを表示し、ユーザーが QuickView を使用してリストに項目を追加できるようにする基本カードテンプレートを使用して、SharePoint Framework (SPFx) アダプティブカード拡張機能 (ACE) を作成しました。

自分の知識をテストする

プロパティウィンドウを使用したプロパティのカスタマイズをサポートするアダプティブカード拡張機能プロジェクトテンプレートはどれですか?

基本カード、イメージカード、プライマリテキストカードのすべてのプロジェクトの種類は、プロパティウィンドウを使用できます。

[基本カード] プロジェクトテンプレートと [プライマリテキストカード] プロジェクトテンプレートのみがプロパティウィンドウを使用できます。

アダプティブカード拡張機能Viva Connections、次のエクスペリエンスのうちどれが機能しますか?

デスクトップのみ

モバイルのみ

デスクトップとモバイル

アダプティブカード拡張機能で作成できるビューの種類

CardView とダッシュボードビュー

CardView と QuickView

CardView とアプリビュー

作業を確認する前にすべての問題に回答する必要があります。

続行

演習 - SharePoint リスト データを表示する SPFx Basic カード ACE を作成する