演習 - フィールド カスタマイザー拡張機能を作成する

  • 14 分

この演習では、パーセンテージをバーで示す列に、フィールドの値に応じて色付きのバーを表示する SharePoint Framework (SPFx) フィールド カスタマイザー拡張機能を作成します。

前提条件

重要

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

新しい SharePoint Framework プロジェクトを作成する

コマンド プロンプトを開き、現在のディレクトリを、プロジェクトを作成するフォルダーに変更します。

次のコマンドを実行して、SharePoint Yeoman ジェネレーターを起動します。

yo @microsoft/sharepoint

プロンプトが表示されたら、次の情報を使用して応答します (他にもオプションが表示された場合は、既定の回答をそのまま使用します):

  • ソリューション名は何ですか?: SPFxFieldCustomizer
  • どの種類のクライアント側コンポーネントを作成しますか?: 拡張機能
  • どの種類のクライアント側拡張機能を作成しますか?: フィールド カスタマイザー
  • フィールド カスタマイザー名は何ですか?: HelloFieldCustomizer
  • どのテンプレートを使用しますか?: フレームワーク

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

SCSS スタイルを更新する

作成するフィールド カスタマイザーは、変更するセルに特定の色を適用します。 拡張機能をコーディングする前に、これらのカスタム スタイルを実装します。

./src/extensions/helloFieldCustomizer/HelloFieldCustomizerFieldCustomizer.module.scss ファイルを見つけて開きます。 ファイルのコンテンツを次のスタイルで置き換えます。

.HelloFieldCustomizer {
  .cell {
    display: 'inline-block';
  }
  .filledBackground {
    background-color: #cccccc;
    width: 100px;
  }
}

フィールド カスタマイザーをコーディングする

./src/extensions/helloFieldCustomizer/HelloFieldCustomizerFieldCustomizer.ts ファイルを見つけて開きます。

IHelloFieldCustomizerFieldCustomizerProperties インターフェイスを見つけ、そのプロパティを以下のコードに更新します。

greenMinLimit?: string;
yellowMinLimit?: string;

onRenderCell() メソッドを見つけて、次のコードと一致するようにコンテンツを更新します。 このコードは、フィールド内の既存の値を見て、完了したパーセンテージの値に入力された値に基づき、対応する色付きのバーを構築します。

event.domElement.classList.add(styles.cell);

// determine color and text to use
const fieldValue = parseInt(event.fieldValue);
let filledColor: string = '';

if (isNaN(fieldValue) || fieldValue === 0) {
  event.domElement.innerHTML = `
    <div class="${styles.HelloFieldCustomizer}">
      <div class="">
        <div style="width: 100px; color:#000000;">
          &nbsp; no progress
        </div>
      </div>
    </div>
  `;
} else {
  if (fieldValue >= parseInt(this.properties.greenMinLimit)) {
    filledColor = '#00ff00';
  } else if (fieldValue >= parseInt(this.properties.yellowMinLimit)) {
    filledColor = '#ffff00';
  } else {
    filledColor = '#ff0000';
  }

  event.domElement.innerHTML = `
    <div class="${styles.HelloFieldCustomizer}">
      <div class="${styles.filledBackground}">
        <div style="width: ${fieldValue}px; background:${filledColor}; color:#000000;">
          &nbsp; ${fieldValue}% completed
        </div>
      </div>
    </div>`;
}

テスト中に使用する SharePoint リストを作成する

ブラウザーで、フィールド カスタマイザーをテストする SharePoint Online の最新のサイト コレクションに移動します。

左側のナビゲーションで [ サイト コンテンツ ] リンクを選択し、ツール バーの [新しい > 一覧 ] を選択します。 [空のリスト] テンプレートを選択します。

新しい SharePoint リストの作成のスクリーンショット - 空のリスト テンプレートを選択します。

リスト名を [作業状態] に設定し、[作成] を選択します。

新しい SharePoint リストの作成 - 新しいリスト名の完了を示すスクリーンショット。

一覧が読み込まれたら、[ 列 > 番号の追加] を選択して新しい列を作成します。

既存の SharePoint リストの変更を示すスクリーンショット。

[列の作成] パネルで、名前を PercentComplete に設定し、[保存] を選択します。

次の図のように、いくつかのアイテムを追加します。

リスト内のサンプル データのスクリーンショット。

テストと展開の構成の更新

本番環境に実装された場合、フィールド カスタマイザーは、フィールド カスタマイザーのバンドル ファイルで定義されたカスタム スクリプトに関連付けられているレンダリングを行う新しいサイト列を作成することで実装されます。

./sharepoint/assets/elements.xml ファイルを見つけて開きます。

<Field> 要素に以下のプロパティを追加し、フィールド カスタマイザーのパブリック プロパティの値を設定します。

ClientSideComponentProperties="{&quot;greenMinLimit&quot;:&quot;85&quot;,&quot;yellowMinLimit&quot;:&quot;70&quot;}"

./config/serve.json ファイルを見つけて開きます。

作成したリストの完全な URL (AllItems.aspx を含む) をserveConfigurations.default.pageUrl プロパティにコピーします。

serveConfigurations.default.properties オブジェクトを見つけます。

serveConfigurations.default.fieldCustomizers.InternalFieldName プロパティの名前を serveConfigurations.default.fieldCustomizers.PercentComplete に変更します。 このプロパティは、どの既存のフィールドにフィールド カスタマイザーを関連付けるかを SharePoint Framework に伝達します。

properties オブジェクトの値を次の JSON に変更します。

"properties": {
  "greenMinLimit": "85",
  "yellowMinLimit": "70"
}

注:

id プロパティの値を変更する必要はありません。

既定のサービス構成の JSON は、以下のコードのようになっています。

"default": {
  "pageUrl": "https://contoso.sharepoint.com/sites/mySite/Lists/Work%20Status/AllItems.aspx",
  "fieldCustomizers": {
    "PercentComplete": {
      "id": "6a1b8997-00d5-4bc7-a472-41d6ac27cd83",
      "properties": {
        "greenMinLimit": "85",
        "yellowMinLimit": "70"
      }
    }
  }
}

フィールド カスタマイザーをテストする

次のコマンドを実行して、プロジェクトを起動します。

gulp serve

メッセージが表示されたら、[デバッグ スクリプトの読み込み] ボタンを選択します。

ページが読み込まれたら、フィールド カスタマイザー内のコードに応じてレンダリングがどのように変化したかに気が付きます。 PercentComplete フィールドの値がレンダリングされない場合は、コマンド プロンプトに戻り、リロード サブタスクの実行が完了するのを待ち、更新します。

フィールド カスタマイザーのスクリーンショット。

ローカル Web サーバーを停止するには、コマンド プロンプトで CTRL+C を押します。

概要

このエクササイズでは、フィールドの値に応じて、パーセンテージをバーで示す列に色付きのバーを表示する SharePoint Framework (SPFx) フィールド カスタマイザー拡張機能を作成します。

自分の知識をテストする

1.

フィールド カスタマイザーのフィールド値にはどのようにアクセスできますか?

2.

フィールド カスタマイザー拡張機能によってセルの HTML はどのように変更されますか?