CookBook

IM-BloomMaker Bulma のタブを使用したページ切り替え処理の作り方

投稿日:2022-12-02 更新日:

このCookBookでは、Bulma のタブコンポーネントを使用したページ切り替え処理について紹介します。

完成イメージ

初期表示時

「Page2」タブ選択時

完成サンプル

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

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

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

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

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

レシピ

  1. 画面の作成
  2. アプリケーション画面の公開

1. 画面の作成

それではコンテンツを作成していきましょう。
デザイナを開くまでの手順については、以下のドキュメントを参考にしてください。

なお、完成サンプルではコンテンツの ID を im_cookbook_208387 としています。

変数作成

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

「JSONエディタ」の「OK」ボタンをクリックすると、以下の画像のように変数が作成されます。

アクション追加

右ペインにある「アクション」タブを開き、「アクション新規作成」アイコンをクリックして「アクションエディタ」を開きます。

「アクションエディタ」の左ペインから「標準」-「カスタムスクリプトを実行する」を配置し、以下のスクリプトを入力してください。

このスクリプトにより、クリックされたタブのエレメントIDを $variable.activeTab に代入します。
$im.event.currentTarget.elementId は特殊な変数であり、クリックした直近のエレメントIDが格納されています。
エレメントIDは、エレメントのプロパティから確認できます。

「決定」ボタンをクリックしてアクションエディタを閉じます。

ンテナページ追加

このCookBookでは、タブを3つ作成し、それぞれ切替ができるようにしてみます。
タブを選択した際に内容を表示するためのコンテナページを、タブあたり1つずつ、計3つ追加します。

コンテナページを追加するためには、コンテナページタイトルの横にある「追加」アイコンをクリックします。

コンテナページを追加後、コンテナページ名を変更します。

コンテナページ名の変更はコンテナを選択した状態で右ペインにあるプロパティタブから「エレメント固有」- 「name」を変更します。

変更前、変更後のコンテナページ名は以下のとおりです。

変更前コンテナページ名変更後コンテナページ名
New Page1Main Page
New Page2TabItem1 Page
New Page3TabItem2 Page
New Page4TabItem3 Page

それぞれのコンテナページの役割は以下のとおりです。

コンテナページ名説明
Main Page メインページです。タブエレメントによるページ切り替えを行います。
TabItem1 Page 1つめのタブが選択された場合に表示されるページです。
TabItem2 Page 2つめのタブが選択された場合に表示されるページです。
TabItem3 Page 3つめのタブが選択された場合に表示されるページです。

コンテナページ追加・ページ名変更をそれぞれ行った結果、以下の画像のようになります。

エレメントの配置

それぞれのコンテナページにエレメントを配置します。

  • Main Page

・コンポーネント(Bulma)- タブ

・パーツ - コンテナページ埋め込み × 3

  • TabItem1 Page

・レイアウト(Bulma)- 見出しレベル2

  • TabItem2 Page

・レイアウト(Bulma)- 見出しレベル2

  • TabItem3 Page

・レイアウト(Bulma)- 見出しレベル2

プロパティ設定

それぞれ配置したエレメントのプロパティを設定します。

ここでは、「タブリストアイテム」エレメントがクリックされたときに、対応する「コンテナページ埋め込み」エレメントを表示し、対応するタブをアクティブ化するために式表現を使用しますが、このときに以下のエレメントIDを使用します。

エレメントエレメントID
1つめのタブリストアイテムim-element-7
2つめのタブリストアイテムim-element-10
3つめのタブリストアイテムim-element-13

サンプルではなく、最初から画面を作成した場合は、エレメントIDが変わっている可能性がありますので、置き換えてお読みください。エレメントIDは、「タブリストアイテム」エレメントを選択すると、プロパティとして「エレメントID」が表示されますので参照してください。

Main Page に配置したエレメントから「タブ」エレメントを選択すると、エレメント内に「タブリストアイテム」エレメントが3つ存在しています。このうち、一番左側の「タブリストアイテム」エレメントを選択します。

次に、「タブリストアイテム」エレメントのプロパティから、「エレメント固有」-「active」 プロパティに「変数値」指定で =$variable.activeTab == 'im-element-7' を設定します。

