カスケード機能の実装

2019.01.08

小林

こんにちは、MS開発部の小林です。

今回はSharePointサイト内のフォーム画面でカスケード機能を実装する方法をご紹介します。
※今回の内容はクラシック表示の場合になります。

設定方法

2つの分類マスタをカスタムリストで作成します。

親（第1階層）の分類マスタにアイテムを登録します。下記の例では国名を登録しています。

子（第2階層）の分類マスタには親の分類マスタを参照した参照列を追加します。

親の分類マスタに紐づくアイテムを登録します。下記の例では都市名を登録しています。

カスケード機能を実装するリストを作成します。

親の分類マスタを参照した参照列と子の分類マスタを参照した参照列を追加します。

ビュー画面の【リスト】タブをクリックし、【フォームWebパーツ：既定の新しいフォーム】をクリックします。

※編集フォーム（EditForm）に実装する場合は【フォームWebパーツ：既定の編集フォーム】をクリックします。

【Webパーツの追加】をクリックし、【スクリプトエディター】を追加します。

【スニペットを編集】をクリックし、下記のコードを入力します。

リスト名や内部列名をコメントの内容に合わせて変更してください。


<script src="https://code.jquery.com/jquery-3.3.1.min.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: "Category2",
            // 参照列の内部列名
            relationshipListParentColumn: "Category1",
            // 参照した列の親リストでの内部列名
            relationshipListChildColumn: "Title",
            // ドロップダウンの select 要素の title 属性(親、子)
            parentColumn: "Category1",
            childColumn: "Category2",
            noneText: "(なし)"
        });
    });
</script>