CookBook

IM-BloomMaker Bulma を使用した参照系画面の作成

投稿日:

この CookBook では、 2020 Summer でリリースした Bulma のフレームワークを使用した参照系の画面を作成します。
ユーザをテーブル形式で一覧に表示し、列ごとに参照したり、ユーザ検索やユーザ登録ができるサンプルです。

完成イメージ

一覧画面

参照画面

登録画面

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
IM-BloomMaker インポートデータ : cookbook_185275_bloommaker_data
IM-BloomMaker のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。

  • im_cookbook_185275

IM-LogicDesigner インポートデータ : cookbook_185275_logicdesigner-data
IM-LogicDesigner のインポートデータはテナント環境セットアップのサンプルデータセットアップで自動でインポートされます。
また、サンプル用のテーブルを使用しているのでサンプルデータセットアップは行ってください。

下記ルーティング定義の認可 URI の設定を行ってください。

  • im_bloommaker/standard_template/get_user
  • im_bloommaker/standard_template/get_user_count
  • im_bloommaker/standard_template/register_user

サンプルは以下の環境で動作を確認できます。

  • intra-mart Accel Platform(Advanced) 2020 Summer(8.0.26)以降のバージョンであること

レシピ

  1. ユーザ一覧画面の作成
  2. 参照画面の作成
  3. 登録画面の作成

1. ユーザ一覧画面の作成

テーブルコンテナ(繰り返し)とページネーションを使用しユーザ一覧画面を作成します。

1. 変数を作成します。

変数タブを開き「変数」が選択されている状態で、「JSONエディタ」を開き、以下の JSON を入力してください。

以下のように変数が作成できてきるはずです。

同様に、「定数」を選択し、「JSON形式で編集」アイコンをクリックして、以下を入力してください。

以下のように定数が作成できてきるはずです。

2. ユーザ一覧を表示するテーブルを作成します。

まずは、「レイアウト (Bulma)」-「見出しレベル2」エレメントを配置し、textContent を searchUser にしてください。

次に、「レイアウト (Bulma)」-「ボックス」エレメントを配置し、配下に「繰り返し (Bulma)」-「テーブルコンテナ (繰り返し)」エレメントを配置します。

「テーブル (繰り返し)」を選択し、list プロパティに $variable.userList を設定し、stripe プロパティにチェックを入れてください。

「テーブルヘッダセル」と「テーブルセル」に「汎用」-「ラベル」エレメントを以下のように配置してください。

「テーブルヘッダセル」に配置した「ラベル」エレメントの textContent プロパティを以下のように設定してください。
Refer、User code、User name、Age、Creation day

次は、「テーブルセル」に配置した「ラベル」エレメントの textContent プロパティを以下のように設定してください。
ここでは、$variable.userList の要素を繰り返しで表示するので変数値を使用します。




しかし、$variable.userList[0].userCd と設定した場合、0番目の要素しか表示されないため、添え字に $index を使用します。
$index についてはこちらの cookbook IM-BloomMaker 繰り返しエレメントでの変数の使い方 を参考にしてください。

[0]となっている箇所を全て $index に変更してくだい。以下のようになるはずです。
$variable.userList[$index].userCd、$variable.userList[$index].userName、$variable.userList[$index].age、$variable.userList[$index].createDate

最後に、まだ配置していない「テーブルセル」に「パーツ (Bulma)」-「アイコン」エレメントを配置してください。
このままではまだアイコンが表示されていないので、 iconClass プロパティに fas fa-info-circle を設定し、color プロパティを info にしてください。

これでテーブルの設定が終わりました。
しかし、$variable.userList にはユーザ一覧のデータがないので、プレビューで表示してもユーザ一覧は表示されません。
アクションでユーザ一覧を取得する API と連携して表示させましょう。

アクションタブを開き、 getUser を作成し、「標準」カテゴリから「URL○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

URL $constant.GET_USER_URL
メソッド GET
レスポンスデータ $variable.selectApiResponse


