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

2023年8月31日

記事の監修

S・S

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

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

月に3社様限定

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

詳しくはこちら
③勤怠時間画面編

PowerApps 勤怠時間画面を作成​

　　　

「新しい画面」を追加​

「ツリービュー」>「＋新しい画面」から空の画面を追加し、
追加した画面の名前を「勤怠時間画面」に変更します。​
この画面が、トップ画面の勤怠時間ボタンの遷移先の画面になります。

「ラベル」を追加

「テキストラベル」を追加し、テキストを「勤怠時間」に変更します。
フォントサイズ、色などを自由に変更してください。
「アイコン」>「＜(左)」を左上に追加し、OnSelectプロパティに
「Navigate(トップ画面)」
を設定します。
先程と同様に、
「日付」「勤務形態」「出勤時間」「退勤時間」
の４つのラベルを追加します。

「ギャラリー」を追加

ラベルの下に
「レイアウト」>「空の垂直ギャラリー」を追加します。
データソースに「勤怠管理テーブル」、ビューに「アクティブな勤怠管理テーブル」を選択します。
レイアウトに「タイトルとサブタイトル」を選択します。
フィールドの「編集」>
Title1に「日付」、Subtitle1に「勤務形態」を選択します。
「テキストラベル」を２つ追加し、それぞれに「出勤時間」と「退勤時間」を選択し、横並びに調節します。
日付ラベルのTextプロパティに
「Text(ThisItem.日付, “[$-ja-JP]yyyy/mm/dd”)」
を設定して日付のみを表示させます。
出勤時間ラベルのTextプロパティに
「Text(ThisItem.出勤時間, “[$-ja-JP]hh:mm”)」
を設定して時刻のみを表示させます。
出勤時間ラベル同様、退勤時刻ラベルのTextプロパティにも
「Text(ThisItem.退勤時間, “[$-ja-JP]hh:mm”)」
を設定して時刻のみを表示させます。
＞(右)アイコンのOnSelectプロパティに
「Navigate(編集画面)」
を設定します。
ギャラリーのItemsプロパティに
「Filter(勤怠管理テーブル, Name = Office365ユーザー.MyProfile().DisplayName)」
を設定すると、自分の勤怠データのみが表示されます。
今回のご説明は以上となります。
次回は「第四回編集画面編」になります。お楽しみに！
　

無料相談実施中（月に3社様限定）

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

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

ご相談はこちらから

エンジニアブログ,デジタルトランスフォーメーション,業務効率化

Posted by bizwind