学習の目的

この演習では、休暇の申請と管理、機器のチェックアウト申請に従業員が使用できるキャンバスアプリケーションを Copilot を使用して作成します。このアプリを作成したら、Copilot と Power Apps デザイナーを使用してアプリを修正します。

このラボを完了すると、次のことができるようになります。

Copilot を使用して、アプリをサポートするデータモデルの作成について支援を受ける。
キャンバスアプリケーションを変更する。

シナリオ

Contoso Consulting は、IT および AI コンサルティングサービスに特化したプロフェッショナルサービス組織です。従業員が休暇を申請するために使用できる休暇アプリケーションの作成を検討しています。

ラボの詳細

この演習を始める前に、次のラボを完了しておく必要があります。

ラボ 2 - データモデルを作成する

重要: このラボでは、AI を使用してコンポーネントを構築します。 AI の結果にはばらつきがあるため、ラボで定義したものと異なる (ただし似ている) 結果になる可能性があることに注意してください。ラボで概説されている基本的な概念は、何が作成されたか、またはどのような名前が付けられたかに関係なく同じです。テーブルと列が完全と一致しない場合は、作成された内容に合わせて調整する必要がある場合があります。

この演習の推定所要時間は 60 から 75 分です。

タスク 1:Power Apps にサインインしてインターフェイスについて確認する

Web ブラウザーを開き、Power Apps Maker Portal に移動します。
左側のナビゲーションを使用して [作成] を選択します。
[アプリの作成] で、[Copilot で開始] を選択します。
[Copilot で構築するテーブルについて説明する] 画面で、次のように入力します: I want to store time off requests sent by employees. The table should identify the start and end times of the request.
[テーブルオプション] ボタンを選択します。表示されるメニューから、[1 つのテーブル] を選択します。
[生成] ボタンを選択します。

Copilot によって Time Off Request テーブルが作成されたはずです。次に、テーブルに列を追加します。

注:必要に応じて、テーブル名を追加してプロンプトを表示してください。
[Copilot] ペインで、次のように入力します: Add a choice column called Time Off Reason.
[Copilot] ペインで、次のプロンプトを個別に追加します。
- Add a choice column named Time off Type.
- Add a Date column called Submission Date.
- Add a choice column to the Time Off request table called Approval Status.
- Add a multi-line text column called Request Details.
休暇テーブルは次の画像のようになります。

次に、休暇申請を特定のユーザーに関連付けることができるように、ユーザーテーブルをデータモデルに追加します。
コマンドバーで、[+ 既存のテーブル] を選択します。
[推奨] から [すべてのテーブル] に切り替えます。
[検索] フィールドに「User」と入力します。
User テーブルを選択し、[選択項目の追加] ボタンをクリックします。
コマンドバーで、[リレーションシップの作成] を選択します。
関連付けを次のように構成します。
- 1: ユーザー
- 多: 休暇申請
- 表示名: Requesting Employee
完了を選択します。

完成したデータモデルは次の画像のようになります。
[アプリを保存して開く] ボタンを選択します。

[!NOTE] 新しいアプリが作成されるまでに数分かかる場合があります。

タスク 2:新しいアプリをカスタマイズする

新しいアプリが作成されたら、ニーズに合わせていくつか変更を加えます。まず、[ようこそ] 画面にいくつか変更を加えます。

新しいアプリを開いたら、”Time Off Requests” テキストの上にある “Image” プレースホルダーを選択します。
表示されるメニューから、[編集]>[アップロード] を選択します。
クラスファイルフォルダー内の Time off 画像を選択し、[開く] を選択します。
次に、”User” の上にある “Image” プレースホルダーを選択します。
表示されるメニューから、[編集]>[アップロード] を選択します。
クラスファイルフォルダー内の Employee 画像を選択し、[開く] を選択します。

次に、ユーザーが読みやすくなるように画像のサイズを調整します。さらに、各項目に表示されるテキストを調整します。
コマンドバーの [プロパティ] ボタンを選択します。 (編集ボタンのすぐ右にあります。)**
先ほど追加した Time off 画像を選択します。
[プロパティ] パネルで、次のように画像を構成します。
- 画像の位置: フィル
- 幅: 300
- 高さ: 300
前の手順を繰り返して、Employee 画像の [高さ] と [幅] を 300 x 300 に設定します。
以下のテキストを選択します: “Time Off Requests“。
[プロパティ] パネルで [テキスト] フィールドを選択し、テキストを次のように変更します: Create, View, and Manage you time off requests.
[ヘッダー] の [ようこそ画面] のテキストを選択します。
右側の [プロパティ] ペインで、[ロゴ] フィールドを選択します。
表示されるメニューから、[アップロード] を選択します。
クラスファイルから Contoso ロゴを選択し、[開く] を選択します。
[プロパティ] パネルの [スタイルとテーマ] グループで [塗りつぶし] の色アイコンを選択します。
[カスタム] タブを選択します
[16 進数] の色を 101E2B に変更します
[ヘッダー] を選択した状態で、[タイトル] を Contoso Employee Hub に変更します。
コマンド バーの [保存] ボタンを選択してアプリを保存します。
[保存] 画面で、[名前] を Contoso Employee Hub に変更し、[保存] を選択します。