次に、「イベント」-「クリック時」プロパティに、先ほど作成したアクションをプルダウンから選択します。

一番左の「タブリストアイテム」エレメント内にある「ラベル」エレメントを選択し、「エレメント固有」-「textContent」プロパティに Page1 を設定します。

これで、1つめのタブの設定が完了しました。

同様に、2つめのタブを設定していきます。

「タブ」エレメント内にある2番目の「タブリストアイテム」エレメントを選択し、「エレメント固有」-「active」 プロパティに「変数値」指定で =$variable.activeTab == 'im-element-10' を設定します。

次に、「イベント」-「クリック時」プロパティに、先ほど作成したアクションをプルダウンから選択します。

2番目の「タブリストアイテム」エレメント内の「ラベル」エレメントを選択し、「エレメント固有」-「textContent」プロパティに Page2 を設定します。

同様に、最後のタブを設定していきます。

「タブ」エレメント内にある一番右の「タブリストアイテム」エレメントを選択し、「エレメント固有」-「active」 プロパティに「変数値」指定で =$variable.activeTab == 'im-element-13' を設定します。

1つめ、2つめと同様に、アクションも設定してください。

2番目の「タブリストアイテム」エレメント内の「ラベル」エレメントを選択し、「エレメント固有」-「textContent」プロパティに Page3 を設定します。

これで、メインページの設定は完了です。

次は、各タブのために用意した「コンテナページ埋め込み」エレメントの設定です。

3つある「コンテナページ埋め込み」エレメントのうち、一番上にあるエレメントを選択し、「エレメント固有」-「page」プルダウンから「TabItem1 Page」を選択します。

次に「共通」-「表示/非表示」プロパティに、「変数値」指定で =$variable.activeTab == 'im-element-7' を設定します。

2つめの「コンテナページ埋め込み」エレメントを選択し、「エレメント固有」-「page 」プルダウンから「TabItem2 Page」を選択します。

次に「共通」-「表示/非表示」プロパティに、「変数値」指定で =$variable.activeTab == 'im-element-10' を設定します。

3つめの「コンテナページ埋め込み」エレメントを選択し、「エレメント固有」-「page 」プルダウンから「TabItem3 Page」を選択します。

次に「共通」-「表示/非表示」プロパティに、「変数値」指定で =$variable.activeTab == 'im-element-13' を設定します。

TabItem1 Page ~ TabItem3 Page に配置した「見出しレベル2」エレメントの「textContent」プロパティを以下のように設定します。

コンテナページ名エレメントプロパティ設定値
TabItem1 Page見出しレベル2「エレメント固有」-「textContent」「固定値」指定でテキストボックスに「Page1」を設定
TabItem2 Page 見出しレベル2「エレメント固有」-「textContent」「固定値」指定でテキストボックスに「Page2」を設定
TabItem3 Page 見出しレベル2「エレメント固有」-「textContent」「固定値」指定でテキストボックスに「Page3」を設定

設定が完了したら、「上書き保存」アイコンをクリックして画面デザインを保存します。

2. アプリケーション画面の公開

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

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

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

本記事の内容をベースに、以下の開発動画を公開しています。
記事と合わせてご確認ください。

【intra-mart】タブを使用したページ切り替え処理の作り方【ローコード開発】

-CookBook
-

執筆者:


comment

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

関連記事

no image

Payara 5.184 を Google Kubernetes Engine(GKE) から利用する

この CookBook では、Payara を GKE 上で実行しクラスタリングを構築する手順について紹介しています。 Payara 5.184 で Kubernetes Cluster Mode が …

no image

スクリプト開発で利用できる close 関数のご紹介

この CookBook では、スクリプト開発で利用できる close 関数について紹介します。 スクリプト開発では作成した js ファイルの中に init と言う名前の関数を定義すると思いますが、この …

FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法をご紹介します。 サンプルでは、スプレッドシート・グリッドテーブル・明細テーブルを使用し …

no image

Docker Swarm を利用して Payara のクラスタリングを構築する。

この CookBook では、Docker Swarm を利用して Payara のクラスタリングを構築する手順について紹介しています。 intra-mart Accel Platform のクラスタ …

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …