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

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

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

app.record.edit.show

app.record.edit.show を kintone.events.on に含めることで、レコード詳細画面での編集開始時にプログラムを動作させることが可能です。

注意が必要なのは、レコード一覧の編集時には動作しないということです。

レコード一覧の編集時にもプログラムを動作させたい場合は、app.record.index.edit.showも kintone.events.on の引数に含める必要があります。

サンプルコード

チェックボックスのチェックに応じて入力可否を制御

kintone.events.on(['app.record.edit.show'], (event) => {
  /** レコード内のチェックボックスフィールド */
  const categories = event.record['興味のあるカテゴリー'].value;

  // 未定義または未設定の場合は処理しません
  if (!categories?.length) {
    return event;
  }

  // 動物に興味がない場合
  if (!categories.includes('動物')) {
    // 犬派なのか猫派なのかは入力させない
    event.record['犬派_猫派'].disabled = true;
  }

  return event;
});

日付フィールドから経過日数を算出し、フィールドに設定

kintone.events.on(['app.record.edit.show'], (event) => {
  const now = new Date();

  /** レコード内の日付フィールド */
  const dateField = event.record['日付'].value;

  // 未入力の場合は処理しません
  if (!dateField) {
    return event;
  }

  const date = new Date(dateField);

  // 本日までの経過日数を算出
  const elapsedDays = Math.floor((now.getTime() - date.getTime()) / (1000 * 60 * 60 * 24));

  // 対象フィールドに設定
  event.record['経過日数'].value = elapsedDays;

  return event;
});

画面にボタンを設置し、ボタンを押したタイミングでフィールド情報を別のフィールドにコピーする

/** ボタンを設置するスペース */
const SPACE_ID = 'target-space';

kintone.events.on(['app.record.edit.show'], (event) => {
  /** 対象スペース */
  const spaceElement = kintone.app.record.getSpaceElement(SPACE_ID);

  // スペースの取得に失敗した場合は、エラーメッセージを表示し、処理をスキップ
  if (!spaceElement) {
    event.error = 'ボタンを設置するためのスペースが存在しません';
    return event;
  }

  /** 設置するボタン */
  const button = document.createElement('button');
  button.innerText = 'コピー';

  button.onClick = () => {
    // ボタンがクリックされるタイミングと、イベントが発生するタイミングが異なるため、
    // レコードを操作する場合は以下の方法で取得する必要があります
    const { record } = kintone.app.record.get();

    record['コピー先'].value = record['コピー元'].value;

    kintone.app.record.set({ record });
  };

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

  return event;
});