サンプル集 - app.record.index.show

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;

  animalFields.forEach((animalField, index) => {
    /** 対象レコードの列要素 */
    const rowElement = animalField.closest('tr');
    const record = records[index];

    // レコードの値に応じて背景色を変更
    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;
});