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では、グリッドテーブルの列タイプ「カスタム」を利用した場合に、マルチセレクトがトグルされないようにする方法を説明します。 グリッドテーブルでは、行内で参照表示となっている部分をクリ …

no image

IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスク利用例

このCookBookでは、IM-LogicDesignerのIM-ContentsSearch コンテンツ登録タスクの利用例を紹介します。 IM-BISで作成したワークフローの案件終了処理で、画面項目 …

IM-BloomMaker カスタムスクリプトの使い方と$variableからの取得・代入の方法

このCookBookでは、IM-BloomMakerのアクションの一つであるカスタムスクリプトの使い方と$variable(変数)からの取得および代入の方法について紹介しています。 実際にサンプル画面 …

スプレッドシートを実行画面でExcelファイルとしてエクスポートする方法

このCookBookでは、スプレッドシートを実行画面でExcelファイルとしてエクスポートする方法について紹介しています。 IM-FormaDesignerの実行画面から直接、画面アイテム「スプレッド …

no image

IM-LogicDesignerで、Redmineカスタムクエリのチケット一覧を取得する方法

このCookBookでは、IM-LogicDesignerを使用してRedmineのチケット (issues) 一覧を取得する方法を紹介します。 Redmineは、外部からチケット一覧を取得するための …

RSSRSSRSSRSS