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

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

ActiveReportsJS部品（Block）を用意

アプリケーションとモジュールを作成する

　OutSystemsにおいて、モジュールがWebやMobileの一塊のソフトウェア、あるいはそれらから参照するライブラリを表します。アプリケーションは、複数のモジュールをまとめて管理するフォルダ的な位置づけです。リリース単位でもあります。

　部品は、すでに作成したサンプルアプリケーションとは別に作ります。帳票出力部品は通常複数のアプリケーションから利用されるため、利用側のサンプルアプリケーションと独立させ、独自のライフサイクルで開発・保守を行いたいからです。

　Service Studioで、サンプルアプリケーションのときと同じく「New Application」をクリックしてダイアログを表示します。今度はテンプレートが無いので、「From scratch」のオプションを選択します。次に、Reactive Web Appを選択してください。SPAのWebアプリケーションを作成するオプションです。

Reactive Web Appを作成

　Name=ActiveReportsJSとしました。

名前と説明を入力してアプリケーション作成を実行

　続いて、モジュールを作成します。

　Name=ActiveReportsJS_Pat、module type=Blankを選択（Blankを選択するのは、UI部品用モジュールに不要な要素を含めないため）。

モジュールを作成

ライセンスを保持するSite Propertyを用意する

　Site Propertyは、運用中に変更される可能性のある設定値を定義する方法です。LicenseKeyという名前でSite Propertyを作成します。Data TypeはText、Is secretはYesにします（ライセンスキーは一般にセキュアに保つべき情報であるため。ActiveReportsJSはクライアント側で動作するため、実行時には知識のあるユーザーには見えてしまいますが）。

Site Propertyにライセンスキー項目を作成

　いったん、Publishします。管理コンソールのService CenterでActiveReportsJS_Patのページを開いてください。Site Propertiesタブ > LicenseKeyリンクの順にクリック。

License KeyのSite Propertyを開く

　ActiveReportsJSのライセンスキーをEffective Valueに設定し、「Apply」ボタンをクリックしてください。これで部品にライセンスキーの設定ができました。

ライセンスキーを設定

ライブラリのCSSを読み込むためのBlock

　ActiveReportsJSのビューワーを表示するには、2つの.cssファイルを読み込む必要があります（ダウンロードしたライブラリ内の、activereportsjs-5\dist\css）。

• ar-js-ui.css
• ar-js-viewer.css

　以下、ar-js-ui.cssを例に作成手順を説明します。ar-js-viewer.cssにも同じ手順を行ってください。

　UI FlowをStylesという名前で追加します。作成したStylesに、CSSを配置するBlockを作成し、NameはArJsUiCssとしました。Descriptionは保守のために設定しておきましょう。

NameとDescriptionを設定

　Block内に以下のように配置します。

Block内の配置

　Condition=FalseのIfはBlockを部品提供するときによく使う方法です。True Branchに、他のBlockやScreenに配置したときに見せたい要素、False Branchに実際に使う要素を配置します（このBlockの場合は空なので何も表示されません）。

　画面上部のCSSアイコンをクリックして開いたダイアログに、ar-js-ui.cssの中身を貼り付けて完成。

CSSを配置

ライブラリのJavaScriptを登録

　以下のライブラリをactivereportsjs-5\dist\scriptsフォルダからScriptsフォルダにImportしてください。

• 必須のスクリプト
  • ar-js-core.js
  • ar-js-viewer.js

• 任意のスクリプト（エクスポート機能で使用）
  • ar-js-pdf.js
  • ar-js-xlsx.js
  • ar-js-html.js
  • ar-js-tabular-data.js

• UIの日本語化用スクリプト
  • locales\ar-js-locales.js

　上記のファイルをすべて登録すると、以下のようになります（見やすいようにフォルダ分けしています）。

JavaScriptスクリプト登録後

ActiveReportsJSビューワーBlock

イメージ画像

　他のアプリケーションに配置した際に、どういった機能がそこに置かれているかを示す画像が表示されるとわかりやすいです。後で使うので、ビューワーのイメージ画像をImagesにImportしておきましょう。

Service Studio内での、Block配置イメージ用画像

Block定義

　CSSの場合と同じように、UI FlowとBlockを用意します。

Blockの定義

①Blockのプロパティ

　Name=ActiveReportsJS_Viewerとしました。他のモジュールから参照されるときは、この名前で見えます。他のモジュールから参照できるように、Public=Yesに。

②スクリプトを参照

　登録しておいたJavaScriptファイルを参照します。ここで指定したJavaScriptファイルは、Blockを実行するときに自動で読み込まれます。

③Input Parameter

