- 投稿日：2021-11-26T13:53:30+09:00
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チャートに色々仕込むことによって考え方によってはさらにできることが増えるんじゃないかなと思います。
- 投稿日：2021-11-26T12:54:52+09:00
HTMLの画面サイズの扱い
これは何？ ツールなどをちゃちゃっと作って公開するときにモバイル対応してないとちょっと残念。その対策のメモです。 簡単に言うと、viewportをJavaScriptで制御する、またはCSSでなんとかする方法です。 実装 CSSで何とかする div.contentをスクリーンのサイズで動的に変えるのがポイント。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" id="meta_viewport"> <style> /* smaller than */ @media only screen and (max-width: 400px) { body { margin: 0px; } div.content { width: 100%; } } /* larger than */ @media only screen and (min-width: 400px) { div.content { width: 200px; } } body { background: #e2e1e0; text-align: center; font-family: arial; display: flex; flex-direction: column; align-items: center; } div.content { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 5px; height: 200px; } </style> </head> <body> <div class="content"> Hello! </div> </body> </html> viewportで何とかする window.onresizeのEventでviewportを動的に更新。JavaScript内の「content_width」にdiv.contentのwidthにmarginを考慮するのがポイント。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" id="meta_viewport"> <style> body { background: #e2e1e0; text-align: center; font-family: arial; display: flex; flex-direction: column; align-items: center; } div.content { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 5px; height: 200px; width: 200px; } </style> </head> <body> <div class="content"> Hello! </div> <script> const adjust_content_width = () => { const s_width = window.outerWidth const content_width = 220 const meta_vp = document.querySelector('meta#meta_viewport') const content_scale = s_width/content_width < 1 ? Math.floor(100 * s_width/content_width)/100 : 1.0 meta_vp.setAttribute('content',`width=${s_width}, initial-scale=${content_scale}, maximum-scale=${content_scale}`) } window.onload = adjust_content_width window.onresize = adjust_content_width </script> </body> </html> Reference もう逃げない。HTMLのviewportをちゃんと理解する - Qiita