kviewerの一覧画面のカスタマイズについて

foopii · 2023 年 9 月 1 日午後 10:21

kviewerとform bridgeを連携させて下記の内容を実装しています。
kviewerの一覧 → kviewerの詳細画面 → formbridge → 回答完了

formbridgeでスコア（ゴルフ）を入力し、
その入力したスコアに応じて、kviewerの一覧画面で「順位」と「スコア」を表示しています。

====
(function() {
“use strict”;

kv.events.records.mounted = [function (state) {

  var groupCnt = [...Array(31).keys()].map(i => ++i) //組数

  for (var i = 0; i < groupCnt.length; i++) {

    //順位付け（終了フラグを立てたときのみ順位を表示）
    if(state.records[i]['finish'].value === "終了"){ 
      state.records[i]['順位'].value = (i + 1) + '位';
    }

  }

  return state;
}]

})();

1～2週間前までは上記ソースで実現できておりましたが、
昨日javascriptを適用してみたら順位が表示されませんでした。
（以前に作成していたkviewerの別の一覧画面でも表示されませんでした）

なお、kviewerの詳細画面のホームボタンを押して、kviewerの一覧画面に戻った際には表示されます。
ソースは変えずに今まで実現できておりましたが、なぜ表示されなくなってしまったのでしょうか？
（トヨクモに確認したところkviewer側のイベントの仕様は特に変更していないとのことです）

分かる方がいらっしゃいましたらぜひ教えていただきたいです。

宜しくお願いいたします。

aaa · 2023 年 9 月 4 日午前 1:07

まず、質問者のJavaScriptのソース全体を貼り付け直します。（先頭と最後がコード表示になっていないため）

(function () {
    "use strict";

    kv.events.records.mounted = [function (state) {
        var groupCnt = [...Array(31).keys()].map(i => ++i) //組数
        for (var i = 0; i < groupCnt.length; i++) {
            //順位付け（終了フラグを立てたときのみ順位を表示）
            if (state.records[i]['finish'].value === "終了") {
                state.records[i]['順位'].value = (i + 1) + '位';
            }
        }
        return state;
    }]
})();

https://kviewer.kintoneapp.com/help/js-customize

kv.events.records.mounted イベント

発生タイミング：レコード一覧のDOMが作成された後

※内部的に状態は変更されますが、DOMに変更が反映されない場合があります。

とありますので、イベントを kv.events.records.fetched に変更してみました。

(() => {
    "use strict";  // ストリクトモードを有効にする

    kv.events.records.fetched = [(state) => {  // kv.events.records.fetched イベントの処理を定義
        state.records.forEach((record, index) => {  // state内の各レコードに対して処理を行う
            // 順位付け（終了フラグを立てたときのみ順位を表示）
            if (record['finish'].value === "終了") {  // 終了フラグが「終了」の場合のみ
                record['順位'].value = `${index + 1}位`;  // 順位を計算して設定する
            }
        });
        return state;  // 状態を返す
    }];
})();  // 即時実行関数で囲む

var groupCnt = [...Array(31).keys()].map(i => ++i) //組数

とあったのは、よく意味がわかりませんでした。Array(31)と決め打ちしているところになにか意味があったのかも知れません。

コード整形、コメント追加、回答コードの一部にChatGPT4を使用しています。

foopii · 2023 年 9 月 4 日午前 6:31

ありがとうございます！
実現できました！

ちなみに、もう1点お伺いしたいのですが、
今回、一覧の方で「順位」のほかに「スコア」も表示しています。
「スコア」が０より大きい場合、”＋”を付けたいのです（スコアが「１」の場合は「+１」と表示）

「順位」の下にif文を追加しましたが、表示されませんでした。
何か間違えはありますでしょうか。

ご教授いただけますと幸いです。
宜しくお願いいたします。

(() => {
“use strict”; // ストリクトモードを有効にする

kv.events.records.fetched = [(state) => {  // kv.events.records.fetched イベントの処理を定義
    state.records.forEach((record, index) => {  // state内の各レコードに対して処理を行う
        // 順位付け（終了フラグを立てたときのみ順位を表示）
        if (record['finish'].value === "終了") {  // 終了フラグが「終了」の場合のみ
            record['順位'].value = `${index + 1}位`;  // 順位を計算して設定する
        }

        //score（＋付け）
        if(record['SCORE'].value > 0){
          record['SCORE'].value = '+' + record['SCORE'].value;
        }

    });
    return state;  // 状態を返す
}];

})(); // 即時実行関数で囲む

