技術情報ブログ
Power Platform
2024.03.13

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう
小刀稱知哉

こんにちは。アーティサン株式会社の小刀稱(ことね)です。

Power Appsのキャンバスアプリで、カレンダーを用いたアプリを作成したいと思ったことはありませんか?

実は、画面のテンプレートの1つに「カレンダー」があるので、そちらを利用することでカレンダー表示は可能です。

しかし、こちらのテンプレートは自分のOutlookと接続しているため、SharePointをデータソースとしたい場合には、少し改変が必要となります。

そこで、今回はSharePointリストと連携したカレンダーアプリを1から作成してみたいと思います。
カレンダーを用いたアプリはよく使われると思いますので、ぜひご覧ください!

 

完成品

まずはじめに、今回作成するアプリを紹介します。

SharePointリストからデータを取得し、Power Appsで表示しています。

また、SharePointリストの詳細は以下となります。
※内部列名・外部列名については以下URLをご参照ください。
Power AppsとSharePoint連携:SortByColumns関数で日本語列を使用する際の注意点(内部列名と外部列名)

列名(外部名)

列名(内部名)

データ型

イベント

event

1行テキスト

開始日時

startDateTime

日付と時刻(時間を含める)

終了日時

endDateTime

日付と時刻(時間を含める)

 

作成手順

では早速アプリの作成を行いましょう。

手順は以下となります。

 

カレンダーの作成

「今日を含む月の1日」となる変数を設定

はじめに、「今日を含む月の1日」となる変数を設定します。
(例:今日が2023/10/07の場合 → 2023/10/1)

画面を追加し、以下プロパティを変更します。

 

OnVisible

Set(currentFirstDayOfTheMonth, Date(Year(Today()), Month(Today()), 1))

 

曜日のギャラリーを作成

続いて、曜日のギャラリーを作成します。

垂直ギャラリーを追加し、以下プロパティを変更します。

 

折返しの数:7

上記設定を行うことで、横に7つのアイテムが表示されるようになります。
※日曜日~土曜日を表示させるため、7つのアイテムを横並びで配置します。

Items

Calendar.WeekdaysShort()

上記設定により、日曜日から始まる各曜日のテーブルが生成されます。

Calendar.WeekdaysShort
Calendar.WeekdaysShort

ギャラリー配下のテキストラベルのText

ThisItem.Value

上記を記載することで、日曜日から始まる曜日がギャラリーで表示されると思います。

ギャラリーの幅やデザインなどは適宜変更してください。
私は上記に加え、以下のプロパティも変更しております。

ギャラリー配下のテキストラベル(曜日表示用)のColor

If(
    ThisItem.Value = "日曜日", Color.Red,
    ThisItem.Value = "土曜日", Color.Blue,
    Color.Black
)

日曜日は赤色、土曜日は青色、それ以外は黒色に設定

曜日のギャラリー
曜日のギャラリー

 

 

日付のギャラリーの作成

続いて、日付を表示するギャラリーを作成します。

垂直ギャラリーを追加し、以下プロパティを変更します。

折返しの数:7


Items

ForAll(Sequence(42), Value+currentFirstDayOfTheMonth-Weekday(currentFirstDayOfTheMonth)) 

こちらの内容は、本ブログのメインとなる内容です。
少し複雑ですので、順を追って説明します。

  • 1~42の値を作成

    ForAll(Sequence(42), Value)

    はじめに、Sequence(42)を用いて1~42の値を作成します。

    ForAll(Sequence(42), Value)
    ForAll(Sequence(42), Value)

    なぜ「42」なのかというと、毎月1日の曜日が金曜日 or 土曜日となる場合は、31日間全てを表示させようとすると、6週間分の表示領域が必要となるためです。
    よって、7日*6週間=42日となります。

    42の根拠
    42の根拠
  • 1~42の値を日付情報に変換

    ForAll(Sequence(42), Value+currentFirstDayOfTheMonth)

    続いて、先程のSequence(42)で作成した値を日付に変換するため、currentFirstDayOfTheMonthを各値(1~42)に加算します。
    上記関数を使った際の結果は以下となります。

    (下記はcurrentFirstDayOfTheMonthが2023/11/1の場合)

    日付情報に変換
    日付情報に変換
  • 曜日と日付を合わせる

    ForAll(Sequence(42), Value+currentFirstDayOfTheMonth-Weekday(currentFirstDayOfTheMonth))

    最後に、曜日と日付と合わせていきます。

    こちらは、先程までの結果からWeekday(currentFirstDayOfTheMonth)を減算することにより、対応可能です。
    ※Weekday(<日付>)関数は、指定された<日付>が週の中で何番目の日であるかを返す関数です。(日曜日:1・月曜日:2 … 土曜日:7)

    計算式のイメージは以下をご覧ください。

    曜日と日付を合わせる
    曜日と日付を合わせる

    ForAll(Sequence(42),Value+currentFirstDayOfTheMonth-Weekday(currentFirstDayOfTheMonth)) の説明は以上となります。

    本ブログでのメインとなる内容ですので、ぜひ理解していただければと思います。

 

