CookBook

IM-BloomMaker と IM-LogicDesigner を組み合わせて、請求書を Excel でダウンロードする方法

投稿日:2021-03-05 更新日:

この CookBook では intra-mart Accel Platform 2021 Spring から追加された、「IM-LogicDesigner フロールーティングにリクエストを送信する」アクションを使用し、IM-BloomMaker で作成した画面の入力内容を IM-LogicDesigner 経由で Excel に出力し、ダウンロードする機能を作成する方法を紹介します。

例として、請求書を作成する画面を作成していきます。

完成イメージ

IM-BloomMaker の画面です。
この画面では、請求書の内容を入力します。

IM-LogicDesigner の Excel 出力定義です。
このユーザ定義では、IM-BloomMaker の画面から受け取ったデータを、Excel に転記します。


IM-LogicDesigner 経由でダウンロードした Excel ファイルです。
画面の入力内容が、Excel に反映された状態でダウンロードされます。

完成サンプル

この CookBook のサンプルを動作させるためには、以下のモジュールを導入します。

  • ベースモジュール → 標準機能 → 基盤機能 → IM-LogicDesigner → IM-LogicDesigner
  • ベースモジュール → 標準機能 → 基盤機能 → IM-LogicDesigner → IM-LogicDesigner Excel連携
  • アプリケーション → IM-BloomMaker for Accel Platform → IM-BloomMaker for Accel Platform
  • アプリケーション → IM-BloomMaker for Accel Platform → IM-BloomMaker for Accel Platform 設計書出力

この CookBook では、以下の3つの資材を使用します。

IM-BloomMaker インポートファイルには、以下の定義が含まれています。

コンテンツ定義 im_cookbook_181265
ルーティング定義 im_cookbook_181265

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

IM-LogicDesigner インポートファイルには、以下の定義が含まれています。

フロー定義 im_cookbook_181265_invoice_create
im_cookbook_181265_invoice_download
ルーティング定義 im_cookbook/181265_invoice_create
im_cookbook/181265_invoice_download
ユーザ定義 im_cookbook_181265_invoice

IM-LogicDesigner のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

請求書テンプレートファイルは、パブリックストレージの直下に配置してください。

ローカル環境で表示させる場合は、以下の URL にアクセスしてください。
http://localhost:8080/imart/im_cookbook/181265
なおベース URL である以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

サンプルの作成手順を以下に示します。

  1. 請求書テンプレートをパブリックストレージに配置する
  2. IM-LogicDesigner で Excel ダウンロードフローを作成する
     2-1. ユーザ定義を作成する
     2-2. フロー定義を作成する
     2-3. ルーティング定義を作成する
  3. IM-BloomMaker で入力・ダウンロード画面を作成する
     3-1. コンテンツ定義を作成する
     3-2. 変数を設定する
     3-3. アクションを設定する
     3-4. 入力フォームを作成する
     3-5. ルーティング定義を作成する

1. 請求書テンプレートをパブリックストレージに配置する

請求書のテンプレートファイルを Excel で作成します。
この CookBook では、以下のようなテンプレートを用意しています。

2. IM-LogicDesigner で Excel ダウンロードフローを作成する

2-1. ユーザ定義を作成する

IM-BloomMaker からデータを受け取り、Excel のテンプレートにファイルを出力するユーザ定義を作成します。
「サイトマップ」→「LogicDesigner」→「ユーザ定義」→「Excel出力定義新規作成」をクリックして、「Excel出力定義編集」画面を開きます。

Excel に値を設定した後、式の再計算を行うため、「Excel出力共通定義」で「関数の再計算」のチェックボックスをオンにしておきます。
次に、請求書のテンプレートに合わせて、「セル出力定義」および「範囲指定出力定義」を指定していきます。

■セル出力定義

シート名 セル 入力パラメータ名 データ型
Invoice A3 customerName string
Invoice A4 customerZipCode string
Invoice A5 customerAddress1 string
Invoice A6 customerAddress2 string
Invoice A7 customerAddress3 string
Invoice D3 invoiceDate date
Invoice D4 invoiceNo string
Invoice D24 shipping number
Invoice D25 tax number
Invoice D26 discount number

■範囲指定出力定義

出力範囲

シート名 Invoice
対象列 A - D
開始行 16
終了条件 指定行数を書き込んだら
書き込み行数 8

入力パラメータ名とデータ型

親オブジェクト details
A no
B description
C quantity
D price

最後に、「入力値にパラメータ名を反映する」リンクを忘れずにクリックして、入力値ツリーを構成します。
「新規作成」ボタンをクリックして、ユーザ定義を作成します。

2-2. フロー定義を作成する

◇◆ A. Excel を作成するロジックフロー ◆◇

前項で作成したユーザ定義を使用して Excel を作成するロジックフロー定義を作成します。
「サイトマップ」→「LogicDesigner」→「フロー定義一覧」をクリックして、「ロジックフロー定義一覧」画面を開きます。
任意のカテゴリを作成後、「ロジックフロー新規作成」をクリックして、「ロジックフロー定義編集」画面を開きます。

