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

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) フィールドカスタマイザー拡張機能を作成します。

自分の知識をテストする

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

onRenderCell() メソッドで event.fieldValue プロパティを引数として使用します。

BaseFieldCustomizer クラスの this.context.currentItem.currentField プロパティを使用します。

現在のセルの値が onRenderCell() メソッドに渡されます。

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

HTML は、onRenderCell() メソッドから文字列として返されます。

HTML は、onRenderCell() メソッド内の event.domElement.innerHTML プロパティに設定されます。

HTML は、onRenderCell() メソッド内の this.domElement.innerHTML プロパティに設定されます。

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

続行

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

前提条件

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

SCSS スタイルを更新する

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

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

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

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

概要

自分の知識をテストする

フィードバック

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

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

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