CookBook

IM-BloomMaker 画面操作後に入力規則のチェックが行われるフォームの作成

投稿日:

変数の入力規則のチェックは画面表示後すぐに行われ、入力規則に反している場合はエラーが表示されます。
このCookBookでは intra-mart Accel Platform 2020 Summer から利用可能になった入力規則エラーを表示・非表示にするアクションを組み合わせ、画面操作後に入力規則をチェックするフォームを作成していきます。

完成イメージ

このCookBookで作成するサンプル画面です。

画面を開いた時点では入力規則エラーを表示させません。

「Confirm」ボタンをクリックしたタイミングで入力規則に反している項目のエラーを表示させます。

入力規則に反している項目がない場合、入力内容の確認モーダルが開きます。

完成サンプル

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

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

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

フォームの作成

コンテンツ種別「Bulma」のコンテンツを作成し、「デザイン編集」ボタンをクリックしてください。

変数の定義

ここでは変数・定数の定義、各入力項目に指定する変数の入力規則の設定を行います。
以下の変数・定数を作成してきます。

変数 説明
name
emailAddress
phoneNumber
入力項目のエレメントに設定します。
入力規則を設定し、それに反する場合はエラーを表示させます。
validName
validEmailAddress
validPhoneNumber
ヘルプの表示・非表示の判定に使用します。
定数 説明
TRUE
FALSE
ヘルプの表示・非表示を判定するステータスの値に使用します。
VALID_MESSAGE_NAME
VALID_MESSAGE_EMAIL_ADDRESS
VALID_MESSAGE_PHONE_NUMBER
入力規則エラーが発生した際に表示するヘルプの文言です。
  1. 「変数」タブをクリックしてください。

  2. プルダウンの「変数」が選択されていることを確認し、「JSON」アイコンをクリックしてください。

  3. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

  4. 変数「name」の編集アイコンをクリックし、以下のように設定してください。

    • 入力規則:必須にチェックを入れる

  5. 変数「emailAddress」の編集アイコンをクリックし、以下のように設定してください。

    • 入力規則:必須にチェックを入れる
      • フォーマット指定:Eメールアドレス形式

  6. 変数「phoneNumber」の編集アイコンをクリックし、以下のように設定してください。

    • 入力規則:必須にチェックを入れる
      • 最小の長さ:10
      • 最大の長さ:11
      • フォーマット指定:数値形式

  7. プルダウンの「定数」を選択し、「JSON」アイコンをクリックしてください。

  8. 「JSONエディタ」に以下のJSONを貼り付け、「決定」ボタンをクリックしてください。

画面の作成

ここでは以下の2つのコンテナページを作成していきます。

  • 入力フォーム
  • 入力フォームの情報を表示する確認モーダル

