第 13 回 kintone JavaScript カスタマイズのプログラム実例を学ぼう①(フィールド表示 / 非表示)

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

はじめに

前回 では kintone の JavaScript カスタマイズにおける Object と配列のデータ型などについて述べました。
今回以降は カスタマイズ Tips に掲載されている kintone JavaScript カスタマイズを題材に、コードについて紐解いていきたいと思います。

次のようなことを思っている方は必見です。

  • 頑張ってサンプルコードをコピー&ペーストして動かせたけど、コードの意味は理解できていない。
  • サンプルコードを修正して自分好みにカスタマイズしてみたいが、コードの意味が理解できていないので、どの部分を修正すればいいかわからない。

題材

今回は 回答の条件によって別フィールドの表示/非表示を切り替える というサンプルプログラムについて学んでいきましょう。
kintone アプリは、kintone アプリストアにある「 問診票アプリ (External link) 」を使っています。

設問 1,2,3,4,5 の選択によってフィールドの表示 / 非表示を切り替えます。

プログラム

プログラムは下記です。少しずつピックアップして、内容を解説していきます。

 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/*
 * 回答の条件によって別フィールドの表示/非表示を切り替えるサンプルプログラム
 * Copyright (c) 2016 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';

  // レコードの追加、編集、詳細画面で適用する
  const events = ['app.record.detail.show',
    'app.record.create.show',
    'app.record.create.change.past',
    'app.record.create.change.radio2',
    'app.record.create.change.radio3',
    'app.record.create.change.radio4',
    'app.record.create.change.radio5',
    'app.record.edit.show',
    'app.record.edit.change.past',
    'app.record.edit.change.radio2',
    'app.record.edit.change.radio3',
    'app.record.edit.change.radio4',
    'app.record.edit.change.radio5'];

  kintone.events.on(events, (event) => {

    const record = event.record;

    // 1問目になにも選択されていなかった場合は「その他」フィールドを表示しない
    const past = record.past.value;
    if (past.length === 0) {
      kintone.app.record.setFieldShown('other', false);
    }

    // 1問目で「その他」が選択された場合は「その他」フィールドを表示する
    for (let i = 0; i < past.length; i++) {
      if (past[i] === 'その他') {
        kintone.app.record.setFieldShown('other', true);
      } else {
        kintone.app.record.setFieldShown('other', false);
      }

    }

    // 2問目の回答に応じて「予防接種名」フィールドの表示、非表示を切り替える
    if (record.radio2.value === 'ある') {
      kintone.app.record.setFieldShown('vaccination', true);
    } else {
      // 「ない」の場合は非表示
      kintone.app.record.setFieldShown('vaccination', false);
    }

    // 3問目の回答に応じて「病名」「発症した時期」フィールドの表示、非表示を切り替える
    if (record.radio3.value === 'いいえ') {
      kintone.app.record.setFieldShown('disease', false);
      kintone.app.record.setFieldShown('date3', false);
    } else {
      // 「はい」の場合は「病名」「時期」を表示する
      kintone.app.record.setFieldShown('disease', true);
      kintone.app.record.setFieldShown('date3', true);
    }

    // 4問目の回答に応じて「アレルギーの原因」「症状」フィールドの表示、非表示を切り替える
    if (record.radio4.value === 'ない') {
      kintone.app.record.setFieldShown('cause', false);
      kintone.app.record.setFieldShown('symptom', false);
    } else {
      // 「ある」の場合は「病名」「時期」を表示する
      kintone.app.record.setFieldShown('cause', true);
      kintone.app.record.setFieldShown('symptom', true);
    }

    // 5問目の回答に応じて「詳細」フィールドの表示、非表示を切り替える
    if (record.radio5.value === 'ない') {
      kintone.app.record.setFieldShown('detail', false);
    } else {
      // 「ある」の場合は「病名」「時期」を表示する
      kintone.app.record.setFieldShown('detail', true);
    }

    return event;
  });
})();

全体の構成

まずは大まかな部分をみていきましょう。
行数は多いですが、項目に応じた条件分岐項目が多いだけですので、複雑ではありません。
「イベントの定義」部分と「フィールド表示 / 非表示」部分に分けてみていきましょう。
1 問目から 5 問目でそれぞれ「フィールド表示 / 非表示」をするための条件分岐があります。

イベントの定義

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  // レコードの追加、編集、詳細画面で適用する
  const events = ['app.record.detail.show',
    'app.record.create.show',
    'app.record.create.change.past',
    'app.record.create.change.radio2',
    'app.record.create.change.radio3',
    'app.record.create.change.radio4',
    'app.record.create.change.radio5',
    'app.record.edit.show',
    'app.record.edit.change.past',
    'app.record.edit.change.radio2',
    'app.record.edit.change.radio3',
    'app.record.edit.change.radio4',
    'app.record.edit.change.radio5'];

  kintone.events.on(events, (event) => {

kintone.events.on() には上記のように配列で一度にイベントを複数指定できます。
ここで登録しているイベントは次のとおりになります。
レコード追加時と編集時の両方を指定しています。

イベントタイプ イベントが発生するタイミング
app.record.detail.show レコード詳細画面の表示時
app.record.create.show レコード追加画面の表示時
app.record.create.change.past レコード追加画面の表示でフィールドコード[past]変更時
app.record.create.change.radio2 レコード追加画面の表示でフィールドコード[radio2]変更時
app.record.create.change.radio3 レコード追加画面の表示でフィールドコード[radio3]変更時
app.record.create.change.radio4 レコード追加画面の表示でフィールドコード[radio4]変更時
app.record.create.change.radio5 レコード追加画面の表示でフィールドコード[radio5]変更時
app.record.edit.show レコード編集画面の表示時
app.record.edit.change.past レコード編集画面の表示でフィールドコード[past]変更時
app.record.edit.change.radio2 レコード編集画面の表示でフィールドコード[radio2]変更時
app.record.edit.change.radio3 レコード編集画面の表示でフィールドコード[radio3]変更時
app.record.edit.change.radio4 レコード編集画面の表示でフィールドコード[radio4]変更時
app.record.edit.change.radio5 レコード編集画面の表示でフィールドコード[radio5]変更時

フィールドの表示 / 非表示の制御

まず、表示 / 非表示の制御は、 kintone.app.record.setFieldShown() を使うことでできます。
フィールドコードを指定して、表示したければ true を指定、非表示にしたければ false を指定します。

1
kintone.app.record.setFieldShown({フィールドコード名}, {true / false});

これを使って条件に応じて表示 / 非表示を切り替えています。

ラジオボタンの選択判定について

ラジオボタンで選ばれている値は record['radio2']['value'] というように一行文字列や数値フィールドと同様に取得できます。
そのため次のようにして if 文で条件分岐を書くことができます。

1
2
3
if (record['radio2']['value'] === 'ある') {
  // ラジオボタンで「ある」が選ばれている場合の処理
}
  • 1 問目の表示制御(条件分岐 1)

    複数選択フィールド[past]でひとつも選択されていない場合は、[その他]フィールドを非表示にする。

    30
    31
    32
    33
    34
    
        // 1問目になにも選択されていなかった場合は「その他」フィールドを表示しない
        const past = record.past.value;
        if (past.length === 0) {
          kintone.app.record.setFieldShown('other', false);
        }

    [past]で[その他]が選択されているか確認し、選択されていれば[その他]フィールドを表示する。
    複数選択フィールドなので、for 文で中身をすべて確認する。

    36
    37
    38
    39
    40
    41
    42
    43
    44
    
        // 1問目で「その他」が選択された場合は「その他」フィールドを表示する
        for (let i = 0; i < past.length; i++) {
          if (past[i] === 'その他') {
            kintone.app.record.setFieldShown('other', true);
          } else {
            kintone.app.record.setFieldShown('other', false);
          }
    
        }
  • 2 問目の表示制御(条件分岐 2)

    [radio2]で「ある」が選択された場合は[vaccination]フィールドを表示する。

    46
    47
    48
    49
    50
    51
    52
    
        // 2問目の回答に応じて「予防接種名」フィールドの表示、非表示を切り替える
        if (record.radio2.value === 'ある') {
          kintone.app.record.setFieldShown('vaccination', true);
        } else {
          // 「ない」の場合は非表示
          kintone.app.record.setFieldShown('vaccination', false);
        }
  • 3 問目の表示制御(条件分岐 3)

    [radio3]で「いいえ」が選択された場合は[disease]、[date3]フィールドを非表示にする。

    54
    55
    56
    57
    58
    59
    60
    61
    62
    
        // 3問目の回答に応じて「病名」「発症した時期」フィールドの表示、非表示を切り替える
        if (record.radio3.value === 'いいえ') {
          kintone.app.record.setFieldShown('disease', false);
          kintone.app.record.setFieldShown('date3', false);
        } else {
          // 「はい」の場合は「病名」「時期」を表示する
          kintone.app.record.setFieldShown('disease', true);
          kintone.app.record.setFieldShown('date3', true);
        }
  • 4 問目の表示制御(条件分岐 4)

    [radio4]で「ない」が選択された場合は[cause]、[symptom]フィールドを非表示にする。

    64
    65
    66
    67
    68
    69
    70
    71
    72
    
        // 4問目の回答に応じて「アレルギーの原因」「症状」フィールドの表示、非表示を切り替える
        if (record.radio4.value === 'ない') {
          kintone.app.record.setFieldShown('cause', false);
          kintone.app.record.setFieldShown('symptom', false);
        } else {
          // 「ある」の場合は「病名」「時期」を表示する
          kintone.app.record.setFieldShown('cause', true);
          kintone.app.record.setFieldShown('symptom', true);
        }
  • 5 問目の表示制御(条件分岐 5)

    [radio5]で「ない」が選択された場合は[detail]フィールドを非表示にする。

    74
    75
    76
    77
    78
    79
    80
    
        // 5問目の回答に応じて「詳細」フィールドの表示、非表示を切り替える
        if (record.radio5.value === 'ない') {
          kintone.app.record.setFieldShown('detail', false);
        } else {
          // 「ある」の場合は「病名」「時期」を表示する
          kintone.app.record.setFieldShown('detail', true);
        }

上記のように選択された値をもとに条件分岐を書いていくだけですので、内容はシンプルです。

まとめ

このように、if 文と kintone.app.record.setFieldShown() を組み合わせれば、好きな条件に応じてフィールドの表示 / 非表示が簡単にできます。
応用できる場面は数多くあると思いますので、このパターンを使えるようにしておくといいでしょう。

information

この Tips は、2022 年 6 月版 kintone で動作を確認しています。