カスケード機能の実装

こんにちは、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>

$(document).ready(function () {

$().SPServices.SPCascadeDropdowns({

// 第一言語でのリスト表示名

relationshipList: "Category2",

// 参照列の内部列名

relationshipListParentColumn: "Category1",

// 参照した列の親リストでの内部列名

relationshipListChildColumn: "Title",

// ドロップダウンの select 要素の title 属性(親、子)

parentColumn: "Category1",

childColumn: "Category2",

noneText: "(なし)"

});

</script>

【挿入】をクリックし、編集画面の【編集の終了】をクリックして完了です。

【新しいアイテム】をクリックし、フォーム画面で参照列のプルダウンを確認すると、カスケード機能が実装されていることが確認できます。

実装前は親（第1階層）の参照列から【日本】を選択しても、日本以外の都市も子（第2階層）の参照列に表示されます。