チェックボックスに連動した日付フォームの作成

[Legacy_Account149 (yk（Legacy Account）)]

背景・実現したいこと

チェックボックスと日時のフィールドがあり、チェックボックスには〇があります。

この状態で〇にチェックを入れると隣とdaytimeにチェックを入れた日時が入り、

チェックを外すと消える仕組みにしたいです。

コードを記載してみたのですがチェックボックスで〇を選択しても反映されません。

書き方が間違っているとは思うのですがどの部分なのかがわからないため

ご教授いただけないでしょうか

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

なお、フィールドコードはそれぞれcheck、daytimeとなっています。

 

利用したソースコード

(() => {
  'use strict';

  const events = [
    'app.record.detail.show',
    'app.record.create.show',
    'app.record.edit.show'
];

  kintone.events.on(events, (event) => {

    const record = event.record;
    const now = new Date();
    
    if (record.check.value === '〇') {
      record.daytime.value = now;
    }else {
      record.daytime.value = '';
    }
    
  });
})();

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

見た限り、以下4点が気になりました。

①
「チェックボックスを選択または外した時」というタイミングであればapp.record.create.change.check及びapp.record.edit.change.checkがイベントになります（ご提示されたコードのdetail.show create.show edit.showはそれぞれレコード閲覧画面、新規作成画面、編集画面を開いた時というイベントです）。

 

②
チェックボックスや複数選択等、複数選択できるものの値は「配列」というものになります。ご提示されたコードだと比較ができません。

// ①（型を含む比較：===から型を含まない比較：==に変更 ○の他に更に選択した場合不一致になるため非推奨）
record.check.value == '〇'

// ②（〇が含まれているかの判定）
record.check.value.includes('〇')

// ③（〇が含まれているかの判定）
record.check.value.indexOf('〇') !== -1

// ④（中身は問わずにチェックされているかどうかだけの判定）
record.check.value.length

こういった形にする必要があります（②が現在の主流なので、そちらだけ覚えれば問題ありません）。

 

③
kintoneの日時フィールドは「YYYY-MM-DDTHH:mm（ゼロ詰め必須）」という形で、new Date()だけではできません。
Day.jsやLuxon等の日付操作ライブラリを入れるのが手軽ですが、どちらも使わない場合

      const now = new Date();

      const year = now.getFullYear();
      const month = `0${now.getMonth() + 1}`.slice(-2);
      const date = `0${now.getDate()}`.slice(-2);
      const hour = `0${now.getHours()}`.slice(-2);
      const min = `0${now.getMinutes()}`.slice(-2);
      const nowTime = `${year}-${month}-${date}T${hour}:${min}`;

このような形になります。

 

④
フィールドに反映させるためにはreturn event;が必要です。

 

以下のような形になります。

(() => {
    'use strict';
  
    const events = [
        'app.record.create.change.check', 'app.record.edit.change.check'
    ];

    kintone.events.on(events, (event) => {
        const record = event.record;
        const now = new Date();

        const year = now.getFullYear();
        const month = `0${now.getMonth() + 1}`.slice(-2);
        const date = `0${now.getDate()}`.slice(-2);
        const hour = `0${now.getHours()}`.slice(-2);
        const min = `0${now.getMinutes()}`.slice(-2);
        const nowTime = `${year}-${month}-${date}T${hour}:${min}`;

        if (record.check.value.includes('〇')) {
            record.daytime.value = nowTime;
        } else {
            record.daytime.value = '';
        }
      
        return event;
    });
})();

[Legacy_Account149 (yk（Legacy Account）)]

mls-hashimoto 様

詳細いただきありがとうございました。非常に助かります。

実際に設定してみたところ動作したのですが、フィールドコードを変更し、年月日のみとしたところ動かなくなりました。

変更箇所は

check を Request

daytime を Request_day

とし、フィールドコード、いただいたjavascriptのコードのどちらも変更しています。

また、年月日のみに変更し時間部分は削除しています。それ以外は同じになります。

 

元の record.daytime.value であればこのdaytimeはフィールドコードのため

このフィールドコードを変更し、変更した内容でコードへ反映すれば流用できるのではと思ったのですが

違っていますでしょうか。

 

(() => {
    'use strict';
  
    const events = [
        'app.record.create.change.check', 'app.record.edit.change.check'
    ];

    kintone.events.on(events, (event) => {
        const record = event.record;
        const now = new Date();

        const year = now.getFullYear();
        const month = `0${now.getMonth() + 1}`.slice(-2);
        const date = `0${now.getDate()}`.slice(-2);
        
        const nowTime = `${year}-${month}-${date}`;

        if (record.Request.value.includes('〇')) {
            record.Request_day.value = nowTime;
        } else {
            record.Request_day.value = '';
        }
        return event;

    });
})();

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

yk さま

フィールド値変更時イベント のフィールドコードも変える必要があります。

    const events = [
        'app.record.create.change.check', 'app.record.edit.change.check'
    ];

↓

    const events = [
      'app.record.create.change.Request', 'app.record.edit.change.Request'
    ];

[Legacy_Account149 (yk（Legacy Account）)]

mls-hashimoto 様

>フィールド値変更時イベント のフィールドコードも変える必要があります。

上記変更したところ反映されました。

丁寧な回答いただき助かりました。ありがとうございます。

[Legacy_Account149 (yk（Legacy Account）)]

mls-hashimoto 様

たびたび申し訳ありません。

上記のコードでイベント部分を配列化したいのですが可能でしょうか。

やりたいこととしてはチェックボックスと日付欄が名前違いが複数あり