次のようなフローを作成します。

開始 → 前項で作成したユーザ定義 → 終了

入力値を以下のように設定します。
ユーザ定義とまったく同じ構造にしても実現できますが、ここでは以下のように 型でカテゴリを分けて定義します。
IM-BloomMaker には変数のマッピングの機能がないため、カスタムスクリプトを使用しなければなりません。
しかし、IM-LogicDesigner は GUI 上で細かいマッピング設定が可能なため、IM-LogicDesigner の入力値の構造は、予めデータ構造を整理しておくと、後から仕様変更や機能追加が簡単になります。

出力値を以下のように設定します。
作成された Excel ファイルのパスを返却します。

定数値を以下のように設定します。

定数ID 定数値
OUTPUT_PATH sample_invoice.xlsx
TEMPLATE_PATH im_cookbook_181265_invoice.xlsx

マッピングを以下のように設定します。

■im_cookbook_181265_invoice1

入力.description.name im_cookbook_181265_invoice1.customerName
入力.description.zipCode im_cookbook_181265_invoice1.customerZipCode
入力.description.address1 im_cookbook_181265_invoice1.customerAddress1
入力.description.address2 im_cookbook_181265_invoice1.customerAddress2
入力.description.address3 im_cookbook_181265_invoice1.customerAddress3
入力.invoice.date im_cookbook_181265_invoice1.invoiceDate
入力.invoice.no im_cookbook_181265_invoice1.invoiceNo
入力.details.no im_cookbook_181265_invoice1.details
入力.total.shipping im_cookbook_181265_invoice1.shipping
入力.total.tax im_cookbook_181265_invoice1.tax
入力.total.discount im_cookbook_181265_invoice1.discount
定数.OUTPUT_PATH im_cookbook_181265_invoice1.outputFile
定数.TEMPLATE_PATH im_cookbook_181265_invoice1.inputFile

■終了

定数.OUTPUT_PATH 出力.path

ロジックフロー定義を保存します。

ロジックフローID im_cookbook_181265_invoice_create

◇◆ B. Excel をダウンロードするロジックフロー ◆◇

さらに、次のようなフローを作成します。

開始 → 終了

入力値を以下のように設定します。

出力値を以下のように設定します。

マッピングを以下のように設定します。

■終了

入力.path 出力.body

ロジックフロー定義を保存します。

ロジックフローID im_cookbook_181265_invoice_download
2-3. ルーティング定義を作成する

前項で作成したロジックフロー定義を IM-BloomMaker から呼び出せるようにするため、ルーティング定義を作成します。
「サイトマップ」→「LogicDesigner」→「ルーティング定義一覧」をクリックして、「ロジックフロールーティング定義一覧」画面を開きます。
「新規作成」をクリックして、以下の2つのルーティング定義を作成します。

■Excel を作成するロジックフロー

フロー定義ID im_cookbook_181265_invoice_create
ルーティング /imart/logic/api/im_cookbook/181265_invoice_create
メソッド POST
認証方法 IMAuthentication
認可URI im-logic-rest://im_cookbook/181265_invoice_create
セキュアトークンを利用する オフ
レスポンス種別 JSONに変換して返却

■Excel をダウンロードするロジックフロー

フロー定義ID im_cookbook_181265_invoice_download
ルーティング /imart/logic/api/im_cookbook/181265_invoice_download
メソッド GET
認証方法 IMAuthentication
認可URI im-logic-rest://im_cookbook/181265_invoice_download
セキュアトークンを利用する オフ
レスポンス種別 ファイルダウンロード

それぞれ、認可を設定します。
今回は動作テストのため、「テナント管理者」に認可を設定します。

3. IM-BloomMaker で入力・ダウンロード画面を作成する

3-1. コンテンツ定義を作成する

請求書に出力する部分に応じた入力フォームを、IM-BloomMaker で作成します。
「サイトマップ」→「BloomMaker」→「コンテンツ一覧」をクリックして、「IM-BloomMaker コンテンツ一覧」画面を開きます。
「コンテンツ新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID (任意のカテゴリ)
コンテンツID im_cookbook_181265
コンテンツ種別 imui
コンテンツ名 im_cookbook_181265

コンテンツ定義を登録後、「デザイン編集」ボタンをクリックしてデザイナ画面を開きます。

3-2. 変数を設定する

「変数」タブをクリックして、以下の変数を追加します。
全章で作成した IM-LogicDesigner のロジックフロー定義(ID:im_cookbook_181265_invoice_create)の入力値と同じ構造とします。

計算途中の結果や、IM-LogicDesigner からの出力値を格納するための追加変数を追加します。

プルダウンから「定数」を選択して、以下の定数を追加します。

3-3. アクションを設定する

「アクション」タブをクリックして、以下のアクションを追加します。

■アクション名: reset
画面初期表示のためのアクションです。

1.カスタムスクリプトを実行する

■アクション名: calc subTotal
小計を計算するためのアクションです。

1.カスタムスクリプトを実行する

