kintoneプラグインで、表示中のレコードを更新するJavaScriptを書く

kintoneプラグインを使用して、ボタンやフォームをアプリに追加することができます。また、ボタンやフォームの操作によってkintoneのレコードを更新することもできます。この記事では、kintoneのREST APIを使用してレコードを更新する方法について説明しています。レコードを更新した後、ページを再読み込みすることもできます。さらに、Spinnerを使用するとローダーを表示することができます。更新した履歴を残すために、kintoneのAPIを使用することもできます。参考になるリンクも掲載されています。

kintoneプラグインで、ボタンやフォームをアプリに追加することができます。ボタンやフォームの操作によって、kintoneのレコードを更新することも可能です。

今回は、kintoneのREST APIを使ってレコードを更新する方法を簡単にまとめました。

今いるページのレコードを更新する処理のサンプル

今操作しているページのレコードを更新したい場合、最小限のコードがこんな感じです。


      const recordData = kintone.app.record.get();
      kintone.api(kintone.api.url("/k/v1/record.json", true), "PUT", {
        app: kintone.app.getId(),
        id: recordData.record.$id.value,
        record: {
          invoice_id: {
            value: "invoice.id",
          },
        },
      });

kintone.app.record.getでレコード情報を取得し、更新・追加したい項目を/k/v1/record.jsonへのPUTリクエストで送信しています。

更新後にページを再読み込みする

レコードを更新した後、アプリ側の表示を変える必要ああります。

今回はシンプルにリロードさせる方法をとりました。


      const recordData = kintone.app.record.get();
      kintone.api(kintone.api.url("/k/v1/record.json", true), "PUT", {
        app: kintone.app.getId(),
        id: recordData.record.$id.value,
        record: {
          invoice_id: {
            value: "invoice.id",
          },
        },
      });
      location.reload();

サンプルコード全体像

レコード詳細ページにボタンを配置し、ボタンをクリックするとレコードを更新するプラグインのコードです。

kintone.events.on("app.record.detail.show", (e) => {
  const spaceElement = document.getElementById("record-gaia");
  if (spaceElement === null) {
    throw new Error("The header element is unavailable on this page");
  }
  const fragment = document.createDocumentFragment();
  const rowElement = document.createElement("div");
  rowElement.classList.add("row-gaia");
  const buttonElement = new Button({
    text: "請求書を発行する",
    type: "submit",
  });
  buttonElement.addEventListener("click", async (event) => {
    const spinnerElement = new Spinner({
      text: "作成中...",
    });
    spinnerElement.open();
    try {
      const recordData = kintone.app.record.get();

      // 更新したいデータを取得する処理

      kintone.api(kintone.api.url("/k/v1/record.json", true), "PUT", {
        app: kintone.app.getId(),
        id: recordData.record.$id.value,
        record: {
          invoice_id: {
            value: "invoice.id",
          },
        },
      });
      location.reload();
    } catch (error) {
      console.log(error);
    } finally {
      spinnerElement.close();
    }
  });
  rowElement.appendChild(buttonElement);
  fragment.appendChild(rowElement);
  spaceElement.appendChild(fragment);
});

Spinnerを使うと、ローダーを出すことができます。