CookBook

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

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

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

完成イメージ

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

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

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
IM-BloomMakerインポートファイル : cookbook_185240_im_bloommaker-data

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

ローカル環境で表示させる場合は、以下の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

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

関連記事

no image

IM-BloomMaker Modifier の使い方

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。 modifier は、同じく 2020 Summer …

no image

グリッドテーブルのイメージからワークフローの案件内容を表示するには

このCookbookでは、グリッドテーブルの「イメージ」から申請済みの案件の詳細画面を呼び出す方法を紹介します。 この方法を利用すると別の案件を参照しながら新しく申請を行うことができます。 BISで作 …

no image

グリッドテーブルの列タイプ「カスタム」を利用した場合にマルチセレクトがトグルされないようにする方法

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

no image

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

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

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローの一括承認画面を作成する

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローの一括承認画面を作成する方法を紹介します。 完成イメージ ① 承認を実施するフローとノードを設定 …

RSSRSSRSSRSS