CookBook

IM-BloomMaker フォーム部品(Bulma)を使用したバリデーション処理の作成

投稿日:2020-08-04 更新日:

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった
コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したバリデーション処理について紹介いたします。
実際にサンプル画面を作成しながらバリデーション処理について説明していきます。

完成イメージ

このCookBookで作成するサンプル画面です。
以下の動作確認ができます。

  1. 「name」テキストボックスの必須チェックが行われます。
  2. 「email」テキストボックスのアドレス形式判定が行われます。

完成サンプル

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

以下の定義が含まれています。

種別ID
コンテンツim_cookbook_185420
ルーティング定義im_cookbook_185420

IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

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

コンテンツの作成

以下のドキュメントを参考にコンテンツを作成していきます。
今回のコンテンツIDは im_cookbook_185240 としています。

画面の作成

1. 変数の作成

右ペインにある変数タブを開き、変数タブ上のプルダウンにて「変数」が選択されていることを確認し、
「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。

JSONエディタのOKボタンをクリックすると、作成された変数を確認することが出来ます。

2. 変数の入力規則を設定

作成した変数の入力規則を設定します。
変数横の編集アイコンをクリックします。
変数エディタ下方にある入力規則から設定します。
「name」には、必須属性を設定します。

「email」にはフォーマット指定「Eメールアドレス形式」を設定します。

3. 定数の作成

右ペインにある変数タブを開き、変数タブ上のプルダウンにて「定数」が選択されていることを確認し、
「JSON形式で編集」アイコンをクリックして「JSONエディタ」を開き、以下の JSON を入力してください。

JSONエディタのOKボタンをクリックすると、作成された定数を確認することが出来ます。

4.アクションの作成

右ペインにあるアクションタブを開き、「新規作成」アイコンをクリックします。
「Name」のチェックを行うアクションと「Email」のチェックを行うアクションの2種類を作成します。

4-1. Name項目のバリデーションを行うアクションを作成します。

「Name」のバリデーションを行うアクションを作成していきます。
なお、アクションの名前は「Validate name」とします。

4-1-1. 入力規則に則していない判定を行うアクションを作成します。

アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「valid_name」を選択します。

次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「定数」タブの「TRUE」を選択します。

アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則していないとき」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「name」を選択します。

4-1-2. 入力規則に則している判定を行うアクションを作成します。

アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「valid_name」を選択します。

次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「定数」タブの「FALSE」を選択します。

アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則しているとき」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「name」を選択します。

4-2. Email項目のバリデーションを行うアクションを作成します。

「Email」のバリデーションを行うアクションを作成していきます。
なお、アクションの名前は「Validate email」とします。

4-1-1. 入力規則に則していない判定を行うアクションを作成します。

アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「valid_email」を選択します。

次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「定数」タブの「TRUE」を選択します。

アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則していないとき」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「email」を選択します。

4-1-2. 入力規則に則している判定を行うアクションを作成します。

アクションエディタ内の「標準」をクリックします。
「変数〇に〇を代入する」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「valid_email」を選択します。

次に代入値を設定します。まず変数値のラジオボタンを選択します。
テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「定数」タブの「FALSE」を選択します。

アクションエディタに戻って、左ペインの「実行条件」タブをクリックします。
「標準」の中から、「変数〇が入力規則に則しているとき」をドラッグ&ドロップで配置します。

変数の横の検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。

「変数」タブの「email」を選択します。

5.エレメントの配置
  1. 左ペインにあるエレメント一覧から、「フォーム部品(Bulma)」を開きます。
  2. 「フォーム部品(Bulma)」内の「フィールド」を2つ配置します。
  3. 1つ目の「フィールド」内に「テキスト入力」を配置します。
  4. 2つ目の「フィールド」内に「メールアドレス入力」を配置します。

以下のように配置されていれば大丈夫です。

6.エレメントプロパティの設定
6-1. 「フィールド」エレメントのプロパティ設定(Name項目)