　以下2つのInput Parameterを追加します。Input Parameterを追加するには、③の位置でActiveReportsJS_Viewer  Blockを右クリックし、「Add Input Parameter」を選択します。

• ReportDefinitionJSON
  • Name: ReportDefinitionJSON
  • Description: ActiveReportsJSのレポート定義ファイルに含まれるJSON
  • Data Type: Text
  • Is Mandatory=Yes

• DataSourceJSONs
  • Name: DataSourceJSONs
  • Description: 実行時に埋め込み形式のデータソースに連結したいJSONのリスト
  • Data Type: Text List
  • Is Mandatory=No

Input Parameterの設定例（ReportDefinitionJSONの場合）

　前者にActiveReportsJSのレポート定義ファイルのJSON形式、後者にはレポートに渡すデータをJSON化したものをListで渡します（レポート定義によって必要なデータソースの数は可変であるためListにしています）。

　Block内部には以下のようにWidgetを配置します。CSSのBlockと同じ理由でIfを使っています。True BranchにおいたImageにはImagesにImportしておいた画像を指定。False Branchには、CSSを読み込むBlockを2つ、ビューワーを表示するためのContainerを配置します。

Blockの定義

Style設定

　ar-js-ui.css を読み込むBlockを作ったときと同じく、Service Studio上部のcssボタンをクリックし、外観定義用classを作成します。このcssボタンはBlockのUI編集中でないと表示されないため、もし表示されていなかったら、Block名（ActiveReportsJS_Viewer）をダブルクリックしてUI編集状態にしてみてください。

Containerに適用するclass

css

.activereports-viewer-host {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
}

　ContainerのStyle Classesプロパティに設定します。Containerに対応するHTMLタグにこのclass名がつくようになります。

Containerのプロパティ

ライセンスキー取得

　ActiveReportsJSは実行時にライセンスキーを必要とします。そこで、Data ActionでSite Propertyから設定値を取得していきましょう。Data Actionは画面専用のサーバーサイド処理で、サーバー側からデータを取得してくるのに使います。

　 ActiveReportsJS_Viewer Blockを右クリックし、Fetch Data from Other Sourcesを選択して作成します。

Data Action追加

LicenseKeyを取得するData Actionの定義

　FetchプロパティはAt startのままにします（画面を開くと自動でデータ取得を開始する）。

　Output Parameter LicenseKeyには、Site PropertyのLicenseKeyの値をそのまま編集してください。Output Parameterは、作成したData Action（上の例ではDataActionGetLicenseKey）を右クリックし、Add Output Parameterを選択すると作れます。

Data ActionへのOuput Parameter追加

Data Actionの実装

ビューワーのロード

　LicenseKeyの取得を待ちたいのでData ActionのOn After Fetch（Data Action取得終了時に発生するイベント）イベントハンドラーを作成します。

　On After Fetchイベントに対するハンドラーを作成するには、Data Actionを選択するとService Studio右下に表示されるプロパティから、Events > On After Fetchのドロップダウンリストを展開し、New Client Actionを選択します。

On After Fetchイベントハンドラーを追加

On After Fetchの実装

1. Service Studio左側にあるツールボックスから、JSON SerializeとJavaScriptをドラッグ＆ドロップで、作成されたイベントハンドラーのフローに配置します。
2. JSON SerializeでInput ParameterのList DataSourceJSONsをJSON形式の文字列に変換します（ListのままではJavaScriptに渡せないため）。
3. JavaScript要素には、図のようにJavaScriptのInput Parameterを設定します。
   • LicenseKey: Data Actionから取得したActiveReportsJSのライセンスキー
   • ViewerHostId: ビューワーを表示するHTMLタグのId。ContainerのIdは<ContainerのName>.Idで取得できます（このためにNameプロパティは設定必須）
   • ReportDefinitionJSON: Blockの同名のInput Parameter (レポート定義)をそのまま渡す
   • DataJSON: JSON Serializeの結果

　JavaScript要素内の設定は以下の通り。Input Parameterは全て、Data Type=Textです。

JavaScript要素

js

// ライセンスキー
MESCIUS.ActiveReportsJS.Core.setLicenseKey($parameters.LicenseKey);
// ビューワー初期化
const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#" + $parameters.ViewerHostId, { language: "ja" });
// レポート定義をJSONからオブジェクトに変換
const report = JSON.parse($parameters.ReportDefinitionJSON);
// レポートオブジェクトに、データソースを読み込む
const dataArray = JSON.parse($parameters.DataJSON);
for (let i = 0; i < dataArray.length; i++) {
    report.DataSources[i].ConnectionProperties.ConnectString = "jsondata=" + dataArray[i];
}
// ビューワーを開く
viewer.open(report);

　開発が終了したら、Publishしておきましょう。