見出し画像

Power Apps 教えてAkiraせんせー！⑧

ちっぴ

@akira_365🐟さんの講習8回目が終了しました！
変数を実際に使っていきます✨
コントロール名が何がなんだかわからなくなってきてます😅

7回目はこちら

変数を使って月を切り替える


今日の日付を表示させるLabel コントロールとして作成したlblCalendarDay

ひとマスの日付

「2022年8月28日」と表示されていますが、先月のカレンダーならいくつなのか、来月のカレンダーならいくつなのか、そこさえ定義すれば、今月でも先月でも再来月でもどれでも定義できます。
どこを変えてあげると先月になるのか、どこを変えると来月になるのか、ということで元の式をみていきます。

ThisItem.Value は galCalender で定義した数字

これはどの月だとしても変わらないフェース。

変数はどこかというと・・・

ほぼ変数？・・・

Today() さえ決まれば、他はそのdayを辿るので、Today() をひと月遅らせれば来月のカレンダーになり、Today() をひと月前にすれば先月のカレンダーになる。ということで、Today() を変数として定義する。

UpdateContext関数

📅が置かれている ViewScreen 画⾯に来たらデフォルトで「今⽉」を⽰しておきたいので、 ViewScreen の OnVisible プロパティ（この画面が表示されたときという動的アクション）に変数を宣⾔します。
変数名：locCalendarDay
OnVisible＝UpdateContext({locCalendarDay:Today()})

定義された画⾯でのみ、存在できる変数をコンテキスト変数といい
画⾯が切り替わらない限り使⽤が可能
文章にすると・・・「OnVisible したときに locCarendarDay = Today() です」

ViewScreen が表示された時は必ず locCarendarDay は今⽇の⽇付になる、と⽰すことができます。

捨てLabel に locCarendarDay を仕込んで、動作のテストをしてみました！
Screen を一度別のものに切り替えて、OnVisible を発動させる⭐


検索して置換

lblCalendarDayの中身のToday()を置換していきます。
①数式バーを展開し『検索して置換』をクリック
②左側に検索/置換バーが出てくるので▷をクリック
③上部に「Today()」と⼊⼒、下部に「locCarendarDay」と⼊⼒
④すべて置換

これは便利ですね～
⾊を変えた際の lblCarendarValue の Fill も置換するのを忘れないように！


「選択した⽉を表⽰しているラベル」の左右にアイコン配置

月を切り替えるためのアイコンを配置するのですが、オーサリングメニュー→挿入→アイコンの中にはとてもたくさんのアイコンがあります。
最初に適当なアイコンを配置し、後からプロパティで月の切り替えに合うアイコンを検索します。
左のアイコン名：icoBefore
右のアイコン名：coAfter

左：Icon.ChevronLeft　右：Icon.ChevronRight


表示月を替える

シェプロンレフトをクリックするとひと月引きたい、シェプロンライトをクリックするとひと月進めたい、ここで UpdateContext を使って変数である⽇付を変更する仕組みを作る。

※Power Appsでは、UpdateContext関数とSet関数の2つの変数があります。
　型が異なるので定義し直す場合は、同じ関数を使用する。

icoBefore⭐＜
OnSelect=UpdateContext({locCarendarDay：DateAdd(locCarendarDay,-1,Months) })

定義されるのは「今の locCarendarDay に-1を足し算する、単位は Months」
日付の足し引きは DateAdd 関数（マイナスは数値）

シェプロンライトでは、1か月足すので・・・（プラスは演算子）
icoAfter⭐＞
OnSelect=UpdateContext({locCarendarDay : DateAdd(locCarendarDay,1,Months) })

🐟良い点は、日付型で足し算・引き算を行うので、年まで追従してくれる


カレンダーの工夫


選択した日付に〇がつくようにする

まず、galCalender の Template を選択した状態で
オーサリングメニュー→挿入→図形から円を選択します。

Gallery に「円」が入ります💦

名前：shpSelect
プロパティを変更していきます。
色：透明
罫線：5　罫線の色：オレンジ

すべての Gallery のマスに○💦


IsSelected

shpSelect の プロパティにある「表示」をオンにすれば表示、オフにすれば非表示となる。
今はすべて「表示」オン・・・選択されているものがTrueとすれば、そのマスを選択したときにちゃんと表示してくれる。

Visible = true・・・表示 　　　　　Visible = false・・・非表示

Visible = ThisItem.IsSelected
true か false かですが、IsSelectedとは
それ自身が選択されているなら表示(true) 、そうでないならば非表示(false)

IsSelected　選択されたマスが true     選択されていないマス false
Visible = true・・・表示 　Visible = false・・・非表示　と繋がる

true 、false の関係が省略されて、クリックしたところに〇がつくようになります。


『○月』と表示

前回、選択されている日付を表示するLabel コントロールを配置しました。
コントロール名を lblSelectedday とし、『2022年9月』と表示したかったのですが、変数を使わないと『○月』という表示にするのは難しいため、日付を表示で進めてきました。
コントロール名を lblVisibleMonth へ変更し、変数から取っていきます。
Text = Text(locCalendarDay,"yyyy年m月")

Excelの書式設定のように～

見ためを整えてプレビュー😊 ＜ と ＞のクリックで、ちゃんと切り替わりました！！

カレンダーは完成✨

今回はここまです😊
次回はFilter関数の条件を増やしていき絞り込む機能を追加していく方法を学びます✨

memo
選択したら 〇 がつくが、月が替わっても同じ位置に〇は残る。
月を切り替えると一旦 〇 は消えてほしい。

この記事が気に入ったらサポートをしてみませんか？