アクションボタンをレコード詳細のスペースに表示させたい

[seaflour]

アクションボタンをレコード詳細のスペースに表示させたいと思い
https://community.cybozu.dev/t/topic/2101
こちらの記事を参考に行ってみましたがエラーは出ませんでしたが
うまく表示されませんでした。
お力を貸していただけますでしょうか？

(() => {
  'use strict';
 
  /** JavaScriptを実行する対象となるイベント */
  const events = ['app.record.detail.show', 'app.record.print.show'];
 
  const func = (event) => {
    // アクションボタンをスペースに表示させる
    kintone.app.record.getSpaceElement(“Toul_make”).appendChild(document.getElementsByClassName(“gaia-app-statusbar-action-label”)[0]);
 
    return event;
  };

})();

アクションボタンのクラスは
class="gaia-app-statusbar-action-label"かなと思います

[mura]

詳細はリファレンスをご確認いただきたいですが、下記のように、 kintone.events.on を利用しなければイベントハンドラは発火しませんので、ご注意ください！

// 複数のイベントで同じイベントハンドラーを登録する場合
kintone.events.on(['app.record.create.show', 'app.record.edit.show'], (event) => {
  console.log(event);
});

[seaflour]

mura様
ありがとうございます！

(() => {
  'use strict';
 
  /** JavaScriptを実行する対象となるイベント */
  const events = ['app.record.detail.show', 'app.record.print.show'];
 
  kintone.events.on(events, (event) => {
    const record = event.record;
 
    const func = (event) => {
    // 対象項目を非表示にします
      kintone.app.record.getSpaceElement(“Toul_make”).appendChild(document.getElementsByClassName(“gaia-app-statusbar-action-label”)[0]);
 
      return event;
    };
  });
})();

この様に修正しましたがやはりアクションボタンをスペースに表示する事が出来ませんでした。
他に何か原因があるでしょうか？

[mura]

const func = () => という宣言がありますが、その関数は実行されてないですね。
（ 関数を宣言するなら func(); などと実行は別でする必要があります）

今回は別に関数化する必要もないと思うので、kintone.events.onの中でそのまま実行していいと思います。

  kintone.events.on(events, (event) => {
    const record = event.record; // ←これも利用しないなら省略してOK
    kintone.app.record.getSpaceElement(“Toul_make”).appendChild(document.getElementsByClassName(“gaia-app-statusbar-action-label”)[0]);
    return event;
  });

また、それでも動作しない場合は、getSpaceElementでちゃんと要素がとれているかなど、問題をまず特定するために切り分けてチェックしていきましょう

デバッグは下記にまとまってますのでみてみてください。

kintone JavaScript カスタマイズデバッグまとめ

[seaflour]

mura様
色々ありがとうございます！
どうやらクラスがきちんととれていないようなのですが
アクションボタンのクラス？要素？を取得する方法を
アクションボタン要素の取得
を参考に行ってみたのですが結局分からずつまずいてます。
アクションボタンの要素・要素番号を取る方法を教えて頂けますでしょうか？

(() => {
  'use strict';
 
  /** JavaScriptを実行する対象となるイベント */
  const events = ['app.record.detail.show', 'app.record.print.show'];
  kintone.events.on(events, (event) => {
    console.log(document.getElementsByClassName("gaia-app-statusbar-action"));

    const buttonNode = document.querySelectorAll(".gaia-app-statusbar-action");
    
    console.log(buttonNode);
    
    //const record = event.record; // ←これも利用しないなら省略してOK
    kintone.app.record.getSpaceElement("Toul_make").appendChild(document.getElementsByClassName("gaia-app-statusbar-action"));
    return event;
  });
  
  
      
})();

[mura]

参考にしてる記事の３つ目の指摘にあるように、Actionボタンが表示されるまえにイベントが発火してるようですね。

MutationObserverというものがあり、それをつかうと要素に変更があった場合は〜という処理ができますので、下記のようにやれるとおもいます

(() => {
  'use strict';
 
  /** JavaScriptを実行する対象となるイベント */
  const events = ['app.record.detail.show', 'app.record.print.show'];
  kintone.events.on(events, (event) => {
    (new MutationObserver ((mutationRecords, observer) => {
      if(document.querySelector(".gaia-app-statusbar-action")) {
        // 要素が見つかったら処理する
        const buttonNode = document.querySelector(".gaia-app-statusbar-action");
        console.log(buttonNode);
        
        
        observer.disconnect(); // DOMの監視の終了
      }
    })).observe(document.body, {childList:true, subtree: true});
  });
})();

[seaflour]

mura様
ありがとうございます！
以下のように追加しましたが画面がクラッシュしてしまいエラーを確認できない
状態です。
追加部分を除き、console.log(buttonNode);をコメントアウトしたらアクションボタン自体はとれているような状態です。
追加部分も修正する必要があるでしょうか？

(() => {
  'use strict';
 
  /** JavaScriptを実行する対象となるイベント */
  const events = ['app.record.detail.show', 'app.record.print.show'];
  kintone.events.on(events, (event) => {
    (new MutationObserver ((mutationRecords, observer) => {
      if(document.querySelector(".gaia-app-statusbar-action")) {
        // 要素が見つかったら処理する
        const buttonNode = document.querySelector(".gaia-app-statusbar-action");
        console.log(buttonNode);
        
//追加部分
        kintone.app.record.getSpaceElement("Toul_make").appendChild(document.getElementsByClassName("gaia-app-statusbar-action"));
        observer.disconnect(); // DOMの監視の終了
      }
    })).observe(document.body, {childList:true, subtree: true});
  });
})();

[mura]

そもそも buttonNode変数に格納したものを使ってないようですね。
せっかく取得して変数に格納してるのであればまず下記のようにしてみてください
kintone.app.record.getSpaceElement("Toul_make").appendChild(buttonNode);

buttonNode変数にいれるときは、document.querySelector で取得していますが、スペースフィールドにappendするときは、document.getElementsbyClassName を利用しています。その2つは違う変数で、後者は配列で返ってきますのでうまく動かないのだと思います。
不慣れだから、というのはもちろんあるかもしれませんが、今後は一つ一つ丁寧に組み上げていくと、バグなどが起こりにくくなっていくかとおもいます。