演習 - Power Apps で追加のページとメールをデザインする

10 分

このユニットでは、Mixed Reality 機能をサポートするために追加のページをいくつか設計します。これらのページでは、アプリケーションが適切に動作するために必要な特定の機能が実行されます。また、Power Apps の電子メール機能を使用して、注文の詳細を顧客に送信します。

ノートページを作成

ユーザーは、 MR セッションのビュー中に 写真を撮り、ギャラリーを介して表示できます。 [ ノート] ページでは、 MR セッションのビュー 中にキャプチャされたテキストノートと画像を保存できます。

2 つの新しい空白の画面を作成し、 Product_notes と Carpet_notesの名前を変更します。
Product_notes ページをデザインする: [入力] ドロップダウンを選択し、[テキスト入力] を選択します。 TextInput_products名前を変更します。
ギャラリー>水平型のギャラリーを含める場合は、Horizontal を選択します。 MR で表示セッション中に撮影された写真をこのギャラリーに保存します。 ギャラリー View_productsの名前を変更します。
ギャラリーを画面のもう一方の部分に配置します。 サブタイトルとタイトルを削除して、画像のみを保持します。画像を拡大します。
ギャラリーを選択し、次の行を追加して Items プロパティを構成します。
```
ViewInMR1.Photos
```
MR セッションのビューで撮影したすべての画像は、今後の参照のためにこのギャラリーに格納されます。
画面の上部にラベルを挿入しましょう。 [ラベル] オプションを選んでから、[中央揃え] を選びます。必要に応じて、位置、色、テキストの表示をカスタマイズします。名前をNotes_labelに変更します。
必要に応じて、ユーザーがホームページに移動できるように、前に追加したラベルの上に [戻る] アイコンを配置します。 [戻る] アイコンを追加するには、[挿入] タブで [アイコン] ドロップダウンを展開し、[戻る] アイコンを選択します。
[戻る] アイコンを正しく配置し、次を追加して OnSelect プロパティを構成します。
```
Navigate(Product_details,ScreenTransition.Cover)
```
Product_details画面に切り替え、[挿入] タブの [アイコン] ドロップダウンからメモアイコンを追加します。
次の行を追加して、ノート アイコンの OnSelect プロパティを構成します。
```
Navigate(Product_notes,ScreenTransition.CoverRight)
```
Notes_carpetsに対して同じ手順をレプリケートします。

注

カーペットカテゴリにはMRで表示機能を含めません。 [Notes_carpets] ページでは、MR セッションのビュー中に撮影した写真を保存するギャラリーコントロールの追加を除外します。

ヒント

キーボードの F5 キーを押すか、Power Apps Studio の右上隅にある [再生 ] ボタンを選択して、アプリケーションをテストできます。

注文の概要ページの作成

Product_details画面と Carpet_details 画面 にボタンを 追加します。ボタンのOrder_productと Order_carpet の名前を変更します。ボタンの表示テキストを Order に変更します。
2 つの新しい空白画面を作成し、 Order_products および Order_carpets名前を変更します。
Product_details画面を選択し、[注文] ボタンの OnSelect プロパティを次のように構成します。
```
Navigate('Order_products',ScreenTransition.Cover)
```
Carpet_details画面と同じ手順に従います。
Order_products ページで、Product、Price、Color、Notes のラベルを挿入し、それに応じて名前を変更します。
図に示すように、 Product、 Price、 Color、 Notes の横に空のラベルを挿入します。

次のように、これらの空のラベルの Text プロパティを構成します。

製品:
```
Gallery_products.Selected.Name
```
価格:
```
Gallery_products.Selected.Price
```
色:
```
Gallery_products.Selected.Color
```
メモ:
```
TextInput_products.Text
```

