概要
設問の回答によって、フィールドの表示/非表示を切り替えるカスタマイズサンプルです。
完成イメージ
設問1,2,3,4,5の選択によってフィールドの表示/非表示を切り替えます。
各設問のフィールドが「非表示」の状態
各設問のフィールドが「表示」の状態
事前準備
- kintone アプリ（kintoneアプリストア にある「問診票アプリ」を使います）
- エディター
サンプルプログラム
ご注意事項
- サンプルプログラムは、その動作を保証するものではありません
- サンプルプログラムの技術的なサポート等は行っていません
サンプルプログラムの解説は、こちらの チュートリアル記事 にあります。
「コードの意味は理解できていない」「変更を加えたいけど、どの部分を修正すればいいかわからない」
と感じている方は、ぜひチュートリアル記事を確認してみてください。
「コードの意味は理解できていない」「変更を加えたいけど、どの部分を修正すればいいかわからない」
と感じている方は、ぜひチュートリアル記事を確認してみてください。
プログラム(JavaScript)
JavaScriptカスタマイズの設定
- アプリ管理の詳細設定にある「JavaScript / CSSによるカスタマイズ」を開きます。
- 上記のプログラムをエディターに保存し、PC用のJavaScriptファイルにアップロードします。
- ファイル名 ”sample.js” （ファイル名は任意）
- 文字コード 「UTF-8」
使用したAPI
- イベントハンドラーを登録する
- レコード詳細画面が表示された時のイベント
- レコード追加画面が表示された時のイベント
- レコード編集画面が表示された時のイベント
- レコード追加画面のフィールド値変更イベント
- レコード編集画面のフィールド値変更イベント
- フィールドの表示/非表示を切り替える
デモ環境
https://dev-demo.cybozu.com/k/55/
※デモ環境についての説明はこちら
お世話になります。
初心者で恐れ入ります。試しに使わせて頂きましたが、一覧の画面で２，３，４，５番の質問にあると選択し関連項目追加しました。その後ないに変更したら→すべての覧ではあると選択したところのデータがすべて残りますが、ＣＳＶとかで出して使いたいですが、解決案やヒントなどあるようでしたら、ご教示頂けますでしょうか。
宜しくお願い致します。
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);
}
よろしくお願いします。
お世話になります。
方針回答チェックボックスを改善と現状のままで作成しました。
どちらもチェックが入っていないと 現状のまま詳細（ドロップダウン）、改善案提出予定日フィールドの表示を無し
必要にチェックが入ると 日付フィールドのみ表示
不要にチェックが入ると 現状のまま詳細フィールドのみ表示
としたいのですが下記記述では反応していません。
初心者で申し訳ありませんがお教えください。
//方針回答の回答に応じて「現状のまま詳細」「改善案提出予定日」フィールドの表示、非表示を切り替える
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);
}
mika様
お世話になっております。cybozu developer network事務局です。
記事の内容とあまり関連のないように見受けられましたので、恐れ入りますがこちらではなくプログラミング初心者向けフォーラムでの投稿をお願いいたします。
https://developer.cybozu.io/hc/ja/community/topics/115000009866
（このようなコメントのガイドラインについては近日わかりやすい場所に掲示予定です）
お世話になります。
初心者でございます。
「非表示の時に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);
}
}
玲香様
お世話になっております。ご質問は記事のシナリオと異なる場合、コミュニティでの質問をお願いしております。
お手数ですが以下のコミュニティで再度ご投稿をお願いします。
プログラミング初心者向けフォーラム
https://developer.cybozu.io/hc/ja/community/topics/115000009866
数値：企業ID(フィールド名)に特定の番号(今回は4168)を入れると、
関連テーブルプラグインで使っている、
スペース：shiharai(フィールド名)が表示されるようにしたいのですが、
このサンプルコードで言うと、
45~50までを参考できるのではと考えておりますが、
うまくいきません。
スペースの記述の仕方がよくないのでしょうか？
教えていただけると嬉しいです。
(function() {
"use strict";
//レコードの追加、編集、詳細画面で適用する
var events = ['app.record.detail.show',
'app.record.create.show',
'app.record.create.change.企業ID',
'app.record.edit.show',
'app.record.edit.change企業ID',
kintone.events.on(events, function(event) {
var record = event.record;
//企業IDが4168の場合は表示
if (record['企業ID']['value'] === 4168) {
kintone.app.record.setFieldShown('shiharai', true);
}else {
//企業IDが4168でない場合は非表示
kintone.app.record.setFieldShown('shiharai', false);
}
});
})();
kyodenさん
ご質問いただきありがとうございます。cybozu developer network運営チームです。
フィールドの表示/非表示を切り替える操作は、以下のフィールドではできません。
スペースを利用されているので、操作が効いていないと思われます。
また、コードの記述に少し間違いがあるようです。スペース以外で試される際はこちらを元に書き換えてみてください。
(function() {
"use strict";
//レコードの追加、編集、詳細画面で適用する
var events = ['app.record.detail.show',
'app.record.create.show',
'app.record.create.change.企業ID',
'app.record.edit.show',
'app.record.edit.change.企業ID'
];
kintone.events.on(events, function(event) {
var record = event.record;
//企業IDが4168の場合は表示
if (record['企業ID']['value'] === 4168) {
kintone.app.record.setFieldShown('shiharai', true);
}else {
//SB企業IDが4168でない場合は非表示
kintone.app.record.setFieldShown('shiharai', false);
}
});
})();