Ribbit.work

記事のトップ画像

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone

last modified date2021-12-2

publish date2021-11-29

KintoneのJavaScriptカスタマイズについての情報は多く存在しますが、「じゃあ、結局やりたいことを実現させるためにはどうすればいいの?」という問題を簡単に解決することが難しいように感じました。

今回はいくつかのサンプルコードを使って、レコード一覧表示時におけるプログラムの実装例をご紹介します。

app.record.index.show

app.record.index.showをkintone.events.onに含めることで、レコード一覧画面にプログラムを動作させることが可能です。

また、レコード一覧には表示中のレコードを取得できたり、一覧のクエリを取得したりと、さまざまな専用APIが提供されています

サンプルコード

レコードの値に応じて、各行の背景色を操作する

kintone.events.on(["app.record.index.show"], (event) => {
  /** 一覧の対象フィールドのDOM要素を取得 */
  const animalFields = kintone.app.getFieldElements("動物");
  /** 表示中のレコード一覧 */
  const records = event.records;

  for (let i = 0; i < animalFields.length; i++) {
    /** 対象レコードの列要素 */
    const rowElement = animalFields[i].closest("tr");
    const record = records[i];

    // レコードの値に応じて背景色を変更
    switch (record["動物"].value) {
      case "猫":
        rowElement.style.backgroundColor = "#80beaf";
        break;
      case "犬":
        rowElement.style.backgroundColor = "#ee9c6a";
        break;
      default:
        rowElement.style.backgroundColor = "#f1f1f1";
    }
  }

  return event;
});

ボタンを設置し、クリック時に表示されている全てのレコードのフィールドを操作する

レコードを一括で取得したりPOSTする関数が定義されていることを前提としたコードです。

一括処理についてはこちらをご覧ください。

/** ボタンを設置するスペース */
const BUTTON_ID = "ribbit-button-id";

kintone.events.on(["app.record.edit.show"], (event) => {
  // ボタンが複数個生成されないようにする
  if (document.querySelector(`#${BUTTON_ID}`)) {
    return event;
  }

  const button = document.createElement("button");
  button.id = BUTTON_ID;
  button.onclick = async () => {
    const app = kintone.app.getId();
    const query = kintone.app.getQueryCondition();
    const fields = ["$id", "確認済フラグ"];

    const records = await getAllRecords({ app, query, fields });

    const updationTargets = records.map((record) => ({
      id: record.$id.value,
      record: {
        確認済フラグ: { value: "済" },
      },
    }));

    await postAllRecords(updationTargets);
  };

  /** 対象スペース */
  const headerElement = kintone.app.getHeaderMenuSpaceElement(SPACE_ID);

  // ボタンを設置
  headerElement.append(button);

  return event;
});