ボタン設定

追加

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

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

ボタンが追加されます。（図3）

ワンポイント

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

移動

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

タブ間の移動

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

背景色

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

ワンポイント

入力欄に "#" で始まる16進数の色を直接、指定することもできます。

文字色

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

ワンポイント

入力欄に "#" で始まる16進数の色を直接、指定することもできます。

文字の変更

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

改行を含める

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

制約

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

アイコンの変更

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

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

FontAwesomeサイト（画像は2018年8月時点のもの。表示内容は変わっている可能性があります。）

Font Awesome対応バージョンについて

Wagbyでは、Font Awesome の対応バージョンは5系です。6系は未対応です。（2022年3月現在）
5系と6系では記法が異なるため、6系の記法をコピー&ペーストしてもWagbyには反映されません。
そのため、アイコン検索時にはバージョン指定欄（下図赤枠部）で5系を指定するようにしてください。

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

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

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

Font Awesome サイトについての補足

図13にある「FontAwesomeアイコンを表示」ボタンで表示されるアイコンギャラリーは、Free 版のアイコンとなっています。自由に利用可能です。（カテゴリーで "Pro Only" を選択するとアイコンがグレーアウトされて表示されますが、こちらは有料版のアイコンとなっています。）
Font Awesome のアイコンは Web フォントであるため（画像ファイルと異なり）解像度という概念はありません。
アイコンサイズは内部で3倍サイズを意味する "fa-3x" が設定されます。現在の Wagby のメニューに最適化しているため、この指定を変更することはできません。

ツールチップ

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

画像を指定する

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

準備

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

注意

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

定義方法

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

注意

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

CSSを指定する

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

仕様・制約

ボタンの中のアイコン部分のみ指定画像に置き換えることはできません。メニューボタンが画像で置き換えられます。
利用する画像のサイズの制約はありません。
「戻る」ボタンに画像を設定することはできません。（「戻る」ボタンは文言を変更することもできません。）

プロパティ

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

削除

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

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

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

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

例

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

仕様

「検索・一覧表示」画面を作成する設定を行なっている場合に、「サービス」タブが（標準のタブとして）追加されます。
~~親子モデル関係にある、子モデルの新規登録はメニューに追加できません。~~ R9.0.3 で追加できるようになります。
既存モデルをコピーしてモデル名を変更した場合、メニューには新しいモデル名は反映されません。コピー元のモデル名が使用されますので、ご自身で修正ください。

トラブルシューティング

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

設定を変更したときは「更新」ボタンを押下してください。このボタンを押さないと、設定は反映されません。

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

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

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