リストフォームの「保存」ボタンクリック時に任意の JavaScript 処理を追加する

JavaScript

2013.08.04

実は私自身も最近調べ物をしていて見つけたばかりのネタをご紹介します。SharePoint 2010/2013/Online に対応できる方法です。

SharePoint では、リストに列を追加すると「新規」「編集」「表示」フォームが自動的に作成されることはご存知かと思います。このフォームに任意の JavaScript を追加したいと思ったことはありませんか？さらには、「保存」ボタンをクリックしたタイミングで実行させたい。たとえば、「保存」ボタンクリック時に入力値のチェックをしたり、確認ダイアログを出したりなど…。そういった、処理の追加/差し込みが簡単にできる方法があることがわかりました。

この記事は、下記を参考にしました。

Javascript PreSaveAction() in SharePoint 2010
http://sharepointwings.blogspot.jp/2012/06/javascript-presaveaction-in-sharepoint.html

原理を理解する
動作を確認してみる
さいごに

原理を理解する

具体的な方法の前に、なぜこの方法で JavaScript の追加が可能なのかを解説します。このあたりの理解は、トラブル発生時の切り分けにも有効かと思います。

まずはそのために、「保存」ボタンに既定でどういったスクリプトが指定されているのかを確認します。ソースコードを確認すると「保存」ボタンのonclickでは下記の処理が実行されていることがわかります。

if (!PreSaveItem()) return false;if (SPClientForms.ClientFormManager.SubmitClientForm('WPQ2')) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl33$g_93b67abe_88eb_4640_b022_d8926fe3535b$ctl00$toolBarTbl$RightRptControls$ctl00$ctl00$diidIOSaveItem", "", true, "", "", false, true))

これを見ると、一番初めにPreSaveItem()が実行され、その戻り値に応じてポストバックを実行するか否かを判断していることがわかります。

では、PreSaveItem()ではどういった処理がされているのでしょうか？この Function は、Layouts フォルダー配下の form.js で下記のように定義されています。

function PreSaveItem(){
	a:;
	return"function"==typeof PreSaveAction?PreSaveAction():true
}

この Function では、PreSaveAcctionオブジェクトが Function である場合にそれを実行する、といった処理になっています。ただ、既定ではPreSaveActionは定義されていないため、この条件演算子はfalseとなり、trueが戻り値として返り、結果としてポストバックが実行されるという動作になっています。つまりは、Function としてPreSaveActionをフォーム画面に定義するだけで、あとは勝手に実行してくれるということになります。

この処理が、今後の製品機能拡張のためのものなのか？それとも何か他の動作で利用されているものなのか？といったところまでは分かっていないのですが、この処理を利用してしまおう！というのが、今回ご紹介するカスタマイズの肝になります。

動作を確認してみる

では、さっそく動作を確認してみましょう。ここから先は、SharePoint 2013/Online での操作で進めます。

まずは、「新しいアイテムの作成」フォームを開き、歯車アイコンより「ページの編集」を行います。

次に「スクリプトエディター」Web パーツを画面に配置します。（2010 なら「コンテンツエディター」Web パーツで OK だと思います。）

そして、「スクリプトエディター」Web パーツに下記のようなスクリプトを書き込みます。かなり手抜きなスクリプトですが、ポストバックを実行させたい（保存処理を実行させたい）場合はreturn true;を、ポストバックをキャンセルさせたい場合はreturn false;を記述してください。

<script>
function PreSaveAction(){
	if(true){
		alert("In PreSaveAction");
		return true; //ポストバックの実行
	}else{
		return false; //ポストバックのキャンセル
	}
}
</script>