CookBook

FormaのスクリプトからAjax処理を呼び出す

投稿日:2016-04-19 更新日:

このCookBookでは、Formaのスクリプトからサーバサイドロジックを呼び出し、Ajax処理を実現する方法をご紹介します。

  • IM-LogicDesignerを利用し、サーバサイドロジックとその呼び出し口であるREST APIを作成します。

  • FormaのスクリプトからXMLHttpRequestでREST APIを呼び出します。

このCookBookで扱う内容は、IM-FormaDesigner 2015 Winter (8.0.11)以降のバージョンを前提にしています。

完成イメージ

サンプルアプリケーションでは、Ajax処理にて指定したユーザの名称・所属組織を取得して画面に反映しています。


1. ユーザコード・検索基準日への入力を行います。
2. 検索ボタンを押下します。
3. REST APIが呼びだされ、サーバサイドの業務ロジックが実行されます。
4. 取得結果が画面に反映されます。

完成サンプル

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

ローカル環境で表示させる場合は、テナント環境セットアップ後に以下のURLにアクセスしてください。
http://localhost:8080/imart/forma/normal/view/regist_application_view/im_cookbook_110542_forma
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. サーバサイドロジックを作成する
  2. 作成したサーバサイドロジックをREST APIとして登録する
  3. 登録したREST APIを呼び出すスクリプトを作成する

1. サーバサイドロジックを作成する

 

「IM-LogicDesigner」とは?

IM-LogicDesignerは、Web上でビジネスロジックを簡単に作成することができるアプリケーションです。

「タスク」(処理の部品)を並べ、「ロジックフロー」(フロー図)を作成することで、ビジネスロジックを作成できます。

IMBoxへの投稿・ストレージ操作・メール送信・ジョブの実行などあらかじめ製品から提供されているタスクに加えて、「ユーザ定義タスク」を利用することで開発者がSQLやJavaScriptで独自のタスクを定義することも可能です。

このCookBookでは、ユーザ定義タスク(JavaScript)を利用し、サーバサイドロジックを作成します。

ユーザ定義タスク(JavaScript)の作成

ユーザ定義タスク(JavaScript)の作成方法について簡単にご紹介します。
ユーザ定義タスク(JavaScript)の作成方法の詳細は、「IM-LogicDesigner チュートリアルガイド 5.4.4. ユーザ定義 - JavaScript」を参照してください。

  1. 「サイトマップ」- 「LogicDesigner」-「ユーザ定義一覧」からユーザ定義一覧画面を表示し、「JavaScript定義新規作成」のメニューを押下してください。JavaScript定義編集画面が表示されます。

    user_task_js

  2. サーバサイドで動作させたい処理(JavaScript)をスクリプト欄に記述してください。記述したJavaScriptは、スクリプト開発モデルのファンクション・コンテナとして実行されます。

  3. 画面からスクリプトへ渡す情報を入力値欄に、スクリプトから画面へ返却する情報を返却値欄に設定してください。

  4. ユーザ定義ID・ユーザ定義名・カテゴリ・ソート番号のフィールドに適宜入力を行い、ユーザ定義タスク(JavaScript)を登録してください。

ロジックフロー定義の作成

ロジックフロー定義の作成方法について簡単にご紹介します。
ロジックフロー定義の作成方法の詳細は、「IM-LogicDesigner チュートリアルガイド 4.3. ロジックフロー定義編集画面を開く」を参照してください。

  1. 「サイトマップ」- 「LogicDesigner」-「フロー定義一覧」からロジックフロー定義一覧画面を開き、「新規作成」のメニューを押下してください。ロジックフロー定義編集画面が表示されます。

  2. 以下のタスクを配置してください。

    • 開始タスク
    • 「ユーザ定義タスク(JavaScript)の作成」にて作成したユーザ定義タスク
    • 終了タスク
  3. 各タスク同士の線をつなぎます。
    • 開始タスクのoutとユーザ定義タスクのinをつなげます。
    • ユーザ定義タスクのoutと終了タスクのinをつなげます。

    logic_flow

  4. 入出力設定を行います。

    • 入出力設定のリンクを押下し、入出力設定画面を表示してください。
    • ユーザ定義タスクの設定と同様に、画面からロジックフローへ渡す情報を入力値欄に、ロジックフローから画面へ返却する情報を返却値欄に設定してください。

    input_output

  5. マッピング設定を行います。

    • ユーザ定義タスクを押下し、マッピング設定画面を表示してください。ロジックフローの入力値とユーザ定義タスクの入力値をマッピングしてください。
    • 終了タスクを押下し、マッピング設定画面を表示してください。「入力を追加」のリンクを押下し、ユーザ定義タスクの出力値を追加してください。
    • ユーザ定義タスクの出力値とロジックフローの出力値をマッピングしてください。

    mapping

  6. ロジックフローを保存します。

    • 保存のリンクを押下し、保存設定画面を表示してください。フロー定義名を入力し、作成したロジックフロー定義を保存してください。

