スペースフィールドを使用したボタンで関連レコードの開閉をしたい

kintone カスタマイズ
1

いつもお世話になっております。

レコード詳細画面にてスペースフィールドを設置して自作ボタンを作成しています。
ボタンは全部で5つほどあり、それぞれのボタンで関連レコードを表示、非表示させるような動きができるようにしたいのですが可能でしょうか。

現在は下記のコードでボタン設置しておりますが、スペースフィールドについてなかなか理解ができておらず大変お恥ずかしいのですが、もしよろしければコメントアウトなどで意味も教えていただけませんでしょうか。

今後の学習につなげたいと思っています。
お忙しいところ恐縮ですが、宜しくお願い致します。

kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {
    //ボタンを置きたいスペースフィールドを取ってくる
    const sp = kintone.app.record.getSpaceElement('spSuteki');

    //ボタンを作る
    const btn = document.createElement('button');
    //ボタンに表示したいテキスト
    btn.textContent='ボタン';

    //スペースフィールドにボタンを追加する
    sp.appendChild(btn);

    //ボタンをクリックしたときの動作
    btn.onclick=()=>{
        //ここにボタンをクリックしたときの動作を書く
        alert('プッシュ');
    }

    return event;
});

 

 

2

こんにちは！

コードに見覚えが・・・・

↓こちらに一応詳しく書いたつもりだったのですが、スペースフィールドのどのあたりの謎が深いでしょうか:eyes:？！

https://qiita.com/juri_don/items/53a7e8c3f4d63ca9dcca

3

juridon さま

お世話になっております。こちらのサイトから
kintoneでボタン作成するまでは参考にさせて頂きました:pray:
ありがとうございます!

今困っているのがbtn.onclick=()=>{
以降のコードをどのように表記すればいいのかがよくわかっておらず
ifを利用してnoneなどで表示、非表示すればいいのかと想像しているのですが
理解はあっていますでしょうか？

初歩的なご質問で恐縮です;;

4

ボタンを増やす方法についてですが、
このサンプルを使ってボタンを複数ということでしたら、例えばボタンをbtn1～btn3みたいに増やして

//ボタンを作る
const btn1 = document.createElement(‘button’);
const btn2 = document.createElement(‘button’);
const btn3 = document.createElement(‘button’);

//ボタンに表示したいテキスト
btn1.textContent=‘ボタン1’;
btn2.textContent=‘ボタン2’;
btn3.textContent=‘ボタン3’;

//スペースフィールドにボタンを追加する
sp.appendChild(btn1);
sp.appendChild(btn2);
sp.appendChild(btn3);

// btn1～btn3を押したとき
btn1.onclick=()=>{～ボタン1を押したときの動作省略～}
btn2.onclick=()=>{～ボタン2を押したときの動作省略～}
btn3.onclick=()=>{～ボタン3を押したときの動作省略～}

みたいに書くとボタンを増やすことができます。

また、関連レコード表示非表示切り替えの機能ですが、
専用のJavaScript APIがないので、DOM操作することになります。
しかし、DOM操作自体推奨されておりません（＞＜）
（うまくいかなくてkintoneの表示が崩れて正しく動かなくなってしまったり、うまく動いても今後のkintoneのアップデートで使えなくなる可能性があったりします）

コードを書けなくはないのですが、大変申し訳無いのですが、コミュニティの方針上控えさせていただきます:pray:

「javascript 非表示 ボタン」等で検索してでてきたJavaScriptのコードを参考に作成してみてから、
kintoneでも試してみる～とやってみられるといいかもしれません（＞＜）

↓ご参考になればと思います。

https://itsakura.com/javascript-display
https://mebee.info/2020/09/18/post-18364/

5

詳しくご教示いただき心より感謝致します。大変勉強になりました。
ボタンカスタマイズは今後も使用頻度が高そうなので、何度もこちらの内容を見返して
今後も勉強していきたいと思います。とてもわかりやすく記載して頂き本当にありがたいです。

また、関連レコードの表示切り替えについても理解が深まりました。
アップデート等で問題が起きた場合、すぐに修正ができるほど知識がないため
今回はグループで非表示/表示をするなどして別の方法での検討をしてみたいと思います。
判断をするのにも大変参考なりました。

お忙しい中丁寧にご教示いただきましてありがとうございました。
シェア頂いた記事も参考にさせて頂きます。
今後とも引き続き宜しくお願い致します！