フィールド1に記入があったらフィールド2を表示したい

始めて質問させていただきます。JavaScript初心者です。

フィールド1に入力されたらフィールド2を表示、フィールド2に入力されたらフィールド3を表示・・・となるような処理にしたいのですが、

以下のようになり中々うまくいきません。

文字列(一行)、文字列(複数行)に文字や数字を入れてもフィールドが表示されるようにしたいです。

もし可能でしたらどのようなコードで実現できるのかご教示いただければ幸いです。

 

以下が作成したソースになります。

<JavaScript>

(function() {
“use strict”;

//レコードの追加、編集、詳細画面で適用する
var events = [‘app.record.detail.show’,
‘app.record.create.show’,
‘app.record.create.change.biko1’,
‘app.record.create.change.biko2’,
‘app.record.create.change.biko3’,
‘app.record.create.change.biko4’,
‘app.record.edit.show’,
‘app.record.eSdit.change.biko1’,
‘app.record.eSdit.change.biko2’,
‘app.record.eSdit.change.biko3’,
‘app.record.eSdit.change.biko4’];

kintone.events.on(events, function(event) {

var record = event.record;

//備考1に記載があったら備考2を表示
if ( record[‘biko1’][‘value’] === null) {
kintone.app.record.setFieldShown(‘biko2’, false);
}else {
kintone.app.record.setFieldShown(‘biko2’, true);
}

for (var i = 2; i < 5; i++) {
if (record[‘biko’+i][‘value’] === null) {
kintone.app.record.setFieldShown(‘biko’+(i + 1), false);
}else {
kintone.app.record.setFieldShown(‘biko’+(i + 1), true);
}

}

});
})();

yurika さん

まず、イベントが発生したときに1度全部のフィールドを非表示にする必要があると思います。

そのあとの、22行目以降の表示/非表示の切り替えの処理ですが、デバッグしてみると、どこがうまくいっていないのか分かると思います。
動かない?そんな時はデバッグをしてみよう!入門編

yurika さんの記載してくださったコードを見てみました。

22行目の「備考1」に記載があるかどうかを判別しているif文ですが、
コンソールの画像から分かるように、「備考1」に値が入っていない場合、「null」ではなく「undefined」と入っています。
なので、ここを書き変えるとうまくいきそうな気がします。

参考までに、私の書いたコードを以下に載せます。
(でもこれだと、「備考4」まで記載したあとに、「備考2」を空にすると「備考3」だけ非表示になるので、考慮が必要です<(_ _)>)

(function() {
    "use strict";

    //レコードの追加、編集、詳細画面で適用する
    var events = ['app.record.detail.show',
        'app.record.create.show',
        'app.record.create.change.biko1',
        'app.record.create.change.biko2',
        'app.record.create.change.biko3',
        'app.record.create.change.biko4',
        'app.record.edit.show',
        'app.record.edit.change.biko1',
        'app.record.edit.change.biko2',
        'app.record.edit.change.biko3',
        'app.record.edit.change.biko4'];

    kintone.events.on(events, function(event) {
        var record = event.record;

        //まず全てのフィールドを非表示にする
        kintone.app.record.setFieldShown('biko2', false);
        kintone.app.record.setFieldShown('biko3', false);
        kintone.app.record.setFieldShown('biko4', false);

        for (var i = 1; i < 4; i++) {
            var num = 'biko' + i;
            if (record[num]['value'] === undefined) {
                kintone.app.record.setFieldShown('biko' + (i+1), false);
            } else {
                kintone.app.record.setFieldShown('biko' + (i+1), true);
            }
        }
    });
})();

たけちょさん

ご回答ありがとうございます。

「null」ではなく「undefined」を使うんですね!勉強になりました。

ただ「文字列(一行)」フィールドはJavaScriptが正しく動くのですが、

「文字列(複数行)」フィールドだと表示がうまくいかないのが不思議です。。。涙

yurikaさん

 

すでに解決済みかもしれませんが・・

https://cybozudev.zendesk.com/hc/ja/articles/201941984#step3

こちらをご参照いただきますと、フィールド値変更イベント(event.record.〇〇.change.フィールドコード)で指定可能なフィールドが決まっております。

「文字列(複数行)」フィールドは指定可能ではないため、イベントが実行されない状態かと思われます。

 

フィールド値変更イベントで指定可能なフィールド

  • ラジオボタン
  • ドロップダウン
  • チェックボックス
  • 複数選択
  • ユーザー選択
  • 組織選択
  • グループ選択
  • 日付
  • 時刻
  • 日時
  • 文字列(1行)
  • 数値
  • テーブル

ご参考になれば幸いです。

高木さん

ご回答ありがとうございます!

「文字列(複数行)」フィールドは指定可能なフィールドに含まれていると思っていました。。。

これからはしっかり調べてカスタマイズしていこうと思います。ありがとうございました!