コンテナ上部にある「+」アイコンをクリックして「New Page #2」(確認モーダル用のページ)を作成しておいてください。

  1. 「New Page #1」を開いてください。
    このページでは入力フォームを作成します。

  2. 「コンテナページ」に「レイアウト(Bulma)」-「ボックス」を配置してください。

  3. 「ボックス」内に「フォーム部品(Bulma)」-「見出しレベル4」を配置し、選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(固定値):Input Form

  4. 「ボックス」内に「フォーム部品(Bulma)」-「水平フィールド」を3つ配置してください。
    上から順に設定を行います。

  5. 1つ目の「水平フィールド」の「水平フィールドラベル」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • label(固定値):Name

  6. 「フィールドコンテンツ」内に「フォーム部品(Bulma)」-「テキスト入力」を配置し、「テキスト入力要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • value(変数値):$variable.name

  7. 「フィールド」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • showHelp(固定値):チェックを入れる

  8. 「フィールドコンテンツ」内に表示された「フィールドヘルプ」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(変数値):$constant.VALID_MESSAGE_NAME
    • color(固定値):danger

  9. 「フィールド」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • showHelp(変数値):$variable.validName
  10. 1つ目の「水平フィールド」と同じ流れで、残りの「水平フィールド」を設定してください。
    2つ目の「水平フィールド」
    「フィールドコンテンツ」内には「フォーム部品(Bulma)」-「メールアドレス入力」を配置してください。

    エレメント エレメント固有プロパティ 設定値
    水平フィールドラベル label(固定値) Email Address
    メールアドレス入力要素 value(変数値) $variable.emailAddress
    フィールド showHelp(変数値) $variable.validEmailAddress
    フィールドヘルプ textContent(変数値)
    color(固定値)
    $constant.VALID_MESSAGE_EMAIL_ADDRESS
    danger

    3つ目の「水平フィールド」
    「フィールドコンテンツ」内には「フォーム部品(Bulma)」-「電話番号入力」を配置してください。

    エレメント エレメント固有プロパティ 設定値
    水平フィールドラベル label(固定値) Phone Number
    電話番号入力要素 value(変数値) $variable.phoneNumber
    フィールド showHelp(変数値) $variable.validPhoneNumber
    フィールドヘルプ textContent(変数値)
    color(固定値)
    $constant.VALID_MESSAGE_PHONE_NUMBER
    danger
  11. 「ボックス」内に「フォーム部品(Bulma)」-「フィールド」を配置し、選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • grouping:grouped centered

  12. 「フィールドコンテンツ」内に「フォーム部品(Bulma)」-「ボタン」を配置し、「ボタン要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(固定値):Confirm
    • color(固定値):light

  13. ここまでに配置した「見出しレベル4」、3つの「水平フィールド」、「フィールド」をコピーしてください。

  14. 「New Page #2」を開いてください。
    このページでは入力内容の確認モーダルを作成します。

  15. 「New Page #1」でコピーした「見出しレベル4」、3つの「水平フィールド」、「フィールド」を
    「New Page #2」の「コンテナページ」に貼り付けてください。

  16. 「見出しレベル4」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(固定値):Confirmation Form

  17. 1つ目の「水平フィールド」の「水平フィールドラベル」を選択してください。
    「CSSクラス」プロパティを以下のように設定してください。

    • クラス名(固定値):confirmationLabel

  18. 「フィールド」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • showHelp(固定値):チェックを入れない

  19. 「テキスト入力」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • showLeftIcon(固定値):チェックを入れない

  20. 「テキスト入力要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • readonly(固定値):チェックを入れる
    • static(固定値):チェックを入れる

  21. 1つ目の「水平フィールド」と同じ流れで、残りの「水平フィールド」を設定してください。
    2, 3つ目の「水平フィールド」共通
    CSSクラスプロパティ

    エレメント プロパティ 設定値
    水平フィールドラベル クラス名(固定値) confirmationLabel

    エレメント固有プロパティ

    エレメント プロパティ 設定値
    フィールド showHelp(固定値) チェックを入れない
    メールアドレス入力
    電話番号入力
    showLeftIcon(固定値) チェックを入れない
    メールアドレス入力要素
    電話番号入力要素
    readonly(固定値)
    static(固定値)
    チェックを入れる
  22. 「フィールド」の「ボタン要素」を選択してください。
    「エレメント固有」プロパティを以下のように設定してください。

    • textContent(固定値):Back

  23. ツールバーの「CSS編集」アイコンをクリックしてください。

  24. 以下のCSSを貼り付け「決定」ボタンをクリックしてください。

アクションの作成

ここでは入力規則の制御・モーダルの開閉を行うアクションを作成します。
以下のアクションを作成していきます。

アクション 説明
Hide a validation rule error 入力規則エラーを非表示にします。
Open modal フォームの入力内容を確認するモーダルを開きます。
入力規則に反する項目がある場合はモーダルを開かず、エラーとヘルプを表示します。
Close modal モーダルを閉じます。
Hide a help(Name) Nameの項目が入力規則に反していない場合、ヘルプを非表示にします。
Hide a help(Email Address) Email Addressの項目が入力規則に反していない場合、ヘルプを非表示にします
Hide a help(Phone Number) Phone Numberの項目が入力規則に反していない場合、ヘルプを非表示にします。

Hide a validation rule error

入力規則エラーを非表示にします。

  1. 「アクション」タブをクリックしてください。

  2. 「新規作成」アイコンをクリックしてください。

  3. 「標準」-「入力規則エラーを非表示にする」を配置してください。

  4. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Hide a validation rule error
    アクション:入力規則エラーを非表示にする

Open modal

フォームの入力内容を確認するモーダルを開きます。
入力規則に反する項目がある場合はモーダルを開かず、エラーとヘルプを表示します。

  1. 「新規作成」アイコンをクリックしてください。

  2. 上から順に以下のアクションを配置してください。
    「標準」-「入力規則エラーを表示する」
    「標準」-「変数〇に〇を代入する」
    「標準」-「変数〇に〇を代入する」
    「標準」-「変数〇に〇を代入する」
    「Bulma」-「ページ〇をモーダルで開く」

  3. 「実行条件」タブをクリックしてください。

  4. 3つ配置した「変数〇に〇を代入する」それぞれ全てに、
    実行条件の「標準」-「変数〇が入力規則に則していないとき」を配置してください。

  5. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Open modal
    アクション1:入力規則エラーを表示する
    アクション2:変数〇に〇を代入する
        代入先:$variable.validName
        代入元(変数値):$constant.TRUE
        実行条件:変数〇が入力規則に則していないとき
            入力チェック対象:$variable.name
    アクション3:変数〇に〇を代入する
        代入先:$variable.validEmailAddress
        代入元(変数値):$constant.TRUE
        実行条件:変数〇が入力規則に則していないとき
            入力チェック対象:$variable.emailAddress
    アクション4:変数〇に〇を代入する
        代入先:$variable.validPhoneNumber
        代入元(変数値):$constant.TRUE
        実行条件:変数〇が入力規則に則していないとき
            入力チェック対象:$variable.phoneNumber
    アクション5:ページ〇をモーダルで開く
        ページ:New Page #2
        実行条件:変数〇が入力規則に則しているとき
            入力チェック対象:$variable.name
        実行条件:変数〇が入力規則に則しているとき
            入力チェック対象:$variable.emailAddress
        実行条件:変数〇が入力規則に則しているとき
            入力チェック対象:$variable.phoneNumber

    アクション・アクション条件一覧

