SharePoint Online のドキュメントライブラリにアップロードした .aspx ファイルから JSOM を利用したい

JavaScript

2020.07.20

SharePoint Online のドキュメントライブラリに拡張子を .aspx とした HTML をアップロードすると、そのままブラウザで HTML の内容を表示できることは以前の記事で書いた通りです。

SharePoint Online モダンページで “ちょっと” カスタマイズできる方法を模索してみる
https://idea.tostring.jp/?p=3986

上記リンク先の記事を書いたときは、.aspx から SharePoint への通信は REST API を利用する方法で紹介しましたが、どうしても JSOM（JavaScript Object Model）を使いたいという方向けに方法を書いておきます。

リンク先の記事では「この方法では SharePoint Online の JavaScript Object Model（JSOM）は利用できないため、SharePoint Online のデータを利用する場合には REST API を利用する」と書いていますが、実は JSOM も利用できました！という内容です。

さっそくコード
動作確認
さいごに

さっそくコード

それではさっそくサンプルコードです。

<html dir="ltr" lang="ja-JP">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>サンプル</title>
    <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/init.js"></script>
    <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/MicrosoftAjax.js"></script>
    <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/SP.Runtime.js"></script>
    <script type="text/javascript" src="//contoso.sharepoint.com/_layouts/15/SP.js"></script>
    <script type="text/javascript">
      var ctx = SP.ClientContext.get_current();
        var web = ctx.get_web();
        var lists = web.get_lists();
        ctx.load(lists, "Include(Id,Title)");
        ctx.executeQueryAsync(
          function (sender, args) {
            lists.get_data().forEach(function(list){
              var node = document.createElement("li");
              node.appendChild(document.createTextNode(list.get_title()));
              document.getElementById("result").appendChild(node);
            });
        });
    </script>
  </head>
  <body>
    <ul id="result"></ul>
  </body>
</html>

ポイントは 5 行目～ 8 行目です。4 つの .js ファイルを順番に呼び出しています。