SharePointのリストフォームに採番機能をJavaScriptで実装する

この世にはようかんぱんなるものがあることを知り気になって仕方ないのですが、そんなことはどうでもいいですね。

さて、だいぶ間が空いてしまいましたが久々の更新です！
いぜん、ページにビューカウンタをつける方法をポストしましたが、意外とよく読まれているようなので、気を良くして応用編（？）です。

SharePointのリストアイテムに、システム的に振られるIDではなく、独自ルールで採番したカスタムIDを振りたい！という要望はよくありますよね。
そこで、ページビューカウンタと同じやり方で、採番機能を実現してみました。
新規フォームで見るとこんな感じ。

実装方法です。
事前に「counter」という名前の採番用カスタムリストを同じサイト内に作成しておきます。
採番用カウンタは、Titleフィールドをそのまま使います。
新規フォーム作成時に、採番用リストから番号を取得し採番フィールドに表示、保存時のアクションでインクリメントした番号を採番用リストに返す仕組みです。
なので、新規フォームをキャンセルした場合は、インクリメントされません。

以下、ソースコードです。
こちらをNewForm.aspxにコンテンツエディタwebパーツで埋め込んでください。

	<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	var count;
	var itemId;
	$(document).ready( function () {
	var numStr;
	$().SPServices({
	operation: "GetListItems",
	async: false,
	listName: "counter",
	completefunc: function (xData, Status) {
	$(xData.responseXML).SPFilterNode("z:row").each( function () {
	itemId= $(this).attr("ows_ID");
	count = Number($(this).attr("ows_Title"));
	});
	}
	});
	count++;
	numStr = "CustomID - " + ("0000000" + count).slice(-8);
	$("input[title='CustomID']").val(numStr).attr("readonly", "readonly").css("color", "#6a6a6a");
	$(":text:not([readonly])").eq(0).focus();
	});
	function PreSaveAction(){
	$().SPServices({
	operation: "UpdateListItems",
	async: false,
	batchCmd: "Update",
	listName: "counter",
	valuepairs: [["Title", count]],
	ID: itemId,
	completefunc: function(xData, Status) {
	}
	});
	return true;
	}
	</script>

view raw CreateCustomID.html hosted with ❤ by GitHub

※SPServices、jQuery使ってます。

さらにちょっとした小技として、

21行目：カスタムIDの数値部分を桁固定0埋めで表示
23行目：採番フィールドを読み取り専用にする
24行目：採番フィールドがフォームの最初のフィールドでもフォーカスを当てない

などを盛り込んでおります。

なお、EditForm.aspxには以下を埋め込んでおきます。

	<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function () {
	$("input[title='CustomID']").attr("readonly", "readonly").css("color","6a6a6a");
	$(":text:not([readonly])").eq(0).focus();
	});
	</script>

view raw CustomID-EditForm.html hosted with ❤ by GitHub

検証環境は2010ですが、2007、2013でも動くと思います。
参考にしていただけるとうれしいです！