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

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

（著者：kintone エバンジェリスト 村濱 一樹）

前回第12回ではkintoneのJavaScriptカスタマイズにおけるObjectと配列のデータ型などについて述べましたが、
今回以降は、cybozu developer network に掲載されているkintone JavaScriptカスタマイズを題材に、コードについて紐解いていきたいと思います。
「頑張ってサンプルコードをコピー&ペーストして動かせたけど、コードの意味は理解できていない」、
「サンプルコードを修正して、自分好みにカスタマイズしてみたいが、コードの意味が理解できていないので、どの部分を修正すればいいかわからない。」など思っている方は必見です。

題材: 回答の条件によって別フィールドの表示/非表示を切り替える

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

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

プログラム

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

全体の構成

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

 イベントの定義

 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 を指定します。

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

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

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

•  1問目の表示制御（条件分岐1）

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

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

• 2問目の表示制御（条件分岐2）

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

• 3問目の表示制御（条件分岐3）

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

• 4問目の表示制御（条件分岐4）

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

• 5問目の表示制御（条件分岐5）

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

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

まとめ

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

この記事は、2022年6月版 kintoneで確認したものになります。

<< はじめようJavaScript 第12回 kintone JavaScript カスタマイズでkintoneのデータを見てみる  |  はじめようJavaScript第14回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう②（条件書式設定）>>