カスタムコンポーネントとは？？
Power Appsのカスタムコンポーネントとは、アプリ内で再利用できる
UI パーツや機能を作成し複数のアプリや画面で活用できる仕組みです。
カスタムコンポーネントを作成することで、開発効率を向上させたり
デザインの統一を図ることができます。
今回作成するカスタムコンポーネント
アプリを作成するときに
別画面に遷移しても共通で使用したいパーツがあったりしますよね？
画面を作成するたびにコピーで配置したり、作成し直すのは手間なので
あらかじめパーツを作ってしまい、複数画面で再利用できると手間が省けてかなり便利になります！
今回は使用頻度が多そうな メニューバー をカスタムコンポーネントで作成したいと思います！
カスタムコンポーネントを使用するメリット
-
開発効率の向上
一度作成したコンポーネントを複数のアプリや画面で
使い回せるため開発時間を短縮できます。 -
UI/UXの統一と品質向上
カスタムコンポーネントを活用すると 統一感のあるデザイン を簡単に実現できます。 -
保守性の向上
カスタムコンポーネントを使うことで、修正や機能追加が 一括で管理 できるようになります。
1か所変更を行うだけで全画面やアプリに適応されるため非常に便利です。
カスタムコンポーネントの作成方法
- Power Appsを開いて左側のツリービューから
[コンポーネント] > [+新しいコンポーネント] を選択します。
-
必要なコントロールを配置して
コンポーネント自体のサイズを使いたいサイズに変更します。 -
今回はアプリの幅いっぱいにして、高さは 70 に設定します。
Container の Height と Widh はそれぞれ親プロパティのサイズに設定します。
- 必要なコントロールが配置できたらカスタムコンポーネントは作成完了です。
この画面にカスタムコンポーネントを配置したいと思います。
- アプリ作成画面に戻りカスタムコンポーネントを配置したい画面で
[+挿入 > [カスタム] > [作成したカスタムコンポーネントの名前] を選択します。
- 作成したカスタムコンポーネントが配置されるので配置は好きなところに設定してください。
カスタムコンポーネント内の設定を変更したい場合は
画面上での設定変更は不可能です。
最初に作成した コンポーネント から変更を行ってください。
カスタムコンポーネントを修正してみる
このカスタムコンポーネントの背景色を変更してみましょう。
変更する箇所は画面のプロパティではなくコンポーネント作成画面から変更を行います。
コンテナーのプロパティから背景色を変更してみましょう。
コンポーネント画面で背景色が変更されました。
では、先ほど画面に配置したカスタムコンポーネントを見に行きましょう。
こちらの画面にも自動で修正が反映されていることが確認できました。
まとめ
Power Apps のカスタムコンポーネントを活用することで、
開発効率の向上・UI/UXの統一・保守性の向上など、多くのメリットを得られます。
カスタムコンポーネントを活用することで、
「同じ機能を何度も作る手間を省く」
「デザインを統一して使いやすいアプリを作る」
「アプリの保守・運用を簡単にする」
ことができます。
業務効率化や開発スピード向上のために
ぜひカスタムコンポーネントを活用してみてください