CookBook

IMBox に投稿種別を追加する方法(iframe)

投稿日:

この CookBook では、IMBox に投稿種別を追加する方法について紹介しています。
以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。
IMBox プログラミングガイド - メッセージ種別追加プログラム

この CookBook では、入力された URL を iframe で表示する投稿種別を追加します。

完成イメージ


1. 投稿種別に「メッセージ(iframe)」を選択します。
2. メッセージを入力します。
3. 投稿します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。

e builder プロジェクト : im_cookbook_152112.zip
imm ファイル : im_cookbook_152112-1.0.0.imm

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

レシピ

  1. imbox-message-config を作成します。
  2. 投稿処理を作成します。
  3. タイムライン表示画面を作成します。

1. imbox-message-config を作成します。

src/main/conf/imbox-message-config/imbox-message-config_im_cookbook_152112.xml

行数 説明
12 メッセージ種別名称を設定します。
13 投稿欄表示用のファイルパスを設定します。
14 タイムライン表示用のファイルパスを設定します。

2. 投稿処理を作成します。

src/main/jssp/src/im_cookbook_152112/message_type/views/type_iframe.js

src/main/jssp/src/im_cookbook_152112/message_type/views/type_iframe.html

行数 説明
19 iframe の URL を入力用コントロールです。
22 本文入力用のコントロールです。
37-38 URL と本文を取得し、アトリビュートとして設定します。

3. タイムライン表示画面を作成します。

src/im_cookbook_152112/message_type/views/iframe_timeline.js

行数 説明
8 送信されたメッセージを取得します。
11 送信された URL を取得します。
17-19 iframe 要素の ID, iframe を最大化して表示するリンク要素の ID, iframe を最大化して表示するダイアログ要素の ID を生成します。
src/im_cookbook_152112/message_type/views/iframe_timeline.html

行数 説明
14 iframe を表示します。
15 最大化リンクを表示します。クリックすると、iframe を画面の最大サイズのダイアログ内に表示します。
16 最大化リンククリック時に表示するダイアログです。
21 iframe の読み込み完了時に、最大化リンクを表示する処理です。
24 最大化リンククリック時に、ダイアログを表示する処理です。

まとめ

この CookBook では、iframe を表示できるメッセージ種別を追加する方法を紹介しました。
是非ご活用ください。

-CookBook

執筆者:


comment

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

関連記事

IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflow完了案件の確認対象者を削除する方法について紹介しています。 完了案件でも、確認対象者が確認することはできます …

スプレッドシートのバインディングデータを別途テーブルに出力する方法

スプレッドシートのJsonデータとバインディングデータは、Formaヘッダーテーブルにバイナリカラムで格納されます。 Formaヘッダーテーブルに格納されたスプレッドシートデータは、登録データ情報管理 …

no image

完了したワークフロー案件の登録データをメンテナンスする方法

このCookBookでは、IM-BISとIM-FormaDesignerで作成したワークフロー案件の登録データを編集する方法を紹介します。 一部制限はありますが、IM-FormaDesignerのアプ …

no image

FormaDesignerで作成したフォーム内でカーソル遷移を制御する方法

このCookbookでは、FormaDesignerで作成したフォーム内でカーソル遷移を制御する方法を紹介します。 Tabキーを使ったカーソル遷移を考慮し、ユーザビリティが高いフォームを作成しましょう …

AdobeSign連携を利用する

このCookBookでは、IM-Signを利用したサンプルを紹介します。 サンプルでは、Workflow/BISの案件に紐づいたAdobe Signの契約書を作成して、署名を依頼します。 署名が行われ …

RSSRSSRSSRSS