モバイル版で使いたいボタン

kintone カスタマイズ
1

編集画面でボタンを表示し、そのボタンで現在時刻を入力するタイムカードを作り、PCで作ったこれをモバイル版にしようと思いましたがモバイル版でボタンが表示されません。

(function() {
  'use strict';
  kintone.events.on('mobile.app.record.edit.show', function(event) {
      
    const date = luxon.DateTime.local();
    
    const mySpaceFieldButton = document.createElement('button');
    mySpaceFieldButton.id = 'my_space_field_button';
    mySpaceFieldButton.innerText = '出勤';
    mySpaceFieldButton.onclick = () => {
      
      var syutu = kintone.mobile.app.record.get();
            syutu.record['入'].value = date.toFormat('HH:mm');
            kintone.mobile.app.record.set(syutu);     
    };
    kintone.mobile.app.getHeaderSpaceElement('sb').appendChild(mySpaceFieldButton);
      
     const mySpaceFieldButton1 = document.createElement('button');
    mySpaceFieldButton1.id = 'my_space_field_button1';
    mySpaceFieldButton1.innerText = '退勤';
    mySpaceFieldButton1.onclick = () => {
       
      var tai = kintone.mobile.app.record.get();
            tai.record['退'].value = date.toFormat('HH:mm');
            kintone.mobile.app.record.set(tai);  
          };
    kintone.mobile.app.getHeaderSpaceElement('tb').appendChild(mySpaceFieldButton1);

    return event;   
  });
})();

 

また、ここで設置したボタンからのみ、編集できるようにしたいのですがそれは不可能でしょうか。

2

コピペで当方環境では動作しましたので、プログラムに問題はないようです。気になった点として、

①スマートフォン用のJavaScriptファイルにLuxonを読み込んでいますか？
プログラム自体もそうですが、Luxon（日付操作ライブラリ）もスマートフォン用のJavaScriptファイルにアップロードする必要があります。

 

②getHeaderSpaceElement()で間違いないですか？
こちら に記載されていますが、getHeaderSpaceElement()はヘッダー下の空白部分の取得です。また指定する場合引数（括弧内）は必要ありません。
おそらくですが、getSpaceElement()ではないですか？（引数で指定したスペースIDの要素を取得）

  kintone.mobile.app.getHeaderSpaceElement('tb').appendChild(mySpaceFieldButton1);

↓（以下のどちらか）

  kintone.mobile.app.getHeaderSpaceElement().appendChild(mySpaceFieldButton1);

  kintone.mobile.app.record.getSpaceElement('tb').appendChild(mySpaceFieldButton1);

 

③時間の取得について

   constdate = luxon.DateTime.local();

この部分ですが、この場所で宣言するとレコードの編集画面を開いた日時となるため、例としてレコードの編集画面を開いてから5分後にボタンを押すと現在日時ではなく5分前になります。
ボタンを押した瞬間の日時にする場合は

    mySpaceFieldButton.onclick =() =\>{
let date = luxon.DateTime.local();

ボタンのクリックイベントの中で宣言する必要があります。

 

また、ボタンのみでの編集については、

kintone.events.on([
  'app.record.create.show', 'app.record.edit.show',
  'mobile.app.record.create.show', 'mobile.app.record.edit.show'
  ], (event) => {
  let record = event.record;

    record['入'].disabled = true;
  record['退'].disabled = true;

    return event;
});

フィールドのdisabledにtrueを代入すると手動での入力ができなくなるので、こちらで良いと思います。

3

ありがとうざざいました。

おかげさまで満足のいくアプリが完成しました。

4

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。