アクションボタン表示・非表示切り替え

kintone カスタマイズ
1

自分なりにも検証しているのですが、それでも何か策がないものかと思い、書き込みをさせていただきます。

 

やりたいことは、詳細表示画面で、レコードの内容に応じて「アクション」ボタンの表示・非表示をコントロールするということです。

‘app.record.detail.show’ の中でレコードの内容を確認して、

var actionMenuWrapper =document.getElementsByClassName('gaia-app-statusbar-actionmenu-wrapper')

if (record['条件'].value!=="表示可") {
actionMenuWrapper[0].style.display="none";
var actionComment = document.createElement('span');
actionComment.innerHTML
=' アクションボタンは消しました';
actionMenuWrapper[0].parentNode.appendChild(actionComment);
}

とすることで、強引ながら、アクションボタンの表示・非表示を切り替えることはできました。

しかし、これでは複数のアクションボタンがある場合に、すべてのボタンを表示するか、すべて非表示にするかしかできません。個々のボタンの制御をしようとしたら、アクションボタンがDOMに追加されていないせいか .style.display がunedefined だといってエラーになってしまいます。

何か、回避策がないものかと考えているのですが、ご存知の方がいらっしゃいましたらお知らせください。

アクションボタンと同じ機能を持つボタンをAPIで自分でつくって配置してもいいのですが、できれば標準機能でできることは、標準機能を活かしたい…のです。

 

どうぞよろしくお願いいたします。

2

milkyway0307 さん

少し待ってあげれば、アクションボタンが表示されます。

チェックボックスに定義したアクション名で、表示制御する例です。

ボタン表示が一瞬表示されるより、あとから表示された方が違和感が少ないと思います。

CSS でとりあえず、ボタンを非表示にしておき、チェックボックスを判定して、表示します。

 

JavaScript

(function() {
"use strict";
kintone.events.on("app.record.detail.show", function(event) {
var record = event.record;
setTimeout(function() {
var statusBarAction = document.getElementsByClassName('gaia-app-statusbar-action-label');
for (var i = 0; i < statusBarAction.length; i++) {
if (record['チェックボックス'].value.indexOf(statusBarAction[i].title) >= 0) {
statusBarAction[i].parentNode.style.display = 'inline-block';
}
}
}, 100);
return event;
});
})();

 

CSS

.gaia-app-statusbar-actionmenu .gaia-app-statusbar-action {
display: none;
}
3

rex0220様

 

いつもありがとうございます。さすがです。

まだ実装して試してはいませんが，納得しました。

さっそく，これを元にして自分の環境にあわせて作ってみます。

4

rex0220様

おかげさまで、意図していた機能を実装できました。

ありがとうございます。

5

KINTONE初心者です。まさにこのJSを実装したいのですが、チェックボックスを該当のアプリのチェックボックスのフィールドコードに書き換える以外になにか設定すべきものはありますでしょうか？

素人すぎて恐縮ですがご指南いただければ幸いです

 

6

こちらの案件、大変助かっております。

お礼m(__)m

7

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