【SharePoint Online】列の値取得まとめ【jQuery】

2019年7月15日2020年1月10日

今回はjQueryで各列データを取得する方法をまとめてみます。
仕事上よく発生するのでここらでまとめておくのがベターかなと。
別にjQueryじゃなくてもいいとは思いますが、
綺麗に書けるし慣れてるのでjQueryとさせていただいています。

‘ID’は適せん内部列名に変更してください。

1行テキスト	$(‘input[id^=”ID”]’).val().trim();
選択肢	$(‘select[id^=”ID”]’).val().trim();
複数行テキスト	$(‘textarea[id^=”ID”]’).val().trim();
日付と時刻(日付)	$(‘input[id^=”ID”]’).val().trim();
日付と時刻(時刻)	$(‘select[id^=”ID”]’).eq(0).val().trim(); $(‘select[id^=”ID”]’).eq(1).val().trim();
ユーザーまたはグループ	$(‘input[id^=”ID”]’).val().trim(); →PeoplePickerで取得することを推奨
はい/いいえ	$(‘input[id^=”ID”]’).prop(‘checked’)
数値	$(‘input[id^=”ID”]’).val().trim();

解説

すべての列に入っている以下の内容をまず説明します。

$(‘input[id^=”ID”]’).val().trim();

これは、SharePointの内部列の利用方法を活用した取得方法です。
以下画像を見てください。

[calc]という列の内部名は必ずcalc列のspan内のIDで利用されます。
そこから、テキストの内容までを疑似セレクタを利用して選択しているのです。

なぜこのような回りくどいことをしているかといいますと、
直接idなどでフィールドを選択すると、流動的なIDはいずれうまく機能しなくなってしまうためです。

これは慣れれば非常に便利な知識ですので、ぜひ覚えておいてください。

日付と時刻列

[日付と時刻]列は、ちょっとばかり厄介で、日付と時刻でセレクタが変わってきますのでご注意ください。

ユーザーまたはグループ

PeoplePickerで取得する場合は以下のコードを利用します。

var objUserField = $("#ID").parent ().parent ().children (1).find ("input[id$='ClientPeoplePicker_EditorInput']").get (0);
var objPeoplePicker = SPClientPeoplePicker.PickerObjectFromSubElement (objUserField);
objPeoplePicker.GetResolvedUsersAsText()

終わりに

今回は以上です。
今度は列に自動入力するまとめ記事でも書こうかなと思います。
記事のストックがいくつかあるため、それを消化してからになりそうですが・・・・