Yellowfinの表からチェックボックスでカラムの表示非表示を切り替える

はじめに

ドリルスルー先のレポート上で、予め決めたカラムの表示非表示をチェックボックスで切り替えたいというご要望があったため、実現できるか試してみた記録です。
結論からいうとGifで動いている通り実現できましたが、レポートを保存するたびに要素のクラス名が変更になるのでなかなか面倒くさい感じです。
※2021/11/29追記
要素のクラス名が変更になる部分はJSチャート機能のoptionオブジェクトにレポートIDが入っていたためクリアできました！

また、JavaScriptチャートの機能を使い強引にチェックボックスを実装し、JqueryでCSSの変更をしています。

要素のクラス名の取得

デベロッパーツールで対象の列にしかないクラス名を探します。
このAthletes1列の場合はrpt113475~~2の部分です。ヘッダーの部分、表の中の白い数字の部分、小計の部分と3パターンのクラス名が存在しました。
レポートを更新すると、このrpt******の部分が更新されるため新しくした場合は忘れずに変更してください。

JSチャートタブの設定

JavascriptタブのHtml作成部分に強引にJavaScriptを+でつないで書いていきます。
もっといい方法があればいいのですが・・・・
今回のソースはこちらです。チェックボックスの状態を取得してshow()hide()で切り替えをしています。

display.js

//generateChart は必須の関数であり、Javascriptグラフの作成において呼び出しされます
generateChart = function(options) {

   // これはお使いのブラウザのデバッガのブレークポイントのトリガとなるため、Javascriptをデバッグすることができます
   //debugger;
   var reportid = options.reportAPI.reportId;

   // グラフを描画する部分です
   var $chartDrawDiv = $(options.divSelector);
   $chartDrawDiv.html(
            'ベスト表示<input type="checkbox" id="chkbox" name="chkbox">'+
            '<script>'+
            '$(function() {'+
                "$('#chkbox').click(function() {"+
                    "if ( $(this).prop('checked') ) {"+
                        '$(".rpt'+reportid+'hdrf2").hide();'+
                        '$(".rpt'+reportid+'f2").hide();'+
                        '$(".rpt'+reportid+'ttlf2").hide();'+
                    "} else {"+
                        '$(".rpt'+reportid+'hdrf2").show();'+
                        '$(".rpt'+reportid+'f2").show();'+
                        '$(".rpt'+reportid+'ttlf2").show();'+
                    "}"+
                "});"+
            "});"+
            '</script>'
    );
};

さいごに

製品の仕様で更新した場合に要素クラスの再取得が必要になるなど面倒な部分はありますが、 長いレポートでサマリー列だけ表示させる場合などにはレポート単位でも使えるしいいんじゃないかなと思います。
もちろん1列だけじゃなくて何列か一気に表示非表示を切り替えることができるので、そうなるとかなりスッキリしますねー。
また、JavaScriptチャートに色々仕込むことによって考え方によってはさらにできることが増えるんじゃないかなと思います。