2. 作成したサーバサイドロジックをREST APIとして登録する

作成したロジックフロー定義を呼び出すREST APIの登録方法について簡単にご紹介します。
REST APIの登録方法の詳細は、「IM-LogicDesigner チュートリアルガイド 4.12. フロールーティングを設定する」を参照してください。

ロジックフロールーティング設定
  1. 「サイトマップ」- 「LogicDesigner」-「ルーティング定義一覧画面」からフロールーティング定義一覧画面を表示し、「新規作成」のメニューを押下してください。ロジックフロールーティング編集画面が表示されます。

    routing

  2. 対象フローの検索ボタンを押下し、ロジックフローの一覧を表示してください。作成したロジックフローを選択してください。

  3. 「ルーティング」: REST APIのURLとして利用したい文字列を入力してください。

  4. 「メソッド」: REST APIを呼び出す際のHTTPメソッドの種類を選択してください。

  5. 「認証方法」:「IMAuthentication」を選択してください。

    • IMAuthenticationは、Cookieに含まれるセッションIDを利用して認証を行います。特別な認証処理を行わず、Cookieに紐づくセッションの認証状態でアクセスしてください。
  6. 「認可URI」: REST APIのURLに対する認可リソースに対して設定したいURIを入力してください。

  7. 作成したREST APIを悪用したCSRF攻撃を防ぐために、「セキュアトークンを利用する」を選択してください。

認可設定

登録したREST APIに対する認可設定を行います。

  1. 「サイトマップ」- 「LogicDesigner」-「ルーティング定義一覧画面」からフロールーティング定義一覧画面を表示し、登録したREST APIの「認可」のメニューを押下してください。認可設定画面が表示されます。

  2. REST APIを利用するFormaアプリと同様の権限設定となるように、認可設定を行います。

3. 登録したREST APIを呼び出すスクリプトを作成する

セキュアトークンの埋め込み

IM-FormaDesigner 2015 Winter (8.0.11)をご利用の場合は、以下の手順の実施が必要です。
REST APIの呼び出しに際してセキュアトークンのチェックが行われるため、Formaアプリの画面にセキュアトークンを埋め込みます。

  1. template.htmlをカスタマイズし、imSecureTokenタグを追加してください。

    template.htmlは、ストレージ上の以下のディレクトリに配置されているFormaアプリの画面のベースとなるHTMLです。

    クライアントタイプ 配置ディレクトリ
    PC版 %Public_Storage%/forma/html_template/template.html
    SP版 %Public_Storage%/forma/html_template/template_sp.html

    template.htmlの詳細については、「Formaでのスクリプト開発生産性向上」を参照してください。

  2. template.htmlはメモリ上にキャッシュされているため、更新後にキャッシュをクリアする必要があります。

    テナント管理者としてログインし、「HTMLテンプレートキャッシュ削除」ジョブを実行してください。

スクリプトの作成

登録したREST APIを呼び出すFormaのスクリプトを作成してください。

  1. REST APIへ渡す入力パラメータ・システムパラメータを取得してください。
    • 処理中はインディケータを表示し、ユーザの操作を防ぎます。
    • 日付型のデータは、ISO 8601の拡張形式の文字列で指定してください。
    • リクエストURLのベースとなる部分を取得してください。
    • template.htmlに埋め込んだimSecureTokenタグからセキュアトークンを取得してください。

  2. XMLHttpRequestを利用してREST APIを実行してください。
    • 1で取得したシステムパラメータ・入力パラメータを指定して、REST APIを実行してください。

-CookBook
-, ,

執筆者:


comment

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

関連記事

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

差戻し先ノードの処理対象者を再展開するフローを作成する方法

このCookBookでは、差戻し先ノードの処理対象者を再展開するフローを作成する方法について紹介しています。 IM-Workflowの仕様として、差戻し先ノードではそのノードを以前に処理した人のみが再 …

no image

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

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

no image

ワークスペースとスケジュール機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のスケジュー …

no image

imuiValidateでhiddenの隠し要素をバリデーションする方法

このCookBookでは、imuiValidateでhiddenの隠し要素をバリデーションする方法について紹介しています。 今回は閉じられたimuiGadgetBar 内の入力項目に対して、クライアン …

まだデータがありません。

RSSRSSRSSRSS