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

kintone のレコード編集画面で「入力可否を切り替えたい」「他のフィールドの値から自動計算したい」「ボタンで値をコピーしたい」といった要望は、app.record.edit.show イベントで実現できます。

この記事では、レコード編集時によく使う 3 つの実装例をサンプルコードで紹介します。

app.record.edit.show

app.record.edit.show を kintone.events.on に指定すると、レコード詳細画面で編集を開始したとき（レコード編集画面の表示時）にプログラムを実行できます。

注意が必要なのは、レコード一覧上のインライン編集では発生しないことです。一覧の編集時にも処理したい場合は、app.record.index.edit.show も kintone.events.on の第一引数に含めてください。

また、スマートフォン版では mobile.app.record.edit.show を使用します。

サンプルコード

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

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);

  // スペースの取得に失敗した場合は、処理をスキップ
  // (show 系イベントでは event.error による画面表示はできないため、コンソールに出力します)
  if (!spaceElement) {
    console.error('ボタンを設置するためのスペースが存在しません');
    return event;
  }

  /** 設置するボタン */
  const button = document.createElement('button');
  button.type = '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;
});