SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。
今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。
前提条件
- SharePoint Online
- モダンUI
- カスタムJSが使用できる（SPFx）
そもそもカスタムJSをどうやって使うの、という方は以下の記事をどうぞ
SharePointのモダンUIでカスタムCSS・カスタムJSを適用する方法
1.REST APIで情報を取得
では早速、カスタムJSにAPI情報を取得してみます。
REST APIは、以下のURLにアクセスすると取得できます。
REST APIのURL
|
1 2 3 4 5 |
//リスト /sites/{mySiteName}/_api/web/lists/getbytitle('{listName}')/items //例：8bitというサイトのcustomHeaderNavigationというリストの場合 /sites/8bit/_api/web/lists/getbytitle('customHeaderNavigation')/items |
このURLの、{mySiteName} にはサイト名を、{listName} にはリスト名を挿入します。
データを取得する処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// REST APIのURL var listUrl = "/sites/8bit/_api/web/lists/getbytitle('customHeaderNavigation')/items"; // リストデータの取得 fetch(listUrl, { method: 'GET', headers: { 'Accept': 'application/json;odata=nometadata' } }) .then(response => response.json()) .then(data => { // 取得したデータを書き換える処理をここに書く console.log(data); }) .catch(error => { console.error('エラー', error); }); |
コンソールにデータが表示されていれば成功です。
2.取得した情報をheaderに表示
次に、取得した情報をHTMLタグに整形し、headerに差し込んでみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
// REST APIのURL var listUrl = "/sites/8bit/_api/web/lists/getbytitle('customHeaderNavigation')/items"; // リストデータの取得 fetch(listUrl, { method: 'GET', headers: { 'Accept': 'application/json;odata=nometadata' } }) .then(response => response.json()) .then(data => { // 取得したデータを基にDOMを生成 if (data && data.value && data.value.length > 0) { //SiteHeaderのDOMを取得 var siteHeader = document.querySelector('[data-automationid="SiteHeader"]'); if (siteHeader) { var targetElement = siteHeader.querySelector('[class*="adjacentTitleSubcell-"]'); if (targetElement) { //ul要素を生成 var ulElement = document.createElement('ul'); //生成 ulElement.id = 'customHeaderNav'; //ulにidを付与 targetElement.appendChild(ulElement); //ulタグを挿入 //liタグを生成 data.value.forEach(item => { //アイテムの個数分処理 var listItem = document.createElement('li'); // var link = document.createElement('a'); //aタグを生成 link.textContent = item.Title || ''; //タイトルテキストを挿入 link.href = item.Link || '#'; //aタグのhrefを挿入（定義が無ければ#） if (item.newTabOpen) { //newTabOpenがtrueならblankで開く link.target = '_blank'; link.rel = 'noopener noreferrer'; link.setAttribute('data-interception', 'off'); } link.classList.add('headBtn'); //aタグにclassを付与 listItem.appendChild(link); //aタグをliタグに挿入 ulElement.appendChild(listItem); //liタグをulに挿入 }); } } } }) .catch(error => { console.error('エラー', error); }); |
このサンプルコードは、ul>li>aの構造で、リストアイテム分のナビを生成しています。
以下のように、配列から各リストデータを取り出しています。
・item.Title … Title列を取得
・item.Link … Link列を取得
・item.newTabOpen … newTabOpen列を取得
idとclassを付与しているので、カスタムCSSを使用すれば独自のスタイルも適用可能です。
