Power Appsで簡単に「勤怠管理アプリ」を作成し、集計の手間を省く!〜第四回 編集画面編〜

記事の監修

S・S

マネジメント&イノベーション事業部 開発部/ユニット1 サブリーダー
資格 Microsoft Offiece Specialist Master 2007、ITパスポート

2022年よりMicrosoft365とPowerPlatformの案件を担当。それ以前は業務・Web系システムを要件定義からリリースまでの開発に従事。
IT業界歴15年の経験を活かし、PJを牽引し後続の育成にも力を注ぐ。
趣味は散歩で、思考が煮詰まった際には、近所の緑道を散歩し、新たな発見や自然からのインスピレーションを受けている。

月に3社様限定

無料オンライン相談実施中
マイクロソフトの専門家が対応

詳しくはこちら

④編集画面編

PowerApps 編集画面を作成

「ラベル」を追加

「+新しい画面」を追加し、追加した画面の名前を「編集画面」に変更します。この画面が、勤怠時間画面のギャラリー(右)アイコンの遷移先の画面になります。第三回勤怠時間編で作成した「勤怠時間ラベル」をコピーして、編集画面に貼り付けます。

「編集フォーム」を追加

ラベルの下に「挿入」>「編集フォーム」を追加し、
データソースに「勤怠管理テーブル」を選択します。
「フィールドの編集」>「フィールドの追加」から
「勤務形態」「出勤時間」「退勤時間」「休憩時間」「勤務時間」
を追加します。
DataCardを選択し、詳細設定タブの鍵マークをクリックしロックを解除します。
勤務形態のテキスト入力を削除し、ドロップダウンを追加します。
Itemプロパティに「[“出社”,“在宅”]」
を設定します。
情報を編集した値に更新するために、
勤務形態_DataCard1のUpdateプロパティに
「勤務形態ドロップダウン.Selected.Value」
を設定します。
勤務形態エラーメッセージのYプロパティに
「勤務形態ドロップダウン.Y + 勤務形態ドロップダウン.Height」
を設定します。
休憩時間のテキスト入力の隣にテキストラベルを追加し、
Textプロパティに「“分”」を設定します。
勤怠一覧画面で選択した情報を引き継ぐための関数を設定します。
編集フォームのItemプロパティに
「Gallery_勤怠一覧.Selected」
を設定します。

「保存ボタン」を追加

ボタンを追加し、テキストを「保存」にします。
OnSelectプロパティに、
「SubmitForm(編集フォーム)」
を設定することで、保存ボタンをクリックすると編集した内容がDataverse勤怠管理テーブルに保存されます。
編集フォームのOnSuccessプロパティに
「If(編集フォーム.Error = Blank(), Navigate(勤怠時間画面, ScreenTransition.None))」
を設定しておくと、保存に成功したときに編集画面が閉じ勤怠時間画面に戻ります。

「閉じるボタン」を追加

「×(キャンセル)」アイコンをラベルの右上に追加し、OnSelectプロパティに、
「Navigate(勤怠時間画面)」
を設定します。
今回のご説明は以上となります。
次回は「第五回休暇申請画面編」になります。お楽しみに!

無料相談実施中(月に3社様限定)

  • 業務効率化を実現したい・・。
  • 社内システムをクラウド化したい・・。
  • 社内の情報共有をもっと効率的に行いたい・・。
  • テレワークを導入したいけど何から初めていいかわからない・・。

ビズウインドでは、上記のような様々な課題でお困りのお客様に対して、
無料相談を実施致しております。
業務効率化やテレワーク導入に関しての豊富なサポート実績を活かして、
課題解決に向けた無料相談を行っておりますので、お気軽にご相談下さい。

ご相談はこちらから