レポート項目の外観のカスタマイズ

カスタムテキストボックスとチェックボックスのスタイル

CustomCSSClasses プロパティを使用して、TextBox と CheckBox レポートアイテムの外観をカスタマイズできます。これにより、JS Report Viewer でレンダリングされる場合、これらの要素に特定の CSS クラスを適用できます。

この機能は、標準テキストボックスをレポート内のインタラクティブなボタンに見せるなど、UI の強化に特に役立ちます。

事前定義されたスタイル

JS Report Viewer デリバリアブルには、デフォルトのカスタムスタイルシート jsViewer.custom.styles.css が含まれています。このファイルには、以下のような事前定義クラスが含まれています：

ar-button
ar-button-pressed

これらのスタイルをそのまま使用することも、独自のカスタム CSS ファイルを作成して一意のビジュアル動作を定義することもできます。

構成

カスタムスタイルを有効にするには、CSS ファイルを読み込むようにビューアーを構成する必要があります。ビューアーの初期化中に reportItemsStyles.cssUri プロパティをスタイルシートの場所に設定します。

CSS ファイルがアプリケーションスコープ内の URL でアクセス可能であることを確認してください。

import { createViewer } from '@mescius/activereportsnet-viewer';

const viewer = createViewer({
  reportItemsStyles: {
    // これをカスタム CSS またはデフォルト ファイルに指定
    cssUri: 'jsViewer.custom.styles.css'
  }
})

実装例

この機能の実装例は JSViewer サンプルで確認できます。

TaxiDriveReport の例では、Reset Filter ボタンが ar-reset-link スタイルを使用しており、これはプロジェクトの wwwroot\custom.styles.css ファイルで定義されています。