技術情報ブログ
SharePoint
2022.02.09

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

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

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

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

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

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

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

前回までの内容は、以下をご参照ください。

前回、「データテーブル・ギャラリーを修正」までご紹介しました。
今回は、SharePointリストの表示を変更するについてお伝えします。

 

SharePointリストの表示を変更する

SharePointリストの列の表示を日付(年月のみ)とする方法について説明します。

変更方法としては以下2通りの方法があります。

それぞれの方法を以下で説明します。

 

新しい列を追加し、数式を用いて表示方法を設定

新しい列を追加し、以下の設定を行います。

SharePointリストの新しい列(数式)
SharePointリストの新しい列(数式)

ポイントとしては=TEXT(日付,”yyyy年MM月”)の部分です。

事前に作成していた「日付」列の値から、年月のみを表示するように設定しています。
SharePointリストを表示してみましょう。

年月のみ表示されている列が新しく追加されました。

SharePointリスト-編集後(数式)
SharePointリスト-編集後(数式)

このままでは、「日付」列と「日付(年月)」列の2つが表示されてしまいますので、ビューから「日付」列を削除するなどの対応を行ってください。

 

既存列の書式設定をJSONにて設定

「日付」列の書式設定から、以下JSONを記載します。

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "txtContent": "= getYear(@currentField) + '年' + getMonth(@currentField) + '月'"
}
SharePointリストの書式設定(JSON)
SharePointリストの書式設定(JSON)

ポイントとしては「数式」項目の
txtContent”: “= getYear(@currentField) + ‘年’ + getMonth(@currentField) + ‘月'”の部分です。
@currentFieldが「日付」列に格納されている実際の値であり、getYear・getMonthを用いて、年及び月を取得しています。

上記設定により、「日付」列の表示を変更することができました。

SharePointリスト-編集後(JSON)
SharePointリスト-編集後(JSON)

 

SharePointリストの表示を変更する際のメリット・デメリット

上記2つの方法について、メリット・デメリットをまとめました。

 

メリット

デメリット

新しい列を追加し、
数式にて表示方法を設定

・コーディングの知識がほぼ不要

・新しい列を別途追加する必要あり

既存列の書式設定をJSONにて設定

・新しい列を追加する必要なし

・コーディングの知識が必要

「新しい列を追加し、数式にて表示方法を設定する」方法は、コーディングの知識がほぼ不要であるため、作成する難易度は低く、お手軽に実施することが可能です。
しかし、新しい列を別途追加する必要があります。

一方、「既存列の書式設定をJSONにて設定」する場合は、新しい列を追加する必要がありません。
しかし、多少コーディング(JSON)の知識が必要となるので、実装するためのハードルが高くなってしまいます。

 

本連載では、Power Apps キャンバスアプリを用いて、年月のみで日付を表示・選択する方法について紹介しました。
今回ご紹介した内容を、活用いただければ幸いです。

 

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

小刀稱知哉

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

1990年生まれ

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

趣味は読書

主にMicrosoftのローコード(SharePoint・Power Platform)に関するに関する営業活動や設計、開発などを担当しております!

(最近はCopilot Studioについても勉強中)

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

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

Power Apps, Power Automate で作る NFC タグを活用したアプリ例

2025.04.16

Power Apps で NFC タグを使ってみる

2025.04.02

Copilot Studioで作成したコパイロットをTeams に追加する方法

2025.03.19

SharePoint リストで主キーを実装し、比較してみた

2025.03.12

SharePointのデザインをもっとおしゃれに!(X-SP Design | SharePoint デザイン拡張サービスのご紹介)(4) サンプルの紹介その2

SharePointEF CoreMarker Clustererキャンバスアプリメールdialogerrorレスポンシブ レイアウトOpenAI環境構築手順複数項目削除変更生成系AIExcelマイグレーションRANK()関数DatePickerfirst()関数Tips復元responsive layoutオープンAIpipelineシェアポイントフォルダ外部DBCopilotPower AutomateFramework CoreDynamics 365 SalesDropdownnest新機能restoreデータ行の制限チャットGPTCI/CD便利機能ゴミ箱連携licenseC#Attribute directivesMicrosoft Translatorview入れ子変数Power BI引き継ぎgalleryパイプラインカレンダー完全削除接続添付ファイルコントロールattributeO/Rマッパーマーカークラスタリングライブラリビュー動的リスト検索個人列退職ギャラリーDevOpsCalendarモデル駆動型データフローファイルサイズvalidationazure sql databasetailwindcssアクセス制限collectionMicrosoft 365グループユーザー列所有者を変更スクロールMicrosoft 365Teamsセキュリティロールrecycle binフルリモートワークローコードCase式マルチテナント承認コレクションセキュリティグループSharePoint Online異動コンテナ簡易在庫管理ローコード開発ビジネスルールごみ箱アーティサンAngularHTTP Requestドロップダウンメニューリマインド複数の添付ファイル送信元リストLoopショートカットキー時間外非エンジニアDataverseアクセス許可ArtisanAccessCSSBreakpointObserverSet承認フローメールの送信非表示Microsoftshortcut key通知体験談JavaScriptSharePoint Framework転職InfoPathxUnitメディアクエリForAllform差出人アプリdesignconcat関数ファイル勉強表示SPFx主キーMatTable.Net Core 3.1スマホUpdateContextエクスポートインスタントクラウドフロー[市民開発者JSON文字制限フィルター クエリ内製化切替サンプルCopilot StudioAngular MaterialVSCodePCロードマップインポート自動化したクラウドフロー構築デザインフロー実行ドキュメント ライブラリ市民開発登録者samplePowerAppsデータ構造.Net Core Test Explorerレスポンシブ技術カスタマイズ委任自動化したクラウド フロー運用開発環境filter query管理システム列X-SPNFCタグモデル駆動型アプリSortByColumns関数Dataverse for Teams入門ItcomponentVBAフローの種類選択肢列環境sortガバナンス登録日StylePowerAutomatePower AppsTypeScriptitem関数初心者情報技術ダイアログエラーインスタント クラウド フロー参照列本番環境ソートerror notification更新者StudioPower PlatformHTMLGoogle Maps中級者メッセージIDコンポーネントエクセルスケジュール済みクラウド フローChatGPTライセンスmultiple itemエラー通知更新日AI
PageTop
ページトップに戻る