CookBook

IM-BloomMaker のアクション「URL ○ にリクエストを送信する」の使い方

投稿日:2019-07-31 更新日:


このCookBookでは、「URL ○ にリクエストを送信する」アクションを使ってサンプル画面を作成する方法を紹介します。

  • 2019 Summer では「URL ○ にアクセスする」でしたが、 2019 Winter からは「URL ○ にリクエストを送信する」にアクション名が変わりました。

完成サンプル

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

IM-BloomMakerのインポート機能を利用してインポートしてください。

IM-BloomMaker for Accel Platform ユーザ操作ガイド - 定義ファイルをインポートする

IM-LogicDesignerのインポート機能を利用してインポートしてください。

IM-LogicDesigner ユーザ操作ガイド - インポートを行う

ロジックフロー、フロールーティングをインポートした後には認可設定が必要です。

IM-LogicDesigner ユーザ動作ガイド - フロールーティングの「認可画面」を表示する

レシピ

画面サンプルインポートファイル、IM-LogicDesginer フロー定義インポートファイルをインポートすると、ユーザ検索画面を表示することが出来ます。
このレシピでは、ユーザ検索画面の作り方を紹介します。

  1. コンテンツカテゴリを登録する
  2. コンテンツを登録する
  3. デザイン編集を行う
  4. ルーティングカテゴリを登録する
  5. ルーティング設定を行う

1. コンテンツカテゴリを登録する

  • 「サイトマップ」から、BloomMaker - コンテンツ一覧をクリックします。

  • コンテンツ一覧画面の「カテゴリ新規作成」をクリックします。

  • 以下の値を入力し、「登録」ボタンをクリックします
  • 「カテゴリID」に「im_cookbook」を入力します
  • 「カテゴリ名」に「im_cookbook」を入力します

2. コンテンツを登録する

  • 「サイトマップ」から、BloomMaker - コンテンツ一覧をクリックします。

  • コンテンツツリーの「im_cookbook」を選択した状態でコンテンツ一覧画面の「コンテンツ新規作成」をクリックします。

  • 以下の値を入力し、「登録」ボタンをクリックします。
  • 「コンテンツID」に「im_cookbook_163288」を入力します
  • 「コンテンツ名」に「im_cookbook_163288」を入力します

3. デザイン編集を行う

  • 前項で登録したコンテンツを開き、「デザイン編集」をクリックしデザイナ画面を開きます。

  • 変数定義

画面で利用する変数を定義します。
今回使用する変数は以下の通りです。

変数名 カテゴリ 説明
response 変数 APIからの戻り値を格納する変数です
url 変数 LogicDesginerで定義したREST APIです
user_cd 変数 検索条件に使用するuser_cdです
requestData 入力 リクエストパラメータに利用するデータです
  • 「変数」を選択した状態で「JSON」アイコンをクリックし以下のJSONを貼り付けます。

JSONデータ

* 「入力」を選択した状態で「JSON」アイコンをクリックし以下のJSONを貼り付けます。

JSONデータ

 

アクション作成
  • リクエストパラメータ作成用アクション作成
  • 「カスタムスクリプトを実行する」をドラッグ&ドロップで配置します。
    以下スクリプトを貼り付けます。

 

  • 「URL ○ にリクエストを送信する」をドラッグ&ドロップで配置します。

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

設定箇所 設定値
URL $variable.url
メソッド GET
リクエストパラメータ $input.requestData
レスポンスデータ $variable.response