次に、$variable.userList$variable.selectApiResponse の ユーザ一覧のデータが入っている records を詰めていきます。
アクションタブを開き、 filterUserList を作成し、「標準」カテゴリから「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のように入力してください。


$im.resolve の使用方法はこちらの cookbook IM-BloomMaker のカスタムスクリプト内で $im.resolve を使った一覧画面の作成 を参考にしてください。
ここではページネーションとの連携でデータを加工する必要があるため $variable.userList に詰め直していますが、テーブルに一覧の表示しかしない場合は、「テーブルコンテナ (繰り返し)」や「ラベル」で設定した変数値を $variable.selectApiResponse.records にすれば一覧の表示はできます。

最後に、作成したアクションを実行させます。
アクションタブを開き、 initialize を作成し、「標準」カテゴリから「アクション○を実行する」アクションアイテムを2つ配置して、以下のように作成したアクションを設定してください。
getUser、filterUserList

作成したら、画面の読み込み時にイベントが発火するように設定します。
「コンテナ」アイコンをクリックします。

「ページ読み込み時」のイベントに initialize を設定します。

これでアクションの設定が終わりました。

ここで一度プレビューで確認しましょう。
以下のように表示されているはずです。

次は、ページネーションと連携していきます。

3. ページネーションを作成します。

「コンポーネント (Bulma)」-「ページネーション」エレメントを「ボックスエレメント」配下に配置します。

「ページネーションリスト」を選択して、以下のようにプロパティを設定します。

current $variable.pagination.current
itemsPerPage 1
total $variable.pagination.total

設定したプロパティとテーブルを連携するために、アクションの filterUserList を編集します。
以下のように、カスタムスクリプトを修正してください。


ここでは1ページごとにテーブルに5件表示する処理を記述しています。

プレビューで確認すれば、5件のみ表示されているはずです。

次に、ページングできるようにします。
まず、ユーザ件数を取得するアクションを作成します。
アクションタブを開き、 getUserCount を作成し、「標準」カテゴリから「URL○にリクエストを送信する」アクションアイテムを配置して、以下のように設定してください。

URL $constant.GET_COUNT_URL
メソッド GET
レスポンスデータ $variable.selectApiResponse


次に、ページネーションで表示する最大値を設定します。
アクションタブを開き、 getMaxPageCount を作成し、「標準」カテゴリから「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のように入力してください。


ここで一度アクションを呼び出します。
アクションの initialize を編集し、以下の順番で「アクション○を実行する」アクションを設定してください。
getUser、getUserCount、filterUserList、getMaxPageCount

プレビューで確認すれば、ページ数が3件表示されているはずです。

しかし、ページを切り替えてもまだページングはしないので、「ページネーション」の onChangePageEvent でページングできるようにします。
アクションタブを開き、 paginationEvent を作成し、「標準」カテゴリから「アクション○を実行する」アクションアイテムを配置して、以下のようにアクションを設定してください。
filterUserList

「ページネーション」を選択して、onChangePageEvent に paginationEvent を設定します。

これでページングができるようになりました。

最後に、デザインや 「Previous」、「Next page」ボタンの活性状態を変更します。
「ページネーション」を選択して、alignment プロパティを centered、外余白(上)に 0.5rem を設定します。

「Previous」ボタンを選択して、disabled プロパティの変数値に =$variable.pagination.current == 1 を入力します。

これで1ページ目の時は非活性になります。

「Next page」ボタンを選択して、disabled プロパティの変数値に =$variable.pagination.current == $variable.pagination.total を入力します。

これで最後のページの時は非活性になります。

以上で、ページネーションとの連携は完了です。

4. ユーザの絞り込みをする。

「フォーム部品 (Bulma)」-「フィールド」エレメントを「ボックスエレメント」配下に配置します。

「フィールドコンテンツ」配下に、「フォーム部品 (Bulma)」-「テキスト入力」エレメントと「ボタン」エレメントを配置します。

「フィールド」エレメントを選択して、grouping プロパティを grouped right にします。
これで右揃えになりました。

