いつもお世話になっております。秋山と申します。
本日は、レコード詳細画面の編集ボタンに関わることについて2点ほどお聞きしたいことがあり、本サイトに投稿させていただきました。
1点目は、詳細画面に上部にデフォルトで設置されている、編集ボタンや再利用ボタンなどの1行を非表示にすることができるかどうかです。
2点目は、もし非表示にできる場合、編集ボタンのみ改めてアクションボタンのように設置することができるかどうかです。
編集ボタンはよく利用するのですが、再利用ボタンなどのその他のボタンについては触れる機会がないため、このような質問をさせていただきました。
ご回答いただければ幸いです。
秋山さん
cstapの落合です。
DOM操作になるので、kintoneのバージョンアップに対応していく必要がありますが、以下の様なJavaScriptで再利用ボタンは非表示にできます。
(function () {
"use strict";
// レコード詳細画面が表示された時のイベント
kintone.events.on('app.record.detail.show', function (event) {
document.getElementsByClassName('gaia-ui-actionmenu-reuse')[0].parentNode.style.display = 'none';
});
})();
以上、参考になりますでしょうか？
秋山さん
CSSを利用すれば目的の動作はどちらとも可能です
li.gaia-ui-actionmenu-icon:nth-child(n+2) {
display: none;
}
とすれば、編集ボタンのみを左上に設置できます。
参考になりましたでしょうか
落合さん、瀧ヶ平さんご回答ありがとうございます。
両方法とも参考させていただこうと思います。
また、2点目に関して、もう1つ参考までにお聞きしたいのですが、
お二方のそれぞれの方法であれば、編集ボタンのみを表示することで、
私の要望を満たしていただいていると思います。
2点目として挙げさせていただいたような方法は可能なのでしょうか。
レイアウトとして編集ボタン1つであれば、アクションボタンのように設置できると、
より使いやすくなると思い、再度質問させていただきました。
ご回答いただければ幸いです。
秋山さん
編集ボタンをアクションボタンのように設置する場合は、CSSによって当該の要素のデザインを変更することによって実装可能であると思います.
簡易的にではありますが編集ボタンをアクションボタンに似せるCSSを書いてみました。
参考にしていただければ幸いです。
a.gaia-ui-actionmenu-edit {
border-radius: 30px;
background-color: #f0f0f0;
padding: 0 30px;
}
瀧ヶ平さん、再度のご回答ありがとうございました！
レイアウトを行うことで、アドオンで追加したボタンにかなり似せることができました。
もしかすると…なんですが、アクションボタンもCSSでレイアウトを変更することができるのでしょうか？
秋山さん
アクションボタンもデザインの変更は可能です。
ですが、DOM操作同様kintoneのアップデートに伴って変更しなければならない可能性があるので注意が必要です。
ご回答ありがとうございました！
アップデートに気を付けて参考にさせていただきたいと思います。
お忙しい中、数度に渡るご回答、誠にありがとうございました。
松山と申します。
突然のコメント失礼致します。
私も、再利用ボタンの非表示をしたく、このスレッドのコメント１の落合様が記載されたJavaScriptをそのまま使用させていただいておりました。
しかし、kintoneの新デザインでは再利用ボタンが非表示になりません。JavaScriptの知識が乏しくどうすれば新デザインでも有効になるのかわかりかねております。
どなたかご存知の方がいらっしゃいましたらご教授いただければ幸いです。
松山さん
新デザインでは再利用ボタンのクラス名が変わっているため、
document.getElementsByClassName('gaia-ui-actionmenu-reuse')[0].parentNode.style.display = 'none';
の部分を
document.getElementsByClassName('gaia-argoui-app-menu-copy')[0].style.display = 'none';
に変更すれば動作するかと思います。
瀧ヶ平さん
早々のコメントありがとうございます。
教えていただいた箇所を変更することで正しく動作（再利用ボタンが非表示）しました。
ありがとうございました！
久保と申します。
私からも追加で質問させてください。
新レイアウトの「追加する」、「変更する」、「再利用する」アイコンの非表示ではなく、「・・・」から選択可能な「レコードを削除」、「レコードを印刷」を非表示にすることは出来るのでしょうか？
ご教授いただければ幸いです。
よろしくお願いします。
久保さん
お世話になっております。
サイボウズスタートアップスの武井です。
久保さんのおっしゃっている要素は、
ユーザーが「・・・」をクリックして初めて操作が可能となる要素となります。
従いまして、「・・・」をクリックされるまで待つ処理が必要でございます。（setIntervalなどとなります）
クリックを検知した後（消したい要素が表示されたことを確認した後）は、通常通り、display:noneにて非表示にすることが可能です。
よろしくお願いいたします。
武井様
コメントありがとうございます。
対象の要素に対してスタイルを変更するといった簡単なイメージでいました。
『「・・・」のクリックを待つ』とは、具体的にどのようなコードになるのでしょうか？
まだまだ初心者ですので、詳細が分かりません。
申し訳ありませんが、ご教授ください。よろしくお願いします。
久保さん
概ね以下のような形式になります。
var int = setInterval(function(){
if (消したい要素のlength > 0) {
clearInterval(int);
消したい要素をdisplay:none
}
}, 100);
武井様
回答ありがとうございます。
参考にさせて頂きます。
実装にチャレンジしてみます。
ありがとうございました。
こちらを参考にさせていただき、PCにて再利用ボタンをを非表示にすることができました。
ありがとうございます。
ちなみにKintoneアプリ（モバイル）でも同じように編集ボタンを非表示にすることはできますでしょうか。
追記
こちらに投稿した結果モバイルではボタンごとに非表示は不可ということでした。
参考に記載します。