お世話になっております。
Javascriptの場合、viewIDやviewNameで指定したビューに処理を書くことができると思うのですが、共通のクラス名(cybozuで設定されている)が指定されている際に、cssでも指定したビューのみに処理を行う事は可能でしょうか。
例えば、カスタマイズビューではなく、表形式の標準ビュー（Aビュー）で特定の列(※左から4行目の列)のみのフォントサイズを変更したい場合、下記のように指定しているのですが、他のビュー(Bビュー)でも同じクラス名なので、同じく4行目の列の文字が小さくなります。
.recordlist-cell-gaia:nth-child(4) span{font-size:80%!important;}
また、下記のようにIDで指定すれば、そのIDのみの列に設定はできますが、IDはフィールド名に帰属しているようでAビューもBビューも同フィールド名の文字サイズが変更になりました。
.value-0000000 span{font-size:80%!important;}
JavascriptのようにviewIDやviewNameでAビューのみに指定したり、Bビューのみに指定したい場合はどのように設定を行えば宜しいでしょうか。
ご教授お願い致します。
Nao さん
CSS セレクタで区別できないと、共通になりますね。
ビュー毎に識別に使えそうなものは見当たりませんので、自分で付与しましょう。
index.show イベントで、id=“view-list-data-gaia” あたりに、
ビュー固有のクラス名を付加してはいかがですか？
rex0220様
ご返信ありがとうございます。
ご教授いただいた、固有のクラス名を付加を行おうと思い、下記のように設定したのですが、
どうもうまくいきません。
※Aビューのみにid="view-list-data-gaia"の部分にClass="customize"を追加
コードでおかしいところはありますでしょうか？
(function() {
kintone.events.on('app.record.index.show', function(event) {
if (event.viewName !== 'Aビュー') {
return;
var setClass = document.getElementById('view-list-data-gaia');
setClass = className = "customize";
}
});
})();
お手数でございますが、ご確認お願い致します。
= になっています。
setClass.className = “customize”;
class を追加したほうが、将来 kintone でclass が設定された場合に、影響が少ないと思います。
setClass.classList.add(‘customize’);
rex0220様
早速のご返信ありがとうございます。
ご教授いただいたように、下記で設定したのですが、class名が追加されてないような気がします。
(function() {
kintone.events.on('app.record.index.show', function(event) {
if (event.viewName !== 'Aビュー') {
return;
var setClass = document.getElementById('view-list-data-gaia');
setClass.classList.add('customize');
}
});
})();
開発ツールからソースを確認しているのですが、
<div id="view-list-data-gaia" style="position: relative;">
上記部分が
<div id="view-list-data-gaia" style="position: relative;" class="customize">
このように変わる想定なのですが、変更されていないようです。。。
度々お手数でございますが、ご確認お願い致します。
設定されていないとなると、 if (event.viewName !== ‘Aビュー’) { の条件が違っているくらいでしょうか？
console.log(event); で内容を確認してはいかがでしょうか？
rex0220様
ご返信ありがとうございます。
確認したところ、return;とvarの間に「}」が入っていなかった為でした。
上記修正で問題なく動作致しました。ありがとうございます。
今後ともよろしくお願いいたします。