カテゴリー内の他の記事

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

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

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

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

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

設問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 | レコード追加画面表示でフィールドコード[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_______.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カスタマイズのプログラム実例を学ぼう②(条件書式設定)>>

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Shochi

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

Avatar
cybozu Development team

Shochi様

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

Avatar
加藤 優志

お世話になっております。

>まず、表示/非表示の制御は、 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のことですよね?

細かいことですがよろしくおねがいします

加藤 優志により編集されました
Avatar
cybozu Development team

加藤 優志 様

ご指摘下さりありがとうございました。

 kintone.app.record.setFieldShown()のリンクをhttps://developer.cybozu.io/hc/ja/articles/360015513211に、
[post]を[past]に修正いたしました。 

Avatar
渡部智也

お世話になっております。

1問目の表示制御部分のコードですが、「その他」が一番最後が前提になっている記述かと思います。
そのため、その他の項目を最初や途中に配置すると、「その他」以外の項目にチェックが入るとその他の入力欄が非表示になってしまいます。

「その他」が選択の最後に置かれていない場合はあまり見たことはないですが、29行目~33行目を以下のように記述する方が適切なのではないかと思いました。

//初期値は非表示にしておく
var past = record['past']['value'];
kintone.app.record.setFieldShown('other', false);

的外れ、もしくは趣旨とは異なる指摘でしたらすみません。。。

Avatar
cybozu Development team

渡部智也様

お世話になっております。cybozu developer network 運営局です。

フィードバックいただきありがとうございます。
ご指摘いただいた内容の修正につきまして、検討させていただきます。

今後ともよろしくお願いいたします。

Avatar
Kazuaki Ueda

ブラウザの言語を英語にしている場合、病気の選択肢が 'Other' になるので、

if (past[i] === 'その他') {

この部分を、

if (['その他', 'Other'].indexOf(past[i]) >= 0) {

と変えて動作を確認しました。

言語設定(Localization)についてはこのような対応でよろしいでしょうか。

Kazuaki Uedaにより編集されました
Avatar
cybozu Development team

Kazuaki Ueda

お世話になっております。cybozu developer network 運営局です。

この記事で利用しているアプリのテンプレートは多言語対応(日、中、英)しているので、
ログインユーザーの設定言語によって表示が変わります。
そのため、どの言語を設定しても動作できるようにするには、
おっしゃる通りに、if (['その他', 'Other', '其他'].indexOf(past[i]) >= 0) { にしたほうがいいと思われます。

今後ともよろしくお願いいたします。

 

 

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