【kintone】一覧表示画面で特定のtdタグのcssを適用する

kintone カスタマイズ
1

お世話になります。

一覧画面においてカスタマイズしたい場合にはapp.record.index.showイベントが利用できることがわかっております。

ここで、JSカスタマイズによって、例えば以下の様な特定の要素についてCSSを適用したいと考えております。

レコード番号:5

フィールドコード：age 

age > 50であればbackground-colorを変更する

→DOMを調べると実際には以下の様になっています。

<td class="recordlist-cell-gaia recordlist-single_line_text-gaia value-5520991"><div class="line-cell-gaia recordlist-ellipsis-gaia"><span>55歳</span></div></td>

editやcreateイベントにおいては、フィールドコードを取得して、操作できるのですが、方法があれば教えてください。

2

ryoryo さん

class の取得で一番基本的なのは、以下の記述です。

let cls = document.getElementsByClassName("取得するclass名");

ちなみに、色などの変更を行う場合は、取得した class の style プロパティから変更できます。

// class の 1番最初の要素に対して、背景色の変更を行ってます。  
cls[0].style.backgroundColor = "red";

以下などのページがわかりやすいかと思われます。

https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

http://alphasis.info/2013/10/javascript-dom-styleobject-backgroundcolor/

3

コメントありがとうございます。

JS的な視点では確かに仰る通りでした。今並行して自分でも調べていたのですが、

kintone.app.getFieldElementsでフィールドコードと紐づくDOM要素を取得ができることがわかりました。

https://developer.cybozu.io/hc/ja/articles/202640970-%E3%83%AD%E3%82%B0%E3%82%A4%E3%83%B3%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%8C%E6%8B%85%E5%BD%93%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E8%83%8C%E6%99%AF%E8%89%B2%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B

 

どちらでも解決ができそうです。

改めて御礼申し上げます。

宜しくお願い申し上げます。

 

4

ryoryo さん

あ、ごめんなさい、一覧画面でしたか。。。しっかり、app.record.index.show と書いていますね。。。

勝手に kintone の関数では要素が取得できない画面だと勘違いしておりました、お恥ずかしい限りです。

私が言うのもなんですが、JavaScript で要素取得するとアップデートなどで影響うける可能性があるので、kintone の関数で対応できるならそのほうがいいですね。

間違った方法を提示してしまい、申し訳なかったです。

5

とんでもございません、大変参考になるコメントでした。idやclassで直接指定して書いてしまっているコードもあるので、アップデートがあった場合、まずい状況になっていました。
有難うございます！