SharePointの各項目の値をJavascriptで取得、設定する方法

19870 ワード
SharePoint JavaScript SharePointOnline jQuery JavaScript テキストリンク

1 はじめに

ここ福岡はずーっと雨でなんか嫌になります
さて、SharePointの開発に必ず付き物なのが、各項目値の操作です。
いわゆるDOM要素の操作ですね。SharePoint標準機能は、１行テキスト項目は規定値を設定できるのに、複数行テキスト項目は規定値を設定できなかったり、正直機能が少ないと思います。
そこで以下の様なことを行いたいというときに項目値を取得、設定する方法を紹介します。
・複数行テキストに規定値のhtmlをセットしたい
・保存時（postback時）に自動的に値をセットしたい
・選択項目の変化をキャッチしたい
・ページ読み込み時に特定の項目に特定の値が入力されていたら特定の制御をしたい

2 本題

以下のコードではjQueryを使ってます。私はSharePoint2013とonlineで使ってます。
説明しますと、以下のキャプチャのようにレンダリングされた各項目のIDのff3などの（項目を作成した連番になる）値と末尾にある項目の種別名の２つをキーとして値を取得、設定します。

以下がコードです。

domgetset.js

// 項目の種別（本当はconstが良さそうだけどIEなので）
var Text      = 'Text';
var Richtext  = 'Richtext';
var DropDown  = 'DropDown';
var DateType  = 'DateType';
var UserGroup = 'UserGroup';

var SearchKeyff12 = 'ff12'; // DOM要素のキー
var setname       = 'Hello!';
var getname       = '';

// コール側
// テキストフィールドに設定
setElement(SearchKeyff12, Text, setname);
// テキストフィールドから取得
getname = getElement(SearchKeyff12, Text);

// コール元：ゲッター
// In1:DOMのID In2:DOMの種類 Retval:DOMの値
function getElement( SearchKeyID, DOMType ){
    var Retval = '';

    switch (DOMType) {
        case 'Text':
            // テキスト項目取得
            $("[id*='TextField']").each(function (i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    Retval = $(elem).val(); 
                }
            });
            break;

        case 'Richtext':
            // リッチテキスト項目取得（複数行）
            $("[id$='_TextField_inplacerte']").each(function(i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    Retval = $(elem).html(); 
                }
            });
            break;

        case 'DropDown':
            // 選択項目取得
            $("select[id*='_DropDownChoice']").each(function (i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    Retval = $(elem).val(); 
                }
            });
            break;

        case 'DateType':
            // 日付項目取得
            $("[name*='DateTimeFieldDate']").each(function(i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    Retval = $(elem).val(); 
                }
            });
            break;

        case 'UserGroup':
            // ユーザーグループ項目取得
            $("[id*='_UserField_hiddenSpanData']").each(function (k, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    Retval = $(elem).val(); 
                }               
            });
            break;

        default:
            break;
    } 
    return Retval;
}

// コール元：セッター
// In1:DOMのID In2:DOMの種類 In3:DOMの値
function setElement( SearchKeyID, DOMType, inputvalue ){

    switch (DOMType) {
        case 'Text':
            // テキスト項目設定
            $("[id*='TextField']").each(function (i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    $(elem).val(inputvalue); 
                }
            });
            break;

        case 'Richtext':
            // リッチテキスト項目設定（複数行）
            $("[id$='_TextField_inplacerte']").each(function(i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    $(elem).html(inputvalue); 
                }
            });
            break;

        case 'DropDown':
            // 選択項目設定
            $("select[id*='_DropDownChoice']").each(function (i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    $(elem).val(inputvalue); 
                }
            });
            break;

        case 'DateType':
            // 日付項目設定
            $("[name*='DateTimeFieldDate']").each(function(i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    $(elem).val(inputvalue); 
                }               
            });
            break;

        case 'UserGroup':
            // ユーザーグループ項目設定
            $("[id*='_UserField_upLevelDiv']").each(function (i, elem) {
                if ($(elem).is("[id*='" + SearchKeyID + "']")){
                    $(elem).html(inputvalue); 
                }               
            });
            break;

        default:
            break;
    } 
}

3 おわりに

なんか他に良い方法ありましたらシェアお願いします。あとコード上の無駄をご指摘いただければ嬉しいです。
それでは、ありがとうございました。