OutSystems上で簡単なシステムを作成し、ActiveReportsJSを活用した帳票機能を構築する

JavaScript帳票ライブラリ「ActiveReportsJS」の活用事例

　メシウスの「ActiveReportsJS」は、帳票開発を総合的にサポートするJavaScriptライブラリです。このライブラリは、ローコードプラットフォームであるOutSystemsでも活用でき、標準で帳票機能が備わっていないOutSystemsにおいて、優れた選択肢となります。本記事では、「ActiveReportsJS」をOutSystemsと連携させる方法について詳しくご紹介します。

はじめに

　OutSystems自体には帳票出力の機能が備わっていません。OSSレポジトリであるForgeにはUltimate PDFを初め、いくつかコンポーネントもありますが、大量の帳票を作成したり、細かい要件がある場合は不足を感じたりすることも多いでしょう。そのため、多くのOutSystems導入企業は何らかの帳票ソフトウェアまたはサービスを導入し、連携させて使うことになります。

　本記事では、JavaScript帳票開発ライブラリのActiveReportsJSをOutSystemsと連携させる方法を紹介します。

対象読者

• OutSystemsに帳票ソリューションを導入することを検討している方
• OutSystemsにActiveReportsJSを組み込む方法を知りたい方
• OutSystemsの開発知識を取得したい方

必要な環境

　本記事のサンプルプログラムを試すためには、以下が必要です。

• OutSystems 11の環境（動作検証はPersonal EnvironmentのVersion 11.27.0（Build 42818）を使用しました）
• Service Studio 11（IDE）（動作検証はVersion 11.54.66 / Build 63364を使用しました）
• OutSystemsがサポートするブラウザ （OutSystems system requirements > End user requirements > Reactive Web apps- OutSystems 11 Documentation）
• ActiveReportsJS V5J

　OutSystems 11の環境は、無償のPersonal Environmentで問題有りません。環境を持っていない方は、アカウントをサインアップすると作ることができます。

　ActiveReportsJSは、専用のツールでデザインしたレポートを、WebブラウザのJavaScriptのみで出力できるライブラリです。以降、ActiveReportsJSで作る帳票のことを、ActiveReportsJSにあわせてレポートと呼びます。

サンプルアプリケーションのセットアップ

　Service Studio上で、「New Application」をクリックしてアプリケーション作成を開始します。

New Application

　用意されているテンプレートを基にアプリケーション作成を始める「From an app」を選択してアプリケーションを作ります。

From an app

　Order Managementのテンプレートを選択し、「Install」ボタンをクリックします。

Order Managementをインストール

　インストールが終わったら「Customize app」ボタンをクリックして、アプリケーションを開いてください。

インストールが終了したことを示すダイアログ

　アプリケーションに属するモジュール一覧が表示されます。

　Order Managementモジュールに参照整合性の問題が発生しているので修正します。OrderManagementモジュールを開いてください。

作成されたアプリケーションを開いたところ

　参照整合性の問題があるので、Manage Dependenciesダイアログを開きます。ダイアログ右下の「Refresh all」ボタンをクリックし、続いて「Apply」ボタンをクリック。これで今開いているモジュールの参照は更新されました。

Manage Dependenciesダイアログ

　ダイアログが閉じたら、忘れずにPublishもしておきましょう。

実装シナリオ

　サンプルアプリケーションで管理されている注文データを使い、請求書レポートを作成していきます。

シナリオ実装後の操作の流れ

　この記事で紹介する手順を行った後のアプリケーションでの、レポート表示までの操作手順を確認しておきましょう。

　OrderManagementモジュールをブラウザで開きます。

　トップメニューから「Orders」をクリックしてOrderManagement画面を、続いて一覧上の適当な行のNumber列に表示されるリンクを開きます。

OrderDetail画面を開く

　1件の注文の詳細を示すOrderDetail画面が開きます。この画面右上、「Delete Order」ボタンの隣に、「Report」ボタンを追加します（※）。

※詳しくは解説しませんが、ボタンを追加し、画面を開く処理を実装します。ボタン動作の実装に関する内容はリファレンスを参照の上、実装してください。

「Report」ボタンを追加

　クリックしたらActiveReportsJSのビューワーを配置したOrderDetailReport画面が開きます。

OrderDetailReport画面例

作成するもの

　上記のシナリオを実装するために、以下の要素を作成します。

1. p2で作成：ActiveReportsJSをOutSystemsアプリケーションから利用するためのUI部品（ActiveReportsJS_Patモジュール）
2. p3で作成：ActiveReportsJSのレポート定義
3. p4で作成：OrderDetailReport画面（OrderManagementモジュール）

　OutSystemsのアーキテクチャ設計図であるArchitecture Canvasを使って表すと以下のようになります。

Architecture Canvas