はじめに

Power Appsはスピーディーにアプリケーションを作成できる私の大好きな製品です。
しかしながら一からアプリケーションを作ると、GUI形式で画面を構成することが手間に感じます。

GhatGPTやClaudeをはじめとして、~~AI驚き屋さんが拡散しまくっている通り~~コードで作成したほうが速いのでは??という場面も少なくありません。
特に自分がよく使う部品を再利用するという観点で、コンポーネントライブラリを活用することがベターチョイスでしょう。

今回はモダンなカッコよさげな折りたたみできるサイドバーをコンポーネントとして作っていきたいと思います。

コンポーネントライブラリ

コンポーネントライブラリは、複数のアプリケーションで再利用できるハコのようなものです。
こちらで作成・更新された内容は同期され、複数のアプリケーションに機能を共有します。

複数の作成者で共有することができ、いわゆる二度手間を防ぎます。

今回はコチラで折りたたみできるサイドバーを作っていきます。

折りたたみできるサイドバー - Collapsible Sidebar

全てクラシックコントロールを用いて、折りたたみ式サイドバーを作成しました。

サイドバーのコンポーネントをもくもく作っていたら終わっちゃいました（まる pic.twitter.com/XdBOLtOWvy
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) September 1, 2024

ChatGPTの画面構成しかり、このようなレイアウトを採用しているサービスは数多く見受けられます。
見慣れたコンポーネントは、ユーザーにとっての使いやすさを提供することにもつながるのではないでしょうか。

~~(個人的にしょっちゅう作ることがつらい)~~ 頻繁に採用する要素は、コンポーネントとして設けておくことが今後の生産性向上にもつながります。

サイドバー然り、ヘッダーなどよく使うものは、じゃんじゃんコンポーネント化していきましょう。

作者本人の体験として、よくつかうほど再利用できることが望ましいといえます。

機能

サイドバーの機能は主に4つ。

展開・折りたたみができること
メニューをテーブルでカスタマイズできること
カラーやフォントは、入力形式でカスタマイズできること
レスポンシブに調整できること

あまり一画面に要素を詰め込みすぎることも、構成としてアンマッチな気もしますが、サイドバーの選択によって機能が変わる画面も、個人的にはイケてる感じで好きです。

作り方

まずは構成から。

コントロールの構成

CollapsibleSidebar
└── con_sideMenu (垂直コンテナー)
    ├── ico_sideToggle (クラシック アイコン)
    └── gal_sideMenuItems (垂直ギャラリー)
        └── itm_sideMenuItem (GroupContainer: 水平コンテナー)
            ├── icn_sideMenuItemIcon (クラシック アイコン)
            └── lbl_sideMenuItemText (テキスト ラベル)

コントロールこそ少ないものの、各コントロールで設定するプロパティこそ統一性をもたせないと、ゴチャついた見た目になってしまいます。

徹底的に統一させたい部分はパディングやコントロールの位置です。
ここをPower Appsを作る度に毎回設定することが、ぶっちゃけ手間、今すぐにやめたい。

OnSelect プロパティ

画面の折りたたみを制御しているのは、画面上部のico_sideToggle名称のハンバーガーアイコンです。

OnSelectプロパティに下記を仕込みます。

OnSelect

// # Toggles the sidebar expansion state
Set(isSidebarExpanded, !isSidebarExpanded)

ico_sideToggleで画面の展開、折りたたみを定義します。
実はこのコンポーネントで書いているOnSelectは、上記のみ。

あとはカスタムプロパティを活用して、設定値を統一します。

カスタムプロパティ

コンポーネントの特徴ですが、カスタムプロパティを設けることができます。
カスタムプロパティは

入力 : コンポーネントで使用するデータを受け取る
出力 : コンポーネントで使用した値を参照させる

このようなことが実現できます。

`入力`を活用する

まずは入力カスタムプロパティを活用していきます。

カスタマイズ性の高いコンポーネントにしたいため、下記を定義しました。

プロパティ名	データ型	用途
SidebarPadding	数値	コンテンツのパディング
SidebarIconSize	数値	アイコンのサイズ
SidebarMenuTable	テーブル	サイドバーのメニュー項目を定義
SidebarPrimaryColor	色	主要なカラー
SidebarSecondaryColor	色	二次的なカラー
SidebarPrimaryFont	テキスト	フォント

結構モリモリですね。
上記をサイドバー内のコントロールに仕込むことにより、カスタマイズ性を持たせています。

記事の最後にコンポーネントのYAMLソースコードのリポジトリを置いておきますので、どう設定しているかはそちらからご確認ください。

`出力`を活用する

サイドバーの折りたたみ
選択されたメニューとアプリを連動させる

上記を目的に、下記のプロパティを設けています。

プロパティ名	データ型	用途
SidebarWidth	数値	サイドバーの幅を出力、展開または折りたたみの状態に応じて変化
SidebarSelectedText	テキスト	選択されたメニュー項目のテキストを出力

コンポーネントそのものの幅を、コンポーネント内のコントロールから制御することはできません。
そのため、コンポーネントの背景はColor.Transparentで透過させ、伸縮するサイドバーは、con_sideMenuというコンテナーに格納しています

幅(Width)

// Width of the container, adjusts with sidebar expansion
Max(76, If(isSidebarExpanded, App.Width * 0.2, 96))

アプリで活用する

実際にアプリケーションで活用するときは、このコンポーネントを、コンテナーに格納して使ってみてください。

コンテナーの種類は何でも構いません。

例のアプリケーションでは、水平コンテナーにコントロールを格納します。
水平コンテナーに、コンポーネント全てが表示される形で配置し、幅を下記に設定すると

幅(Width)

CollapsibleSidebarDemo.SidebarWidth

コンポーネントの出力プロパティから、コンポーネントの親のコンテナーの幅を定義できます。
この設定によりサイドバーが伸縮します。

幅(伸縮可能)はオフにすることを忘れずに実施してくださいね！

アプリケーションでカスタマイズする場合は、フォントを調整したり、アプリのテーマカラーに合わせたりすることが可能です。

おわりに

あくまで「個人的に調整できればいいな」と思っている範囲の項目を設けておりますので、状況に応じてカスタマイズしてください。

繰り返しになりますが、クイックにアプリケーションを作成できるPower Appsでも同じ作業を繰り返し、忙殺されるということは、元も子もありません。

短期的に見れば効果が薄いものの、設けることによって累進的に効果を発揮するものですので、ぜひコンポーネント活用を進めてみてください！

本日も読んでくださり、ありがとうございました🐟✨

Power AppsをPC(ブラウザ)でユーザーに使ってもらうときのTips。共有するAppsのリンクに &source=portal&hidenavbar=true を付けると、
- レイアウトが開発で作っているときのアプリの画面と同様になり
- またPower Apps特有のナビゲーションバーが隠れます pic.twitter.com/3vLhVzxiSh
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) September 1, 2024