上部に別のラベルを追加し、表示テキストを [注文の概要] に変更します。必要に応じてフォントサイズとフォントを変更します。
[ギャラリー] ドロップダウンを展開し、[水平] を選択します。イメージのみを保持します。ギャラリーの他のコンポーネントを削除 します。 Order_gallery_products に名前を変更
次の行を追加して、このギャラリーの Items プロパティを構成します。
```
ViewInMR1.Photos
```
3 つの ラベル を追加し、表示テキストを [ Enter your email]\(電子メールを入力\) に変更して、注文確認メールを取得します。 組織のメール ID:、 顧客のメール ID: をそれぞれ取得します。
[ 入力 ] ドロップダウンを展開し、[ テキスト入力] を選択します。 2 つの テキスト入力 コンポーネントを画面に追加し、画像に示すように配置します。 Input1_productsおよびInput2_productsの名前を変更します。
ヒントテキスト プロパティに「メール ID を入力してください」を追加して構成します。Default プロパティには値を格納しません。必要に応じてフォントサイズと色を調整します。
[挿入] タブからボタンを追加し、Confirm を追加して Text プロパティを構成します。
[ アイコン ] ドロップダウンを展開し、[ 戻る ] と [ホーム ] アイコンを選択します。画像に示すように、正しく配置します。
これらの 2 つのアイコンの OnSelect プロパティを次のように構成します。
- 戻る:
```
Navigate(Product_details,ScreenTransition.CoverRight)
```
- ホーム:
```
Navigate('Home Page',ScreenTransition.CoverRight)
```
Order_carpetsの場合と同じ手順に従います。

エンドページの作成

空白の画面を作成し、終了ページの名前を変更します。
ラベルを追加し、表示テキストを Order Successfully Submitted に変更します。必要に応じて、画面にラベルを配置します。
画面の下部に ボタン を追加します。ボタンの Text プロパティを構成するには、 Shop more を追加します。ユーザーをホームページに誘導しましょう。[ その他のショップ ] ボタンを選択し、 OnSelect プロパティに次の行を追加します。
```
Navigate('Home Page',ScreenTransition.Cover)
```
[ メディア ] ドロップダウンを展開し、[ イメージ ] を選択して[ 終了]ページにイメージコンポーネントを追加します。
画像に示すようにイメージを配置します。表示するロゴファイルを選択します。

ヒント

アプリケーションを頻繁に保存するには、上部にある [ ファイル ] タブを選択し、[ 保存 ] オプションを選択します。メッセージが表示されたら、[ クラウド ] オプションを選択し、[ 保存] を選択します。

Power Apps 経由で電子メールを送信する

[ データ ] タブを選択し、[ + データの追加] を選択します。 コネクタを展開し、Office 365 Outlook を選択して、このアプリケーションのコネクタの 1 つとして追加します。

Order_products開き、次の行を追加して、[確認] ボタンの OnSelect プロパティを構成します。

Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary","<b> Your order is successfully submitted! </b> <br> Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & "<br><b> Thank you for shopping with us! </b>");
Navigate('End page',ScreenTransition.Cover)

注

前の関数で使用される名前は、開発時にこのアプリケーションで使用される名前付け規則に従います。アプリケーションに応じて関数をカスタマイズできます。

上記の手順を実装すると、アプリケーションは次のように動作する必要があります。アプリケーションには、すべてのセッションノートを格納する [メモ] ページ 、注文を確認してメールを送信するための [注文の概要] ページ 、およびアプリケーションに優れた終了を提供するための [終了] ページ が含まれます。

モバイルデバイスでアプリケーションをテストする

デバイスのダウンロードリンクを選択します。
- iOS (iPad または iPhone) の場合は、 App Store に移動します。
- Android の場合は、 Google Play に移動します。
モバイルデバイスで Power Apps を開き、Microsoft アカウントの資格情報でサインインします。
Power Apps モバイルにサインインすると、最近使用したアプリが既定の画面に表示されます。

サインイン時の既定の画面は [ホーム ] です。最近使用したアプリと、お気に入りとしてマークしたアプリが表示されます。
モバイルデバイスでアプリを実行するには、アプリタイルを選択します。 Power Apps モバイルを使用してキャンバスアプリを初めて実行する場合は、画面にスワイプジェスチャが表示されます。
アプリを閉じるには、指を使用してアプリの左端から右にスワイプします。 Android デバイスでは、[ 戻る ] ボタンを選択して、アプリを閉じる予定であることを確認することもできます。

注

アプリでデバイスの機能 (カメラや位置情報サービスなど) を使用するためのデータソースまたはアクセス許可への接続が必要な場合は、アプリを使用する前に同意する必要があります。通常、アプリを初めて実行するときにのみメッセージが表示されます。

フィードバック

このページはお役に立ちましたか?