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

フォローする

Index

概要

設問の回答によって、フィールドの表示/非表示を切り替えるカスタマイズサンプルです。

完成イメージ

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

 

各設問のフィールドが「非表示」の状態

各設問のフィールドが「表示」の状態

事前準備

  • kintone アプリ(kintoneアプリストア にある「問診票アプリ」を使います)
  • エディター

サンプルプログラム

ご注意事項
  • サンプルプログラムは、その動作を保証するものではありません
  • サンプルプログラムの技術的なサポート等は行っていません

プログラム(JavaScript)

JavaScriptカスタマイズの設定

  • アプリ管理の詳細設定にある「JavaScript / CSSによるカスタマイズ」を開きます。
  •  上記のプログラムをエディターに保存し、PC用のJavaScriptファイルにアップロードします。
    • ファイル名 ”sample.js” (ファイル名は任意)
    • 文字コード 「UTF-8」

使用したAPI

  1. イベントハンドラーを登録する
  2. レコード詳細画面が表示された時のイベント
  3. レコード追加画面が表示された時のイベント
  4. レコード編集画面が表示された時のイベント
  5. レコード追加画面のフィールド値変更イベント
  6. レコード編集画面のフィールド値変更イベント
  7. フィールドの表示/非表示を切り替える

デモ環境

https://dev-demo.cybozu.com/k/55/

※デモ環境についての説明はこちら

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

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

Avatar
goro

お世話になります。

初心者で恐れ入ります。試しに使わせて頂きましたが、一覧の画面で2,3,4,5番の質問にあると選択し関連項目追加しました。その後ないに変更したら→すべての覧ではあると選択したところのデータがすべて残りますが、CSVとかで出して使いたいですが、解決案やヒントなどあるようでしたら、ご教示頂けますでしょうか。
宜しくお願い致します。

Avatar
cybozu Development team

goro 様

返事が遅くなりまして申し訳ございません。

仰る通り、一旦「ある」と選択してから、「ない」に変更しても、関連項目の値が残されてしまいますね。

非表示にすると同時に、非表示する項目の値を空白に設定すれば、この問題がなくなります。

例、

 //3問目の回答に応じて「病名」「発症した時期」フィールドの表示、非表示を切り替える
if (record['radio3']['value'] === 'いいえ') {
  kintone.app.record.setFieldShown('disease', false);
  kintone.app.record.setFieldShown('date3', false);
  record['disease']['value'] = "";           ←非表示の時にvalueを空にする
  record['date3']['value'] = "";            ←非表示の時にvalueを空にする
}else {
  //「はい」の場合は「病名」「時期」を表示する
  kintone.app.record.setFieldShown('disease', true);
  kintone.app.record.setFieldShown('date3', true);
}

 

よろしくお願いします。

Avatar
mika

お世話になります。

方針回答チェックボックスを改善と現状のままで作成しました。

どちらもチェックが入っていないと 現状のまま詳細(ドロップダウン)、改善案提出予定日フィールドの表示を無し

必要にチェックが入ると 日付フィールドのみ表示

不要にチェックが入ると 現状のまま詳細フィールドのみ表示

としたいのですが下記記述では反応していません。

初心者で申し訳ありませんがお教えください。

      //方針回答の回答に応じて「現状のまま詳細」「改善案提出予定日」フィールドの表示、非表示を切り替える
        if (record['方針回答']['value'] = []) {
            kintone.app.record.setFieldShown('現状のまま詳細', false);
            kintone.app.record.setFieldShown('改善案提出予定日', false);
        }else if(record['方針回答']['value'] = '改善') {
            //「改善」の場合は「改善案提出予定日」を表示する
            kintone.app.record.setFieldShown('現状のまま詳細', false);
            kintone.app.record.setFieldShown('改善案提出予定日', true);
        }else {
            //「現状のまま」の場合は「現状のまま詳細」を表示する
            kintone.app.record.setFieldShown('現状のまま詳細', true);
            kintone.app.record.setFieldShown('改善案提出予定日', false);
        }

Avatar
cybozu Development team

mika様

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

記事の内容とあまり関連のないように見受けられましたので、恐れ入りますがこちらではなくプログラミング初心者向けフォーラムでの投稿をお願いいたします。

https://developer.cybozu.io/hc/ja/community/topics/115000009866

(このようなコメントのガイドラインについては近日わかりやすい場所に掲示予定です)

Avatar
玲香

お世話になります。

初心者でございます。

「非表示の時にvalueを空にするについて」アドバイスもらいたく投稿させていただきました。

複数選択となる1問目を以下にして試してみたら、

①既に「その他」をチェックしている場合、他の項目にチェック入れると「その他」が消えてしまう。

②「その他」に記入して、一度保存したが、再び編集をすると「その他」の内容が消えてしまう。

どう対応すればよろしいでしょうか?よかったら、ぜひアドバイス頂ければ幸いです。

//1問目で「その他」が選択された場合は「その他」フィールドを表示する
for (var i = 0; i < past.length; i++) {
if (past[i] === 'その他') {
kintone.app.record.setFieldShown('other', true);
record['other']['value'] = ""; //非表示の時にvalueを空にする
}else {
kintone.app.record.setFieldShown('other', false);
}

}

Avatar
cybozu Development team

玲香様

お世話になっております。ご質問は記事のシナリオと異なる場合、コミュニティでの質問をお願いしております。

お手数ですが以下のコミュニティで再度ご投稿をお願いします。

プログラミング初心者向けフォーラム

https://developer.cybozu.io/hc/ja/community/topics/115000009866

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