ギャラリー配下のテキストラベルのText


ThisItem.Value

※上記を記載することで、各日付が表示されます。
ギャラリーの幅やデザインなどは適宜変更してください。

私は上記に加え、以下のプロパティも変更しております。

ギャラリー配下のテキストラベル(日付表示用)のItem


Day(ThisItem.Value)

※日付部分だけ表示されるように設定。

ギャラリー配下のテキストラベル(日付表示用)のColor


Color.White

※文字色を白色に設定

ギャラリー配下のテキストラベル(日付表示用)のFill


If(
    Month(ThisItem.Value) <> Month(currentFirstDayOfTheMonth),
    RGBA(166, 166, 166, 1),
    If(ThisItem.Value = Today(),RGBA(246, 88, 16, 1),Color.Black)
)

※背景色について、当月分以外の日付は灰色・当日の日付はオレンジ・それ以外は黒色に設定

日付のギャラリー
日付のギャラリー

 

変数の更新

最後に、currentFirstDayOfTheMonthを更新することで月の値を操作できるように設定します。

次月・前月・当月それぞれでアイコンを作成します。
その後、それぞれのアイコンのOnSelectを以下のように設定します。

次月アイコンのOnSelect


Set(currentFirstDayOfTheMonth,Date(Year(currentFirstDayOfTheMonth), Month(currentFirstDayOfTheMonth)+1, 1))

前月アイコンのOnSelect


Set(currentFirstDayOfTheMonth,Date(Year(currentFirstDayOfTheMonth), Month(currentFirstDayOfTheMonth)-1, 1))

当月アイコンのOnSelect


Set(currentFirstDayOfTheMonth, Date(Year(Today()),Month(Today()), 1));

上記で設定は完了ですが、最後に月を表示するテキストラベルも追加しましょう。

月表示用のテキストのText


Text(currentFirstDayOfTheMonth, "yyyy/mm")

カレンダーの作成は以上で完了です!

ここまで作成したものは以下となります。

作成したカレンダー
作成したカレンダー

 

 

カレンダーとSharePointリストの連携

それでは、カレンダーとSharePointリストを連携しましょう。
具体的には、イベントリストに登録されているイベントをカレンダー上に表示させます。

手順としては、日付のギャラリーの中に新たに垂直ギャラリーを作成し、以下プロパティを変更します。

イベントのギャラリー
イベントのギャラリー

ギャラリー(イベント表示用)のItems

Filter(イベントリスト, ThisItem.Value <= 開始日時 && 開始日時 < DateAdd(ThisItem.Value, 1, TimeUnit.Days))

※開始日時が各日付の範囲内に入っているイベントを取得
(例:2023/10/1 00:00 <= 開始時刻 < 2023/10/2 00:00)

ギャラリー配下のテキストラベル(イベント表示用)のText

$"{Text(ThisItem.開始日時, "hh:mm")}  {ThisItem.イベント}"

以上で設定は終了です!

作成したカレンダー(イベント表示)
作成したカレンダー(イベント表示)

 

おわりに

今回は、SharePointリストと連携したカレンダーアプリを1から作成してみました。 カレンダーを用いたアプリはよく使われると思いますので、ぜひお試しください。

最後まで読んでいただき、ありがとうございました!

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当:小刀稱知哉

小刀稱知哉

大分県出身(温泉大好き♥♥)、現在は東京都在住

1990年4月9日生まれ

30才にしてメーカーの技術営業からIT業界にジョブチェンジ!!!

趣味は読書

Power Platform(SharePoint・Power Apps・Power Automate)に関する営業活動や設計、開発などを担当しております!

シェアする
記事カテゴリ
最新記事
2024.04.03

非エンジニア【(元)自治体職員】が半年間ローコード開発をしてみたら

2024.03.27

Power Automateのベストプラクティス・アンチパターン(5)【Apply to each×コンカレンシー×変数の設定はNG】

2024.03.20

Power Apps×Teams:Teams上からPower Appsを実行する方法

2024.03.13

Power Apps:SharePointリストと連携したカレンダーアプリを自作してみよう

2024.03.06

SharePointのあったらいいなを集めました(X-SPのご紹介)

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeamsローコード開発非エンジニア体験談
PageTop
ページトップに戻る