カレンダービュー上でのタイトル文字色変更

カレンダービューで進捗状況によりタイトルの色を変更するようにしたいため、

「カレンダービュー上でのタイトル文字色変更」 をhttps://developer.cybozu.io/hc/ja/community/posts/201107004-%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E4%B8%8A%E3%81%A7%E3%81%AE%E6%9B%B8%E5%BC%8F-%E6%96%87%E5%AD%97%E8%89%B2-%E5%A4%89%E6%9B%B4を参考にして作成しました。

エラーメッセージの内容 は、Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘getElementsByClassName’) です。

動作自体は、正常に動いているようです。対処方法をご教示お願いいたします。

White様

この手の問い合わせでは、できれば実際のコードがあると適切な回答がつきやすいと思います。
意図違いかもしれませんが、エラー内容としては、getElementsByClassNameで指定しているクラスが未定義なので読み込めない、ようです。

リンク先のコードは2014年なのでもしかしたら対象のクラス名が異なるのかもしれません。

その辺りを再度確認されると良いかと思います。

ありがとうございました。今回追加した「カレンダービュー上でのタイトル文字色変更」のjsでエラーが発生しているのではなく、一覧表での合計計算計算のjsが影響(干渉?)していました。このプログラムがある状態で、(基本機能だけの)カレンダービューを実行してもエラーが発生します。下記のプログラムを動作させるのに合計計算計算のjsと同じ’app.record.index.show’を使っていますが、このことが原因と思います。「カレンダービュー上でのタイトル文字色変更」のjsを別の方法で動作させる方法が必要だと思います。考えて(調べて)見ますが、ど素人のため修正できるか?です。プログラム同志を干渉させないのは、初歩の初歩だと思いますが、、、

 

| // カレンダービュー |
| kintone.events.on(‘app.record.index.show’, function(event) { |
| // カレンダービューの表示時にフィールド値の条件に応じて、文字色、フィールドの背景色を変更する |
|   |
| var eles = document.getElementsByClassName(“cellitem-value-gaia”); |
| for (var i = 0, il = eles.length; i < il; i++) { |
| var ele = eles[i]; |
| // eleに「未了」が含まれていたら、文字色を赤く |
| if (ele.textContent.indexOf(“未了”) >= 0) { |
| ele.style.color = ‘red’; |
| ele.style.fontWeight = ‘bold’; |
| } else { |
| ele.style.color = ‘black’; |
| ele.style.fontWeight = ‘normal’; |
| } |
| } |
| }); |
| })(); |

TO 様

送信したあとで気が付きました、サイボウズさんが作ったカレンダービューと私の作った一覧表での合計計算計算のjsがカレンダービュープログラムの実行で干渉するのですから、上記方法ではダメですね。一覧表での合計計算計算のjsで何らかの対応が必要ですね。

White様

カレンダービューとは別の一覧で別のjsが動いている,という解釈でよいですか?
解釈に誤りが無ければ,一覧のviewIdなどで処理を分けることができます.
例えば,表示している一覧のviewIdは,event.viewIdで取得できます.
カレンダービューの一覧IDはアプリを起動してから,
確認したい一覧を選択して表示すればURLのview=~で確認できます.
あとは,if分岐で対象のviewIdじゃなかったら処理しないで抜けるようなコードをそれぞれのjsの直後に

kintone.events.on('app.record.index.show', function(event) {

if(event.viewId !== 〇〇〇〇〇〇){return event}; //〇〇〇〇〇〇は一覧のid

~

…という記述をすることで回避できるかもしれません.
参考になれば幸いです.

 

TO 様

早速のご教示ありがとうございます。

現状、私の作ったアプリの一覧には一覧1、一覧2、カレンダーの3つがあります。カスタマイズしたjavascriptは、一覧1、一覧2で動き、カレンダービューでは動かないようにしないとカレンダービューには、'recordlist-header-label-gaia’のクラス名が無いため、Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘getElementsByClassName’)のエラーが出てしまうようです。

ご教示していただいた方法でトライしてみます。

一覧1、一覧2用に作ったjavascriptが、'app.record.index.show’で動くようにしているためカレンダービュー(基本機能だけで作っても)を開くと、一覧1、一覧2用に作ったjavascriptが動作しエラーが表示してしまうことをようやく理解しました。

エラーが出ても実害は無いのですが、気になったため質問させていただきました。

また、viewId取得について教えていただきありがとうございました。

TO 様

ご教示いただいた方法でエラー解消することが出来ました。

| 第7回 カスタマイズビューを利用してみようhttps://developer.cybozu.io/hc/ja/articles/202905604 |
| 選択された一覧によって処理を切り替えるのサンプルコードで対処できる事が書かれているのに |
| 失念していました。 |
| (() => { |
| ‘use strict’; |
| kintone.events.on(‘app.record.index.show’, (event) => { |
| if (event.viewId !== 139967) { |
| return; |
| } |
| window.alert(‘カスタマイズビューはじめました’); |
| }); |
|

})();

お手数をお掛けしました。

|

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。