SharePoint ホスト型の SharePoint アドインにカスタムのクライアント側レンダリングを追加する

[アーティクル]
04/08/2023

これは、SharePoint ホスト型の SharePoint アドインの開発の基本に関する記事のシリーズの 8 番目です。SharePoint アドインとこのシリーズの前の記事 (「SharePoint ホスト型の SharePoint アドインの作成を始める | 次の手順」にある記事) をよく理解しておいてください。

注:

SharePoint ホスト型アドインに関するこのシリーズを続けて学習してきた方は、このトピックでも引き続き使用できる Visual Studio ソリューションをお持ちです。また、SharePoint_SP-hosted_Add-Ins_Tutorials でリポジトリをダウンロードし、BeforeClientRenderedControl.sln ファイルを開くこともできます。

重要

JSLink ベースのカスタマイズ (クライアント側のレンダリング) は最新のエクスペリエンスではサポートされていません。これには、最新のページのリストビュー Web パーツでの JSLink サポートなど、最新のリストとライブラリが含まれます。クライアント側のレンダリングは、SharePoint Online またはオンプレミスの従来のエクスペリエンスではサポートされています。

クライアント側の小さい JavaScript を使用して、Web パーツ、ほとんどの種類のフィールド (列)、その他のコントロールのレンダリングをカスタマイズすることができます。それには SPField.JSLink のように、コントロールの JSLink プロパティに JavaScript ファイルを割り当てます。このようにしてクライアント側の検証ロジックを追加することもできます。この記事では、クライアント側のレンダリングを利用して従業員オリエンテーション用 SharePoint アドインのリスト内のフィールドのレンダリングをカスタマイズします。

注:

エンドユーザーのブラウザーで JavaScript が無効になっている場合、SharePoint はサーバー側のレンダリングと検証にフォールバックします。
JSLink プロパティは、アンケートの一覧またはイベントの一覧ではサポートされていません。 SharePoint の予定表はイベントリストです。

JavaScript を作成し、登録する

ソリューションエクスプローラーで、[スクリプト] ノードを右クリックし、[追加]>[新しいアイテム]>[Web] を選択します。
[JavaScript ファイル] を選択して、OrientationStageRendering.js という名前を付けます。
フィールドのカスタムレンダリングが自動的に行われる必要があるため、次のコードを使用して、ファイルが読み込まれるときに自動的に実行される匿名メソッドを JavaScript に追加します。
```
(function () {

})();
```
このメソッドの本文 ({ } 文字の間) で、次のコードを追加し、レンダリング上書きコンテキストの JSON (Javascript Object Notation) オブジェクト、コンテキストのテンプレート、フィールドのテンプレートを作成します。
```
var customRenderingOverride = {};
customRenderingOverride.Templates = {};
customRenderingOverride.Templates.Fields = {
}
```
Fields テンプレートオブジェクトの本体に、次の JSON を追加します。
```
"OrientationStage": { "View": renderOrientationStage }
```
- プロパティ名 OrientationStage は、レンダリングをカスタマイズしたフィールドを識別します。
- プロパティの値は、別の JSON オブジェクトです。
- View プロパティは、カスタムレンダリングが適用されているページコンテキストを識別します。この場合は、オブジェクトは、リストビューでカスタマイズされたレンダリングを使用するように SharePoint に指示しています。 (その他のオプションは、Edit、New、Display フォーム用です。)
- プロパティ renderOrientationStage の値は、後の手順で作成するカスタムレンダリングメソッドの名前です。

匿名メソッドが実行すべき最後の処理は、SharePoint のテンプレートマネージャーへのレンダリングの上書きについての通知です。次の行をメソッドの本文の終わりに追加します。

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);

メソッドは、次のようになります。

(function () {
  var customRenderingOverride = {};
  customRenderingOverride.Templates = {};
  customRenderingOverride.Templates.Fields = {
      "OrientationStage": { "View": renderOrientationStage }
  }

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(customRenderingOverride);
})();

次に示すメソッドをファイルに追加します。値が Not Started の場合は [オリエンテーションステージ] 列値の色を赤に設定し、値が Completed の場合は緑に設定します。 (ctx オブジェクトは、組み込みの SharePoint スクリプトで宣言されたクライアントのコンテキストオブジェクトです。)

function renderOrientationStage(ctx) {
  var orientationStageValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
  if (orientationStageValue == "Not Started")  {
      return "<span style='color:red'>" + orientationStageValue + "</span>"
  }
  else if (orientationStageValue == "Completed") {
      return "<span style='color:green'>" + orientationStageValue + "</span>"
  }
  else {
      return orientationStageValue;
  }
}

ソリューションエクスプローラーで、[サイト列]、次に [オリエンテーションステージ] を展開し、elements.xml ファイルを開きます。
SharePoint にカスタム JavaScript を使用するよう指示するには、新しい属性 JSLink を Field 要素に追加して、次の URL をその値として割り当てます: ~site/Scripts/OrientationStageRendering.js。

注:

JSLinkプロパティはメソッドではなく、常にファイルです。 SharePoint にどのメソッドを実行するかを指示する方法はありません。そのため、自動的に動作するメソッドがファイルに含まれます。

Field 要素の開始タグは、次のようになります。
```
<Field
      ID="{some_guid_here}"
      Name="OrientationStage"
      Title="OrientationStage"
      DisplayName="Orientation Stage"
      Description="The current orientation stage of the employee."
      Type="Choice"
      Required="TRUE"
      Group="Employee Orientation"
      JSLink="~site/Scripts/OrientationStageRendering.js">

```

Default.aspx ページを開き、 ContentPlaceHolderID が PlaceHolderMain に設定されている asp:Content 要素の最後の子として次のコードを追加します。

<p><asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/NewEmployeesInSeattle/AllItems.aspx';"
      Text="List View Page for New Employees in Seattle" /></p>

アドインを実行してテストする

F5 キーを使用して、アドインを展開して実行します。 Visual Studio が、テスト用 SharePoint サイトにアドインを一時的にインストールして、すぐにアドインを実行します。
設定したクライアント側レンダリングは、ホームページに配置したリストビュー Web パーツにあるもののレンダリングには影響せず、リストビューページにあるフィールドのレンダリングにのみ影響します。これは、Web パーツが既定でサーバー側レンダリングに設定されるためです。これを反対にする方法はありますが、この簡単な例では高度すぎる内容です。そのため、クライアント側レンダリングの動作を確認するために、シアトルの新入社員のリストビューページの下にあるリンクを選択します。
リストビューページが開いたら、いくつかの項目の [ オリエンテーションステージ] の値を [ 未開始] に設定し、他の値を [ 完了] に設定して、カスタムカラーレンダリングを確認します。

図 1. カスタムのクライアント側レンダリングのリスト
デバッグセッションを終了するには、ブラウザーウィンドウを閉じるか、Visual Studio でデバッグを停止します。 F5 を選択するたびに、Visual Studio によって、以前のバージョンのアドインが取り消され、最新のバージョンがインストールされます。
このアドインおよび他の記事の Visual Studio ソリューションを操作し、ひととおり操作を終了したら前回のアドインを取り消すとよいでしょう。 ソリューションエクスプローラーでプロジェクトを右クリックして、[取り消し] を選択します。

次の手順

このシリーズの次の記事では、SharePoint アドインのホスト Web にカスタムのリボンボタンを作成します。

次の方法で共有

SharePoint ホスト型の SharePoint アドインにカスタムのクライアント側レンダリングを追加する

JavaScript を作成し、登録する

アドインを実行してテストする

次の手順

その他のリソース