SharePoint

  • [アーティクル]

SharePoint 2013 と JSLink を使用する

Pritam Baldota

SharePoint UI の操作は、開発者にとっていつも課題になります。ただし、JSLink という SharePoint 2013 の新機能によって、XSLT を使用する負担が取り払われ、クライアント側でこれまでよりもずっと簡単に応答性の高いカスタム フィールドを表示できるようになります。JSLink とは、フィールド、アイテム、さらには Web パーツのレンダリングを JavaScript ファイルから制御するプロパティです。

今回は、2 つのデモ シナリオを用いて JSLink の使い方を説明します。最初のシナリオでは、メッセージを色分け表示してタスクの完了を表す方法を示します (図 1 参照)。

Using a Custom Column for a Task List to Show Status
図 1 タスク リストのカスタム列を使用したステータスの表示

2 つ目のシナリオは、もう少し複雑です。画像ごとに吹き出しを用意し、メタデータを表示して異なる解像度でダウンロードできるようにする画像ギャラリーの実装方法を示します (図 2 参照)。

Multiple Resolutions of an Image Available for Download
図 2 複数の解像度での画像のダウンロード

また、新規および編集フォームのフィールドのカスタマイズについても詳しく調べます。ただし、本題に入る前に SharePoint 2013 におけるクライアント側レンダリングの基礎と、JSLink によって加わる価値について簡単に説明します。

クライアント側レンダリング

