Power Platform Day Winter '19 Power Appsセッションの資料です

1. POWER PLATFORM WINTER 2019 ＠MICROSOFT JAPAN
Power Apps キャンバスアプリ ハンズオン
カレンダースクリーンの応用 – 年間カレンダーを作ってみよう！

2. PowerApps University Student ID Card

3. 今日のお題
 Power Appsのキャンバスアプリで利用可能な画面テンプレート「カレンダー」から、年間カレンダーを作成！

4. 何がうれしいの？？
 画面テンプレートはPowerAppsのテクニックの塊！これを紐解くのがステップアップの最短ルート
ギャラリー、ラベル、ドロップダウンなどの
コントロールがいっぱい
ギャラリーには比較的高度な数式が！

5. 何がうれしいの？？
 Power Appsはデータ操作ができてからが本番！今回もデータ操作が盛りだくさん！
1か月分のカレンダーをx12
→データテーブル化

6. 何がうれしいの？？
 Power Appsはデータ操作ができてからが本番！今回もデータ操作が盛りだくさん！
1か月分のカレンダーをx12
→データテーブル化
Power Appsのデータ操作に
とにかく慣れよう！！

7. 本日の流れ
標準のカレンダースクリーンの解説 (10分)
データ準備 (10分)
作成(20分)
枠ぐみ 10分
エラー処理 10分
※予定の表示は参考資料でやってみてください！

8. カレンダースクリーンの解析

9. まずは追加してみよう！
 今回は電話レイアウトで進めます
 新規アプリを作成し、「カレンダー」画面を追加しましょう
電話レイアウトでアプリを新規作成 「新しい画面」から「カレンダー」を追加

10. カレンダーを表示してみよう
 ▶再生ボタンを押して、動きを確認
今日の日付をクリック
カレンダーが表示されるので×で閉じる

11. コントロールを確認しよう
 ほとんどギャラリーコントロール

12. コントロールを確認しよう
 ほとんどギャラリーコントロール
？？ギャラリーコントロールって？
いわゆる「一覧」を表示するコントロール
主に使うのは Items プロパティとWrapCount
データソースから取得したデータや、ローカルのテーブル
(Collection) を表示するために利用する

13. 変数を確認しよう！
 グローバル変数としてたくさんの変数が定義されている
これらの日付関連の変数が重要！

14. カレンダーの本体 – MONTHDAYGALLERY
 MonthDayGalleryが本体。これがちょっと大変
~MonthDayGalleryでの処理~
1. 表示する月の初日を求める
2. 表示する月の最初の週の日曜日の日付を求める
3. 表示する月の最終日を求める
4. 元のテーブルの値と、表示している実際の日付の差分
が10より小さければ塗りつぶしなし。それ以外の日付で
はグレーに塗りつぶす

15. ここで大事な関数
 カレンダーは基本的に日付の足し算でできている
DateAdd
+ 1日
+ 2日
+ 34日
カレンダー表示上の初日 (各月の1日ではない)に
+1,+2….+41と日数を足すことでカレンダーを構成

16. ここで大事な関数
 カレンダーは基本的に日付の足し算でできている
DateAdd
+ 1日
+ 2日
+ 34日
DateAdd(表示初日, ThisItem.Value, Days)
[0,1,2…,41]の各数値
カレンダー表示上の初日 (各月の1日ではない)に
+1,+2….+41と日数を足すことでカレンダーを構成

17. ここで大事な変数
 _firstDayInViewさえ求められれば、あとは足し算するだけ
表示上の初日 _firstDayInView

18. カレンダースクリーンまとめ
 カレンダーは 0~41の数字から構成された、MonthDayGalleryがメイン
 カレンダー上の日付を求めるためには表示上の初日（カレンダーの左上の日付）が重要
 各アイテムの表示日付は、DateAdd関数を利用
DateAdd(表示上の初日, 各アイテムの数値, Days)
 このあと使う変数
 _firstDayOfMonth
 _firstDayInView
 _lastDayOfMonth

19. データの準備

20. 年間カレンダーにはどんなデータが必要か？
 1か月分のカレンダー表示に必要なのは3つの変数
_firstDayOfMonth : 月の初日
_firstDayInView : 表示上の初日
_lastDayOfMonth : 月の最終日

21. 年間カレンダーにはどんなデータが必要か？
 1か月分のカレンダー表示に必要なのは 3つの変数 の 12セット が必要
