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

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

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

app.record.index.show

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

一覧画面では、表示中のレコードが event.records に格納されます（詳細・編集画面の event.record とは異なります）。また、一覧のクエリを取得する kintone.app.getQueryCondition、一覧の列要素を取得する kintone.app.getFieldElements など、一覧専用の 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;
});

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

レコードを一括で取得したり更新したりする関数（getAllRecords、postAllRecords）が定義されていることを前提としたコードです。

一括処理については以下のページを参照してください。

/** ボタンの ID */
const BUTTON_ID = 'ribbit-button-id';

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

  const button = document.createElement('button');
  button.id = BUTTON_ID;
  button.textContent = '全て確認済みにする';
  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(app, updationTargets);
  };

  /** 一覧上部のヘッダーメニュー領域 */
  const headerElement = kintone.app.getHeaderMenuSpaceElement();

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

  return event;
});