CookBook

IM-BloomMaker 「外部リソース埋め込みコンテナ」エレメントを使用してパブリックストレージ上のファイルを閲覧する画面を作成する方法

投稿日:

このCookBookでは、2021 Spring でリリースした「外部リソース埋め込みコンテナ」エレメントの利用方法について説明していきます。
「外部リソース埋め込みコンテナ」エレメントはファイルのドラッグ&ドロップでファイルを表示したり、「外部リソース埋め込み」エレメントの data プロパティにパスを指定することで、ファイルを表示することができます。
ここではパブリックストレージ上のファイルを閲覧する画面を作成することができるサンプルを紹介します。

完成イメージ

完成サンプル

IM-BloomMaker インポートファイル: cookbook_195904_im_bloommaker-data.zip
IM-LogicDesigner インポートファイル: cookbook_195904_im_logicdesigner-data.zip

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

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

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

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

フロー定義 im_cookbook_195904_pdf_reader
ルーティング定義 im_cookbook/195904_pdf_reader

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

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

レシピ

  1. IM-LogicDesigner でパブリックストレージの pdf を読み取るサーバロジックを作成
  2. IM-BloomMaker で pdf を表示する画面を作成

1. IM-LogicDesigner でパブリックストレージの pdf を読み取るサーバロジックを作成

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

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

開始 → 終了

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

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

定数ID 定数値
Content-Type application/pdf
PDF im_cookbook_195904.pdf

PDF の定数値はファイルの配置場所によってパスが変わります。
ここではパブリックストレージ直下のファイルを指定しています。

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

上記のように設定することで、Constant の PDF を Output の body にマッピングしたときに文字列を相対パスとみなして PublicStorage に変換されます。
こちらも併せてご確認ください。
IM-LogicDesigner データ型変換 仕様書
https://document.intra-mart.jp/library/iap/public/im_logic/im_logic_rule_of_data_conversion/_downloads/im_logic_rule_of_conversion.xlsx

また、Constant の PDF を Output の body にマッピングして、PublicStorage を取得していますが、「ストレージ操作」-「パブリックストレージ取得」タスクを利用しても同じことはできます。

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

フロー定義ID im_cookbook_195904_pdf_reader
ルーティング /imart/logic/api/im_cookbook/195904_pdf_reader
メソッド GET
認証方法 IMAuthentication
認可URI im-logic-rest://im_cookbook/195904_pdf_reader
セキュアトークンを利用する オフ
レスポンス種別 任意のContent-Typeで返却

それぞれ認可を設定します。
今回は動作テストのため、「テナント管理者」認可を設定します。
API パス指定を知ってしまうと意図しないユーザに pdf が見られる可能性があるので、権限周りには注意してください。

最後にパブリックストレージに表示したい pdf ファイル(ここでは im_cookbook_195904.pdf)をパブリックストレージの直下に配置してください。
以上で、サーバロジックの作成は完了です。

2. IM-BloomMaker で pdf を表示する画面を作成

「サイトマップ」→「BloomMaker」→「コンテンツ一覧」をクリックして、「IM-BloomMaker コンテンツ一覧」画面を開きます。
「コンテンツ新規作成」をクリックして、以下の情報を入力し「登録」ボタンをクリックします。

カテゴリID im_cookbook
コンテンツID im_cookbook_195904
コンテンツ種別 Bulma
コンテンツ名 im_cookbook_195904

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

パレットから「外部リソース埋め込みコンテナ」エレメントを配置します。

「外部リソース埋め込み」エレメントを選択し、data プロパティに /imart/logic/api/im_cookbook/195904_pdf_reader を設定します。

以上で、デザイン編集は完了です。
プレビューを確認してみましょう。

pdf が表示されて問題なければ、デザイナの「上書き保存」アイコンをクリックして保存します。

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

カテゴリID im_cookbook
ルーティングID im_cookbook_195904
コンテンツ im_cookbook_195904
コンテンツバージョン 最新バージョンを利用する
メソッド GET
URL /imart/im_cookbook/bloommaker/195904
ルーティング名 im_cookbook_195904

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

最後に、以下の URL にアクセスして画面を表示してください。
http://localhost:8080/imart/im_cookbook/bloommaker/195904

以上で、完了です。
完成サンプルでは、見た目の調整などを行っていますが、当該 CookBook の本旨とはずれるため、割愛します。

-CookBook
-

執筆者:


comment

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

関連記事

no image

ワークスペースとファイルライブラリ機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のファイルラ …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

no image

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

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

BloomMakerでワークフローの添付ファイルを直接編集する画面を作成する

このCookBookでは、BloomMakerで、ワークフローの添付ファイルを直接追加や削除する画面を作成してみました。 本稿で紹介のサンプルのように、BloomMakerを利用することで、ちょっとし …

no image

祝日や会社の予定を設定したカレンダーを作成する

このCookbookでは、祝日や独自の予定を設定したカレンダーを活用する方法について紹介します。テナント管理者はカレンダーの作成、メンテナンスを行えます。また、テナントのデフォルトカレンダーを設定でき …