Upgrade to Pro — share decks privately, control downloads, hide ads and more …

はじめてのActiveReportsJS(帳票デザインの基本編)/activereportsjs-design

 はじめてのActiveReportsJS(帳票デザインの基本編)/activereportsjs-design

グレープシティのオンラインセミナー「はじめてのActiveReportsJS(帳票デザインの基本編)」のセッション資料です。

Transcript

  1. はじめてのActiveReportsJS(帳票デザインの基本編) グレープシティ株式会社 ツール事業部 プロダクトマーケティングチーム 福井潤之

  2. 2 GrapeCity Developer Solutions ActiveReportsJSのご紹介

  3. ActiveReportsJS 3 GrapeCity Developer Solutions 帳票開発ツール「ActiveReports」の DNAを受け継ぐ、モダンWeb開発に対応した 「帳票開発支援JavaScriptライブラリ」 クライアントサイドで 帳票生成

    Windows/Macで 使えるデザイナ マルチブラウザ対応の ビューワ
  4. ActiveReportsJSでの帳票開発の流れ 4 GrapeCity Developer Solutions 1. 付属の帳票デザイナでレポートファイルを作成 2. 表示するデータをJSONフォーマットで作成する 3.

    レポートファイルをブラウザ上で実行し、 作成された帳票を、帳票ビューワで閲覧、各種形式への保存、印刷
  5. 5 GrapeCity Developer Solutions ActiveReportsJSデザイナのご紹介

  6. ActiveReportsJSデザイナ 6 GrapeCity Developer Solutions ツールバーで 簡単レイアウト Windows / Mac

    対応 豊富なレポートコントロール 直感的に使える プロパティグリッド デザイナ上で 直接プレビューが可能
  7. 18種類のレポートコントロール 7 GrapeCity Developer Solutions • TextBox • TableOfContents •

    CheckBox • Container • Line • Shape • InputField • Bullet • Image • Barcode • Tablix • Sparkline • SubReport • OverflowPlaceHolder • List • Table • BandedList • Chart データ領域コントロール
  8. データバインディング 8 GrapeCity Developer Solutions APIだけでなく、 埋め込みやファイル形式にも対応 データソースはJSON形式で設定します ヘッダやクエリパラメータの 設定にも対応

    各レポートコントロールとのバイン ディングもGUIでらくらく APIのURIを指定 パラメータで動的に変更も可能
  9. 日本仕様 9 GrapeCity Developer Solutions

  10. 選べる2つのレポート形式 10 GrapeCity Developer Solutions • 印刷結果とまったく同じレイアウトで帳票を デザインできる • 出力される帳票のレイアウトはデータの量に

    応じて変化 • 日本に多い定型のレイアウトを作成するのに最適 • 印刷よりもアプリケーション上でプレビューする 用途に最適
  11. 11 GrapeCity Developer Solutions デモ

  12. デモで作成する請求書 12 GrapeCity Developer Solutions

  13. アプリケーションへの組み込みもわずかなコードで 13 GrapeCity Developer Solutions <body onload="load()"> <div id="Viewer" style="height:

    100vh"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#Viewer', { language: 'ja' }); viewer.open('./reports/test.rdlx-json'); } </script> </body>
  14. 本日のまとめ 14 GrapeCity Developer Solutions 帳票のレイアウトにあわせて最適なデータ領域コントロールを選択する 1 2 3 動的な制御や集計処理には「式」を使用する

    グループ化でキー項目ごとにデータをまとめた帳票を作成する
  15. Webで技術情報を公開中 15 GrapeCity Developer Solutions CodeZine GrapeCity.devlog (https://codezine.jp/article/corner/823) (https://devlog.grapecity.co.jp/archive/category/ActiveReportsJS)

  16. セミナーの内容や製品に関するご質問・ご相談を承っています 16 GrapeCity Developer Solutions お問い合わせ グレープシティ株式会社 ツール事業部 営業部 製品に関するご相談を

    オンライン形式で承っています。 • より詳しい製品のご紹介 • 勉強会の開催 など、柔軟にご対応可能です。 セミナーの内容に関してご質問がある方は グレープシティ営業部までお気軽に お問い合わせください。 050-5490-4661 sales@grapecity.com
  17. END セミナー受講、誠にありがとうございました。