Power Apps カスタムコンポーネントで使いまわせる部品をつくってみる｜ここからここまで日付選択コントロール

2021.08.20

最近カスタムコンポーネントを使って部品を作ることが増えてきたので、簡単なサンプルコンポーネントを作ってみた。

スポンサーリンク

カスタムコンポーネントとは

カスタムコンポーネントは再利用できる部品のことで、一度作ってしまえば色んなキャンバスアプリで使いまわすことができる。

同時に編集できないPower Appsでは、複数人開発とかでカスタムコンポーネントを使うことが多いイメージで、

Aさんはこの部品、Bさんはこの部品、Cさんはメインアプリへ部品を組み込む！

みたいに手分けして作業をすることもできる。

キャンバス コンポーネントの概要 - Power Apps
キャンバス アプリ用の再利用可能なコンポーネントを作成する方法について説明します。
learn.microsoft.com

今回作るもの

今回はそんなカスタムコンポーネントを使って「ここからここまでカレンダー」を作ってみる。

イメージはこんなやつで、

この日付からこの日付までを選ぶことができて、選んだ日付の差分を返してくれたりするイメージ。

事前準備

まずはコンポーネントタブを開いて、「新しいコンポーネント」を選択。
コンポーネントの名前を適当に変えて、DatePickerとボタンを使って見た目を整えていく。
※今回ボタンは角丸のボーダーを表現するだけのもの。特にクリックしても何も起きない。

そしたらこのコンポーネントに色々と機能を加えていく。

入力プロパティの作成

まずは入力プロパティの作成。

入力プロパティは、このコンポーネントを使う人がこのコンポーネントに値を指定したいときに使うプロパティ。

Defaultの開始日と終了日

まずは開始日と終了日のデフォルトを指定できるように、プロパティを2つ作成する。

「新しいカスタムプロパティ」を押して、デフォルトの開始日をこんな感じで作成する。
同様にデフォルトの終了日もこんな感じで作成。

2つの入力プロパティができたら、これらをコンポーネントに組み込んでいく。

まずはデフォルトの開始日プロパティを、左側のDatePickerのDefaultプロパティにこんな感じで入れる。
続いてデフォルトの終了日プロパティを、右側のDatePickerのDefaultプロパティにこんな感じで入れる。

これで、デフォルトの開始日と終了日を指定するプロパティの実装は完了！

キャンバスアプリに作ったコンポーネントを配置して、今作った2つのプロパティを指定すると、開始日と終了日がコンポーネントに反映される！

日付フォーマット文字色

せっかくなので、日付を表示するフォーマットを指定できるようにしたい！

ということで、こんな感じでFormatプロパティを作成して、
コンポーネントのFormatプロパティの規定値を設定。
そしたら、2つのDatePickerのFormatプロパティに、今作ったプロパティをこんな感じで入れる。
またキャンバスアプリに戻って、ToFromCalendarコンポーネントのFormatプロパティに値を入れてみると、両方のDatePickerの表示が変わる！

文字色

おまけで文字色も指定できるようにしてみる。こんな感じでColorプロパティをコンポーネントに作成して、
2つのDatePickerのColorプロパティにこんな感じで入れる。
キャンバスアプリ側でColorを指定してみると、コンポーネントの文字色が変わる！

出力プロパティ

そしたら最後に、出力プロパティを作成する。

出力プロパティは、このコンポーネントを使う人にこのコンポーネントが値を提供したいときに使うプロパティ。

開始日と終了日

まずはこのコンポーネントを使うユーザーが選んだ開始日と終了日を返すプロパティをつくる。

まずは「開始日」出力プロパティをこんな感じで作成。
同じように「終了日」出力プロパティを作成。
2つのプロパティができたら、このコンポーネントを使うキャンバスアプリに渡したい値（今回は2つのDatePickerのSelectedDate）を設定する。
そうすると、こんな感じでキャンバスアプリから選択された日付にアクセスできるようになる。

2つの日付の差分を日単位で返すプロパティ

続いて選択された開始日と終了日の差分を日単位で返してくれるプロパティを作成する。

こんな感じでプロパティを作成し、
DateDiff関数を使用して、2つのDatePickerのSelectedDateの差分を返す。
すると、キャンバスアプリ側で選択された2つの日付の差分を簡単に使えるようになる！

出力プロパティに「開始日」と「終了日」があるので、このコンポーネントを使う側のキャンバスアプリに計算させてももちろんいいんだけど、

このコンポーネントを使うってことはこの値は欲しいよね！

みたいな値は出力プロパティとして返してあげると、使う側が便利！

今回作った機能以外にも、

  • 開始日が終了日より後に（終了日が開始日より前に）ならない機能
  • カレンダーが「横並び」か「縦並び」か選べるプロパティ

とか色々と機能を追加して、再利用可能なより便利な部品を作れるのが、カスタムコンポーネントの素晴らしいところかなぁと！

コメント

タイトルとURLをコピーしました