[]
デモ ヘルプ APIリファレンス
トライアル版
(Showing Draft Content)

Webデザイナコンポーネントの使用（JavaScript）

JavaScriptアプリケーションを作成する

JavaScriptアプリケーションは、HTMLページとJavaScriptコードで構成されます。
以下は、JavaScriptアプリケーションを作成するサンプルです。

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>ARJS Report designer</title>
    <meta name="description" content="ARJS Report designer" />
    <meta name="author" content="GrapeCity" />
  </head>

  <body></body>
</html>

Webデザイナコンポーネントを参照する

WebデザイナコンポーネントはCDN、およびnpmにて公開されています。JavaScriptアプリケーションにWebデザイナコンポーネントを組み込む簡単な方法は、headタグ内にCDNへの参照を追加することです。

<!-- CDN参照をご利用する場合は以下URLの"X.X.X"を使用するActiveReportsJSのバージョンに置き換えてご利用ください -->
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/X.X.X/styles/ar-js-ui.css"
  type="text/css"
/>
<link
  rel="stylesheet"
  href="http://cdn.grapecity.com/activereportsjs/X.X.X/styles/ar-js-designer.css"
  type="text/css"
/>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/X.X.X/dist/ar-js-designer.js"></script>

Webデザイナコンポーネントのホスト要素を追加する

Webデザイナコンポーネントをホストするdiv要素をbodyタグ内に追加します。

<div id="designer-host"></div>

headタグ内にdesigner-host要素のスタイルを追加します。

<style>
  #designer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
  }
</style>

Webデザイナコンポーネントを初期化する

以下のスクリプトを、bodyタグ内のdesigner-host要素の後ろに追加します。このスクリプトはdesigner-host要素が描画された後に実行されます。

<script>
  new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>

アプリケーションを実行する

ブラウザで作成したHTMLページを表示します。ページ上にWebデザイナコンポーネントが表示されます。レポートに、コントロールの追加、プロパティの設定、データソースを作成するなど、基本的な機能を確認できます。

関連トピック