「テキスト入力」エレメントを配置した「フィールド」を選択します。

「showLabel」にチェックを入れます。これで「フィールドラベル」エレメントが表示されるようになります。
「フィールドラベル」エレメントの「value」に固定値で「Name」と設定します。

「フィールド」エレメントに戻って、「showHelp」に変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_name」を選択します。

「showHelp」に値を設定したことにより、「フィールドヘルプ」エレメントが表示されます。
「フィールドヘルプ」エレメントの「textContent」プロパティに固定値で「Name is required」と設定します。
また、「color」プロパティのプルダウンから「danger」を指定します。

6-2. 「テキスト入力要素」エレメントのプロパティ設定

「テキスト入力要素」エレメントを選択します。
「value」プロパティに変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「name」を選択します。

「イベント」-「入力値変更中」プロパティに「4.1」で作成したアクションを設定します。

6-3. 「フィールド」エレメントのプロパティ設定(Email項目)

「テキスト入力」エレメントを配置した「フィールド」を選択します。

「showLabel」にチェックを入れます。これで「フィールドラベル」エレメントが表示されるようになります。
「フィールドラベル」エレメントの「value」に固定値で「Email」と設定します。

「フィールド」エレメントに戻って、「showHelp」に変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「valid_email」を選択します。

「showHelp」に値を設定したことにより、「フィールドヘルプ」エレメントが表示されます。
「フィールドヘルプ」エレメントの「textContent」プロパティに固定値で「Input format is incorrect」と設定します。
また、「color」プロパティのプルダウンから「danger」を指定します。

6-4. 「メールアドレス入力要素」エレメントのプロパティ設定

「メールアドレス入力要素」エレメントを選択します。
「value」プロパティに変数値を設定します。
「変数値」ラジオボタンを選択後、テキストボックスに表示されている検索アイコンをクリックし、「変数・定数・入力・多言語・環境セレクタ」を開きます。
「変数」タブの「email」を選択します。

「イベント」-「入力値変更中」プロパティに「4.2」で作成したアクションを設定します。

アプリケーション画面を公開

当該 Cookbook で作成したコンテンツは IM-BloomMaker のルーティング定義と紐づけることによって、アプリケーションとして公開することができます。
ルーティング定義の作成や設定方法が不明である場合、以下のドキュメントを参照してください。

ルーティング定義作成後は、ルーティングにURLにアクセスするための認可を付与してください。
動作確認が目的であれば、認証済みユーザに認可を付与すれば問題ありません。

なお、完成サンプルでは ルーティングID を im_cookbook_185240 で登録しています。

-CookBook
-

執筆者:


comment

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

関連記事

IM-LogicDesignerでBoxにファイルをアップロードし、メタデータや共有リンクを作成する方法

このCookBookでは、IM-LogicDesigner での以下のBox連携LDタスクの使い方について紹介しています。 ユーザ切り替えタスク Boxストレージ取得タスク メタデータ作成タスク 共有 …

IM-BloomMaker スプレッドシートの入力内容を DB に保存する

この CookBook では intra-mart Accel Platform 2020 Winter から利用可能になったスプレッドシートで、セルに入力した値を DB に保存する方法を紹介します。 …

no image

IM-BloomMaker コンボボックスエレメントのサジェストにサーバから取得した値を表示する

このCookBookでは、intra-mart Accel Platform 2020 Spring から利用可能になったコンボボックスエレメントのサジェストにサーバから取得した値を表示する方法につい …

no image

intra-mart WebPlatform 7.2 の Docker を作成する

この CookBook では、intra-mart WebPlatform 7.2 の Docker の作成手順について紹介しています。 レシピ ベースイメージの作成 intra-mart WebPl …

FormaDesignerのユーザプログラム前処理と後処理をロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム前処理と後処理をロジックフローで作成する方法を紹介します。 サンプルでは、ユーザプログラム前処理と後処理を利用して、Workflo …