はじめに

SharePointOnlineで作成したリストに対してJavaScriptからデータの登録/更新/削除を行うメソッドについてまとめています。

リスト名と対象アイテム

今回は以下のSharePointリソースに対して操作を行います。

リスト名
Fruits

リストアイテム

カラム名	プロパティ
Title	テキスト
Quantity	数値
HasStock	はい/いいえ

POSTメソッドによるリストデータの登録

POSTメソッドでデータを追加する場合は、リクエストのdata部分に登録するデータを設定します(各プロパティに対応する値を指定)。
また、リストのListItemEmptyTypeFullNameの値をHTTPリクエストボディに記述する必要があります。¹

// 登録データを設定
const data = JSON.stringify({
  '__metadata': { 'type': 'SP.Data.FruitsListItem' }, // typeにListItemEntityTypeFullNameの値を指定
  'Title': 'Orange',
  'Quantity': 1,
  'HasStock': true,
});

// SharePointリソースにアクセスするためのURLを設定
const url = `${(組織名)}/sites/${(サイト名)}/_api/web/lists/getbytitle('Fruits')/items`;

// ajaxリクエストを発行
$.ajax({
  contentType: "application/json;odata=verbose",
  data: data,
  headers: {
    "accept": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    "IF-MATCH": "*",
  },
  method: "POST",
  url: url
})
.done(() => {
  // 成功したときの処理をここに記述
})
.fail(() => {
  // 失敗したときの処理をここに記述
});

MERGEメソッドによるリストデータの更新

MERGEメソッドを使用して、指定したIDのリストアイテムを更新することができます。
POSTメソッドと同様に対象のリストのListItemEntityTypeFullNameの値をHTTPリクエストボディに含める必要があります。¹

// 更新アイテムのIDを設定
const id = 1;
// 更新データを設定
const data = JSON.stringify({
  '__metadata': { 'type': 'SP.Data.FruitsListItem' }, // typeにListItemEntityTypeFullNameの値を指定
  'Title': 'Banana',
  'Quantity': 2,
  'HasStock': false,
});

// SharePointリソースにアクセスするためのURLを設定
const url = `${(組織名)}/sites/${(サイト名)}/_api/web/lists/getbytitle('Fruits')/items(${id})`;

// ajaxリクエストを発行
$.ajax({
  contentType: "application/json;odata=verbose",
  data: data,
  headers: {
    "accept": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    "IF-MATCH": "*",
  },
  method: "MERGE",
  url: url
})
.done(() => {
  // 成功したときの処理をここに記述
})
.fail(() => {
  // 失敗したときの処理をここに記述
});

DELETEメソッドによるリストデータの削除

DELETEメソッドでデータを削除する場合は、削除したいアイテムのIDを指定してajaxリクエストを発行します。

// 削除するアイテムのIDを設定
const id = 1;
// SharePointリソースにアクセスするためのURLを設定
const url = `${(組織名)}/sites/${(サイト名)}/_api/web/lists/getbytitle('Fruits')/items(${id})`;

// ajaxリクエストを発行
$.ajax({
  contentType: "application/json;odata=verbose",
  headers: {
    "accept": "application/json;odata=verbose",
    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
    "IF-MATCH": "*",
  },
  method: "DELETE",
  url: url
})
.done(() => {
  // 成功したときの処理をここに記述
})
.fail(() => {
  // 失敗したときの処理をここに記述
});

参考ページ

RESTを使用してリストとリストアイテムを操作する

GETメソッドを使用して確認できます。参考 ↩ ↩²

SharePoint OnlineでREST APIを使ってリストアイテムを登録/更新/削除する