CookBook

IM-BloomMaker 実行画面のURLの一部を入力値に割り当てる方法

投稿日:

IM-BloomMaker のコンテンツ定義をルーティング定義に紐づけることで、URLを指定してコンテンツ定義の実行画面を表示することができます。
コンテンツ定義には入力値が指定できますが、前処理プログラムだけでなく、URLの一部を入力値として割り当てることが可能なため、同じコンテンツ定義・ルーティング定義を使用しつつ、初期表示内容を変更することができます。

この CookBook では、前処理プログラムを使用せず入力値を変更する方法として、URLのクエリを用いた方法と PathVariable を用いた2つの方法をご紹介します。

  • URLの末尾にクエリを追加して入力値とする
    • URL例: http://localhost:8080/imart/im_cookbook/203195_01?sample=foo
    • 入力値: foo
  • URLの一部を入力値とする
    • URL例: http://localhost:8080/imart/im_cookbook/203195_02/foo
    • 入力値: foo

完成イメージ

http://localhost:8080/imart/im_cookbook/203195_01?sample=foo または http://localhost:8080/imart/im_cookbook/203195_02/foo にアクセスすると、URL の一部分(今回の例では foo)を変数の初期値とし、画面上に表示します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2022 Spring 版以降でインポートできます。

IM-BloomMaker のインポート画面からインポートしてください。
なお、インポート後には IM-BloomMaker ルーティング定義の認可設定が必要ですのでご注意ください。

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/im_cookbook/203195_01?sample=<入力値>
http://localhost:8080/imart/im_cookbook/203195_02/
<入力値>

レシピ

1. URLの末尾にクエリを追加して入力値とする

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

最初に、URLに指定された入力値を表示するためのコンテンツ定義を作成します。

コンテンツIDim_cookbook_203195
コンテンツ種別Bulma
コンテンツ名im_cookbook_203195

デザイナを開き、以下のエレメントを配置します。

  • 「フォーム部品(Bulma)」-「フィールド」
  • 「フォーム部品(Bulma)」-「テキスト表示」

「変数」タブを開き、プルダウンから「入力」を選択し、以下の入力を作成します。
今回は、クエリのうち sample キーに指定された値を受け取るため、「キー名」を同一の名前に設定します。

キー名sample
値の型文字列
代入値データなし

「テキスト表示」エレメントの「value」プロパティに、作成した入力($input.sample)を紐づけます。

コンテンツ定義を保存します。

1-2. ルーティング定義を作成する

手順1-1で作成したコンテンツ定義に紐づくルーティング定義を作成し、URLからアクセスできるようにします。
以下の設定で、ルーティング定義を作成します。

ルーティングIDim_cookbook_203195_01
コンテンツim_cookbook_203195
URL/imart/ im_cookbook/203195_01
ルーティング名im_cookbook_203195_01

次に認可を設定します。
「認可設定」アイコンをクリックし、「テナント管理者」にアクセスを許可します。

1-3. 実行画面を表示して、クエリを指定する

実際に以下のURLにアクセスしてみます。
http://localhost:8080/imart/im_cookbook/203195_01?sample=foo

画面が表示され、「テキスト表示」エレメントに「foo」が表示できることを確認します。

URLを変更して、sample に指定する値を変更してみましょう。
http://localhost:8080/imart/im_cookbook/203195_01?sample=bar

画面が表示され、「テキスト表示」エレメントに「bar」が表示できることを確認します。

2. URLの一部を入力値とする

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

手順1-1のコンテンツ定義をそのまま使用します。
作成していない場合は、手順1-1を参照のうえ、作成してください。

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

手順1-1で作成したコンテンツ定義に紐づくルーティング定義を作成し、URLからアクセスできるようにします。
URLの一部を入力値にする場合は、入力と紐づけるキー名を {<キー名>} の形式で含めます。
以下の設定で、ルーティング定義を作成します。

ルーティングIDim_cookbook_203195_02
コンテンツim_cookbook_203195
URL/imart/ im_cookbook/203195_02/{sample}
ルーティング名im_cookbook_203195_02

次に認可を設定します。
「認可設定」アイコンをクリックし、「テナント管理者」にアクセスを許可します。

2-3. 実行画面を表示して、クエリを指定する

実際に以下のURLにアクセスしてみます。
http://localhost:8080/imart/im_cookbook/203195_02/foo

画面が表示され、「テキスト表示」エレメントに「foo」が表示できることを確認します。

URLを変更して、sample に指定する値を変更してみましょう。
http://localhost:8080/imart/im_cookbook/203195_02/bar

画面が表示され、「テキスト表示」エレメントに「bar」が表示できることを確認します。

3. 入力値を初期値とし、途中で変更可能とする

3-1. コンテンツ定義を変更する

「入力」として定義した値は、画面上から変更できません。
入力値を初期値とするのみで、画面上から変更可能とする場合は、「変数」を追加して「代入値」を入力値に設定します。

手順1-1のコンテンツ定義を変更します。
デザイナの「変数」タブを開き、プルダウンから「変数」を選択し、以下の入力を作成します。
今回は、「入力」の sample を「変数」の value の初期値として紐づけるため、「代入値」を $input.sample に指定します。

キー名value
値の型文字列
代入値入力・変数・定数・環境から:
$input.sample

「テキスト表示」エレメントの下部に「テキスト入力」エレメントを追加し、「value」プロパティに作成した変数($variable.value)を紐づけます。

コンテンツ定義を保存します。

3-2. 実行画面を表示する

実際に以下のURLにアクセスしてみます。
http://localhost:8080/imart/im_cookbook/203195_02/foo

画面が表示され、「テキスト表示」と「テキスト入力」エレメントの両方に「foo」が表示できることを確認します。

「テキスト入力」エレメント側の入力内容を任意の値に変更します。
「テキスト入力」エレメントの表示内容を変更しても、「テキスト表示」エレメント側には何も影響しないことを確認します。

参考

-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-Workflowの色々なコンテンツ画面へ遷移するURL

このCookbookでは、IM-Workflowの色々なコンテンツ画面へ遷移するURLをご紹介いたします。 独自で作成した画面やViewCreator、BloomMakerなど、IM-Workflow …

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …

no image

Docker Compose で Accel Platform 環境を構築する。

この CookBook では、Docker Compose を利用して Accel Platform 環境を構築する手順について紹介しています。 この CookBook では、以下の記事で作成した D …

no image

Docker Swarm を利用して Resin のクラスタリングを構築する。

この CookBook では、Docker Swarm を利用して Resin のクラスタリングを構築する手順について紹介しています。 Docker Swarm を利用することで、複数マシンにまたがっ …

no image

CookBookからダウンロードしてきたプロジェクトのインポート方法

このCookBookでは、他のCookBookからダウンロードしてきたe Builderのモジュール・プロジェクトのインポートについて紹介しています。 プロジェクトをインポートし、プロジェクトの設定を …