■アクション名: issue invoice
請求書をダウンロードするためのアクションです。

1.IM-LogicDesigner フロールーティング[ im_cookbook/181265_invoice_create ]にリクエストを送信する

リクエストパラメータ (空)
リクエストヘッダ (空)
リクエストデータ $variable
ステータスコード (空)
レスポンスデータ $variable.output
セキュアトークンを送信する オフ
エポックミリ秒を送信しない オフ

2.URL[ $constant.DOWNLOAD_URL ]に遷移する

リクエストパラメータ: $variable.output
3-4. 入力フォームを作成する

以下の部品を使用して、入力フォームを作成します。
変数と入力要素の関係について記載します。 ヘッダの文字列等は、任意で設定してください。

■タイトル
・見出しレベル1(imui)

■送付先住所入力
・フォームコンテナ
・テキスト入力(imui)
 Name の value プロパティ: $variable.destination.name
 Zip code の value プロパティ: $variable.destination.zipCode
 Address の value プロパティ: $variable.destination.address1, $variable.destination.address2, $variable.destination.address3

■請求書番号入力
・フォームコンテナ
・日付入力(imui)
 Date の value プロパティ: $variable.invoice.date
・テキスト入力(imui)
 Bill note no. の value プロパティ: $variable.invoice.no

■詳細・合計入力
・フォームコンテナ
・縦方向のテーブル(繰り返し)(imui)
 list プロパティ: $variable.details
・テキスト入力(imui)
 No. の value プロパティ: $variable.details[$index].no
 Description の value プロパティ: $variable.details[$index].description
・数値入力(imui)
 Quantity の value プロパティ: $variable.details[$index].quantity
 Price の value プロパティ: $variable.details[$index].price
 Amount の value プロパティ: =$variable.details[$index].quantity*$variable.details[$index].price
 Shipping の value プロパティ: $variable.total.shipping
 Tax の value プロパティ: $variable.total.tax
 Discount の value プロパティ: $variable.total.discount
 Total の value プロパティ: =($variable.total.subTotal+$variable.total.shipping)*($variable.total.tax+100)/100-$variable.total.discount
・ラベル
 textContent プロパティ: $constant.PRICE_UNIT

■送信ボタン
・オペレーションパーツ

コンテナページに配置したエレメントとアクションを紐づけるため、それぞれのイベントを設定します。

設定対象 イベント アクション
コンテナ ページ読み込み時 reset
詳細・合計入力 → Quantity の数値入力 入力値変更時 calc subTotal
詳細・合計入力 → Quantity の数値入力 入力値変更中 calc subTotal
詳細・合計入力 → Price の数値入力 入力値変更時 calc subTotal
詳細・合計入力 → Price の数値入力 入力値変更中 calc subTotal
送信ボタン → ボタン クリック時 issue invoice

デザイナの「上書き保存」アイコンをクリックして、保存します。

3-5. ルーティング定義を作成する

前項で作成した IM-BloomMaker の画面を呼び出せるようにするため、ルーティング定義を作成します。
「サイトマップ」→「BloomMaker」→「ルーティング定義一覧」をクリックして、「IM-BloomMaker ルーティング定義一覧」画面を開きます。
「ルーティング新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID (任意のカテゴリ)
ルーティングID im_cookbook_181265
コンテンツ im_cookbook_181265
コンテンツバージョン 最新バージョンを利用する
メソッド GET
URL /imart/im_cookbook/181265
ルーティング名 im_cookbook_181265

登録後、認可を設定します。
今回は動作テストのため、「テナント管理者」に認可を設定します。

プレビュー

以下のURLにアクセスして、請求書入力画面を表示してください。
http://localhost:8080/imart/im_cookbook/181265

入力フォームに内容を入力して、小計・合計が正しく計算されることを確認してください。


「Issue」ボタンをクリックして、請求書がダウンロードされることを確認してください。

-CookBook
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

IM-BloomMaker 画面構成タブでテーブルの行または列を入れ替える方法

この CookBook では、 Accel Platform 2020 Winter から利用可能になった、画面構成タブでテーブルエレメント配下のエレメントを並び替えられる方法を紹介します。 Acce …

no image

OAuth2.0 の アクセストークンを Box から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Box から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストークンを …

no image

Payara 管理画面で行った設定を CUI で実施する方法

この CookBook では、Payara の Asadmin Recorder 機能について紹介しています。 Asadmin Recorder 機能についての詳細を知りたい方は Asadmin Re …

no image

外部連携の後処理で任意のエラーメッセージを表示する

このCookbookでは、外部連携の後処理で任意のエラーメッセージを表示する方法を紹介します。 この方法を活用することにより、外部連携の後処理ででエラーが発生した場合、利用者に内容を通知することができ …

no image

テナント環境セットアップ時にテーブルが作成されるよう設定する

e Builderを利用して作成したアプリケーションにおいて、テナント環境セットアップ時に自動でテーブルが作成されるように設定する手順を紹介します。 今回は例として、CookBook:フォームに入力し …