aaa · 2023 年 9 月 4 日午前 6:58

SCOREというフィールドが数値であるという前提です。
JavaScriptのカスタマイズで
+1

を入れることはできますが、
kviewerに反映できませんでした。

おそらく、kviewer側のチェック機能により数値フィールドに+記号が入ったことでなんらかのエラーになり(数値なのに文字が入ってきたと判断されている？)、空白で表示されるようです。

record['SCORE'].value = '1' + record['SCORE'].value;
みたいなものは動きました。

今度は、SCOREを文字列フィールドにするとkviewerの並び替えが効かなくなります。
もし、どうしてもということであれば
集計用の数値フィールドのSCOREと
表示用の文字列フィールドDISPLAY_SCOREなどを分けて処理を変える必要があるかも知れません。

foopii · 2023 年 9 月 4 日午前 8:10

aaa様

なるほどですね・・・。
どちらも、ついこの間まで表示できていないのに・・・
って感じですが。。
本当に助かりました！
ありがとうございます！

foopii · 2023 年 9 月 6 日午前 3:09

aaa様

すみません、もう1点教えてください。

state.records.forEach((record, index) => {
//該当の行の場合に処理する（例．10行目以降をグレーにする等）
if ( /ここの書き方が分からない・・・/ > 10) {
// 色付け処理
}
});

上記、「該当の行」をどのように記載すればよいかご教授頂きたいです。
宜しくお願いいたします。

aaa · 2023 年 9 月 6 日午前 4:38

(() => {
    "use strict";  // ストリクトモードを有効にする（エラーに厳格になる）

    // kv.events.records.fetched イベントが発火したときに実行される関数を定義
    kv.events.records.fetched = [(state) => {
        // state内に格納されている各レコードに対する処理
        state.records.forEach((record, index) => {
            // 'finish'フィールドが「終了」という値のときのみ順位を設定する
            if (record['finish'].value === "終了") {
                // 順位フィールドにインデックス+1と「位」という文字を組み合わせた文字列を設定
                record['順位'].value = `${index + 1}位`;
            }
        });

        return state;  // 処理後のstateを返す
    }];

    // kv.events.records.mounted イベントが発火したときに実行される関数を定義
    kv.events.records.mounted = [(state) => {
        // state内に格納されている各レコードに対する処理
        state.records.forEach((record, index) => {
            // indexが1より大きい場合のみスタイルを変更する（0と1はスキップ）
            if (index > 1) {
                // 対象レコードのDOM要素を取得
                const element = kv.index.getRecordElement(record['$id'].value);
                
                // 文字色をグレーに設定
                element.style.color = "#CCC";
                
                // 背景色を黒に設定
                element.style.backgroundColor = "#000";
            }
        });

        return state;  // 処理後のstateを返す
    }];
})();  // この全体を即時実行関数で囲っている（このスクリプトが読み込まれたら即実行される）

設定している値は適宜調整してみてください。

aaa · 2023 年 9 月 6 日午前 4:38

kViewerの新バージョンにて特定の文字列に色を付けて画面表示したい - kintone カスタマイズ - cybozu developer community

を参考にしました。

foopii · 2023 年 9 月 6 日午前 4:49

aaa様

ありがとうございます！
実装できました！
助けていただき、本当にありがとうございます！

aaa · 2023 年 9 月 6 日午前 4:59

kViewerで
kintoneの数値フィールドに文字列をっぽいものを結合させると
値が表示されないようになる件は、

kViewerの機能で見出し欄の並び替え機能の上下の三角をクリックで昇順、降順に並び替えられる機能があるかも知れないと考えるようになりました。

foopii · 2023 年 9 月 6 日午前 5:15

aaa様

本当に2週間前までは数値フィールドに文字列を入れても表示できたんですよね。。
なので、kviewer側で機能修正が入ったのかなと・・・。
でもDISP_SCOREで実現できましたので、大丈夫です！

ありがとうございます！

aaa · 2023 年 9 月 6 日午前 5:35

バージョンアップ情報 | kViewer

URLの履歴のどこかの修正か
閲覧しているブラウザ側のアップデートかも知れません。

foopii · 2023 年 9 月 6 日午前 6:24

ブラウザを変えても変わらなかったので、kviewer側のバージョンアップかなと思います！

system · 2023 年 9 月 9 日午前 6:25

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