【SharePoint Online】参照列のドロップダウンに親子要素を付与するCascade Drop Downを利用する【Javascript】

こんにちは。
今回は参照列に対してカスケード機能を実装します。
この機能は、例えば「国」という列と「地名」という列があった場合に、
「国」で「日本」を選ぶと、「地名」列の選択肢が「東京」、「大阪」、「札幌」というように、
フィルターを掛けることができる機能になります。

それでは行きましょう。

リスト作成

まずはマスタとなるリストの設定をしていきましょう。
親カテゴリとなるマスタと子カテゴリとなるマスタを作成します。
※マスタは、実際にカスケードする列の参照列を予め保管しておくリストです。

親カテゴリにアイテムを登録します。
今回は2つカテゴリを作りました。

子カテゴリにアイテムを登録します。
親カテゴリを参照した参照列を追加します。

それではカスケード機能を実装するリストを作成しましょう。
マスタを参照列として登録します。

これでリスト作成は完了です。
ここまでに作成したのは、
 1.ParentCategory←「好きな言語は?」リストに挿入する列のマスタ
 2.ChildCategory←「好きな言語は?」リストに挿入する列のマスタ
 3.好きな言語は?←カスケード機能を実装するリスト
です。

カスケード機能用スクリプトを実装する

それではコードを書いていきましょう。
以下がソースになります。
jQueryとjquery.SPServicesというライブラリをCDNで読み込んでいます。
CDNが利用できない環境の場合はダウンロードしておきましょう。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function () {
        $().SPServices.SPCascadeDropdowns({
            // 紐付いているリスト(子要素リスト)
            relationshipList: "ChildCategory",
            // 紐付いているリスト(子要素リスト)内の参照している親リストの内部列名
            relationshipListParentColumn: "ParentCategory",
            // 参照した列の親リストでの内部列名
            relationshipListChildColumn: "Title",
            // 列紐付け
            parentColumn: "ParentCategory",
            childColumn: "ChildCategory"
        });
    });
</script>

簡単な解説

今回利用している「jquery.SPServices」には、SPCascadeDropdownsという関数があり、
そのプロパティを設定することで容易にカスケード機能を実装することができます。
プロパティに関してはコメントを確認してみてください。

ただし、この「jquery.SPServices」はSPS2013以降のシステムには公式では対応していないようです。
そのため、正常に稼働しなくても問い合わせなどは行なえませんのでご注意ください。

また、ソースを確認するとわかるのですが、jQueryはv1.8か1.10.xを利用することが推奨されているようです。

実装&確認

対象リストのNewForm(EditFormでも可)を展開し、「スクリプトエディタ」を挿入します。
書いたコードを埋め込んで保存しましょう。

さて、それでは正常に稼働するか確認してみましょう。
NewFormを開いて、ドロップダウンを確認していきましょう。
まずは通常の表示です。

ChildCategoryが「(None)」になっていて、プルダウンが表示されていません。
「(None)」という表示を治す場合は以下のように「noneText」プロパティを設定してください。

・・・略
$().SPServices.SPCascadeDropdowns({
            // 紐付いているリスト(子要素リスト)
            relationshipList: "ChildCategory",
            // 紐付いているリスト(子要素リスト)内の参照している親リストの内部列名
            relationshipListParentColumn: "ParentCategory",
            // 参照した列の親リストでの内部列名
            relationshipListChildColumn: "Title",
            // 列紐付け
            parentColumn: "ParentCategory",
            childColumn: "ChildCategory",
            noneText: "(なし)"
        });
・・・略

次にParentCategoryを選択した場合の表示です。

高級言語に紐付いているプルダウンのみが表示されました。
低級言語を選択した場合も同様にカスケードされていました。
正常に動いていますね。

終わりに

今回は以上です。
結構簡単にカスケード機能を実装できて大変便利ですね。
実際に自分で書く場合はかなりの工数が割かれることを考えると、
こういうライブラリは覚えておくと得した気分になりますね。

それではまた。