JSLinkと表示テンプレートパート3 - カスタム編集インターフェースを作成します

表示テンプレートのより興味深いビットのいくつかについてとてもこの部分の話..編集インターフェース。だけでなく、私たちが編集コントロールのすべてを提供してレンダリングするために必要とされているので、これは、いくつかの新機能が導入されたが、我々はまた、何とかSharePointは、誰かが自分の変更を保存したいときに使うべき価値を理解するために取得する必要があります。

今、編集インターフェースを作成するためのプロセスは、「新」と（編集インターフェースも搭載アップ既存の値に対処する必要があることを除いて）「編集」フォームの両方で同じであるので、このために私たちの例をポスト「の編集に焦点を当てますフォーム」機能。

私たちの編集フォーム機能を登録すると、
これはまさに私たちが私たちの名前のフィールドのための私たちの希望オーバーライドメソッドを登録し、我々はパート2の貫通歩いた同じ技術を、使用しています。

（関数（）{
   VARの mjhOverrides = {}; 
  mjhOverrides.Templates = {}; 

  mjhOverrides.Templates.Fields = {  
     'をMyCustomField' {
       'NEWFORM' ：mjh.editMethod、
       'のEditForm' ：mjh.editMethod 
    } 
  }; 

  SPClientTemplates。 TemplateManager.RegisterTemplateOverrides（mjhOverrides）; 
 }）（）;

だから私たちは自分自身のオーバーライドオブジェクトを作成し、私たちは私たちのフィールド「をMyCustomField」のために「のEditForm」と「NEWFORM」の両方をレンダリングする方法「mjh.editMethod（CTX）」を使用したいと我々はその後、使用していることを登録し、それを伝える前に、のような SPClientTemplates.TemplateManager.RegisterTemplateOverridesの 方法。

編集Renderメソッドを
（この例では）編集インターフェースのレンダリング方法の形式は非常に簡単です。私は単純に3つの項目を含むドロップダウンリストをレンダリングしています。

mjh.editMethod = 関数（CTX）{
   VAR formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField（CTX）。

  formCtx.registerGetValueCallback（formCtx.fieldName、mjh.getFieldValue.bind（NULL 、formCtx.fieldName））。
  // リスト、ドロップダウンに表示する項目
  のvar =項目新しいアレイ（「アイテム1」、「アイテム2」、「アイテム3」）。
  VAR returnHtml = "<div要素のid =" + ctx.CurrentFieldSchema.Name + "> <選択>" ; 
  
  ため（VAR i = 0; iは長さ<; iは++ ）{ 
    returnHtml + = "<オプション" 。
    項目[I]）{
       // 値が一致する場合、現在の項目を選択 
      returnHtmlは+ =「選択」。
    }   
    returnHtml + = ">" +項目[I] + "</オプション>" 。
  } 

  returnHtml + = "</選択> </ div>" 。
  返すreturnHtmlを。
}。

あなたは、この時間を見ることができるように、我々はまた、新しい「FormContext」オブジェクトを作成し、registerGetValueCallbackメソッドを使用しているとして、今、私たちは、劇中の新しい方法を持っています。このメソッドは、アイテムが保存されるとき、フィールド値がどうあるべきかを調べるために私達の方法を使用するには、SharePointを告げるものです。最初の引数は、私たちが上書きされているフィールドの名前で、2番目の引数は、当社のフィールドの値を返します方法です。

我々は、フィールド名を渡したい、この場合には、弊社のコールバックメソッドに渡される引数を指定することができるように我々はまた、（あなたは、なぜ分で表示されます）JavaScriptを「バインド」機能を利用してきました。

特別ここで起こって唯一の他の事は、私はアイテムの現在の値がオプションに一致した場合、それは我々が帰属する「選択」を追加しているかどうかを確認することです。

我々はまた、我々は、以下の弊社のコールバックメソッドで使用できるID、などのフィールド名を使用してdivの中で全体を同封しています...

値は、コールバック取得
コースの次のものが実際のフィールド値を取得するために私たちの方法であり、このために、我々はjQueryの少し（あなたがページにjQueryライブラリを取得する独自の方法を選択することができますを使用します。余分なとしてそれを追加しますあなたはどこにでもjQueryのを使用する場合は、それ以外の場合は、すべてのページに表示されるように）カスタムアクションや制御の委任を使用する場合がありますが、JSLink URLは、かなりクールです。

mjh.getFieldValue = 関数（フィールド名）{
   // 適切な商品識別するためのjQueryとともに使用DIV   
  VaRの divIdは= "＃" + フィールド名と、
 
  // 選択した項目を取得   
  VARのSelectedItem = $（divIdは+ 'オプション：選択を'）[0 ]; 
 
  // 値を返す   
  リターンをselectedItem.innerText。
}。

だから、私たちが正しいのdivを識別できるように、我々はフィールド名引数を使用している上に見ることができます。これは、私たちは彼らが衝突することなく、複数のフィールドで同じメソッドを使用することができます。

私たちは、単に選択した項目（「選択」の起因している「オプション」の要素）を引き出し、（この例では、我々が保存したい値である）「のinnerText」を返すように小さなjQueryのステートメントを使用します。もちろん、あなたが作業しているフィールドのデータ型に留意する必要があります。すべての値はテキストとして返されますが、そのような人とルックアップフィールドなどのフィールドは、特にフォーマットされた文字列を返す必要があります。

私は、次のスキーマを持つ（text型の）サイト列にこれをバインド：

< フィールドID = "{A424AE9E-1F1D-4ECE-B695-202F5106352E}" 
  名前= "をMyCustomField" 
  のDisplayName = "マイカスタムフィールド" 
  説明= "カスタムレンダリングを持つテキストフィールド？" 
  タイプ= "テキスト" 
  必須= "FALSE" 
  グループ= "MJH JSLink列" 
  JSLink = "〜レイアウト/ MJH.JSLink / jqueryの-1.10.2.min.js |〜レイアウト/ MJH.JSLink / MJH.JSLink.js" 
  上書き= "TRUE" > 
</ 分野>

それがすべて展開されると、それは次のようになります...

マイカスタムフィールド - ドロップダウンリストとしてレンダリングされたテキストフィールドが、

それはかなりあるように、すべてのあなたは、フィールドの編集と一緒に行く取得する必要があります。私は、ルックアップフィールドを扱う（そして彼らはリストをチェックボックスに変換する）、ドロップダウンをカスケード接続し、AJAX RESTクエリを呼び出すことによって値を生成するためのサンプルコードを共有するパート7のために戻ってきます。

JSLinkと表示テンプレートパート3 - カスタム編集インターフェースを作成します

おすすめ