レコード保存完了時に、編集ボタンを見えなくする処理をしたいと考えています。
CSSは以下のコードを用意し、それをJavaScriptで追加する処理です。
put_log_displaynone{
display: none;
}
PC版は以下のコードで実装できました。
(function(){
"use strict";
kintone.events.on("app.record.edit.submit.success",function(event){
var element = document.getElementsByClassName('gaia-argoui-app-menu-edit');
element[0].classList.add('put_log_displaynone');
});
})();
同じようにスマホ版も似たようなコードで実装できるかと思っていたのですが、うまくいきません。
(function(){
"use strict";
kintone.events.on("mobile.app.record.edit.submit.success",function(event){
var element = document.getElementsByClassName('gaia-mobile-v2-app-record-showtoolbar-editrecord');
element[0].classList.add('put_log_displaynone');
});
})();
一体なぜなのかわかる方がいましたら、ご教授をお願いいたします。
開発者ツールで見たときに該当のclassはセットされていますか？
display: none !important; にするとどうなりますか？
ご回答ありがとうございます。
display: none !important;も試してみましたが、動作しませんでした。
開発者ツールを見ると、該当のclassはセットされておらず、代わりに画像のエラーが表示されます。
↓エラー内容
↓該当のCSSにセットされていない
また、バグの原因を探る過程で、他のCSSを持つ要素にdisplay: noneをセットした場合は、しっかりと要素が削除されていました。
↓要素の削除に失敗した例
(function(){
"use strict";
kintone.events.on("mobile.app.record.edit.submit.success",function(event){
varelement =document.getElementsByClassName('gaia-mobile-v2-app-record-showtoolbar-editrecord');
element[0].classList.add('put\_log\_displaynone');
});
})();
↓要素の削除に成功した例
(function(){
"use strict";
kintone.events.on("mobile.app.record.edit.submit.success",function(event){
varelement =document.getElementsByClassName('gaia-mobile-v2-pagelayout');
element[0].classList.add('put\_log\_displaynone');
});
})();
失敗した方に関しては、button要素のCSSで、成功した方はdiv要素のCSSなのでそのあたりに違いでもあるのでしょうか・・・？
PC 版の編集画面では、編集ボタンを含む親要素が見えないだけで存在しているのに対して、
モバイル版編集画面では、編集ボタンが画面上存在していません。
詳細画面の表示イベントで、編集ボタンを非表示にする必要があります。
なお、編集できなくする目的ならレコードのアクセス権限で編集不可にしてはいかがですか？
ご回答ありがとうございます。
上記のご回答の観点を反映し、無事実装する事ができました。
検討した結果、
保存成功時に編集不可トリガーをonにする → 詳細画面表示イベントで、編集ボタンを非表示にする
という流れになりました。
system
(system)
クローズされました:
6
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。