Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Power platform Day Winter 19 -PowerApps

253 views

Published on

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

Published in: Services
  • Be the first to comment

  • Be the first to like this

Power platform Day Winter 19 -PowerApps

  1. 1. POWER PLATFORM WINTER 2019 @MICROSOFT JAPAN Power Apps キャンバスアプリ ハンズオン カレンダースクリーンの応用 – 年間カレンダーを作ってみよう!
  2. 2. PowerApps University Student ID Card
  3. 3. 今日のお題  Power Appsのキャンバスアプリで利用可能な画面テンプレート「カレンダー」から、年間カレンダーを作成!
  4. 4. 何がうれしいの??  画面テンプレートはPowerAppsのテクニックの塊!これを紐解くのがステップアップの最短ルート ギャラリー、ラベル、ドロップダウンなどの コントロールがいっぱい ギャラリーには比較的高度な数式が!
  5. 5. 何がうれしいの??  Power Appsはデータ操作ができてからが本番!今回もデータ操作が盛りだくさん! 1か月分のカレンダーをx12 →データテーブル化
  6. 6. 何がうれしいの??  Power Appsはデータ操作ができてからが本番!今回もデータ操作が盛りだくさん! 1か月分のカレンダーをx12 →データテーブル化 Power Appsのデータ操作に とにかく慣れよう!!
  7. 7. 本日の流れ 標準のカレンダースクリーンの解説 (10分) データ準備 (10分) 作成(20分) 枠ぐみ 10分 エラー処理 10分 ※予定の表示は参考資料でやってみてください!
  8. 8. カレンダースクリーンの解析
  9. 9. まずは追加してみよう!  今回は電話レイアウトで進めます  新規アプリを作成し、「カレンダー」画面を追加しましょう 電話レイアウトでアプリを新規作成 「新しい画面」から「カレンダー」を追加
  10. 10. カレンダーを表示してみよう  ▶再生ボタンを押して、動きを確認 今日の日付をクリック カレンダーが表示されるので×で閉じる
  11. 11. コントロールを確認しよう  ほとんどギャラリーコントロール
  12. 12. コントロールを確認しよう  ほとんどギャラリーコントロール ??ギャラリーコントロールって? いわゆる「一覧」を表示するコントロール 主に使うのは Items プロパティとWrapCount データソースから取得したデータや、ローカルのテーブル (Collection) を表示するために利用する
  13. 13. 変数を確認しよう!  グローバル変数としてたくさんの変数が定義されている これらの日付関連の変数が重要!
  14. 14. カレンダーの本体 – MONTHDAYGALLERY  MonthDayGalleryが本体。これがちょっと大変 ~MonthDayGalleryでの処理~ 1. 表示する月の初日を求める 2. 表示する月の最初の週の日曜日の日付を求める 3. 表示する月の最終日を求める 4. 元のテーブルの値と、表示している実際の日付の差分 が10より小さければ塗りつぶしなし。それ以外の日付で はグレーに塗りつぶす
  15. 15. ここで大事な関数  カレンダーは基本的に日付の足し算でできている DateAdd + 1日 + 2日 + 34日 カレンダー表示上の初日 (各月の1日ではない)に +1,+2….+41と日数を足すことでカレンダーを構成
  16. 16. ここで大事な関数  カレンダーは基本的に日付の足し算でできている DateAdd + 1日 + 2日 + 34日 DateAdd(表示初日, ThisItem.Value, Days) [0,1,2…,41]の各数値 カレンダー表示上の初日 (各月の1日ではない)に +1,+2….+41と日数を足すことでカレンダーを構成
  17. 17. ここで大事な変数  _firstDayInViewさえ求められれば、あとは足し算するだけ 表示上の初日 _firstDayInView
  18. 18. カレンダースクリーンまとめ  カレンダーは 0~41の数字から構成された、MonthDayGalleryがメイン  カレンダー上の日付を求めるためには表示上の初日(カレンダーの左上の日付)が重要  各アイテムの表示日付は、DateAdd関数を利用 DateAdd(表示上の初日, 各アイテムの数値, Days)  このあと使う変数  _firstDayOfMonth  _firstDayInView  _lastDayOfMonth
  19. 19. データの準備
  20. 20. 年間カレンダーにはどんなデータが必要か?  1か月分のカレンダー表示に必要なのは3つの変数 _firstDayOfMonth : 月の初日 _firstDayInView : 表示上の初日 _lastDayOfMonth : 月の最終日
  21. 21. 年間カレンダーにはどんなデータが必要か?  1か月分のカレンダー表示に必要なのは 3つの変数 の 12セット が必要 1月用 2月用 12月用 ・・・ 3月用
  22. 22. 年間カレンダーにはどんなデータが必要か?  1か月分のカレンダー表示に必要なのは 3つの変数 の 12セット が必要 1月用 2月用 12月用 ・・・ 3月用 3列 12行の テーブル (Collection) を作る
  23. 23. どうやってデータを作るか  すべての起点は firstDayOfMonth. ほかの2つはそこから計算される Set(_firstDayInView,DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 1), Days)); Set(_lastDayOfMonth,DateAdd(DateAdd(_firstDayOfMonth,1, Months), -1, Days));
  24. 24. どうやってデータを作るか  すべての起点は firstDayOfMonth. ほかの2つはそこから計算される Set(_firstDayInView,DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 1), Days)); Set(_lastDayOfMonth,DateAdd(DateAdd(_firstDayOfMonth,1, Months), -1, Days));
  25. 25. どうやってデータを作るか  以下のステップでCollectionを作成 ① 月の初日だけを含むCollection作成 ② AddColumns関数で2つの計算列を追加
  26. 26. ここで大事な関数  AddColumns関数はデータに列を追加する関数 AddColumns( 元のデータ, 追加する列名, 計算式 ) AddColumns 例えば、月の最終日は・・・ 「月の初日」の「1月後」 の「1日前」 AddColumns(元のデータ, “_lastDayOfMonth”, DateAdd( DateAdd(_firstDayOfMonth, 1, Months) , -1 , Days) ) 1か月後 1日前
  27. 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. 28. データを確認してみる  データテーブルを追加し、Itemsプロパティに先ほどのボタンで作成したCollectionを設定  [フィールド]>[フィールドの編集]で、すべての列を選択 必要なデータの準備は完了
  29. 29. 年間カレンダー作成
  30. 30. 年間カレンダーの作成  データがそろったので、カレンダーの表示を作っていく  単月のカレンダーはMonthDayGallery というGalleryコントロールで表現されていたので、これを12倍に ➡ Galleyの中に単月のカレンダーを挿入する 空のギャラリーの中にMonthDayGalleryを 入れ子にする x12 Gallery化
  31. 31. 手順を伝えるのは難しいので動画で。。。
  32. 32. エラーの処理  いくつかエラーが出ているので、修正します。 lblMonthSelected1.Colorでエラー ➡Color.Blackに変更 Circle1_1.Visibleでエラー ➡コントロールごと消す
  33. 33. ほぼ完成!! あとは・・・ • 月の表示がないので追加 • 月の間にセパレータ(境界がないので追加) • 色味の変更
  34. 34. まとめ
  35. 35. まとめ  カレンダースクリーンは以下の3つで構成されている  MonthDayGallery : 日付部分  WeekdayGallery : 曜日表示  CalendarEventGallery : Outlook予定表から取得されるイベント表示 (今回は割愛)  MonthDayGallery (カレンダーの日付本体)は3つの重要な変数で構成  _firstDayOfMonth : 月の初日  _firstDayInView : 表示上の初日  _lastDayOfMonth : 月の最終日  同じような構造を繰り返しする場合には 変数➡テーブル 単一コントロール➡ギャラリー が有効  重要な関数は以下  DateAdd : 日付の足し算/引き算  AddColumns : あるデータに列追加 計算列などを表示に使う際に有効
  36. 36. ご参加ありがとうございました

×