演習 - キャンバス アプリを作成する

学習目標

この演習で、学習者は Copilot を使用して、従業員がメンテナンス問題の依頼に使用できるキャンバス アプリを作成します。 Copilot を使用して、データ モデルと初期アプリケーション レイアウトを構築します。

この課題が完了すると、次のことができるようになります。

• Copilot の支援を利用して、アプリを支えるデータ モデルを作成します。
• キャンバス アプリケーションを変更します。

シナリオ

Contoso College は、従業員がキャンパス全体のメンテナンス問題の報告に使用できるアプリケーションを必要としています。 Contoso は、従業員が必要に応じて携帯電話からアクセスできるキャンバス アプリケーションを構築したいと考えています。

この課題が完了すると、次のことができるようになります。

• Copilot の支援を利用して、アプリを支えるデータ モデルを作成します。
• キャンバス アプリケーションを変更します。

タスク 1: データ モデルを構築してアプリを作成する

1. Web ブラウザーを開き、Power Apps Maker Portal に移動します。

2. 左側のナビゲーションを使って、作成を選択します。

3. アプリを作成するの下で Copilot で開始するを選択します。

4. Copilot で構築するテーブルについて説明します画面で、「メンテナンス問題の送信用にテーブルを 1 つ作成する。」と入力します。

5. テーブル オプション ボタンを選択します。 表示されるメニューから 1 つのテーブルを選択します。

   

6. 生成 ボタンを選択します。

Copilot によって Maintenance Issue テーブルが作成されました。 次に、テーブルに列を追加します。

7. Copilot ペインで、「Issue Type という名前の選択肢列を追加する。」と入力します。

8. Copilot ペインで、次のプロンプトをそれぞれ追加します。

   1. 「Location という名前のテキスト列を追加する。」
   2. 「Contact Number という名前のテキスト列を追加する」
   3. 「Priority level という名前の選択肢列を追加する。」
   4. 「Access Instructions という名前の選択肢列を追加する。」
   5. 「Resolution Notes という名前のテキスト列を追加する。」

次に、不必要な列を削除します。これらはルックアップ列で置き換えられるためです。

9. これらがテーブルに存在する場合は、次のコマンドを入力して削除します。

   1. 「Reported By 列を削除する。」
   2. 「Assigned To / Technician 列を削除する。」

Maintenance Issue テーブルは次の画像のようになっているはずです。

次に、ユーザー テーブルをデータ モデルに追加し、Maintenance Issue の依頼を特定のユーザーに関連付けられるようにします。

10. コマンド バーで、+ 既存のテーブルを選択します。

11. 推奨からすべてのテーブルに切り替えます。

12. 検索フィールドに、User と入力します。

13. User テーブルを選択し、選択した項目を追加ボタンを選択します。

14. コマンド バーで、リレーションシップの作成を選択します。

15. 関連付けを次のように構成します。

    • 1: User
    • 多: Maintenance Issue
    • 表示名: Requesting Employee

16. 完了を選択します。

17. コマンド バーで、リレーションシップの作成を選択します。

18. 関連付けを次のように構成します。

    • 1: User
    • 多: Maintenance Issue
    • 表示名: Assigned to

19. 完了を選択します。

完成したデータ モデルは次の画像のようになります。

20. アプリを保存して開くボタンを選択します。

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

新しいアプリが作成されたところで、次はニーズに合わせて変更を加えます。 最初に、ようこそ画面にいくつかの変更を加えます。

1. 新しいアプリを開いた状態で、メンテナンス問題テキストの上の画像プレースホルダーを選択します。
2. 表示されるメニューから、編集>ストック画像を選択します。
3. 検索フィールドに Medical と入力して、コンピューター キーボードと聴診器の画像を選択し、挿入を選択します。
4. 次に、ユーザーの上の画像プレースホルダーを選択します。
5. 検索フィールドに People と入力し、使用したい画像を選択して、挿入を選択します。
6. 表示されるメニューから、編集>ストック画像を選択します。

次に、ユーザーが読みやすくなるように画像のサイズを調整します。 また、各項目に表示されるテキストも調整します。

7. コマンド バーでプロパティ ボタンをクリックします。 ([編集] ボタンのすぐ右側にあります)。

8. メンテナンス問題の上の画像を選択します。

