練習 - 在 Power Apps 中設計其他頁面和電子郵件
在本單元中，您將設計一些額外的頁面，以支援您的混合實境功能。 這些頁面會執行一些必要的特定函式，讓應用程式能夠適當地運作。 您也將使用Power Apps的電子郵件功能，將訂單詳細資料傳送給客戶。
建立附注頁面
使用者可以在 MR 檢視 期間拍照，並透過相簿顯示它們。 在 附注 頁面上，您可以儲存文字筆記和 在 MR 會議期間檢視 所擷取的影像。
建立兩個新的 空白 畫面，並將其重新命名 Product_notes 和 Carpet_notes。
設計 Product_notes 頁面：選取 [ 輸入 ] 下拉式清單，然後選取 [ 文字輸入]。 將它重新命名 TextInput_products。
選取 圖庫>水平 以包含水平類型的圖庫。 您會在此資源庫中儲存在在 MR 中檢視工作階段期間所拍攝的照片。 重新命名畫廊 View_products。
將畫廊放置在畫面的另一個部分。 刪除 [子標題 ] 和 [ 標題]，只保留影像。 放大影像。
選取圖庫，並透過新增以下程式碼以設定 Items 屬性：
ViewInMR1.Photos
在在 MR 中檢視工作階段所拍攝的照片，全都會儲存在此資源庫以供日後參考。
讓我們在畫面頂端插入標籤。 選取 [標籤] 選項，然後將其 [置中對齊]。 根據您的需求自定義位置、色彩和文字顯示。 將它重新命名 Notes_label。
我們會在先前新增的標籤上放置 [上一頁] 圖示，以協助使用者在需要時流覽至首頁。 若要新增 [上一頁 ] 圖示，請在 [ 插入] 索引卷標上展開 [ 圖示 ] 下拉式清單，然後選取 [上一頁] 圖示。
藉由新增下列命令，正確放置 Back 圖示並設定 OnSelect 屬性：
Navigate(Product_details,ScreenTransition.Cover)
切換至 [Product_details] 畫面，並從 [插入] 索引卷標上的 [圖示] 下拉式清單中新增 [筆記] 圖示。
新增下列這一行，以設定 Note 圖示的 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。
建立兩個新的 空白 畫面，並將其重新命名 Order_products 和 Order_carpets。
選取Product_details畫面，然後設定 [訂單] 按鈕的 OnSelect 屬性，如下所示：
Navigate('Order_products',ScreenTransition.Cover)
針對 Carpet_details 畫面遵循相同程序。
在 [Order_products] 頁面中，插入 [產品]、[ 價格]、[ 色彩] 和 [ 附註 ] 標籤，並據以重新命名。
在 [產品]、 [價格]、[ 色彩] 和 [ 附註 ] 旁插入空白標籤，如圖所示。
設定這些空白標籤的 Text 屬性，如下所示：
產品：
Gallery_products.Selected.Name
價格：
Gallery_products.Selected.Price
色彩：
Gallery_products.Selected.Color
附註：
TextInput_products.Text
在頂端新增另一個標籤，並將其顯示文字變更為 [訂單摘要]。 根據您的需求變更字型大小和字型。
展開 [資源庫] 下拉式清單，然後選取 [水平]。 只保留圖片，刪除圖庫的其他元件。 將它重新命名 Order_gallery_products
將下列這一行新增至此畫廊，以設定其 Items 屬性：
ViewInMR1.Photos
新增三 個標籤， 並將顯示文字變更 為輸入電子郵件，以取得訂單確認郵件！、 組織郵件標識碼：和 客戶郵件標識碼：。
展開 [ 輸入 ] 下拉式列表，然後選取 [ 文字輸入]。 將兩個 文字輸入 元件新增至畫面，並將其放置在影像中所示。 將它們重新命名Input1_products和Input2_products。
配置 提示文字 屬性，並新增 Enter mail ID:；不要在 Default 屬性中儲存任何值。 根據您的需求調整字型大小和色彩。
從 [插入] 索引標籤新增按鈕，並藉由新增 Confirm 來設定其 Text 屬性。
展開 [ 圖示] 下拉式清單，然後選取 [ 上一頁 ] 和 [ 首頁 ] 圖示。 正確放置它們，如下圖所示。
設定這兩個圖示的 OnSelect 屬性，如下所示：
上一頁：
Navigate(Product_details,ScreenTransition.CoverRight)
首頁：
Navigate('Home Page',ScreenTransition.CoverRight)
針對 Order_carpets 遵循相同程序。
建立結束頁面
建立 空白 畫面，並將它重新命名 為 [結束] 頁面。
新增 標籤 ，並將其顯示文字變更為 [成功送出訂單！]。 視需要在畫面上放置標籤。
在畫面底部新增 按鈕 。 將按鈕的 Text 屬性設定為 多買一點。 讓我們將用戶導向首頁：選取 [ 購物更多 ] 按鈕，然後在 OnSelect 屬性中新增下列這一行。
Navigate('Home Page',ScreenTransition.Cover)
展開 [ 媒體 ] 下拉式清單，然後選取 [ 影像 ] 以將影像元件新增至 [結束] 頁面。
將影像按照示例圖片的位置放置。 選取要顯示的 標誌 檔案。
小提示
選取頂端的 [ 檔案 ] 索引標籤，然後選取 [ 儲存 ] 選項，經常儲存您的應用程式。 如果出現提示，請選取 [ 雲端 ] 選項，然後選取 [ 儲存]。
透過Power Apps 傳送電子郵件
選取 [ 數據] 索引標籤，然後選取 [+ 新增數據]。 展開 [連接器]，然後選取 [Office 365 Outlook ] 將其新增為此應用程式的其中一個連接器。
開啟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 裝置上，您也可以選取 [ 上一頁 ] 按鈕，並確認您想要關閉應用程式。
備註
如果應用程式需要連線到數據來源或需權限才能使用裝置的功能（例如相機或位置服務），您必須同意後，才能使用此應用程式。 一般而言，您只會在第一次執行應用程式時收到提示。