プログラミングど素人の質問です。
プロセス管理ボタン色を「左から〇番目表示のもの」ではなく「表示の文言」で色分けの設定したいです。
- この「差し戻す」が左から２番目、３番目に表示される場合でも同じピンク色付け
- 逆に「承認」が表示される場合はどのステータスであっても色は付けない
- 「現在の作業者を変更」は左から２番目～５番目など何処に表示されようと「紺色」
以上のような条件付けの色分け設定を行いたいです。
理屈としては出来ると思い込んでいますが、可能なのかもわかっていません。
画像の際の試したCSSになっています
.gaia-app-statusbar-actionlist-wrapper .gaia-app-statusbar-action:nth-child(1){
background-color: #FF0461;
color: white;
}
.gaia-app-statusbar-action:nth-child(差し戻す) {
background-color: #FF6600;
color: white;
}
.gaia-app-statusbar-actionlist-wrapper .gaia-app-statusbar-action:nth-child(‘現在の作業者を変更’){
background-color: #003366;
color: white;
}
https://developer.cybozu.io/hc/ja/community/posts/900001382223-%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%89%B2%E3%82%92%E4%BB%BB%E6%84%8F%E3%81%AB%E5%A4%89%E6%9B%B4
https://developer.cybozu.io/hc/ja/community/posts/360055218471-%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%9C%E3%82%BF%E3%83%B3%E3%81%AE%E8%89%B2%E3%81%AE%E5%A4%89%E6%9B%B4%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6
こちらの記事を参考にしましたが、素人すぎてCSSコピペだけでいいのか
jsファイルにて条件付けの設定とCSS設定も行うのか、わからずお手上げになりました。
可能か、不可能か、ご教授いただければと思います。宜しくお願い致します。
「いいね！」 1
suga0209さん
こんにちは。
CSSでの対応が不可のため、JavaScriptでの対応をご案内します。
アクションボタンのHTMLの要素を見ていただくと、以下のようになっているはずです。
<span class="gaia-app-statusbar-action-label" title="差し戻す">差し戻す</span>
まずは、この要素を取得する必要があるため、一例ですが、以下の記述で取得します。
document.querySelector('span[title="差し戻す"]');
title属性に「差し戻す」を持つ<span>タグを取得できます。
色を変えたいのは、この要素の親に当たる要素ですので
parentNodeで親要素を取得し、それに対してbackgroundColor（背景色）を指定します。
勿論、文字色を変えたり、太さを変えたりといったことも、この親要素に対して適用できます。
(function() {
'use strict';
kintone.events.on(['app.record.detail.show'], function(event) {
const el1 = document.querySelector('span[title="差し戻す"]');
if (el1) {
el1.parentNode.style.backgroundColor = '#ff0000';
}
const el2 = document.querySelector('span[title="現在の作業者を変更"]');
if (el2) {
el2.parentNode.style.backgroundColor = '#00ffff';
}
});
})();
プログラミング初心者とのことで、当サイトのチュートリアル等を実践していただくと
よりご理解が深まるかと思いますので、おすすめです。
「いいね！」 1
koichiさん
ありがとうございます！コピペで試して綺麗に反映が確認出来ました。
チュートリアルの実践を試すより、現物で慣れろで挑んでいたので、助かりました。
再度、チュートリアルを参考にして、文字色や太さの変更など応用を試していきます。
ありがとうございました。
koichiさん
目指したものが出来ました！ありがとうございました！
使用したjs↓
(function() {
‘use strict’;
kintone.events.on([‘app.record.detail.show’], function(event) {
const el1 = document.querySelector(‘span[title=“差し戻す”]’);
if (el1) {
el1.parentNode.style.backgroundColor = ‘#d0ff43’;
el1.style.color = ‘black’ ;
}
const el2 = document.querySelector(‘span[title=“現在の作業者を変更”]’);
if (el2) {
el2.parentNode.style.backgroundColor = ‘#003366’;
el2.style.color = ‘white’ ;
}
const el3 = document.querySelector(‘span[title=“未処理”]’);
if (el3) {
el3.parentNode.style.backgroundColor = ‘#336633’;
el3.style.color = ‘white’ ;
}
const el4 = document.querySelector(‘span[title=“依頼受付”]’);
if (el4) {
el4.parentNode.style.backgroundColor = ‘#336633’;
el4.style.color = ‘white’ ;
}
const el5 = document.querySelector(‘span[title=“発注依頼”]’);
if (el5) {
el5.parentNode.style.backgroundColor = ‘#336633’;
el5.style.color = ‘white’ ;
}
const el6 = document.querySelector('span[title="初期化"]');
if (el6) {
el6.parentNode.style.backgroundColor = ‘#ead9ff’;
el6.style.color = ‘black’ ;
}
});
})();
タブをクリックしていくと、設定した文言タブの際に色がついた状態で表示
色設定をしていないものはそのまま、となりました！
「いいね！」 1
suga0209さん
早速のご確認ありがとうございます。
綺麗に色分けされてて見やすいですね！
早々ないとは思いますが、DOM操作のため
kintoneのメンテナンス等で、要素の形式が変わると機能しなくなる可能性がありますので
その点はご注意ください。