次に、プロパティを設定します。
「テキスト入力要素」を選択して、placeholder プロパティを User code、value プロパティを変数値にし $variable.searchUserCd を設定します。

「ボタン要素」を選択して、textContent プロパティを Search にします。

次に、アクションを設定します。
アクションタブを開き、 Search を作成し、「標準」カテゴリから「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のように入力してください。


入力が終わったら実行条件タブに切り替え、「標準」カテゴリから「上記カスタムスクリプトの返却値が true のとき」を作成したアクションに配置して、以下のように入力してください。


再度、アクションタブに切り替え、「標準」カテゴリから「アクション○を実行する」アクションアイテムを2つ配置して、以下のようにアクションを設定してください。

作成が終わったら、filterUserList アクションを編集します。
カスタムスクリプトを以下のように修正してください。


修正が終わったら、getMaxPageCount アクションも編集します。
カスタムスクリプトを以下のように修正してください。


最後に、「ボタン要素」を選択して、クリック時のイベントに Search を設定します。

これで User code で絞り込みが出来るようになりました。

2. 参照画面の作成

新規でタブを作成し、コンテナページ名を Reference にします。

ついでに、New Page #1 も UserList に変更します。

Reference タブを選択し「レイアウト (Bulma)」-「見出しレベル3」エレメントを配置し、textContent を Reference にしてください。

「レイアウト (Bulma)」-「テーブルコンテナ」エレメントを配置し、プロパティを以下のように設定してください。

showHeader チェックを外す
stripe チェックを付ける
columnCount 2
rowCount 4


「汎用」-「ラベル」エレメントを「テーブルセル」全てに配置してください。

左側の「ラベル」の textContent プロパティを上から User code、User name、Age、Creation day にしてください。

右側の「ラベル」の textContent プロパティを変数値にして上から $variable.selectedData.userCd$variable.selectedData.userName$variable.selectedData.age$variable.selectedData.createDateにしてください。

これで参照画面の作成は終わりです。
一覧画面から呼び出せるようにします。
アクションタブを開き、Open Reference Dialog を作成し、「標準」カテゴリから「カスタムスクリプトを実行する」アクションアイテムを配置して、以下のように入力してください。


入力したら、「Bulma」カテゴリから「ページ○をモーダルで開く」アクションアイテムを配置して、Reference を設定してください。

最後にイベントを呼び出します。
UserList タブに戻り、テーブルに配置した「アイコン」のクリック時のイベントに Open Reference Dialog を設定します。

アイコンをクリックすれば、参照画面がモーダルで表示されるようになります。

6. 登録画面の作成

新規でタブを作成し、コンテナページ名を Registration にします。

「レイアウト (Bulma)」-「見出しレベル3」エレメントを配置し、textContent を Registration にしてください。

次に、入力フィールドを作成します。
「フォーム部品 (Bulma)」-「水平フィールド」エレメントを3つ配置し、「水平フィールドラベル」の label プロパティを以下のように変更します。
User code、User name、Age

一番上の「フィールドコンテンツ」配下に、「フォーム部品 (Bulma)」-「テキスト入力」エレメントを配置して、「テキスト入力要素」の value プロパティの変数値に $variable.registerApiRequest.userCd を入力します。

中央の「フィールドコンテンツ」配下に、「フォーム部品 (Bulma)」-「テキスト入力」エレメントを配置して、「テキスト入力要素」の value プロパティの変数値に $variable.registerApiRequest.userName を入力します。

中央の「フィールドコンテンツ」配下に、「フォーム部品 (Bulma)」-「数値入力」エレメントを配置して、「数値入力要素」の value プロパティの変数値に $variable.registerApiRequest.age を入力します。

「テキスト入力」と「数値入力」のアイコンを消します。
「テキスト入力」の showLeftIcon のチェックを外します。

同様に、残り2つの showLeftIcon のチェックを外します。

ボタンのエリアを作成します。
「フォーム部品 (Bulma)」-「フィールド」エレメントを配置します。