9. プロパティ パネルで、画像を次のように構成します。

   • 画像の位置: 幅に合わせて調整
   • 幅: 350
   • 高さ: 350

10. 前の手順を繰り返して、ユーザー画像の高さと幅を 350 x 350 に設定します。

11. メンテナンス問題の下のテキストを選択します。

12. プロパティ パネルで Text フィールドを選択し、テキストを「Maintenance Issue を送信する」に変更します。

13. ヘッダーでようこそ画面テキストを選択します。

14. プロパティ ペインで、ロゴの表示をオフに設定します。

15. プロフィール画像をオフに設定します。

16. スタイルとテーマ グループの下のプロパティで、塗りつぶしの色のアイコンを選択します。

17. 色を黒に変更します。

18. ヘッダーがまだ選択されていることを確認し、タイトルを「Contoso 問題の報告」に変更します。

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

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

メンテナンス問題の送信だけでなく、ユーザーが資産を追加できると合理的だと判断しました。

1. アプリがまだ開いている状態で、Copilot ペインを展開します (必要な場合)。 Copilot で、「Assets という名前の新しい画面を追加する。」というテキストを入力し、送信を選択します。

2. 保持するボタンを選択して、画面を受け入れます。

3. Assets という新しい画面がアプリに追加されます。

4. 画面で、データを含むを選択します。

5. データ ソースを選択する画面で新しいテーブルの作成を選択します。

6. Copilot で、次のテキストを入力します。「Assets という名前の新しいテーブルを作成する。 これに次の列を含める。 Asset Name、Asset ID、Asset Type、Asset Location、Data Installed、Department。」

7. もう 1 つのテーブル (Department) が追加されていた場合は、Copilot を使用し、「Department テーブルを削除する。」と入力して削除します。

8. テーブルが作成されたら、保存して終了を選択します。

9. アプリに戻り、もう一度データを含むを選択します。

10. 新しい Assets 画面がアプリに追加されます。

11. 必要な場合には、コマンド バーでプロパティ ボタンを選択します。 ([編集] ボタンの横)。

12. 次に、Assets のリスト内を選択します。 鉛筆アイコンが表示されたら、鉛筆アイコンを選択します。

13. 挿入ボタンを選択し、テキスト ラベルを選択します。

14. テキスト ラベルを、Asset Location のそばに配置します。

    

15. テキスト ラベルが選択されている状態で、数式バーに「ThisItem.’Asset Type’」というテキストを入力します。

    

16. フォームの背景内を選択します。

17. Columns プロパティを 1 に設定します。

18. 完成した画面は次に示す画像のようになります。

    

タスク 4: ようこそ画面を更新する

レビューの際に、このアプリでユーザーを作成する機能は不要であると判断しました。このため、ようこそ画面を変更して、Assets へのアクセスを許可します。

1. ツリー ビューでようこそ画面を選択します。
2. ユーザー/連絡先の上の画像を選択します。
3. 表示されるメニューから、編集を選択してストック画像を選択します。
4. 検索フィールドに備品と入力し、使用する画像を選択します。
5. 画像の OnSelect プロパティを Navigate('Assets') に設定します。

6. ユーザー/連絡先テキストを選択し、Text プロパティを Assets に設定します。
7. Equipment の下の Text を選択し、Text プロパティを「資産レコードを表示および作成する。」に変更します。

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

次に、アプリが正しく機能することを確認するためにテストしましょう。

1. コマンド バーで、再生ボタンを選択します。
2. Assets 画像を選択します。
3. 検索フィールドに、オフィスと入力します。 (リストのフィルター処理方法に注意)
4. Office Chair レコードを選択します。
5. 編集 (鉛筆) ボタンを選択します。 カテゴリを Furniture に変更します。
6. Asset Type を Equipment に変更します。
7. [保存] ボタン (チェックマーク) を選択します。
8. 保存 ボタンを選択します。
9. Desk の Asset Type が Equipment に変更されることに注意します。
10. ホーム ボタンを選択します。
11. 紫の X を選択してプレビュー モードを終了します。

タスク 6: アプリを保存して公開する

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

1. Power Apps Studio で保存ボタンを選択します。
2. 名前を付けて保存画面で、名前を Contoso Issue Reporting に設定し、保存を選択します。
3. 公開ボタンを選択します。