![ここで大事な関数
カレンダーは基本的に日付の足し算でできている
DateAdd
+ 1日
+ 2日
+ 34日
DateAdd(表示初日, ThisItem.Value, Days)
[0,1,2…,41]の各数値
カレンダー表示上の初日 (各月の1日ではない)に
+1,+2….+41と日数を足すことでカレンダーを構成](https://image.slidesharecdn.com/powerplatformdaywinter19hiro-191205062821/85/Power-platform-Day-Winter-19-PowerApps-16-320.jpg)
![データを作成しよう
最初につくったアプリの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})](https://image.slidesharecdn.com/powerplatformdaywinter19hiro-191205062821/85/Power-platform-Day-Winter-19-PowerApps-27-320.jpg)
![データを確認してみる
データテーブルを追加し、Itemsプロパティに先ほどのボタンで作成したCollectionを設定
[フィールド]>[フィールドの編集]で、すべての列を選択
必要なデータの準備は完了](https://image.slidesharecdn.com/powerplatformdaywinter19hiro-191205062821/85/Power-platform-Day-Winter-19-PowerApps-28-320.jpg)
Power platform Day Winter 19 -PowerApps
- 1. POWER PLATFORM WINTER 2019 ＠MICROSOFT JAPAN Power Apps キャンバスアプリ ハンズオン カレンダースクリーンの応用 – 年間カレンダーを作ってみよう！
- 2. PowerApps University Student ID Card
- 6. 何がうれしいの？？ Power Appsはデータ操作ができてからが本番！今回もデータ操作が盛りだくさん！ 1か月分のカレンダーをx12 →データテーブル化 Power Appsのデータ操作に とにかく慣れよう！！
- 7. 本日の流れ 標準のカレンダースクリーンの解説 (10分) データ準備 (10分) 作成(20分) 枠ぐみ 10分 エラー処理 10分 ※予定の表示は参考資料でやってみてください！
- 9. まずは追加してみよう！ 今回は電話レイアウトで進めます 新規アプリを作成し、「カレンダー」画面を追加しましょう 電話レイアウトでアプリを新規作成 「新しい画面」から「カレンダー」を追加
- 12. コントロールを確認しよう ほとんどギャラリーコントロール ？？ギャラリーコントロールって？ いわゆる「一覧」を表示するコントロール 主に使うのは Items プロパティとWrapCount データソースから取得したデータや、ローカルのテーブル (Collection) を表示するために利用する
- 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と日数を足すことでカレンダーを構成
- 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})
- 29. 年間カレンダー作成
- 30. 年間カレンダーの作成 データがそろったので、カレンダーの表示を作っていく 単月のカレンダーはMonthDayGallery というGalleryコントロールで表現されていたので、これを12倍に ➡ Galleyの中に単月のカレンダーを挿入する 空のギャラリーの中にMonthDayGalleryを 入れ子にする x12 Gallery化
- 34. まとめ
- 35. まとめ カレンダースクリーンは以下の3つで構成されている MonthDayGallery : 日付部分 WeekdayGallery : 曜日表示 CalendarEventGallery : Outlook予定表から取得されるイベント表示 (今回は割愛) MonthDayGallery (カレンダーの日付本体)は3つの重要な変数で構成 _firstDayOfMonth : 月の初日 _firstDayInView : 表示上の初日 _lastDayOfMonth : 月の最終日 同じような構造を繰り返しする場合には 変数➡テーブル 単一コントロール➡ギャラリー が有効 重要な関数は以下 DateAdd : 日付の足し算/引き算 AddColumns : あるデータに列追加 計算列などを表示に使う際に有効
- 36. ご参加ありがとうございました