PowerApps│Sequence関数とギャラリーを使ったカレンダーをかんたんに作る方法

こんにちは、あんこ先生です。

メニューを作る際、ボタンをたくさん並べてひとつずつ細かく設定していませんか？

例えば月を選択する場合、12個のボタンに何月って打っていくのは骨が折れますよね。

実は、Sequence関数とギャラリーを使えばかんたんに作ることができるんです。

そこで、「メニューを楽に作りたい」、「保守性を高めたい」といった要望を叶えるためにSequence関数とギャラリーを使ったメニューをかんたんに作る方法を紹介します。

この記事を読むことで、Sequence関数の使い方やギャラリーの活用方法を学べます。

Sequence関数とギャラリーを使った選択式カレンダーの作成

日付を選択する場合、年・月・日それぞれが表示されている方が使いやすいですよね。

今回は、３つのギャラリーと２つのボタンで選択式カレンダーを作成してみました。

日部分のみ、曜日を色分けしたかったのでラベルを使って表現しています。

普通に作ると年で５個、月で１２個のボタンが必要です。

ところが、ギャラリーを使うとそれぞれ１個ずつで事足ります。

テンプレートに埋め込むため、色やサイズの変更もひとつずつ行う必要がありません。

具体的な作り方は次の通りです。

年の選択

はじめに最上段、年の部分を作成します。

データソースは本日の日付を基準に前後合わせて５年分としています。

ギャラリーのItemsプロパティは次のコードを記述してください。

//2020,2021,2022,2023,2024のレコードを格納したテーブルが作成されます。
Sequence(5,Year(Today())-2,1)

つづいてボタンですが、これはギャラリーのテンプレートに埋め込みます。

テンプレートに埋め込むことでデザインは統一されたまま、レコードによって参照する値を変えることができるのがポイントです。

例えばボタンのTextプロパティにThisItem.Valueを記述すると、2020から1ずつ増えた値が反映します。

同様にOnSelectも押したボタンによって変数に格納される値が異なります。

//変数_selに日付型"年/月/1"を格納します。
Set(_sel,Date(ThisItem.Value,GalleryMonth.Selected.Value,1))

どのボタンを押したか可視化するため、ColorとFillプロパティも修正しておきましょう。

//Color、選択時白、それ以外はオレンジ。
If(ThisItem.IsSelected,RGBA(255,255,255, 1),RGBA(246, 88, 16, 1))

//Fill、選択時オレンジ、それ以外は白。
If(ThisItem.IsSelected,RGBA(246, 88, 16, 1),RGBA(255,255,255, 1))

以上で年の部分は完成です。

月の選択

次は中段、月の部分です。

データソースは12か月分とします。

Itemsプロパティに次のコードを記述します。

//1-12のレコードを格納したテーブルが作成されます。
Sequence(12,1,1)

こちらもボタンはギャラリーのテンプレートに埋め込みます。

ボタンのTextプロパティについて、そのままでは数値の羅列になるため、次のように記述します。

//Calendar関数に引数を渡しx月を表示させます。
Index(Calendar.MonthsShort(),ThisItem.Value).Value

これで、1月から12月が表示されます。なお、英語圏なら”Jan”, “Feb”といった具合に表示されます。

あとは忘れずに年と同様OnSelectとColor、Fillプロパティも修正しておきます。

//変数_selに日付型"年/月/1"を格納します。
Set(_sel,Date(GalleryYear.Selected.Value,ThisItem.Value,1))

以上で月の部分は完成です。

日の選択

最後に日の部分で、月初から月末まで表示させます。

必ず31日まであるわけではないので、DateDiff関数で当月の日数を調べておきます。

ギャラリーのItemsプロパティには次のコードを記述します。

//1日から月末まで日付型のレコードを格納したテーブルを返します。
DateAdd(_sel,Sequence(DateDiff(_sel,DateAdd(_sel,1,TimeUnit.Months)),0,1))

日の部分は曜日も表示させたいので、テンプレートには、四角形１個とラベルを２個埋め込みます。

四角形は選択箇所の可視化、ラベルは日付と曜日用です。

//可視化用四角形のVisible
ThisItem.IsSelected

//日付用Text
Text(ThisItem.Value,"dd")

//曜日用Text

Left(Text(ThisItem.Value,"ddd"),1)

あとは日付を表示させるテキスト入力を作って完成です。

これで、どこを押しても日付を返します。

今回紹介した方法なら、ボタンを配置しては記述の繰り返しがないので、容易にできたと思います。

修正する際も、テンプレートの中だけで済むため、保守性も高いです。

各ギャラリーの初期値

現時点で、Sequence関数で指定したテーブルのレコードを特定する方法がわかりません。

そのため、Defaultプロパティを指定する方法も思いつきません。

代替手段として、OnVisibleプロパティでギャラリーの該当レコードをSelectする方法で対応しています。

//スクリーンのOnVisible
Set(_sel,Date(Year(Today()),Month(Today()),1));
Select(GalleryYear,3);
Select(GalleryMonth,Month(Today()));
Select(GalleryDay,Day(Today()));

応用│Sequence関数とギャラリーを使ったタブ切り替え

応用してみる

ForAll関数と組み合わせることで、さらに使い勝手が高まります。

下記のように複数項目のレコード化や文字列に加工することもできます。

ForAll(Sequence(5,1,1),
    {
        no:ThisRecord.Value,
        title:"コンテナ"&Text(ThisRecord.Value,"00")&"を開く"
    }
)

これにより、ボタンのTextプロパティに数値以外を指定したり、ボタンに対応したコンテナを表示させることができます。

コンテナ表示を切り替える

５個重ねたコンテナのうち、ボタンに対応したもののみ表示させています。

作り方はかんたん、ボタンのOnSelectとコンテナのVisibleプロパティに次を記述するだけです。

//ボタンのOnSelect
Set(_Container,ThisItem.no)

//コンテナのVisible
_Container=1 //1-5

これでボタンを押せば対応したコンテナのVisibleプロパティがtrueになり、連動します。

コンテナに用途を分けたフォームなどを格納すれば、タブ切り替え機能が実現できますね。

Sequence関数とギャラリーを使ったカレンダーのまとめ

今回はSequence関数とギャラリーを使って選択式カレンダーを作る方法を紹介しました。

作成する過程で、Sequence関数の可能性や、ギャラリーテンプレートの利便性を体感できたと思います。

一工夫するだけで、かんたんかつスマートに、保守性の高いアプリが作成できますね。

早速既存アプリに取り込んでみましょう！

関連記事PowerApps│StartsWith関数で電話帳マルチページをかんたんに作る方法

2022.06.05

ご支援よろしくおねがいします

この記事を気に入ってくださった方、寄付してあげてもいいよという方がいらっしゃっいましたら、ご支援いただけると助かります。

下記リンクからAmazonギフト券で、金額は15円からお気持ちを入力してください。

受取人のメールアドレスは amazon@anko7793.com までお願いします。

メッセージもいただけるとたいへん喜びます。

よろしくお願いします。

Amazonギフト券(Eメールタイプ)