はじめに
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」をクリックしてアプリケーション作成を開始します。
用意されているテンプレートを基にアプリケーション作成を始める「From an app」を選択してアプリケーションを作ります。
Order Managementのテンプレートを選択し、「Install」ボタンをクリックします。
インストールが終わったら「Customize app」ボタンをクリックして、アプリケーションを開いてください。
アプリケーションに属するモジュール一覧が表示されます。
Order Managementモジュールに参照整合性の問題が発生しているので修正します。OrderManagementモジュールを開いてください。
参照整合性の問題があるので、Manage Dependenciesダイアログを開きます。ダイアログ右下の「Refresh all」ボタンをクリックし、続いて「Apply」ボタンをクリック。これで今開いているモジュールの参照は更新されました。
ダイアログが閉じたら、忘れずにPublishもしておきましょう。
実装シナリオ
サンプルアプリケーションで管理されている注文データを使い、請求書レポートを作成していきます。
シナリオ実装後の操作の流れ
この記事で紹介する手順を行った後のアプリケーションでの、レポート表示までの操作手順を確認しておきましょう。
OrderManagementモジュールをブラウザで開きます。
トップメニューから「Orders」をクリックしてOrderManagement画面を、続いて一覧上の適当な行のNumber列に表示されるリンクを開きます。
1件の注文の詳細を示すOrderDetail画面が開きます。この画面右上、「Delete Order」ボタンの隣に、「Report」ボタンを追加します（※）。
※詳しくは解説しませんが、ボタンを追加し、画面を開く処理を実装します。ボタン動作の実装に関する内容はリファレンスを参照の上、実装してください。
クリックしたらActiveReportsJSのビューワーを配置したOrderDetailReport画面が開きます。
作成するもの
上記のシナリオを実装するために、以下の要素を作成します。
- p2で作成：ActiveReportsJSをOutSystemsアプリケーションから利用するためのUI部品（ActiveReportsJS_Patモジュール）
- p3で作成：ActiveReportsJSのレポート定義
- p4で作成：OrderDetailReport画面（OrderManagementモジュール）
OutSystemsのアーキテクチャ設計図であるArchitecture Canvasを使って表すと以下のようになります。