クライアント側レンダリングとは、JavaScript、HTML、CSS など、クライアント側で動作するテクノロジを使って、ページ上にデータを表示することを指します。このテクノロジはクライアントのブラウザーで実行されるため、応答性が高く効率的で Web サーバーの負荷が軽減されます。以前のバージョンの SharePoint (2010、2007) では XSLT を使用して要素のスタイルを設定していましたが、これは処理が複雑なうえ、JavaScript に比べるとパフォーマンスが劣りました。SharePoint 2013 でも引き続き XSLT がサポートされますが、クライアント側で結果をカスタマイズする方法が 2 つ追加されます。1 つは、SharePoint 2013 検索 Web パーツによる結果のレンダリング方法を定義する表示テンプレート (詳細については、https://msdn.microsoft.com/ja-jp/library/office/jj945138(v=office.15).aspx を参照)、もう 1 つは、今回テーマとする JSLink です。

JSLink は、フィールド、Web パーツ、リスト フォーム、およびコンテンツ タイプで使用できるプロパティです。このプロパティを使って、JavaScript ファイルを追加することができるため、カスタマイズの可能性が広がります。追加するそれぞれの JavaScript ファイルは、SharePoint トークンを先頭に付け、垂直バー (|) で区切ります (例: ~site/style library/­mycustom.js|~site/style library/mycustom2.js)。JavaScript ファイルにレンダリング コードが一切含まれていなければ、要素には既定のレンダリングが適用されます。

SharePoint には、コンテキスト固有の URL を構築するのに役立つトークン (静的および動的) があります。以下に、動的 URL 構築用の重要な SharePoint トークンをいくつか示します。

  • ~site - 現在の Web サイトの URL を指します。
  • ~sitecollection - 現在の Web サイトの親サイト コレクションの URL を指します。
  • ~layouts - Web アプリケーションに関する _layouts/15 を指します。
  • ~sitecollectionlayouts - 現在のサイト コレクションの layouts フォルダーを指します (例: /sites/mysite/_layouts/15)。
  • ~sitelayouts - 現在のサイトの layouts フォルダーを指します (例: site/mysite/mysubsite/_layouts/15)。

SharePoint には、この他にも URL 構築用のトークンがあります。URL の文字列とトークンの詳細については、デベロッパー センター (https://msdn.microsoft.com/ja-jp/library/office/jj163816.aspx) を参照してください。

JSLink を使用したクライアント側レンダリングは、多くの点で XSL/XSLT よりも優れています。なにより、ほとんどの Web 開発者が使い慣れている JavaScript を利用します。XSLT よりも開発とデバッグがシンプルなので、JSLink は精度を損なうことなく開発にかかる時間を短縮できます。

JavaScript、HTML、および CSS を使ってクライアント側でビューをレンダリングすることで、サーバーに余計な負荷をかけることなく、全体的なパフォーマンスを向上し、ページの応答時間を短縮します。クライアント側で処理することで、UI の応答性が向上します。

さらに、JSLink を使ってビューの全体または一部をカスタマイズできます。たとえば、特定のフィールドのみをカスタマイズする場合、そのフィールド用のレンダリング ロジックのみを調整し、残りのビューは既定のロジックを使ってレンダリングできます。JSLink を使えば、jQuery などの外部プラグインを含むあらゆる有効な JavaScript を、HTML や CSS と組み合わせて使用できます。

もちろん、あらゆるテクノロジと同じく JSLink にも欠点はあります。たとえば、ユーザーのブラウザーで JavaScript がブロックされていれば JSLink は機能しません。XSLT を使ったサーバー側レンダリングが動作を引き取りますが、パフォーマンスは低下することになります。

ユーザーのブラウザーやシステムが旧式だったり、パワー不足の場合も、スクリプトの実行に時間がかかり、パフォーマンスが損なわれることがあります。

最後になりますが、クローラーは AJAX/JavaScript によって生成された動的コンテンツを認識せず、HTML でレンダリングされる静的データが必要になることがあります。そのため、だれでも閲覧できるサイトでは、JSLink が最良の選択肢とはならない場合があります。

JSLink JavaScript ファイル参照は、サーバー オブジェクト モデル、Windows PowerShell、フィーチャーによる Element.xml、Web パーツ プロパティ ウィンドウ、クライアント オブジェクト モデルなど複数の方法を使って設定できます。以下に、アプローチごとにサンプル コードを示します。

サーバー オブジェクト モデル: リスト フォームなどの JSLink プロパティを設定するには、リストの Forms コレクションを使って SPForm オブジェクトにアクセスし、JSLink プロパティをその SPForm オブジェクトに設定します。

SPWeb web = SPContext.Current.Web;
SPList list = web.Lists.TryGetList("MyTasks");
if (null != list)
{
  SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];
  if (null != newForm)
  {
    newForm.JSLink = "~/mycustom.js";
  }
}

Windows PowerShell: リストのカスタム フィールドなどの JSLink プロパティを設定するには、リストの Fields コレクションを使って field オブジェクトにアクセスし、その field オブジェクトに JSLink プロパティを設定します。

$web = Get-SPWeb
$field = $web.Fields["MyCustomField"]
$field.JSLink = "~/layouts/mycustom.js"
$field.Update()
$web.Dispose()

Element.xml ファイル: リストのカスタム フィールドの JSLink プロパティを設定するには、Field ノードを Element.xml ファイルに追加します。

<Field ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
Name="MyCustomField" DisplayName="Custom Columns"
Type="Text" Required="FALSE" Group="JSLink Demo"
JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
~site/style library/JSLinkDemo/customview.js">
</Field>

上記のように、垂直バーを使って、複数の JavaScript ファイルを追加できます。

Web パーツ プロパティ ダイアログ: Web パーツの JSLink プロパティを設定するには、Web パーツのプロパティを変更します。[Web パーツ]、[プロパティの編集]、[その他] に移動し、JSLink プロパティを設定します。

クライアント側オブジェクト モデル (CSOM): CSOM を使ってフィールドの JSLink を設定できます。JavaScript でサイト列のプロパティを直接更新することはできず、リストと関連付けられたフィールドを更新する必要があります。サイト列レベルで更新を試みると、次のエラーが発生します。

「リストに関連付けられていないフィールドには、この機能を使用できません。」

 

以下のコードは、JavaScript CSOM でリストのフィールド用の JSLink プロパティを適切に更新する方法を示しています。

fieldCollection = taskList.get_fields();
this.oneField = fieldCollection.getByInternalNameOrTitle("MyCustomField");
this.oneField.set_description("MyNewFieldDescription");
this.oneField.update();

この例の詳細については、MSDN ドキュメント (bit.ly/1i9rlZR、英語) を参照してください。

JSLink を使用するため、カスタム JavaScript ファイルを用意して次のメソッドをオーバーライドする必要があります。

SPClientTemplates.TemplateManager.RegisterTemplateOverrides()

このメソッドには、クライアントに渡すテンプレート オブジェクトが必要です。テンプレート オブジェクトを定義するには、ビュー (View、Add、Edit など) ごとにプロパティとレンダリング メソッドを指定する必要があります。

メソッドを登録するためのテンプレート オブジェクトには、Header、Body、Footer、OnPreRender、OnPostRender、Group、Item、Fields などのプロパティがあり、ビューの既定のレンダリング ロジックをオーバーライドする際に利用できます。たとえば、カスタム フィールドの View、Display、Edit、および New を変更するには、テンプレートのオブジェクトの Fields プロパティ用に以下の情報を用意します。

siteCtx.Templates.Fields = {
  // MyCustomField is the Name of our field
  'MyCustomField': {
  'View': customView,
  'DisplayForm': customDisplayForm,
  'EditForm': customNew,
  'NewForm': customEdit
  }
};

customView や customDisplayForm など、このコードで参照するメソッドには、カスタム フィールド用の実際のレンダリング ロジックを含めます。

最後に、TemplateManager の RegisterTemplateOverrides メソッドを呼び出して、次のようにカスタム ビューを適用します。

 

// Register the template to render custom field
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(siteCtx);

このメソッドは、カスタム ロジックに基づいてビューの残りのレンダリングを処理します。

リスト ビュー Web パーツの複数のインスタンスを同じページで使用しており、インスタンスの 1 つに JSLink を適用すると、SharePoint は内部で共通のレンダリング ロジックを使用するため、他のすべてのリスト ビュー Web パーツのレイアウトも変化することに注意します。この問題を避けるため、BaseViewID の値が既存の ViewID と競合しないようにします。そのため、オーバーライドの前にコンテキストの BaseViewID プロパティを変更します (例: ctx.BaseViewID = 1000)。

ここからは、2 つのデモ シナリオを順番に見ていきます。

シナリオ 1: タスク完了ステータスを色分け表示する

このシナリオは、タスク リストのタスク完了ステータスを色分け表示します。未完了のタスクは赤、完了済みのタスクは緑で表示します。

この例では、次に示すように、カスタム フィールドの View テンプレートをカスタマイズします。

// View Page custom rendering
function customView(ctx) {
if (ctx != null && ctx.CurrentItem != null) {
  var percentCompete = parseInt(ctx.CurrentItem.PercentComplete);
  if (percentCompete != 100) {
    return "<span style='color:red'>Incomplete Task</span>";
  }
  else {
    return "<span style='color:green'>Task Completed</span>";
  }
}
}

customView メソッドは、内部的には、入力パラメーターとして現在のレンダリング コンテキストを SharePoint から受け取ります。この入力コンテキストには、他にも List、View、Current Item などに関連する多数のプロパティが含まれています。

コンテキストの currentItem プロパティにより、リストの現在行アイテムにアクセスできます。このプロパティを使えば、List の利用可能なすべてのフィールドにアクセスできます。選択したビューで Field が利用できない場合、field 値にアクセスするとエラーが発生します。

開始するには、Visual Studio 2013 を起動し、[SharePoint 2013 - 空のプロジェクト] をクリックします。

手順 1: [新しいアイテムの追加] メニューから、空のプロジェクトにサイト列を追加します。サイト列を作成するには、Element.xml ファイルにフィールド情報を追加します (図 3 参照)。ご覧のとおり、JSLink プロパティは JQuery ライブラリ、および Style ライブラリのカスタム ビュー JavaScript ファイルという 2 つの JavaScript ファイルを参照します。ファイルの階層は左から右へ維持する必要があることに注意します (依存関係のあるファイルを最初に参照するため)。

図 3 JavaScript ファイルを参照する

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/"> 
  <Field
    ID="{eb3eed37-961b-41bd-b11c-865c16e47071}"
    Name="MyCustomField"
    DisplayName="Custom Columns"
    Type="Text"
    Required="FALSE"
    Group="JSLink Demo"
    JSLink="~site/style library/JSLinkDemo/jquery-1.10.2.min.js|
            ~site/style library/JSLinkDemo/customview.js">
  </Field>
 
</Elements>

手順 2: もう 1 つ新しいアイテムとしてスクリプト モジュールを追加し、カスタム JavaScript などのリソース ファイルを格納します。

手順 3: スクリプト モジュールに JQuery ライブラリを追加します。CustomView.js という新しい JavaScript ファイルを作成します。

手順 4: 既定のフィーチャーの名前を Feature 1 から JSLinkDemo に変更するか、サイト列とスクリプト モジュールを含む新しいフィーチャーを作成します。配置するのはサイト列なので、スコープをサイトに設定します。

手順 5: ソリューションを配置します。ソリューションを配置したら、[サイトの設定]、[サイト列] に移動すると追加した列がサイト列に表示されます。

手順 6: サイトのコンテンツ ページからアプリを追加して MyTasks というタスク リストを作成します。

手順 7: リボンの [リストの設定] メニューから MyTasks リストにカスタム列を追加します。

手順 8: [リストの設定] ページの既存のサイト列から [追加] をクリックして手順 1. ～ 5. で作成したカスタム列を追加します。JSLink Demo を使ってグループをフィルター処理し、[カスタム列] を選択してリストに追加します。

これで、タスクの完了ステータスを表示する最初のシナリオの実装の完了です。図 1 に示すように、カスタム ステータスは緑の Task Completed (完了済みのタスク) または赤の Incomplete Task (未完了のタスク) のいずれかを表示します。

シナリオ 2: 吹き出しを伴うカスタム画像ギャラリーを作成する

このシナリオでは、組み込み画像ギャラリーのレンダリングをカスタマイズし、複数の解像度で画像をダウンロードするための吹き出しを添えたカスタム表形式で表示されるようにします。

これを行うには、テンプレート フィールドの Item、Header、および Footer のプロパティをカスタマイズします。以下のコードは、初期手順をセットアップします。

(function () {
  var overrideContext = {};
  overrideContext.ListTemplateType = 109;
  overrideContext.Templates = {};
  overrideContext.Templates.Item = customItem;
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
 
function customItem() {
  return "ItemRow";
}

ここでは SharePoint で PictureLibrary として事前定義された ListTemplateType を 109 に設定しています (SharePoint 2013 の事前定義された全種類のリスト テンプレートについては、bit.ly/1qE8UiY (英語) を参照してください)。このコードは、customItem メソッドから返されたテキストを使って行をレンダリングします。

次に、静的テキストを Image の実際のプロパティ (Title や URL などのフィールド) に置き換え、画像のレンダリングを開始します。既定の新しい画像のリンクとヘッダー列を置き換えるため、Header プロパティと Footer プロパティをカスタマイズして次のように HTML テキストを設定します。

overrideContext.Templates.Header = "<b>Custom Image Gallery View</b>";
overrideContext.Templates.Footer = "<b>Custom Footer</b>";
function customItem() {
  return "<br /><img src='" + ctx.CurrentItem.FileRef +
  "' width='190' height='190' />;
}

画像を表形式で表示します。そのため、customItem メソッドでレイアウト用に CSS と HTML を追加します。まず、ヘッダー テンプレートに空の div コンテナーを追加します。これは、後で Item と Footer のレンダリングからの実際のデータを保持するために使用します。Item のレンダリングで、動的 HTML を作成し、グローバル変数に格納します。Footer レンダリング テンプレートでは、動的データを div コンテナーに割り当てます。図 4 は、表形式の画像ギャラリーをレンダリングするコード全体を示しています。

図 4 表形式で画像を表示

function customItem(ctx) {
  // Grid contains 4
  if (ctx.CurrentItemIdx % 4 == 0) {
    // Start new row
    tableData+= "<div style='clear:both'></div>"
  }
 
  tableData += "<div style='margin:5px;border:1px solid #666;float:left;"+
  "width:100px;height:100px' onmouseover=\""+
  "ShowCallout(this,'" + ctx.CurrentItem.Title + "','" +
  ctx.CurrentItem.FileDirRef + "','" + ctx.CurrentItem.FileLeafRef
  + "');\"><img src='" + ctx.CurrentItem.FileRef +
  "' width='100' height='100' /></div>";
 
return "";
}
 
// Custom Footer Method
function customFooter(ctx) {
  // Append Dynamic-generated data to container div
  $("#customImageGalleryContainer").html(tableData);
  return "";
}

次に、各画像にマウス カーソルを置くと吹き出しが開き、ダウンロード用の異なる画像の解像度と共に、タイトルや簡単な説明文などの追加のメタデータを表示します。SharePoint 2013 には、CalloutManager グローバル オブジェクトを使って、callout.js JavaScript ファイルからコンテキスト情報を表示する吹き出しフレームワークがあります。このフレームワークを使って、既定の吹き出しを表示します。まず、ShowCallout というカスタム メソッドを作成して既に開かれている吹き出しがあるかどうかを判断し、存在する場合は、CalloutManager の既定の closeAll メソッドを使って閉じます。

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  CalloutManager.closeAll();
}

実装に進む前に、解像度の異なる画像を取得する方法を理解する必要があります。SharePoint 2013 では、画像を画像ライブラリにアップロードすると、既定で 2 つの異なるサイズの画像が作成されます。たとえば、sample.png を /imageLibraryName/ というライブラリ パスにアップロードすると、SharePoint はサムネイル (/imageLibraryName/_t/Sample_png.jpg) と Web サイズの画像 (/imageLibraryName/_w/Sample_png.jpg) の 2 つを自動的に作成します。これらの URL では、_t は Thumbnail (サムネイル) を、_w は Web (ウェブ) を表しており、接頭辞に下線 (_)、ファイル名にファイル拡張子が付加されます。

ShowCallout 関数は、元の画像と解像度の異なる画像の URL を使用し、それぞれ異なる変数に格納します (ファイル名とディレクトリは ShowCallout パラメーター)。

var fname = filename.replace(".", "_");
var thumbnail = directory + "/_t/" + fname + ".jpg";
var medium = directory + "/_w/" + fname + ".jpg";
var full = directory + "/" + filename;

今回のシナリオでは CalloutManager createNewIfNecessary メソッドを使用します。これは、目的の画像に吹き出しがない場合にのみ吹き出しを作成します。吹き出しがある場合、このメソッドは既存のオブジェクト参照を返します (CalloutManager の詳細については、https://msdn.microsoft.com/ja-jp/library/office/dn135236(v=office.15).aspx を参照してください)。図 5 にはコード全体を、図 6 には出力結果を示します。

図 5 更新後の ShowCallout 関数

function ShowCallout(sender, itemId, title, brief, directory, filename) {
  // Close fists all callouts if opened
  CalloutManager.closeAll();
  var fname = filename.replace(".", "_");
  var thumbnail = directory + "/_t/" + fname + ".jpg";
  var medium = directory + "/_w/" + fname + ".jpg";
  var full = directory + "/" + filename;
  var calloutContent = "<img src='" + medium + "' width='50%'
    height='50%' /><br/>" +
  brief + " <a href='" + directory + "/Forms/DispForm.aspx?ID=" +
  itemId + "'>View Image</a><br />" +
  "<a href='" + thumbnail + "' target='_blank'>
    Thumbnail</a>  |  " +
  "<a href='" + medium + "' target='_blank'>
    Web Size</a>  |  " +
  "<a href='" + full + "' target='_blank'>Original Size</a>";
 
  var calloutRef = CalloutManager.createNewIfNecessary({
    ID: 'call_' + itemId, launchPoint: sender,
    beakOrientation: 'leftRight', title: title,
    content: calloutContent,
    contentWidth: 610
  });
 
  calloutRef.open();
}

Custom Image Gallery with Callout Showing Metadata
図 6 メタデータを表示する吹き出しを伴うカスタム画像ギャラリー

カスタム レンダリングを適用するには、サイト ページを作成して、画像ライブラリのリスト ビュー Web パーツを追加します。[Web パーツの編集] プロパティ ダイアログに移動し、JSLink プロパティを ~/site/Style Library/JSLinkDemo/jquery-1.10.2.min.js|~/site/Style Library/JSLinkDemo/CustomImageGallery.js に設定します。[適用]、[ページの上書き保存] をクリックします。ページを最新の状態に更新すると、図 6 のようなギャラリーが表示されます。

いくつかバリエーションがありますが、新規および編集フォームのフィールドも同様の方法でカスタマイズできます。このカスタマイズでは、入力の検証、入力フィールドのデータのリスト アイテムへの保存、リスト アイテムに保存したデータの入力フィールドへの表示などについて考える必要があります。

次に、複数列のカスタム フィールドのシナリオという複雑な実装を詳しく見てみましょう (図 7 参照)。

Multi-Column Custom Fields of a List Using JSLink
図 7 JSLink を使ったリストの複数列のカスタム フィールド

手順 1: Element.xml ファイルを使って、メモ (NumLines プロパティを 1000 などの任意の数に設定した、サイト列の下に表示するテキスト用カスタム フィールド) を作成します。このカスタム フィールドは、新規および編集フォームでのレンダリングをオーバーライドします。

siteCtx.Templates.Fields = {
  "MyComplexField": {
  'EditForm': customComplexNewOrEdit,
  'NewForm': customComplexNewOrEdit
}
};

新規および編集の両方のビューに同じ customComplexNewOrEdit メソッドを使用します。

手順 2: フォーム コンテキストをセットアップします。このコンテキストは、検証機能をセットアップしてカスタム ビューの値を読み取り、再度リストに保存するために必要になります。フォーム コンテキストをセットアップするため、SPClientTemplates.Utility.GetFormContextForCurrentField メソッドを使用します。このメソッドは、SharePoint 内部で提供される Render Context をパラメーターとして受け取ります。以下に、新規または編集カスタム レンダリング メソッドを表示するサンプル コードを示します。

 

function customComplexNewOrEdit(ctx) {
  if (ctx == null || ctx.CurrentFieldValue == null)
  return '';
 
  var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
  if (formCtx == null || formCtx.fieldSchema == null)
    return '';
}

手順 3: フォーム コンテキストを受け取ったら、現在のフォームのコールバック ハンドラーを登録して検証を有効にし、フィールド値を取得して、JSLink によって生成されたカスタム ビューの該当フィールドに値を保存します。ユーザーがリスト フォームで [保存] ボタンをクリックするたびに、SharePoint は formCtx.registerGetValueCallback(filedName, callback) を使ってフィールドに結び付けられたコールバック ハンドラーを内部で呼び出します。このコールバック ハンドラーは、フィールドの値をリスト アイテムに保存する前に読み取ります。

formCtx.registerGetValueCallback(formCtx.fieldName, function () {
  // Read value from this callback and assign to the field before save
  return "";
});

上記は、空のコールバック ハンドラーです。フォーム上の選択したコントロールの値を読み取り、値の文字列表現を返すように、このコードをカスタマイズします。

手順 4: 検証機能を追加するには、まずさまざまなフィールドの検証機能を登録する検証機能コンテナーを作成する必要があります。これを行うには、SPClientForms.ClientValidation.ValidatorSet オブジェクトを使います。検証機能コンテナーの RegisterValidator メソッドを使って複数の検証機能を登録できます。

エラーを表示する場合は、エラーのコールバック ハンドラーも登録する必要があります。このためには、フォーム コンテキストの registerValidationErrorCallback メソッドを使用します。このメソッドには、HTML コンテナー要素の ID (この例では div) と検証エラー発生時に SharePoint 内部で返される errorResult という 2 つのパラメーターが必要です。エラー メッセージは、このメソッドに提供されたコンテナー要素に付加されます。今回の例では、必須フィールド検証機能を追加する必要があります。検証用のコード全体を図 8 に示します。

図 8 検証コード

var validatorContainer = new SPClientForms.ClientValidation.ValidatorSet();
if (formCtx.fieldSchema.Required) {
  validatorContainer.RegisterValidator(
  new SPClientForms.ClientValidation.RequiredValidator());
}
 
if (validatorContainer._registeredValidators.length > 0) {
  formCtx.registerClientValidator(
  formCtx.fieldName, validatorContainer);
}
 
formCtx.registerValidationErrorCallback(
  formCtx.fieldName, function (errorResult) {
    SPFormControl_AppendValidationErrorMessage(
    errorContainer, errorResult);
});

手順 5: 新規または編集ページのフィールドを表すカスタム HTML コントロールを追加します。テキスト ボックスを 1 つ、別のリストの動的な値を含むドロップダウン リストを 1 つ、静的な値を含むドロップダウン リストを 1 つ用意します。table 要素を作成し、これらのコントロールを table 要素に追加し、HTML をカスタムの Add/Edit メソッドの出力として返します。

データを動的に読み込むため、REST API を使って別のリストからデータを読み取り、このリストのタイトルの設定に使います。SharePoint の REST API の詳細については、https://msdn.microsoft.com/ja-jp/magazine/dn198245.aspx を参照してください。

図 9 に、入力コントロールを動的にレンダリングするコードを示します。

図 9 入力コントロールの動的レンダリング

// Render input fields
var inputFields = "<table>";
...
inputFields += "</table>";
 
// Get List data from REST API
$.ajax({
...
success: function (data) {
  // Add options to the dynamic dropdown list
},
error: function (data) {
  // Error handler
}
});
 
 
return inputFields;

手順 6: リストに複数フィールドの値を保存するには、文字列の区切りを使ってすべてのフィールドの値を 1 つの文字列にして、ある種のキーと値のペアである (fieldname:value)(fieldname:value) のようなカスタム形式を作成します。文字列の構築は、registerGetValueCallback で行います。

手順 7: 編集フォームで既存の値を表示するために、キーと値のペアとして保存した文字列を解析し、値を保存して対応する入力コントロールに割り当てます。これは、カスタム HTML を構築するのと同じカスタム レンダリング メソッドを使って実行します。

まとめ

Internet Explorer 開発者ツールや Firebug などの、ブラウザーに応じた開発者ツールを使って JSLink をデバッグすることができます。クライアント側でレンダリング後の JavaScript にブレークポイントを挿入すると、JavaScript を C# .NET コードのようにデバッグできます。View メソッドでコンテキストにアクセスすると、現在のアイテムの参照を取得し、現在のアイテムのフィールドごとに値を確認できます。Internet Explorer 開発者ツールのコンソール ウィンドウを使って、現在のオブジェクトのプロパティにアクセスできます。

JSLink は、サーバー側コードを 1 行も作成することなく、純粋なクライアント側スクリプトを使ってあらゆる SharePoint ビューをカスタマイズするシンプルな方法を提供します。JSLink では、任意の JavaScript ベースのプラグインを使用できます。サンプルのデモ プロジェクトは、msdn.microsoft.com/magazine/msdnmag0614 からダウンロードしてください

Pritam Baldota は、Microsoft Services Global Delivery で SharePoint のコンサルタントを務めており、IT 業界で 9 年以上のキャリアがあります。余暇には、ブログを書いています (pritambaldota.com、英語)。彼の連絡先は、pritam@pritambaldota.com (英語のみ) です。

**この記事のレビューに協力してくれたマイクロソフト技術スタッフの Sanjay Arora、Subhajit Chatterjee、および Paresh Moradiya に心より感謝いたします。
Sanjay Arora – Sanjay は、Microsoft Services Global Delivery のプロフェッショナル開発リソース マネージャーです。

Subhajit Chatterjee は、Microsoft Services Global Delivery のシニア コンサルタントで、IT 業界で 12 年以上のキャリアがあります。彼は、Global Delivery で数々の難しい依頼に応え、そのまま利用できるサービスを提供してきました。

Paresh Moradiya は、ソフトウェア業界で 11 年以上のキャリアがあります。彼は、5 年前からマイクロソフトのコンサルタントとして働いています。彼は、SharePoint Web コンテンツ管理と SharePoint ソーシャルの専門家です。