１月用 ２月用 １２月用
・・・
３月用

22. 年間カレンダーにはどんなデータが必要か？
 1か月分のカレンダー表示に必要なのは 3つの変数 の 12セット が必要
１月用 ２月用 １２月用
・・・
３月用
3列 12行の テーブル (Collection) を作る

23. どうやってデータを作るか
 すべての起点は firstDayOfMonth. ほかの2つはそこから計算される
Set(_firstDayInView,DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 1), Days));
Set(_lastDayOfMonth,DateAdd(DateAdd(_firstDayOfMonth,1, Months), -1, Days));

24. どうやってデータを作るか
 すべての起点は firstDayOfMonth. ほかの2つはそこから計算される
Set(_firstDayInView,DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 1), Days));
Set(_lastDayOfMonth,DateAdd(DateAdd(_firstDayOfMonth,1, Months), -1, Days));

25. どうやってデータを作るか
 以下のステップでCollectionを作成
① 月の初日だけを含むCollection作成
② AddColumns関数で2つの計算列を追加

26. ここで大事な関数
 AddColumns関数はデータに列を追加する関数
AddColumns( 元のデータ, 追加する列名, 計算式 )
AddColumns
例えば、月の最終日は・・・ 「月の初日」の「１月後」 の「１日前」
AddColumns(元のデータ, “_lastDayOfMonth”,
DateAdd( DateAdd(_firstDayOfMonth, 1, Months) , -1 , Days) )
1か月後 1日前

27. データを作成しよう
 最初につくったアプリのScreen1に移動し、ボタンを追加
 ボタンのOnSelectプロパティに以下の関数をコピペ
//初期の表示年は今年
UpdateContext({_selectedYear:Year(Today())});
//まず2019/1/1~2019/12/1まで、12か月の初日を収めた仮のCollectionを作成
Clear(colTmp);
ForAll([1,2,3,4,5,6,7,8,9,10,11,12],
Collect(colTmp,{_firstDayOfMonth:Date(_selectedYear,Value,1)})
);
//カレンダーの表示に必要な_firstDayInViewと_lastDayOfMonthを列としてCollectionに追加
ClearCollect(colCalendar,
AddColumns(colTmp,
//それぞれの定義はテンプレートと同一
"_firstDayInView",DateAdd(_firstDayOfMonth,-(Weekday(_firstDayOfMonth) - 2 + 1), Days),
"_lastDayOfMonth",DateAdd(DateAdd(_firstDayOfMonth,1, Months), -1, Days)
)
);
//あとのためカレンダー表示・非表示用の変数を用意
UpdateContext({_calendarVisible:true})

28. データを確認してみる
 データテーブルを追加し、Itemsプロパティに先ほどのボタンで作成したCollectionを設定
 [フィールド]>[フィールドの編集]で、すべての列を選択
必要なデータの準備は完了

29. 年間カレンダー作成

30. 年間カレンダーの作成
 データがそろったので、カレンダーの表示を作っていく
 単月のカレンダーはMonthDayGallery というGalleryコントロールで表現されていたので、これを12倍に
➡ Galleyの中に単月のカレンダーを挿入する
空のギャラリーの中にMonthDayGalleryを
入れ子にする
x12
Gallery化

31. 手順を伝えるのは難しいので動画で。。。

32. エラーの処理
 いくつかエラーが出ているので、修正します。
lblMonthSelected1.Colorでエラー
➡Color.Blackに変更
Circle1_1.Visibleでエラー
➡コントロールごと消す

33. ほぼ完成！！
あとは・・・
• 月の表示がないので追加
• 月の間にセパレータ(境界がないので追加)
• 色味の変更

34. まとめ

35. まとめ
 カレンダースクリーンは以下の3つで構成されている
 MonthDayGallery : 日付部分
 WeekdayGallery : 曜日表示
 CalendarEventGallery : Outlook予定表から取得されるイベント表示 (今回は割愛)
 MonthDayGallery (カレンダーの日付本体)は3つの重要な変数で構成
 _firstDayOfMonth : 月の初日
 _firstDayInView : 表示上の初日
 _lastDayOfMonth : 月の最終日
 同じような構造を繰り返しする場合には
変数➡テーブル 単一コントロール➡ギャラリー が有効
 重要な関数は以下
 DateAdd : 日付の足し算/引き算
 AddColumns : あるデータに列追加 計算列などを表示に使う際に有効

36. ご参加ありがとうございました