「フォーム部品 (Bulma)」-「ボタン」エレメントを2つ配置します。

「フィールド」を選択して、 grouping プロパティを grouped centered に設定します。

「ボタン要素」の textContent を OK と Cancel に変更します。

OK ボタンのアクションを作成します。
アクションタブを開き、Register を作成し、「標準」カテゴリから「URL○にリクエストを送信する」アクションアイテムを配置して、以下のように入力してください。

URL $constant.REGISTER_URL
メソッド POST
リクエストデータ $variable.registerApiRequest
セキュアトークンを送信する チェックを入れる


「標準」カテゴリから「アクション○を実行する」アクションアイテムを配置して、initialize を設定してください。

「Bulma」カテゴリから「モーダルを閉じる」アクションアイテムを配置します。

OK ボタンの「ボタン要素」をクリックし、イベントに Register を設定します。

Cancel ボタンのアクションを作成します。
アクションタブを開き、Close Modal を作成し、「Bulma」カテゴリから「モーダルを閉じる」アクションアイテムを配置します。

Cancel ボタンの「ボタン要素」をクリックし、イベントに Close Modal を設定します。

これで登録画面の作成は完了です。

最後にユーザ一覧画面から呼び出します。
UserList タブを選択して、「フォーム部品 (Bulma)」-「ボタン」エレメントを配置します。

「ボタン要素」を選択して、以下のようにプロパティを設定します。

textContent New Registration
color success
size small
leftIconClass fas fa-plus


アクションタブを開き、Open Registration Dialog を作成し、「標準」カテゴリから「カスタムスクリプトを実行する」アクションアイテムを配置し、以下のように入力します。


入力が終わったら、「Bulma」カテゴリから「ページ○をモーダルで開く」アクションアイテムを配置して、Registration を設定してください。

New Registration ボタンの「ボタン要素」をクリックし、イベントに Open Registration Dialog を設定します。

プレビューを開き、登録画面を表示してみましょう。

表示ができたら全項目に値を入れて登録してみましょう。
入力チェック等はしていないので、User code、User name には文字列を、Age には数値を入力するようにしてください。
ユーザ一覧で登録したデータが表示されるはずです。

またページ件数が動的に変わることも確認しましょう。
データ件数が15件ある状態で、

16件目のデータを新規登録すると、ページ件数が4件になります。

以上で画面の作成は終わりです。

さいごに

このサンプルは IM-BloomMaker テンプレート一覧の「IM-BloomMaker 標準テンプレート」-「IM-BloomMaker テンプレート 一覧・登録・編集・削除」を参考にして Bulma で作成したものになります。
気になる方はこちらも確認してみてください。

-CookBook
-

執筆者:


comment

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

関連記事

IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法

このCookBookでは、IM-FormaDesignerの複数行アイテムの入力可能な行数を制限する方法について紹介しています。 完成サンプル スクリプト適用前 指定した行数以上に改行できます。 スク …

no image

フォームに入力した内容をデータベースに登録する

登録フォームに入力した内容をデータベースに登録する手順をご紹介します。 今回は例として、CookBook:スクリプト開発で登録フォームを作成するで作成した登録フォームに入力された内容をデータベースに登 …

no image

Payara 管理画面で行った設定を CUI で実施する方法

この CookBook では、Payara の Asadmin Recorder 機能について紹介しています。 Asadmin Recorder 機能についての詳細を知りたい方は Asadmin Re …

no image

intra-mart WebPlatform をサイレントインストールする方法

この CookBook では、intra-mart WebPlatform をサイレントインストールする方法について紹介しています。 インストーラのサイレント・モードについては以下のセットアップに記載 …

no image

スクリプト開発でのCSRF対策(formタグ編)

Cross Site Request Forgery(CSRF)とは、閲覧者に不正にHTTPリクエストを送信させ、攻撃者の意図した処理を実行させる攻撃手法です。 このCookBookでは、スクリプト開 …

RSSRSSRSSRSS