(著者: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問目の表示制御
- 2問目の表示制御
- 3問目の表示制御
- 4問目の表示制御
- 5問目の表示制御
上記のように選択された値をもとに条件分岐を書いていくだけですので、ひとつひとつはシンプルです。
まとめ
このように、if文と kintone.app.record.setFieldShown() を組み合わせれば、好きな条件に応じてフィールドの表示/非表示が簡単にできます。
応用できる場面は数多くあると思いますので、このパターンを使えるようにしておくといいでしょう。
この記事は、2018年9月版 kintoneで確認したものになります。
<< はじめようJavaScript 第12回 kintone JavaScript カスタマイズでkintoneのデータを見てみる | はじめようJavaScript第14回 kintone JavaScriptカスタマイズのプログラム実例を学ぼう②(条件書式設定)>>
第12回のリンクに第10回のリンクが埋め込んである。
Shochi様
ご指摘をありがとうございます。ページ最下部の第12回へのリンクを修正しました。
お世話になっております。
>まず、表示/非表示の制御は、 kintone.app.record.setFieldShown() を使うことでできるようになります。
のリンク先は↓ではないでしょうか?
https://developer.cybozu.io/hc/ja/articles/360015513211-%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E8%A1%A8%E7%A4%BA-%E9%9D%9E%E8%A1%A8%E7%A4%BA
また、
>
| app.record.create.change.past | レコード追加画面表示でフィールドコード[post]変更時 |
・・・
| app.record.edit.change.past | レコード編集画面表示でフィールドコード[post]変更時 |
のpostはpastのことですよね?
細かいことですがよろしくおねがいします
加藤 優志 様
ご指摘下さりありがとうございました。
kintone.app.record.setFieldShown()のリンクをhttps://developer.cybozu.io/hc/ja/articles/360015513211に、
[post]を[past]に修正いたしました。
お世話になっております。
1問目の表示制御部分のコードですが、「その他」が一番最後が前提になっている記述かと思います。
そのため、その他の項目を最初や途中に配置すると、「その他」以外の項目にチェックが入るとその他の入力欄が非表示になってしまいます。
「その他」が選択の最後に置かれていない場合はあまり見たことはないですが、29行目~33行目を以下のように記述する方が適切なのではないかと思いました。
//初期値は非表示にしておく
var past = record['past']['value'];
kintone.app.record.setFieldShown('other', false);
的外れ、もしくは趣旨とは異なる指摘でしたらすみません。。。
渡部智也様
お世話になっております。cybozu developer network 運営局です。
フィードバックいただきありがとうございます。
ご指摘いただいた内容の修正につきまして、検討させていただきます。
今後ともよろしくお願いいたします。
ブラウザの言語を英語にしている場合、病気の選択肢が 'Other' になるので、
if (past[i] === 'その他') {
この部分を、
if (['その他', 'Other'].indexOf(past[i]) >= 0) {
と変えて動作を確認しました。
言語設定(Localization)についてはこのような対応でよろしいでしょうか。
Kazuaki Ueda
お世話になっております。cybozu developer network 運営局です。
この記事で利用しているアプリのテンプレートは多言語対応(日、中、英)しているので、
ログインユーザーの設定言語によって表示が変わります。
そのため、どの言語を設定しても動作できるようにするには、
おっしゃる通りに、if (['その他', 'Other', '其他'].indexOf(past[i]) >= 0) { にしたほうがいいと思われます。
今後ともよろしくお願いいたします。