ごきげんよう、百合宮桜（Miyu）です！
こちらの記事で取り上げた理想的な入力フォーム画面では、画面上部にこのツールバーを配置して、新規作成と削除がスムーズに行えるようにしています。
今回は上図のような画面を作るためのツールバーの調整方法を解説します。
ツールバーとは？
ツールバーはモダンコントロールとして追加されたコントロールの1つで、よく使う機能をまとめたコントロールです。既定では入力フォームとの利用を想定した New や Edit が用意されていますが、中身を変えることもできます。
レスポンシブルなアプリでは画面の幅に合わせて見せ方が自動で変わります。
-
パソコンの場合
-
スマートフォンの場合
モダンコントロールなので、現時点では設定 > 更新 > モダンコントロールとモダンテーマを オン にすることで利用できます。
見た目の調整方法
概要
各ボタンの名称や色の設定方法を説明します。
Items プロパティを確認すると、既定では以下のような式が入っています。
Table(
{
ItemKey: "new",
ItemDisplayName: "New",
ItemIconName: "Add",
ItemAppearance: "Primary",
ItemIconStyle: "Regular",
ItemTooltip: "Add new item"
},
{
ItemKey: "edit",
ItemDisplayName: "Edit",
ItemIconName: "Edit",
ItemAppearance: "Subtle",
ItemIconStyle: "Regular"
},
{
ItemKey: "delete",
ItemDisplayName: "Delete",
ItemIconName: "Delete",
ItemDisabled: true,
ItemAppearance: "Subtle",
ItemIconStyle: "Filled"
},
{
ItemKey: "info",
ItemDisplayName: "Info",
ItemIconName: "Info",
ItemAppearance: "Subtle",
ItemIconStyle: "Regular"
}
)
これは Table 関数を利用して、以下のようなテーブルを作って、ツールバーのデータソースにしているといった感じです。
1行目（太字の部分）が項目名で、2行目以降がツールバー内の各ボタンのデータです。項目名はツールバーのプロパティの名前で、このデータで各プロパティを設定しているといった状態です。空白の部分は何も設定されていません。
| ItemKey | ItemDisplayName | ItemIconName | ItemDisabled | ItemAppearance | ItemIconStyle | ItemTooltip |
|---|---|---|---|---|---|---|
| new | New | Add | Primary | Regular | Add new item | |
| edit | Edit | Subtle | Regular | |||
| delete | Delete | TRUE | Subtle | Filled | ||
| info | Info | Info | Subtle | Regular |
各プロパティの意味は次の通りです。
| プロパティ名 | 役割 | 備考 |
|---|---|---|
| ItemKey | 各ボタンの一意な識別子 | |
| ItemDisplayName | 各ボタンの表示テキスト | |
| ItemIconName | 各ボタンの表示アイコン。空白の場合は何も出ない | 利用できるアイコンはモダンコントロールのアイコンのみ。 |
| ItemDisabled | 各ボタンの無効化。Trueだと無効になり、操作できなくなる。空白の場合、False と認識される | |
| ItemAppearance | 各ボタンの種類。 | モダンコントロールのボタンと同様の種別が利用できる |
| ItemIconStyle | 各ボタンのIconStyle。種別はRegular と Filled の2種類で、Regularはアイコンの縁取り、Filled は塗りつぶしです | ココだけモダンコントロールのボタンとは異なるので注意！ |
| ItemTooltip | 各ボタンにマウスホバーした時に出てくる説明文。空白の場合は何も出ない |
ItemIconStyle の種別の違いは下図の通りです。
ItemTooltip は下図のような形で表示されます。
なので、見た目を制御するには Items プロパティの中にある Table 関数の式に入っている値を編集すれば良いということです。次からは想定されるカスタマイズ方法を説明します。
ボタンの表示テキストの変更
New や Edit といった各ボタンの表示テキストを変更する場合は、Item プロパティ内の式から ItemDisplayName を変更します。
各ボタンのアイコンの変更
アイコンを変更したい場合は Item プロパティ内の式から ItemIconName を変更します。
アイコンの名前が分からない場合は以下の手順で調べることができます。
-
モダンコントロールのボタンを挿入する
-
アイコンプロパティのプルダウンで使いたいアイコンを選択
-
アイコンの名称を確認
※画面上部のプロパティからコピーすると正確です。
ボタンの有効化 / 無効化の制御
各ボタンは既定で有効化されていて、ItemDisabled が True のものだけが無効化される仕組みです。
無効化は、とある条件の時だけ無効化したいという要件がほとんどだと思います（だってずっと無効だったらボタンを置いておく必要性ないもの……）このようなケースの場合は ItemDisabled を変数でコントロールする必要があります。
こちらのスクリーンショットで _locMode というコンテキスト変数の値が edit だった時だけボタンを有効化し、edit 以外の値の場合はボタンを無効化するという制御をしています。
変数 _locMode には各ボタンをクリックした時に、そのボタンの ItemKey を入れるように設定すると、このような制御が実現できます。
ボタンをクリックした時の処理は OnSelect プロパティなので、以下のように変数の更新を仕込んでいます。
UpdateContext({_locMode:Self.Selected.ItemKey});
クリックしたボタンによって処理を変える方法
ツールバーの各ボタンをクリックした時の処理は OnSelect プロパティに書きます。各ボタンに対して OnSelect プロパティがあるのではなく、ツールバーに対して OnSelect プロパティがあるだけなので、どのボタンを押したら、どのような処理をするかを Switch 関数で制御する必要があります。
既定では以下のような式が入っていますので、これをご自身の要件に合わせてカスタマイズすれば良いと思います。
私が1つ前の記事で作っていた入力フォームの場合は以下のようにカスタムしています。
Switch(
Self.Selected.ItemKey,
//Newボタンを押したとき
"new",
//フォームを新規作成モードにし、ギャラリーの選択を解除
NewForm(フォーム名);Reset(ギャラリー名),
//Deleteボタンを押したとき
"delete",
//ギャラリーで選択＆フォームで表示されているデータを削除
Remove(主催一覧,ギャラリー名.Selected)
)
まとめ
いかがでしたか？
従来、このようなツールバーを再現するにはボタンコントロールを複数配置して、グループ化して……とかなり手間がかかっていました。しかし今回ツールバーがコントロールとして実装されたことで、開発工数を大幅に削減できるようになりました。
ぜひ使ってみてくださいね！！