check1でチェックをして〇が入ればcheck_day1に日付が入り、

check2でチェックをして〇が入ればcheck_day2に日付が入る・・・という形にしたいです。

これをcheck1～5、check_day1～5それぞれで ‘app.record.create.change.～’、 'app.record.edit.change.～’など用意すると

コードが長くなってしまうので配列で対応したいのですが下記のようなやり方で対応可能でしょうか。

(() => {

    'use strict';

  const check_array = [

        'check1',

        'check2',

        'check3',

        'check4',

        'check5'

    ];

 //チェックボックスのフィールドコード

   

  const check_day_array = [

        'check_day1',

        'check_day2',

        'check_day3',

        'check_day4',

        'check_day5'

    ];

 //日付のフィールドコード

    const events = [

        for (var i = 0; i < check_array.length; i++) {  

        'app.record.create.change.check_array[i]',

        'app.record.edit.change.check_array[i]'

    }

    ];

    kintone.events.on(events, (event) => {

        const record = event.record;

        const now = new Date();

        const year = now.getFullYear();

        const month = `0${now.getMonth() + 1}`.slice(-2);

        const date = `0${now.getDate()}`.slice(-2);

        const hour = `0${now.getHours()}`.slice(-2);

        const min = `0${now.getMinutes()}`.slice(-2);

        const nowTime = `${year}-${month}-${date}T${hour}:${min}`;

        for (var i2 = 0; i2 < check_day_array.length; i2++) {  

        if (record.check_array[i].value.includes('〇')) {

          record.check_day_array[i2].value = nowTime;

        } else {

          record.check_day_array[i2].value = '';

        }

     

        return event;

    }  });

})();

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

yk さま

(() => {
    'use strict';

    const check_array = [
        'check1',
        'check2',
        'check3',
        'check4',
        'check5'
    ];

    const check_day_array = [
        'check_day1',
        'check_day2',
        'check_day3',
        'check_day4',
        'check_day5'
    ];

    for (let i = 0; i < check_array.length; i++) { // ←イベントの登録は、ホイストのあるvar宣言のループだと最終インデックスしか残らないので、ブロックスコープであるletでなければなりません
        kintone.events.on([
            'app.record.create.change.' + check_array[i], 'app.record.edit.change.' + check_array[i] // ←変数のため、+で文字列の連結をする必要があります
        ], (event) => {
            const record = event.record;
            const now = new Date();
    
            const year = now.getFullYear();    
            const month = `0${now.getMonth() + 1}`.slice(-2);
            const date = `0${now.getDate()}`.slice(-2);
            const hour = `0${now.getHours()}`.slice(-2);
            const min = `0${now.getMinutes()}`.slice(-2);
    
            const nowTime = `${year}-${month}-${date}T${hour}:${min}`;

            if (record[check_array[i]].value.includes('〇')) { // ←変数のため、ブラケット記法でなければなりません
                record[check_day_array[i]].value = nowTime; // ←もう一つあったループは必要ありません
            } else {
                record[check_day_array[i]].value = '';
            }

            return event;
        });
    };
})();

こういった形になります。特に気を付ける部分や気になった部分にコメントを添えています。用語はお調べ頂くか、取り敢えずはそういうものと覚えて、もう少し慣れてからでも問題ないと思っています。

[Legacy_Account149 (yk（Legacy Account）)]

mls-hashimoto 様

詳細いただきありがとうございます。無事に配列で対応できました。

一点気になるところがあるのですが

 'app.record.create.change.' + check_array[i], 'app.record.edit.change.' + check_array[i] // ←変数のため、+で
文字列の連結をする必要があります

上記でイベント部分を

'app.record.create.change.' + check_array[i]

と記載いただいていますがイベントの部分は下記のように’’で囲まなくてよいのでしょうか。

'app.record.create.change.+ check_array[i]'

というのも’''で囲むと文字列扱いになり認識しないような気はするのですが

下記の別サンプルなども囲まれているので、この部分はシングルコーテーションで囲むものだと思っていました。

 

kintone.events.on(' **app.record.edit.show**', (event) => {
  window.alert('レコード編集画面を開きました');
  return event;
});

‘app.record.create.change.’ + check_array[i] はこの場合

'app.record.create.change.'check1

となるので認識されないのではと思ったのですが自動的に認識してくれるのでしょうか。

 

 

[Legacy_Account1177 (mls-hashimoto（Legacy Account）)]

yk さま

はい、囲んではいけません。

'app.record.create.change.+ check_array[i]'

このように書くと、そのまま「app.record.create.change. + check_array[i]」という文字になります（文字列を意味する’'：クォーテーションで囲んだものは、例外なく文字列になります。例外として``バッククォーテーションで囲んだものがありますが、今は覚えなくて問題ありません）。

kintone.events.on('app' + '.' + 'record' + '.' + 'edit' + '.' + 'show', (event) => ...)

こちらでも動きます。

 

そして、‘app.record.create.change.’ + check_array[i]ですが、この場合は

'app.record.create.change.' + 'check1';

↓

'app.record.create.change.check1';

と解釈されます。

 

'app.record.create.change.'check1

のようになるかどうかについてですが、

const check_array = [
check1
];

と配列内を変数で宣言している場合はそのように解釈されるかもしれません。

 

このあたりはJavaScriptの基本的なルールになるので、解説サイト等をご覧になった方が良いかと思います。

[Legacy_Account149 (yk（Legacy Account）)]

mls-hashimoto 様

ありがとうございます。コード記載の意味がよくわかりました。

javascriptの解説サイトも読み込んでみたいと思います。