アプリは画像のようになります。

タスク 3:アプリに新しい画面を追加する。

アプリを構築しているときに、マネージャーの 1 人から、従業員もこのアプリを使用して機器をチェックアウトできるかどうかについて相談されました。 Contoso は既に Dataverse に機器のチェックアウト情報を保存しているので、その情報をアプリで使用できるようにするだけで済みます。

アプリを開いたまま、[Copilot] ペインを展開します (必要な場合)。 Copilot で、次のように入力します: Add a new screen called Equipment Checkout.
[Send] を選択します。
[保持する] ボタンを選択して、その画面を受け入れます。
[Equipment Checkout] という新しい画面がアプリに追加されました。
[Equipment Checkout] 画面で [レイアウト付き] をクリックし、[サイドバー] レイアウトを選択します。
SideBarContainer が表示されるまで、複数のコンテナーを展開します。
SidebarContainer を右クリックし、名前を EquipContainer1 に変更します。
EquipContainer1 コンテナーを選択した状態で、[挿入メニューを開く] ボタンをクリックします。
[検索] ウィンドウで「ギャラリー」と入力し、[垂直ギャラリー] を選択します。
表示される [検索] フィールドにデータソースを入力するように求められたら、「Equipments」と入力し、Equipment テーブルを選択します。
画面の左側にあるツリービューで、先ほど追加した Gallery1 コントロールを選択します。
ギャラリー名を右クリックし、[名前の変更] を選択して、名前を Equipment List に変更します。
Equipment List ギャラリーにカーソルを合わせ、ギャラリーの上に表示されるツールバーで [レイアウト] を選択します。
[タイトルとサブタイトルのレイアウト] オプションを選択します。
Equipment List ギャラリーを選択した状態で、[プロパティ] ペインで次のように構成します。
- Width: 360
- 高さ (伸縮可能): オン
- 最小の高さ: 287
次に、EquipmentContiner1 コンテナーに、検索コントロールを格納するコンテナーを追加します。これは、Equipment List ギャラリーの内容をフィルター処理するために使用します。
ツリー ビューで EquipContainer1 を選択します。
コンテナーにカーソルを合わせ、Copilot アイコンを選択します。
次のテキストを入力します: Insert a Horizontal container.
[保持する] ボタンを選択します。
新しいコンテナーが EquipContainer1 コンテナーの下部に追加されます。
ツリービューで、新しいコンテナーをクリックして長押ししたままドラッグし、Equipment List ギャラリーの上に配置します。
コンテナーの名前を EquipSearchContainer に変更します。
EquipSearchContainer を選択した状態で、[プロパティ] ペインで次のように構成します。
- 最小幅: 0
- 高さ (伸縮可能): オフ
- Height: 44
EquipSearchContainer を選択した状態で、[挿入メニューを開く] ボタンを選択します。
[検索] フィールドに「テキスト」と入力し、[テキスト入力] を選択します。
[テキスト入力] フィールドの名前を EquipSearchInput に変更します。
EquipSearchInput を選択した状態で、[プロパティ] ペインで次のように構成します。
- 既定値: Blank (nothing)
- ヒントのテキスト: 検索
- フォント: Open Sans
- フォントサイズ: 14
- パディング (以下の値が既に設定されている可能性があります。)
  - 上: 5
  - 下: 5
  - 左: 12
  - 右: 5
- 高さ: 44
- 幅 (伸縮可能): オン
- 最小幅: 0
ツリービューで、**EquipSearchContainer ** を選択します。
コンテナーにカーソルを合わせ、Copilot アイコンを選択して、「Add a Search Icon.」と入力します。
[保持する] を選択します。

注: Copilot によって追加されたアイコンが間違っている場合は、削除して虫眼鏡を手動で挿入します。
[検索] アイコンを選択した状態で、[プロパティ] ペインでコントロールを次のように構成します。
- パディング
  - 上: 10
  - 下: 10
  - 左: 10
  - 右: 10
- 高さ: 44
- 幅: 44
左側のツリービューを使用して、EquipSearchContainer を選択します。

最後に、検索コントロールフィールドに入力されたテキストに基づいてデータを設定するように Equipment List ギャラリーを構成します。
先ほど作成した Equipment List ギャラリーを選択します。
Items プロパティに次の数式を入力します: Search([@'Equipments'], EquipSearchInput.Text, 'Equipment Name',Category)
コマンド バーで [保存] ボタンを選択してアプリを保存します。

重要: 数式をコピーして数式バーに貼り付けた場合、Equipment と Equipment Name の ‘’ が間違っている可能性があります。数式エラーが発生した場合は、削除して再入力してみてください。

