フィールドの表示/非表示を切り替えてみよう

目次

前回は、レコードの画面に任意のテキストを表示するカスタマイズを通して、kintone イベントの使い方や kintone のレコード画面にテキストを表示する方法を学びました。
今回は、次のことを学びます。

  • 複数のイベントで同じ処理を実行する方法
  • 条件によってフィールドの表示/非表示を切り替える方法

カスタマイズを適用するアプリ

次のフィールドを配置したアプリを作成します。

フィールド名 フィールドタイプ フィールドコード 備考
入金ステータス ラジオボタン 入金ステータス 次の選択肢を設定する
  • 未入金
  • 確認済
入金日 日付 入金日
入金確認者 ユーザー選択 入金確認者

フィールドの表示/非表示を切り替える

ラジオボタンの値に応じてフィールドの表示/非表示を切り替えてみましょう。
実装するのは、「入金ステータス」に応じて「入金日」と「入金確認者」のフィールドの表示/非表示を切り替えるカスタマイズです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
(() => {
  'use strict';
  // 制御に利用するラジオボタンのフィールドコード
  const statusFieldCode = '入金ステータス';
  // 表示非表示を切り替えるフィールドのフィールドコード
  const fieldCodes = ['入金日', '入金確認者'];

  // 「入金ステータス」フィールドによって、特定のフィールドの表示/非表示を切り替える
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    `app.record.create.change.${statusFieldCode}`,
    `app.record.edit.change.${statusFieldCode}`
  ], (event) => {
    const record = event.record;
    const statusFieldValue = record[statusFieldCode].value;
    fieldCodes.forEach((fieldCode) => {
      if (statusFieldValue !== '確認済') {
        kintone.app.record.setFieldShown(fieldCode, false);
      } else {
        kintone.app.record.setFieldShown(fieldCode, true);
      }
    });

    return event;
  });
})();

動作イメージ

このカスタマイズを適用すると、レコード追加画面と編集画面で、「入金ステータス」が確認済のときに「入金日」「入金確認者」が非表示になります。

ソースコードの解説

このカスタマイズのポイントは次の 3 つです。

  • イベントを複数指定する。
  • 表示されているレコードの情報を取得する。
  • フィールドの表示/非表示を切り替える。

イベントを複数指定する

このカスタマイズでは、ユーザーが次の 4 つの操作のいずれかを行ったとき、処理を実行します。

  • レコード追加画面を表示したとき
  • レコード編集画面を表示したとき
  • レコード追加画面で「入金ステータス」の値を変更したとき
  • レコード編集画面で「入金ステータス」の値を変更したとき

複数のイベントで同じ処理を実行したい場合には、kintone.events.on() の第 1 引数に配列でイベントタイプを指定します。

 9
10
11
12
13
14
15
16
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    `app.record.create.change.${statusFieldCode}`,
    `app.record.edit.change.${statusFieldCode}`
  ], (event) => {
    // 実行したい処理
  });

表示されているレコードの情報を取得する

表示されているレコードの情報は、kintone.events.on() の第 1 引数、つまり event という変数に入っています。
この event のことを、イベントオブジェクトと呼びます。

レコードの情報は、イベントオプジェクトの record プロパティに格納されており、event.record で取得します。
各フィールドの値は event.record['フィールドコード'].value で取得できます。
したがって「入金ステータス」の値は event.record['入金ステータス'].value で取得できます。

今回、フィールドコードは statusFieldCode という変数に代入しているため、statusFieldCode を使って取得します。

 9
10
11
12
13
14
15
16
  kintone.events.on([
    'app.record.create.show',
    'app.record.edit.show',
    `app.record.create.change.${statusFieldCode}`,
    `app.record.edit.change.${statusFieldCode}`
  ], (event) => {
    const record = event.record;
    const statusFieldValue = record[statusFieldCode].value;

まとめ

フィールドの表示/非表示を切り替えるには、kintone.app.record.setFieldShown() という API を使うと実現できることを学びました。 また、kintone.events.on() でイベントタイプを配列で指定すると、複数のイベントで同じ処理を実行できます。
レコード追加画面と編集画面では同じ処理を実行したいケースも多いため、配列で指定する方法を覚えておくと便利です。

次回は、 フィールドの編集可/編集不可を切り替えてみよう を学びます。