技術情報ブログ
Power Platform
2022.01.28

Power Apps キャンバスアプリを用いて、年月のみで日付を表示・選択する方法(1)【Power Apps側の処理】

Power Apps キャンバスアプリを用いて、年月のみで日付を表示・選択する方法(1)【Power Apps側の処理】

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

Power Appsのキャンバスアプリで日付を登録する際、「年」と「月」だけ入力し、「日」の入力は省きたいと思ったことはありませんか?

通常このような場合、デートピッカー(DatePicker)を用いることが一般的です。
しかし、デートピッカーは年月日(例:2021年12月7日)までを必ず選択する必要があります。

Power Apps キャンバスアプリでのデートピッカー
Power Apps キャンバスアプリでのデートピッカー

よって、年月(例:2021年12月)のみで日付を表示・選択したい場合には、デートピッカーでの運用は向いておりません。

そこで本連載では、ドロップダウンを用いて、年月のみで日付の表示・選択を行う方法についてお伝えします。

 

今回やりたいこと
Power Apps キャンバスアプリを用いて、年月のみで日付を表示・選択する

初めに、今回やりたいことについて説明します。

SharePointリストには、以下の列が含まれています。

列名

データ型

タイトル

1行テキスト

日付

日付と時刻

SharePointリストの設定
SharePointリストの設定

Power Appsでは、上記SharePointリストの年と月のみを表示・編集するようにします。

ただ、このままではSharePointリストの日付列とPower Appsで入力する日付のデータ型が異なるため、
Power Appsで入力した年月の1日の日付をSharePointリストへ登録するように設定します。
(例:Power Appsで2021年12月と入力すると、SharePointリストへは2021年12月1日と登録される。)

Power Apps キャンバスアプリでの入力フォーム
Power Apps キャンバスアプリでの入力フォーム

 

Power Apps キャンバスアプリを用いて、年月のみで日付選択をする方法

デートピッカーで日付を選択する場合、年月日(例:2021年12月7日)までを必ず選択する必要があります。
そこで、今回はドロップダウンを用いて、年月のみで日付選択を行うよう実装します。

実装の流れを以下に示します。

 

フォームからデートピッカーを削除

Power Apps内にて、編集フォームを追加します。
また、編集フォームのデータソースに先程作成したSharePointリストを指定します。

Power Appsでは、SharePointリストのデータ型が日付と時刻となっている列は、デートピッカーが追加されます。
今回デートピッカーは不要ですので、削除します。

 

年と月のドロップダウンを作成

日付_DataCard配下に、年と月のドロップダウンを追加します。

年のドロップダウン名称:drpYear

月のドロップダウン名称:drpMonth

ドロップダウンの配置
ドロップダウンの配置

また、各ドロップダウンのItemsプロパティに以下の式を追加します。

drpYear.Items:Sequence(50,Year(Today())-10)
drpMonth.Items:["01","02","03","04","05","06","07","08","09","10","11","12"]

上記は各ドロップダウンの選択肢を指定しています。
Sequence(50,Year(Today())-10)は「今年の10年前から開始し、50年後まで」を選択肢として表示するよう設定しています。)

また、Defaultプロパティに以下の式を追加します。

drpYear.Default:Text(Parent.Default, "yyyy")
drpMonth.Default:Text(Parent.Default, "mm")

上記はギャラリーで選択した値から年もしくは月の部分のみを表示させるよう指定しています。

 

データカードを修正

日付_DataCardのUpdateプロパティを修正します。
Updateプロパティは、SubmitForm()関数実行時、Updateプロパティ内に設定された値をデータソースの該当列に反映させるためのプロパティです。

今回は、Power Appsで入力した年月の1日の日付をSharePointリストへ登録するように設定します。
(例:Power Appsで2021年12月と入力すると、SharePointリストへは2021年12月1日と登録される。)

具体的には、以下の式を追加します。

日付_DataCard.Update:DateTimeValue(drpYear.Selected.Value & drpMonth.Selected.Value & 1)

 

データテーブル・ギャラリーを修正

続いて、データテーブルやギャラリーの日付列の表示を修正します。
具体的には以下の式を追加します。

※今回の例ではデータテーブルを使用していますが、ギャラリーでも以下の式を使用することで日付列の表示を修正できます。

日付列(_C).Text:Text(ThisItem.日付, "yyyy年mm月")
データテーブル
データテーブル

上記により、SharePointリストのDateTime型を「yyyy年mm月」で表示されます。

以上で実装は完了です!

本日はここまで。

今回までで、Power Apps キャンバスアプリの作成方法についてお伝えしました。
Power Appsで新しい機能を実装する時、関数を組み合わせるなどのアイデアや工夫が必要となる場合があります。

このような内容は、「知っていれば一瞬」ですが「知らなければ多くの時間が必要」となります。
当社では、今回のような実装のアイデアを多く発信していく予定ですので、是非今後ともご覧ください。

次回は、SharePointリストの表示を変更する方法をお伝えします。

 

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

小刀稱知哉

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

1990年生まれ

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

趣味は読書

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

持ってる資格はPL-200/PL-300/PL-400/MS-700/AZ-104/AZ-305

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

【2024年6月更新】Power Automate 設計・構築時のTips集

2024.05.15

非エンジニア【(元)自治体職員】がローコード開発をして気が付いたこと コーディング規約とPower Platformプレミアムサンプルアプリ集

2024.05.01

Power Apps・Power Automateの勉強方法(2)

2024.04.17

Power Apps・Power Automateの勉強方法(1)

2024.04.03

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

モデル駆動型アプリ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
ページトップに戻る