タスク 4:レコード操作を表示するコンテナーを構築する。

ユーザーが [Equipment list] のレコードを選択すると、別のコンテナーでレコードが開かれ、選択したレコードを編集できるようになります。

MainContainer を選択し、名前を DetailsContainer に変更します。
DetailsContainer で [挿入] ボタンを選択します。
[検索] フィールドに「コンテナー」と入力し、[垂直コンテナー] を選択します。
右クリックして [名前の変更] を選択し、コンテナーの名前を RecordDetails にします。
RecordDetails コンテナーで、[挿入] ボタンを選択します。
[挿入] メニューで、[フォームの編集] を選択します。
データソースの選択画面で、[Equipments] を選択します。 (データが設定されるまでに最長 30 秒かかる場合があります。)**
追加したフォームを右クリックして [名前の変更] を選択し、EquipmentForm にします。
[プロパティ] ペインで [詳細設定] タブを選択し、[Item] プロパティを次のように設定します。'Equipment List'.Selected (これにより、現在選択されているレコードがフォームに設定されます。)
[表示] タブを選択し、次のようにフォームを構成します。
- 列: 2
- 既定のモード: 編集
次に、フォーム上の操作を制御するために使用する別のコンテナーを追加します。
DetailsContainer が選択されていることを確認します。
表示される [Copilot] アイコンを選択します。次のように入力します: Insert a horizontal container.
[保持する] を選択します。
コンテナーを右クリックして [名前の変更] を選択し、SelectedRecord1 にします。
ツリー ビューを使用して、SelectedRecord1 コンテナーを RecordDetails コンテナーの上に移動します。
SelectedRecord1 コンテナーを次のように構成します。
- 最小幅: 250
- 高さ (伸縮可能): オフ
- Height: 50
SelectedRecord1 コンテナーを選択した状態で、[挿入] ボタンを選択します。
[テキストラベル] を選択します。
ラベルの名前を SelectedRecordTitle に変更します。
SelectedRecordTitle を次のように構成します。
1. パディング
  1. 上: 5
  2. 下: 5
  3. 左: 30
  4. 右: 5
2. 幅 (伸縮可能): オン
3. 最小幅: 150
4. 高さ: 40
SecondRecord1 コンテナーを選択し、[挿入] ボタンを選択します。
[検索] フィールドに「保存」と入力し、[保存] アイコンを選択します。
[保存] ボタンを次のように構成します。
- 高さ: 40
- Width: 40
OnSelect プロパティを選択し、次の数式を入力します: SubmitForm(EquipmentForm)。

タスク 5:ページのヘッダーを変更する

この画面を作成する最後の手順は、閲覧者コンテナーにデータを設定することです。

アプリの上部にある HeaderContainer を選択します。
[挿入] ボタンを選択します。
テキストラベルを選択します。
テキストラベル コントロールを次のように構成します。
- Text: Equipment Checkout
- フォント: Open Sans
- フォントサイズ: 16
- フォントの太さ: 中太字
- パディング
  - 上: 16
  - 下: 16
  - 左: 16
  - 右: 16
- 高さ: 40
- 幅 (伸縮可能): オン
HeaderContainer を選択し、[挿入] を選択して、[ホームアイコン] を選択します。
ホームボタンの OnSelect プロパティを Back() に設定します。

タスク 6:ようこそ画面の構成を完了する

検討の結果、このアプリではユーザーを作成する機能は必要ないと判断したため、[Welcome Screen] を変更して機器のチェックアウトにアクセスできるようにします。

ツリービューを使用して、[Welcome Screen] を選択します。
[Users] の上にある [Image] を選択します。
表示されるメニューから [編集] を選択し、[アップロード] を選択します。
学生フォルダーで Equipment の画像を見つけて、[開く] を選択します。
画像の OnSelect プロパティを Navigate('Equipment Checkout') に設定します。
[Users] テキストを選択し、Text プロパティを Equipment に設定します。
Equipment の下の Text を選択し、Text プロパティを Check out equipment and edit reservations に変更します。
[保存] ボタンを選択してアプリを保存します。

タスク 7:アプリケーションをテストする

コマンドバーで、[再生] ボタンを選択します。
Equipment の画像を選択します。
[検索] フィールドに「Electronics」と入力します。 (一覧のフィルタリング方法に注目してください)**
Laptop レコードを選択します。
[Category] を [Furniture] に変更します。
[保存] ボタンを選択します。
Laptop のカテゴリが [Furniture] に変わることに注目してください。
[ホーム] ボタンを選択します。
紫色の [X] を選択してプレビュー モードを終了します。

タスク 8:アプリを保存して発行する

目標: アプリを保存して発行すると、Web ブラウザー、モバイルデバイス、SharePoint や Teams などの埋め込みプラットフォームからアクセスできるようになります。

Power Apps Studio で、[保存] ボタンを選択します。
[発行] ボタンを選びます。
[このバージョンの発行] を選択します。