[OutSystems]Reactive Web AppでもUltimate PDFを使えるコンポーネント

:::note info
2021/8/29 
Ultimate PDFが更新され、アプリケーションの種類がTraditional Web　→　Reactive Web Appに更新されました。この記事で書いているコンポーネントの内容も取り込まれているようです。よって、今後はReactive Web Appのコンポーネントに変わったUltimate PDFを使ったほうがいいですね。
:::

ScreenをPDFとして出力するForgeコンポーネントUltimate PDFを、Reactive Web Appで使うためのコンポーネントUltimate PDF Reactive Blocksの利用手順を確認してみます。

Ultimate PDFは以前に、以下の記事で手順を紹介しています。
[Screenを帳票作成に使用する方法（UltimatePDF）](https://qiita.com/jyunji_watanabe/items/a44818397f0d8ff86a1c)

# 確認環境
Personal Environment(Version 11.13.0 (Build 31107))
Service Studio (Version 11.11.14)
Ultimate PDF Reactive Blocks(Version 1.0.0)

# チュートリアル
## モジュールと参照
Reactive Web Appのモジュールを作って、Ultimate PDF Reactive Blocksの要素への参照を追加しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/ffdcc1ba-47fd-b48c-b2ff-8b1a450d56ff.png)

## 画面作成
### 作成手順
このコンポーネントにはScreen Templateがないので、他のテンプレートで画面を作ります。
Emptyのテンプレートが使いやすいですね。

1. UI Flowを選択し、右クリック
2. Add Web Screenを選択
3. 「Empty」テンプレートを選択し「CREATE SCREEN」ボタンをクリックして画面作成

### Layoutを変更
画面を作ったら、Layoutを部品提供のPrintLayout_Reactiveに変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/d2d22c23-3bd6-1dc1-8cbc-0c07864cdc8e.png)

1. 画面右上のWidget Treeをクリック
1. WidgetTree表示に切り替わったら、Treeの画面名の直下のBlockを選択。Source Blockプロパティを部品提供のPrintLayout_Reactiveに変更

## 帳票用画面のコンテンツを作成する
Ultimate PDFの記事と同じ構成の画面を作って行きます。
### ヘッダにテキストを表示
各ページのヘッダ部分にテキストを表示するには、そのコンテンツをHeader Placeholderに配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/1818c04c-d5b9-8e97-b03d-072e93587efe.png)

Screenは普通の画面と同じように作成できます。
上の例では、Header PlaceholderにContainer、その要素としてExpression Widgetをを配置。
Valueの値はログインユーザーのIdを設定。

### 本文は改ページを挟んで２ページ出力する
任意の場所で改ページを行うには、改ページしたい場所にPagination\PageBreak_Reactive Blockを配置します。

本文は、MainContent Placeholderに配置です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/d9e0259d-ce0d-b9dd-3657-50d81ad6810f.png)

上の配置では、１ページ目の左上に数字の1、2ページめの左上に数字の2が出力されます。

### フッタには、「現在のページ / 総ページ数」
現在のページを表すには、PageNumbers\PageNumber_Reactive Block、総ページ数はPageNumbers\PageCount_Reactiveを表示したい場所に配置してください。

ページ下部に固定で表示したい内容はFooter Placeholderです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/28563f1d-373e-d0aa-85fe-b580989f8cff.png)

## PDF出力処理を実装
Ultimate PDF本体と違い、ScreenToPDF がないため、PDFを出力するには明示的に処理を呼ぶ必要があります。

### Server Action
UltimatePDF (Traditional Webの方）が提供するPrintToPDF Actionに作成した画面のURLを渡して、PDFのバイナリを返すActionを作ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/20f97b75-9902-aee7-5bcd-1735d243abec.png)

Input Parameter: Text型。画面のURLを渡す
Output Parameter: Binary Data型。作成したPDFのバイナリデータを返す

PrintToPDFのパラメータには受け取ったURLを渡します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/d7cafc77-7f91-87b5-6d17-e93f2dea7eee.png)

### PDF出力ボタンを配置
出力したPDFには表示せず、画面上にだけは表示するボタンを作るためには、部品提供のVisibility/HideOnPrint_Reactiveを使い、そのPlaceholder内にWidgetを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/6b036e4f-a388-fb78-8904-e9491a5c5cee.png)

### イベントハンドラ
PDF出力ボタンとして配置したBUttonをダブルクリックして、イベントハンドラを以下のように実装してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/4b1878a3-12de-c169-ff30-e0e181c745f6.png)

GetPDFは上で実装したServer Actiopn。GetBookmarkableURLで現在のURLを渡しています。
Ultimate PDFのPrintToPDFによってこのURLをサーバー内のブラウザで開いて、その印刷機能でPDFにする構成。

## 動作確認
以上の開発が終わったら画面をブラウザで開き、配置したButtonをクリック。
すると、出力されたPDFファイルをダウンロードするダイアログが表示されるはず。

1ページめのスクリーンショット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/332987/cd1bee3a-36ec-e850-e79a-8fd28a828a54.png)