バージョン

セットアップと構成

以下は、Reveal Web Client SDK を設定するための手順です。

  1. 依存関係の確認

  2. Web Client SDK の参照

  3. Web Client SDK のインスタンス化

  4. React / Angular のサポートを設定 (オプション)

1. 依存関係の確認

Reveal Web Client SDK には、サードパーティーの参照が 1 つあります。

  • jQuery 2.2 またはそれ以上

2. Web Client SDK の参照

Web ページで $.ig.RevealView コンポーネントを有効にするには、いくつかのスクリプトを含める必要があります。これらのスクリプトは Reveal Web Client SDK の一部として提供されます。

<script src="~/Reveal/infragistics.reveal.js"></script>

JavaScript ファイル は "<InstallationDirectory>\SDK\Web\JS" にあります。

3. Web Client SDK のインスタンス化

ダッシュボードのプレゼンテーションは、Web Client SDK を介してネイティブに処理されます。

以下の手順に従って作業を開始します。

  1. id を指定して <div /> 要素を定義し、$.ig.RevealView コンストラクターを呼び出します。

    Note
    サーバー側とクライアント側のパーツを個別にホスト

    個別のサーバーでクライアント側とサーバー側のパーツをホストする場合は、次の手順を続行する前に こちらを参照してください。

  2. コンストラクタで dashboardId を指定して $.ig.RevealSettings のインスタンスを作成します。

  3. $.ig.RevealUtility.loadDashboard を呼び出して dashboardId と成功およびエラーハンドラを指定します。

    1. 成功ハンドラーでは、取得したダッシュボードを使用し、$.ig.RevealSettings オブジェクトの dashboard プロパティに設定する必要があります。

  4. 最後に、2つのパラメータを渡して $.ig.RevealView コンポーネントをインスタンス化します。1 つはダッシュボードをレンダリングする DOM 要素のセレクター、もう 1 つは設定オブジェクトです。

サンプル コード

<!DOCTYPE html>
<html>
<head>
    ⋮
    <script type="text/javascript">
        var dashboardId = "dashboardId";
        var revealSettings = new $.ig.RevealSettings(dashboardId);

        $.ig.RevealUtility.loadDashboard(dashboardId, function (dashboard) {
            revealSettings.dashboard = dashboard;
            var revealView = new $.ig.RevealView("#revealView", revealSettings);
        }, function (error) {
		// ここで発生する可能性があるエラーを処理します。
        });
    </script>
</head>
<body>
    <div id="revealView" style="height:500px;" />
</body>
</html>

4. React / Angular のサポートを設定 (オプション)

フロントエンドでは、Reveal は Angular と React との互換性を提供する Web コンポーネントを提供します。

次のスニペットは、クライアント側で追加する必要があるものを示しています。

<script src="~/Reveal/reveal-webComponent.js"></script>
<section>
    <reveal-view dashboard-name="Sales" can-edit="" editing="" show-menu="" can-add-visualization=""</reveal-view>
</section>

Web コンポーネントには他の依存関係も含める必要があることに注意してください (jQuery 2.2以降およびInfragistics.reveal.js)。

次の 2 つの JS ファイルが <InstallationDirectory>\Web\JS にあります。

  • reveal-webComponent.js

  • reveal-WebComponent-ie11.js

IE11 サポート

IE11 ユーザーをサポートする場合について説明します。以下のスニペットでほとんどのブラウザーで問題なく動作します。

@section Scripts {
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>
    <script src="https://unpkg.com/@@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="~/Reveal/reveal-webComponent-ie11.js"></script>
}
<section>
    <reveal-view dashboard-name="Sales"></reveal-view>

ただし、フロントエンドのパフォーマンスを向上させたい場合や、IE11 を考慮しない場合は、上記の他のスニペットを確認し、代わりに reveal-webComponent.js を使用してください。