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

アイキャッチ




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

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

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

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

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

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

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

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

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

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

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

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

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

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


年の選択

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

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

ギャラリー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))

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

//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”といった具合に表示されます。

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

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

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


日の選択

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

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

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

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

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

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

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

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

//曜日用Text

Left(Text(ThisItem.Result,"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プロパティに数値以外を指定したり、ボタンに対応したコンテナを表示させることができます。


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よろしくお願いします。

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



6件のコメント

すみません。スクリーンの画面を表示できたのですが、最初からの設定が具体的にどうやればいいのか
手順が欠けているように見えるためあれこれ調べてますが進めていません。
大変申し訳ないのですが、もう少し具体的な手順をの設定を記載していただくことはできないでしょうか。

質問ありがとうございます。
ギャラリーそのものは完成していて、スクリーンのOnVisibleで年月日よ初期値が取れないということでしょうか?

最近Appsに触れ始め、いつも参考にさせていただいております。ありがとうございます。

こちらのカレンダーの作成ですが、何度試してみても、スクリーンのonVisibleの動作が想定通りに動きません。
具体的には、年と月は今日の日付になるのですが、日にちのギャラリーは何も表示されず、非表示のような状態です。
その後、年や月をクリックすると日にちのギャラリーが表示されます。(日にちは当然ですが1日が選択されます)

ギャラリー名は以下の通りで、記事と同じにしてあります。
GalleryYear
GalleryMonth
GalleryDay

どこを見直すべきか教えてください。
よろしくお願いします。

ご質問ありがとうございます。
なぜかOnVisibleでSelect関数後の処理がうまくいっていないようです。
応急処置として、OnVisibleで直接変数を作成するよう記事に追記しましたので試してみてください。

ご返信ありがとうございます。

①_selの値を取得してみたところ、空でした。
そのため、スクリーンのonVisibleに
Set(_sel,Today());
を追加してみました。

結果、_selの値は本日(2022年9月22日)になり、
GalleryDayの表示は成功しました。
ただ、日付が22~21となり、1始まりではなくなってしまいました。
選択されているのは22日です。
※年月をクリックするすると1始まりになります

②Navigate関数でスクリーン行きした結果、
①の修正前は非表示のまま、①の修正後は22日始まりの状態です。

OnVisibleを修正して、1日始まりにする方法はございますか?
よろしくお願いします。

すみません、OnVisibleのコードサンプルが誤っていました。
下記を追加して実行してみてください。
Set(_sel,Date(Year(Today()),Month(Today()),1));

コメントを残す

メールアドレスが公開されることはありません。

ABOUT US
七草あんこ
非IT系中間管理職やってます。社命によりoffice365を主軸とした業務改善プロジェクトメンバーに任命されたことでPowerAppsと出会えました。いまではビジネス・プライベートを問わず、欠かせないツールになっています。導入初期やアプリ作成時に遭遇した諸問題の解決法とサンプルアプリの作り方を紹介していきます。主にTwitterで情報収集しているので不明点など呟いているとお邪魔するかもしれません。