SPUtility.js を使ってみた

JavaScript
スポンサーリンク

SharePoint のリストを触っていると、ちょっとだけ工夫したくなるときがあります。例えば…「アイテムの新規作成時には入力させたいけど、編集時には入力させたくない列がある」「姓と名の列が入力されたら、自動的に氏名列に値を入れたい」「URL のクエリ文字列に応じて、列の既定値を変えたい」…などなどです。どれも、JavaScript やワークフローなどの組み合わせで実現が出来るのですが、スゴク簡単に利用できそうな jQuery ライブラリを Codeplex で見つけたので試してみました。それが「SPUtility.js」というライブラリです。

SPUtility.js
http://sputility.codeplex.com/

このライブラリの良いところ

見つけたときに良いなと思ったのは、対応バージョンが 2007、2010、2013、Online と幅広い点です。一度作成したコードを色々と使いまわせそうだなと思ったことと、まだ開発がアクティブなため(数ヶ月前に更新されているようだったため)、今後の対応にも期待できそうかな?と思いました。

また、とにかく記述方法が簡単だった点です。例えば上で例に挙げた「編集時には入力させたくない列」は、下記のように一行で実現できます。

SPUtility.GetSPField('列名').MakeReadOnly();

実際には jQuery の JS ファイルやライブラリ自体の JS ファイルなどを読み込む必要があるので、厳密には一行ではないのですが…、このあたりの設置方法についてはこちらのページに詳しく書かれてあります。

Installation
http://sputility.codeplex.com/wikipage?title=Installation

さらに、個人的にうれしいと思ったのは、列の内部名を利用できることです。現在公開されているバージョンには、下記のメソッドが用意されており、内部名を利用しカスタマイズすることが可能になっています。これで後から列名を変更した場合でも、JavaScript 側を修正する必要がなくなります。

SPUtility.GetSPFieldByInternalName('InternalName');

実際に試してみた

身近で利用している SharePoint で「とある列に値を入力したら、自動的に他の列に値をコピーしたい」という要望があったので、これを題材にさっそく試してみました。そのときのコードがこちらです。

$(document).ready(function(){
	try{
		SPUtility.GetSPFieldByInternalName('toColumn').MakeReadOnly();
		SPUtility.GetSPFieldByInternalName('fromColumn').Textbox.onblur = function(){
			SPUtility.GetSPFieldByInternalName('toColumn')
				.SetValue(SPUtility.GetSPFieldByInternalName('fromColumn').GetValue());
		}
	}catch(e){}
});

これで、入力時に「fromColumn」列からカーソルのフォーカスが移動したタイミングで、「fromColumn」列への入力値を「toColumn」列に自動コピーされる処理を追加することができました。さらに「toColumn」は、編集不可の列にしています。

さいごに

今回ご紹介した SPUtility.js は、出来ることが多くはないものの、ちょっとした工夫であれば簡単に実現ができるものでした。SharePoint リストの標準フォームは、クライアント側の表示・制御などの設定が少ないので、こうしたものを組み合わせてちょっとだけ使いやすく工夫するのもアリかと思います。

その他にも Codeplex にはオモシロいツールやライブラリが多く公開されています。こうしたものを探して試してみるのも良いですね。

タイトルとURLをコピーしました