【Power Apps】モダンコントロールを知る頃

はじめに

Power Appsを二年近く触ってない間にモダンコントロールがメインになっていて、割と使い勝手がいい気がするので個人的に使い方などをまとめていこうかと。
使ったコントロールを随時更新していきたいですが続くかどうか・・・

コントロール

コンテナー

使い方

画面レイアウトでいい感じに画面のテンプレートを作ってくれる項目が増えていますが、これも裏ではコンテナーの組み合わせで作られています。

一番要素の多いサイドバーだとこんな感じ

画面全体の「ScreenContainer」の中にヘッダ用コンテナとボトム用コンテナが入れ子になっています。
例として、フッターを追加するとScreenContainerの下にコンテナを追加する操作になります。

追加直後はバカでかいコンテナが自動で設定されます。サイズ調整方法は後述。

コンテナを入れ子にするのと同様に、コンテナ内に別のコントロールを入れる場合も似たような操作をすればOKです。
ヘッダに何も考えずテキストとボタンを配置したらこのようになります。

レイアウト調整

コンテナそのもの、コンテナ内の要素含めてBootstrapのGridシステムのようにアプリ内の比率で高さや幅を自動調整できます。
例として、先ほど追加したバカでかいフッターの高さを調整します。
フッター用コンテナのプロパティで「最小幅」や高さの自動調整ができます。

意味わからない日本語ですが、「部分を塗りつぶす」が所謂Gridシステム的な指定方法です。
追加直後である上のスクショだと、画面で高さ自動調整になっている要素のなかでの1/2をこのコンテナが占有する設定です。
※分母にあたる部分は設定値に応じて勝手に合計値が入力されます。1:11にしたい場合はもう一方の設定で11を入れる必要があります。

ボトム用コンテナを大きくしてフッターを小さくする場合このような感じ。
これで11:1の比率でボトムとフッターが設定されます。
■ボトム側

■フッター側

ちなみに、何も設定していないヘッダー用コンテナは高さの自動調整がオフになっています。
オフにしているとこの設定の分母に影響されず、高さが一定のままになります。

水平コンテナに関しても同様です。
幅の自動調整を有効にして、テキストを8、ボタンを1に設定するとこんな感じ

タブリスト

基本的にラジオボタンの代わりに使うことが多くなりそうですが、画面遷移用のUIとしていい感じです。

画面遷移

まず、タブリストに表示させる要素を変数として定義します。
画面遷移させる場合アプリ全体で利用するので、App.Formulasで定義します。
※Screenに指定した値は後ほど追加する画面名と一致する必要があります。

TabListItems = [
    {
        Name: "ホーム",
        Screen: HomeScreen
    },
    {
        Name: "案件一覧",
        Screen: ProjectScreen
    },
    {
        Name: "メモ",
        Screen: MemoScreen
    },
    {
        Name: "ユーザー",
        Screen: UserListScreen
    }
];

タブリストのItemsを定義した変数に変更します。

表示されるフィールドをNameに指定します。

OnSelectに画面遷移関数であるNavigateを指定します。
自分自身が選択されている要素のScreenプロパティを指定します。

規定値を指定するDefaultSelectedItemsに現在いる画面のアイテムを指定します。
これを設定しないと遷移先でも別のタブが選ばれたままになります。

これを他の画面にもコピーで配置するとタブリストで画面遷移できるようになります。