サポート > リポジトリ > メニュー > ボタン設定

タブ内のメニューデザイン方法を説明します。

「メニュー」設計画面から「ボタン設計」を開きます。(図1)

図1 ボタン設計

追加できるボタンが、モデル毎に用意されています。ここでは顧客モデルの新規登録ボタンを追加してみます。(図2)

図2 新規登録ボタンを追加する

ボタンが追加されます。(図3)

図3 ボタンが追加された
詳細、更新、削除のボタンは追加できません。これらの画面はパラメータとして "主キー" が必要なため、別画面から遷移させることになります。

ドラッグ&ドロップでメニューの位置を変更することができます。(図4,図5)

図4 メニューボタンの位置を変更する
図5 顧客新規登録を先頭に移動

タブ間の移動

あるタブに設定しているメニューを、他のタブに移動する場合は、一旦削除してから他のタブにメニューを追加する操作を行ってください。

はじめに、変更したいメニューボタンを選択します。(選択されたメニューの背景が青くなっています。)
次にボタン設定内の「ラベル・色設定」を開きます。ここで「背景色」を開き、色を選択します。(図6,図7)

図6 背景色の設定
図7 背景色が変更された
入力欄に "#" で始まる16進数の色を直接、指定することもできます。

ボタン設定内の「ラベル・色設定」から「文字色」を開きます。色を選択します。(図8,図9)

図8 文字色の設定
図9 文字色が変更された
入力欄に "#" で始まる16進数の色を直接、指定することもできます。

ボタン設定内の「ラベル・色設定」から「ラベル」を開きます。文字を入力して「更新」ボタンを押下します。(図10,図11)

図10 ラベルの設定
図11 文言が変更された

改行を含める

ラベルに改行を含めることもできます。(図12)

図12 ラベルに改行を含める

制約

  • 「戻る」ボタンの文言を変更することはできません。

アイコンクラスを指定することで、メニューのアイコンを変更することができます。
Wagbyのメニューアイコンは Font Awesome サイトが提供する Web アイコンフォント(Web ブラウザで文字と同じように表示できるアイコン)を利用しています。

図13 アイコンクラスの設定

"FontAwesomeアイコンを表示" ボタンを押下すると、別タブで Font Awesome のサイトが開きます。

図14 Font Awesome サイト(画像は2018年8月時点のもの。表示内容は変わっている可能性があります。)

ここでは適当なアイコンを選択してみます。

図15 アイコンを一つ選択する

アイコンの下部に class ではじまる指定方法が明記されています。この文字列をコピーします。

図16 class 指定をコピーする

Wagby Designer に戻ります。アイコンクラスに上の文字列をはりつけて、更新ボタンを押下します。するとアイコンが変わります。

図17 アイコンを変更する

ツールチップとは、メニューにカーソルをのせると、説明文字を表示させる機能です。

図18 ツールチップの指定

メニューのアイコンを指定することができます。

図19 アイコンに変更した例

準備

customizeフォルダ内のwebappフォルダに「img」という名前のフォルダを用意します。そこに表示したい画像ファイルをコピーしてください。(例では menuicon1.jpg というファイルを用意しています。)

図20 メニューアイコンを用意する
ビルド後の img フォルダにはシステムが標準で提供する画像も含まれます。ファイル名が重複しないように配慮してファイル名を決めてください。

定義方法

上記に用意したファイル名を指定します。img フォルダから始まるようにします。

図21 パスを指定する
Designer のメニュー設定画面ではアイコンは表示されません。ビルド後のアプリケーションで確認するようにしてください。

CSSを指定する

ここで指定した CSS は、メニューアイコンを表示する img 要素の style 属性に反映されます。例えば width を指定することで、アイコンの表示サイズを変更することができます。

図22 widthを80pxに指定する
図23 アイコンサイズが変更された

制約

  • 「戻る」ボタンに画像を設定することはできません。(「戻る」ボタンは文言を変更することもできません。)

「プロパティ」欄で、どのモデルについてのメニューかを確認することができます。

図24 プロパティの確認

メニューボタンの右上にある「×」アイコンをクリックするとメニューを削除することができます。図20のように確認ダイアログが開きます。

図25 メニュー削除の確認

ダイアログで「OK」ボタンを押下すると、メニューが削除されます。

図26 メニューが削除された

削除されたメニューを復活させる

メニューを再び追加することで、削除されたメニューを復活させることができます。

図27 再び追加する (1)
図28 再び追加する (2)

実行イメージを図17に示します。

図29 例

「サービス」タブが生成される条件

「検索・一覧表示」画面を作成する設定を行なっている場合に、標準のタブとして追加されます。

設定したメニューがアプリケーションに反映されない

  • 設定を変更したときは「更新」ボタンを押下してください。このボタンを押さないと、設定は反映されません。
    図30 更新ボタン
  • メニューの設定情報の保存は、メニュー設計画面から(モデル等の)他の画面へ移動した際に行なわれます。この時「メニュー」へマウスポインタを重ねると "メニューデータ送信中" という表示が行なわれます。
    メニュー情報が多い場合、この反映処理には十数秒以上の時間を要することがあります。 メニュー設定後、ビルド画面を表示して「ビルド実行」ボタンが押下可能になっていれば反映処理は完了しています。

設定したメニューがアプリケーションで表示されない

表示されないモデルの「権限」が空になっているか、あるいはメニュー権限が無効となっている可能性があります。 詳細は"認証・認可 > メニューの制御"をお読みください。

Wagby Developer Day 2018