CookBook

IM-BloomMaker サイドメニューの使い方

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

このCookBookでは、2020 Summer から利用可能になったサイドメニューエレメントの使い方について紹介しています。

エレメントの概要

サイドメニューエレメントは、「intra-mart Accel Platform Slim Side Menu テーマ」利用時に表示されるサイドメニューと同様の機能を持つエレメントです。
2020 Summer で追加されたコンテンツ種別「Bulma」を使用して作成した画面にはテーマが適用されないため、テーマが提供しているグローバルナビやマイメニューなどの機能を利用することができません。
サイドメニューエレメントを利用することにより、テーマが提供している機能と同様の機能が利用可能になります。
Slim Side Menu テーマの詳細については以下のドキュメントを参照してください。
intra-mart Accel Platform テーマ仕様書-Slim Side Menuテーマ

エレメントの制限事項や注意点

認可による機能の制限について

サイドメニューエレメントでは、認可による機能の制限を行っていません。
そのため、アクセス権限のない画面への遷移や機能を利用しようとした場合、403 エラーが発生します。

スマートフォンでサイドメニューエレメントを利用する時の制限について

スマートフォンではマイメニュー機能は利用できません。

Slim Side Menu テーマのサイドメニューとの差異について

  • サイドメニューエレメントには文字サイズ変更機能はありません。
  • サイドメニューエレメントにはヘルプ機能はありません。

上記以外にもSlim Side Menu テーマのサイドメニューと動作が異なる箇所があります。

エレメントの利用方法

  1. コンテンツ種別「Bulma」のコンテンツを作成する
  2. 「サイドメニューコンテナ」エレメントを配置する
  3. 「サイドメニューコンテンツ」エレメントの配下にエレメントを配置する

1. コンテンツ種別「Bulma」のコンテンツを作成する

サイドメニューエレメントは、コンテンツ種別「imui」以外を使用時に利用できます。

  1. コンテンツ一覧画面を表示し、「コンテンツ新規作成」ボタンをクリックしてください。

  2. コンテンツ種別のプルダウンから「Bulma」を選択してください。

  3. その他の項目に任意の内容を入力して「登録」ボタンをクリックしてください。

2. 「サイドメニューコンテナ」エレメントを配置する

  1. 前項で作成したコンテンツのデザイナ画面を開いてください。

  2. パレットの「レイアウト」カテゴリ内の「サイドメニューコンテナ」エレメントを配置してください。

3. 「サイドメニューコンテンツ」エレメントの配下にエレメントを配置する

「サイドメニューコンテンツ」エレメントの配下にエレメントを配置することでサイドメニューのある画面を作成することができます。
作成したい画面に必要なエレメントを配置して画面を作成してください。

「サイドメニューコンテナ」エレメントを配置しているコンテナページでは、「サイドメニューコンテンツ」エレメントの配下以外にエレメントを配置しないでください。
アプリケーション画面のレイアウトが崩れる可能性があります。

サイドメニューエレメントはプレビュー画面、および、アプリケーション画面では以下のように表示されます。

プレビュー画面

アプリケーション画面

プレビュー画面では、誤って他の画面に遷移したりログアウトしてしまうのを防ぐため、サイドバーの開閉ボタンやアイコンは動作しないようになっています。

-CookBook
-

執筆者:


comment

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

関連記事

no image

IM-BloomMaker でページ切り替え時にアニメーションを付加する方法

このCookBookではエレメントの固有IDとCSSエディタを組み合わせ、「ページを開く」アクションでページ切り替え時に、横方向にスクロールするようなアニメーションが行われる画面を作成していきます。 …

no image

IM-BloomMaker 「外部リソース埋め込みコンテナ」エレメントを使用してパブリックストレージ上のファイルを閲覧する画面を作成する方法

このCookBookでは、2021 Spring でリリースした「外部リソース埋め込みコンテナ」エレメントの利用方法について説明していきます。 「外部リソース埋め込みコンテナ」エレメントはファイルのド …

no image

Payara で Java のリモートデバッグを行う

この CookBook では、Payara のリモートデバッグを行う手順について紹介しています。 レシピ Payara を設定する e Builder を設定する リモートデバッグを行う 1. Pay …

no image

No.7 Excel 出力 → 他システム(別サーバ)連携

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、ファイルサーバ等他のサーバと連携し、別サーバ上のファイルを更新できます。 ロジックフローの …

IM-BloomMaker 日付入力の preserveTime プロパティを利用して時刻入力に同一の変数を指定する方法

このCookBookでは、2020 Winter でリリースした「日付入力」エレメントと、2022 Winterでリリースした「時刻入力」エレメントを同一の変数に対して利用する方法を説明します。 「日 …