cybozu developer network

カテゴリー内の他の記事

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

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

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

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

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

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

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

______.jpg

プログラム

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

全体の構成

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

13_code_00.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)

    複数選択フィールド[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カスタマイズのプログラム実例を学ぼう②(条件書式設定)>>

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

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

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) { にしたほうがいいと思われます。

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

 

 

Avatar
K.zashi

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

JavaScript初心者です。以下の部分について教えていただきたいです。

++++++++++++++++++++++++++

//1問目になにも選択されていなかった場合は「その他」フィールドを表示しない

var past = record['past']['value'];

++++++++++++++++++++++++++

第12回のrecordデータの型の説明の中で

『Object 型は、 record.フィールドコード.value というように  .  (ドット) で数珠つなぎにしてデータを取得します。』

とありますが、

[  ]を使用すれば、ドットは必要ないということでしょうか?

それとも、これは別の話なのでしょうか?

検討違いでしたら申し訳ありません。

ご教授いただけますと幸いです。

Avatar
cybozu Development team

K.zashi

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

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors
こちらをご参照ください。Objectにアクセスするには、ドットとブラケットという2つの記法があり、どちらを利用しても問題ありません。

また、恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問またあればcybozu developer コミュニティをご活用ください。

よろしくお願い致します。

 

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