カテゴリー内の他の記事

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

フォローする

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

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

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

今回は 回答の条件によって別フィールドの表示/非表示を切り替える というサンプルプログラムについて学んでいきましょう。
設問1,2,3,4,5の選択によってフィールドの表示/非表示を切り替えます。

______.jpg

プログラム

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

全体の構成

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

_____.png

 イベントの定義

_______.png

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

| app.record.detail.show | レコード詳細画面表示時 |
| app.record.create.show | レコード追加画面表示時 |
| app.record.create.change.past | レコード追加画面表示でフィールドコード[post]変更時 |
| 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 | レコード編集画面表示でフィールドコード[post]変更時 |
| 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_______.png

  • 2問目の表示制御

    2_______.png

  • 3問目の表示制御

    3_______.png

  • 4問目の表示制御

    4_______.png

  • 5問目の表示制御

    5_______.png

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

まとめ

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

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

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

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Shochi

第12回のリンクに第10回のリンクが埋め込んである。

Avatar
cybozu Development team

Shochi様

ご指摘をありがとうございます。ページ最下部の第12回へのリンクを修正しました。

ログインしてコメントを残してください。