PowerAppsでボタンをコンポーネント化して実装していきたいと思います。
コンポートライブラリを作成する
PowerAppsを開いてコンポートライブラリを作成していきます。
以下画像の手順で、コンポートライブラリを作成してください。
ボタンを作成する
🔷ボタンの追加
①コンポーネント名を付けておくと分かりやすいので、最初に命名しておくことを推奨します。
今回は[ButtonComponent]という名前にしました。
②、③の順番で、ボタンを[ButtonComponent]に追加してください。
🔷ボタンのトリミング
ボタンの背景をトリミングして、[ButtonComponent]の要素をボタンのみにしていきます。
①ボタンを選択して、左上に移動させます。
②ボタンのサイズが右側に表示されていると思うので、確認してください。
①[ButtonComponent]のプロパティに先ほど確認したボタンのサイズを入力すると、画面がボタンの形にトリミングされます。
初期設定でふちが丸くなっているのを解除するには、ボタンを選択し、プロパティから境界半径を10から0に変更してください。
🔷 ボタンコンポーネントの設定
コンポーネント化したボタンのプロパティを設定をしていきます。
～ボタンのテキストを変更するプロパティを追加する～
①[ButtonComponent]から、＋新しいカスタムプロパティを押下して、プロパティの設定を行います。
表示名・名前：分かりやすい名前を命名してください
プロパティの型：入力
データ型：テキスト
②でカスタムプロパティを作成したら、ボタンを選択します。
ボタンプロパティで[Text]を選択し、値に[ButtonComponent.ButtonText] *太字部分は先ほど作成したカスタムプロパティ名を指定します。
～ボタン押下時の処理を指定するプロパティを追加する～
ボタン押下時の処理を指定するプロパティの追加については事前にアプリの設定が必要となります。
以下画像の手順で設定画面を開き、拡張コンポーネントのプロパティをオンにしてください。
事前準備はこれでOKです。
ボタンのテキストを変更するプロパティを追加した時と同じように、＋新しいカスタムプロパティを押下してカスタムプロパティを追加していきます。
拡張コンポーネントのプロパティをオンにしたことにより、[プロパティの型]から入力、出力の選択肢が消え、新しく4つの項目が追加されました。
表示名・名前：分かりやすい名前を命名してください
プロパティの型：イベント
データ型：イベントプロパティの場合、データ型は関係ないのでどれを選んでもOK(なはず)
カスタムプロパティが作成できたら、ボタンを選択します。
ボタンプロパティで[OnSelect]を選択し、値に[ButtonComponent.ButtonOnSelect()] *太字部分は先ほど作成したカスタムプロパティ名を指定します。
これでコンポーネントの設定は完了です。
見た目の設定などはお好みで行ってください。
最後に、【上書き保存】をして、【公開】してください。
※公開を実施しないとアプリ側でうまく反映されなかったりします。
コンポーネント化したボタンを実装する
それでは、アプリからコンポーネント化したボタンを呼び出して実装してみます。
以下の手順で作成したコンポーネントを選択し、インポートします。
＋挿入から、ライブラリコンポーネントを展開し、インポートしたButtonComponentをクリックすると、画面にボタンが追加されました！
上で設定したカスタムプロパティを使用して、ボタンのテキストを変更してみます。
先ほどの～ボタンのテキストを変更するプロパティを追加する～で作成したButtonTextプロパティを選び、値を"テキスト"から"click"に変更しました。
きちんとボタンのテキストが変更されましたね。
続いて、～ボタン押下時の処理を指定するプロパティを追加する～で作成したButtonOnSelectプロパティで押下時の処理を書いてみましょう。
ButtonOnSelectプロパティを選択し、Navigate関数を使用して、成功画面に遷移する処理を記述しました。
画面右上の▷アプリのプレビューボタンをクリックして、きちんと動くか確かめてみます。
ボタンをクリックしてみると……
この通り、成功画面に遷移することができました！！
おわりに
今回はPowerAppsでボタンをコンポーネント化して実装してみました！
読んでいただきありがとうございました。
お役に立てれば幸いです。