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

固定リンクがコピーされました

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

固定リンクがコピーされました

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

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

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

固定リンクがコピーされました

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

 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 API