SharePoint では HTMLページ/HTMLファイルがサポートされるようになりました。HTMLファイルを任意のライブラリにアップロードするとHTMLファイルと呼び表示する場合は他のライブラリ内のファイルと同様にビューアーで開くことになります。一方、サイトのページライブラリにアップロードするとHTMLページ呼び、SharePointのヘッダーやフッター、ナビゲーションも一緒に表示できます。
さて、HTMLファイル/ページではSharePointとExcelのデータを取得できるようになっています。今回は SharePoint リストのデータを取得するスクリプトがどうなっているのかを確認してみましょう。
スクリプトの理解
今回の検証に使っているのは部内の図書管理を想定しているサンプルのリストです。生成されているHTMLページは次の通りです。
ソースコードを見てみるとHTML内の body>main 内に script タグが用意されており、ここで接続する SharePoint リストを宣言しています。
<script type="application/json" class="ka-livedata-manifest">
[
{
"kind": "list",
"spItemUrl": "list:...",
"webUrl": "...",
"listId": "e81dfe67-92eb-40da-a6ed-889033dcbdd0",
"select": [
"Title",
"ISBN",
"Publisher",
"Category",
"Location",
"OwnerDepartment",
"LoanStatus",
"Borrower",
"LoanDate",
"DueDate"
],
"label": "図書管理"
}
]
</script>
window.__LD_RESULTS__
var _resultsGlobal = window.__LD_RESULTS__ || {};
var _spUrl = _items[_ri].spItemUrl;
var _data = _resultsGlobal[_spUrl];
loadTablar()
取得したデータは loadTabular()に渡されます。
var headers = listData.headers;
var rawRows = listData.rows || [];
keyedRow[headers[colIdx]] = cellValues[colIdx];
render(results)
render(results)で画面描写処理を行います。
最後に次のコードでページ内に挿入しています。
_defaultContainer.innerHTML = _rendered;
全体的な処理の流れは次の通りです。
まとめ
いろいろと制約があるHTMLページですが、SharePoint REST APIや Graph API を直接利用するアプローチとどのように異なっているのかに興味があったので、今回はCopilot in SharePointによって生成されたHTMLページを改めて調べてみました。
生成されたHTMLを実際に確認してみることで、SharePointのHTMLページでリストデータがどのように扱われているのかがわかってきました。HTML Viewer(コード内での呼称)がSharePointリストと独自のHTMLとの橋渡しの役割をしており、逆に言えばこれがリストとのやりとりの制約にもなってくるわけですね。
今後まだいろいろとアップデートされるでしょうから、あくまでも現時点での内容としてとらえてください。