Close modal

モーダルを閉じます。

  1. 「新規作成」アイコンをクリックしてください。

  2. 「Bulma」-「モーダルを閉じる」を配置してください。

  3. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Close modal
    アクション:モーダルを閉じる

Hide a help(Name)

Nameの項目が入力規則に反していない場合、ヘルプを非表示にします。

  1. 「新規作成」アイコンをクリックしてください。

  2. 「標準」-「変数〇に〇を代入する」を配置してください。

  3. 「実行条件」タブをクリックしてください。

  4. 「変数〇に〇を代入する」に、実行条件の「標準」-「変数〇が入力規則に則しているとき」を配置してください。

  5. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Hide a help(Name)
    アクション:変数〇に〇を代入する
        代入先:$variable.validName
        代入元(変数値):$constant.FALSE
        実行条件:変数〇が入力規則に則しているとき
            入力チェック対象:$variable.name

Hide a help(Email Address)

Email Addressの項目が入力規則に反していない場合、ヘルプを非表示にします。

  1. 「新規作成」アイコンをクリックしてください。

  2. 「標準」-「変数〇に〇を代入する」を配置してください。

  3. 「実行条件」タブをクリックしてください。

  4. 「変数〇に〇を代入する」に、実行条件の「標準」-「変数〇が入力規則に則しているとき」を配置してください。

  5. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Hide a help(Email Address)
    アクション:変数〇に〇を代入する
        代入先:$variable.validEmailAddress
        代入元(変数値):$constant.FALSE
        実行条件:変数〇が入力規則に則しているとき
            入力チェック対象:$variable.emailAddress

Hide a help(Phone Number)

Phone Numberの項目が入力規則に反していない場合、ヘルプを非表示にします。

  1. 「新規作成」アイコンをクリックしてください。

  2. 「標準」-「変数〇に〇を代入する」を配置してください。

  3. 「実行条件」タブをクリックしてください。

  4. 「変数〇に〇を代入する」に、実行条件の「標準」-「変数〇が入力規則に則しているとき」を配置してください。

  5. 以下のように設定し、「決定」ボタンをクリックしてください。
    アクション名:Hide a help(Phone Number)
    アクション:変数〇に〇を代入する
        代入先:$variable.validPhoneNumber
        代入元(変数値):$constant.FALSE
        実行条件:変数〇が入力規則に則しているとき
            入力チェック対象:$variable.phoneNumber

アクションの設定

作成したアクションを各エレメントに設定してください。
New Page #1(入力フォーム)

エレメント イベントプロパティ アクション
コンテナ ページ読み込み時 Hide a validation rule error
テキスト入力要素 入力値変更時 Hide a help(Name)
メールアドレス入力要素 入力値変更時 Hide a help(Email Address)
電話番号入力要素 入力値変更時 Hide a help(Phone Number)
ボタン要素 クリック時 Open modal

New Page #2(確認モーダル)

エレメント イベントプロパティ アクション
ボタン要素 クリック時 Close modal

動作確認

作成した画面の動作確認を行います。
ツールバーの「プレビュー」アイコンをクリックし、プレビュー画面を開いてください。


作成した画面が以下のように動作することを確認してください。
うまく動作しない場合は、レシピの手順を確認してください。

  • 画面の初期表示で入力規則エラーが表示されないこと。
  • 入力項目が未入力の状態で「Confirm」ボタンをクリックすると、入力規則エラーが表示されること。
  • 入力項目が入力規則に反していない状態で「Confirm」ボタンをクリックすると、入力内容の確認モーダルが開くこと。

-CookBook
-

執筆者:


comment

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

関連記事

no image

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

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

no image

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

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

no image

前回のログイン時刻を表示するポートレットの作成方法

このクックブックでは、前回のログイン時刻を表示するポートレットの作成方法をご紹介します。 具体的には、以下の3つの情報を表示するポートレットを作成します。 前回のログイン時刻 前回ログイン時のIPアド …

no image

ラジオボタンの値やフォーカスによってアイテムの色を変更するには

このCookbookでは、カスタムスクリプトによるフィールドスタイルの変更方法を説明します。 アクション設定とカスタムスクリプトの組み合わせにより、入力値やフォーカスイベントに合わせてアイテムのスタイ …

no image

ワークフローの一覧を使い分けるには(改訂版)

このCookbookでは、以前に公開した「IM-Workflowの一覧を業務別に使い分けるには」に関して、お問い合わせいただいた内容を追加してワークフローの一覧の検索条件を付与する方法をご紹介いたしま …

RSSRSSRSSRSS