画面作成
  • タイトル配置
  • 左のパレットからレイアウト(imui) → 見出しレベル1を配置します。
  • エレメント固有プロパティのtextContentプロパティに「API動作確認」と入力します。

  • 検索ボックス、ボタン配置
  • 左のパレットからレイアウト(imui) → オペレーションボックスを配置します。
  • テキストボックスのプロパティを入力します。
  • placeholderプロパティに「user_cdを入力してください。」と入力します。
  • valueプロパティに「Variable value」を選択し、「$variable」の「user_cd」を選択します。

  • ボタンのプロパティを入力します。
  • valueプロパティに「実行」と入力します。
  • イベント - クリック時プロパティに作成したアクションを設定します。

  • 検索結果欄配置
  • 左のパレットからレイアウト(imui) → 見出しレベル2を配置します。
  • エレメント固有プロパティのtextContentプロパティに「取得結果」と入力します。

  • 左のパレットからレイアウト → ボックスを配置します。
  • 左のパレットから繰り返し → テーブル(繰り返し)を配置したボックスの中に配置します。
  • 幅・高さの「横幅」に「80%」と入力します。
  • テーブルのエレメント固有プロパティのlistに「$variable.response.records」と入力します。

  • テーブルのヘッダ行に表示したい項目名を設定します。
  • テーブル(繰り返し)のセル内に「汎用」→「ラベル」をドラッグ&ドロップします。
  • ラベルのエレメント固有プロパティのtextContentプロパティに項目名を設定します。

  • テーブルのデータ行に表示したいデータを設定します。
  • テーブル(繰り返し)のセル内に「汎用」→「ラベル」をドラッグ&ドロップします。
  • ラベルのエレメント固有プロパティのtextContentプロパティにデータを設定します。
  • user_cdを表示したい場合:$variable.response.records[$index].user_cd

  • 動作確認
  • 画面作成が完了したら、プレビューで動作確認を行います。
  • ツールバーの「プレビュー」をクリックします。

  • プレビュー画面上の「実行」ボタンをクリックします。
    テーブルにユーザ情報が表示されることを確認します。
  • テキストボックスにuser_cdを入力して「実行」ボタンをクリックします。
    入力されたuser_cdがテーブルに表示されることを確認します。

4. ルーティングカテゴリを登録する

  • 「サイトマップ」から、BloomMaker - ルーティング定義一覧をクリックします。

  • ルーティング定義画面の「カテゴリ新規作成」をクリックします。

  • 以下の値を入力し、「登録」ボタンをクリックします。
  • 「カテゴリID」に「im_cookbook」を入力します
  • 「カテゴリ名」に「im_cookbook」を入力します

5. ルーティング設定を行う

  • 「サイトマップ」から、BloomMaker - ルーティング定義一覧をクリックします。

  • 前項で作成したルーティングカテゴリを選択した状態でルーティング定義一覧画面の「ルーティング新規作成」をクリックします。

  • 以下の値を入力し、「登録」ボタンをクリックします。
  • 「ルーティングID」に「im_cookbook_163288」を入力します
  • 「コンテンツ」に「im_cookbook_163288」を入力します
  • 「検索」から「im_cookbook_163288」を選択します。
  • 「URL」に「im_cookbook/163288」を入力します。
  • 「ルーティング名」に「im_cookbook_163288」を入力します。

  • 登録完了後、認可設定を行います。
  • 「認可URI」の「歯車」アイコンをクリックします。

  • 認可設定画面上でIM-BloomMakerで作成した画面を実行するための認可を設定します。

認可設定の詳細は以下ドキュメントをご参照ください。
intra-mart Accel Platform テナント管理者操作ガイド - 認可を設定する

  • 画面表示を行います。
    「http://localhost:8080/imart/im_cookbook/163288」にアクセスし、画面が表示されることを確認します。

なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

-CookBook
-

執筆者:


comment

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

関連記事

ワークフローの参照者を動的に設定する

このCookbookでは、IM-Workflow 2018 Springから新たに追加された 処理対象者プラグイン「ロジックフロー(ユーザ)」 の設定方法を紹介いたします。 この機能を利用すると、申請 …

no image

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

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

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

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

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(単一アイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

ワークフローの一覧を使い分けるには(スマートフォン版)

このCookbookでは、以前に公開した「ワークフローの一覧を使い分けるには(改訂版)」に関して、お問い合わせいただいた内容を追加してスマートフォン画面でワークフローの一覧の検索条件を付与する方法をご …