第 3 章：建立低程式碼原型

2023-09-29

注意

第 2 章參考現場技術人員和工程師所使用的行動應用程式，以及內部部署人員使用的桌面應用程式。下列各章主要講述使用建立的行動應用程式的設計、實施和部署 Power Apps。桌面應用程式會保留作為讀者的練習。

Kiana 對低程式碼解決方案和 Power Apps 持懷疑態度。不過，Kiana 和 Maria 還是決定要建立應用程式，協助現場技術人員檢查庫存 (並視需要訂購零件)、查詢知識庫，以及在他們外出進行服務通話時確認其下一次約會。 Kiana 和 Maria 計畫使用此體驗來探索如何在 Power Apps 中新增控制項及使用公式。

雖然建置初始、低程式碼原型通常是公民開發者工作，但 Kiana 仍決定要注意此程序以了解應用程式的建構方式。 Kiana 需要此資訊，以便協助 Maria 將真實世界資料來源、Web API 及其他必要服務整合在應用程式中。

項目 1：現場庫存管理

Maria 的初始目標是建立一個顯示零件清單的畫布應用程式，並讓使用者查看任何零件的詳細資訊。最後，使用者也應該能夠訂購零件；不過，此應用程式的初始版本只會是原型，並不會掛鉤到後端。取得 Caleb (首席現場技師) 的意見反應後、Maria 會與 Kiana 合作將畫布應用程式與執行於內部部署中的庫存系統整合在一起。

Maria 非常熟悉現有的庫存管理系統，並了解其中包含的資訊。 Maria 一開始先 Excel 活頁簿，其中包含存有模擬資料及一些範例零件詳細資料的表格。表格中的欄位為識別碼、名稱、CategoryID、價格、概覽、NumberInStock 及圖像 (參考零件圖像的 URL)。此活頁簿可用於建置和測試畫布應用程式，以確保其正確顯示所需的資料。 Maria 將此活頁簿以 BoilerParts.xlsx 的名稱儲存在 OneDrive 帳戶中。

注意

您可以在本指南的 Git 存訪庫的資產資料夾中找到此活頁簿的複本。

Boiler 分為工作表，顯示含 Id、名稱、類別名稱、價格、概覽、NumberInStock 和圖像資料行的零件清單。

如果您是關聯式資料庫設計師，則會注意到 Excel 活頁簿提供了資料的非正常化視圖。例如，在關聯式資料庫中類別最有可能是參照包含類別詳細資料的不同表格 (包括名稱) 的數位識別碼。

注意

圖像欄中的 URL 目前只是預留位置。在已完成的應用程式中，這些 URL 將會取代真實圖像檔案的位址。

請遵循這些步驟，使用建立應用程式 Power Apps。

登入 Power Apps。
在首頁上的從資料開始下方，選取 Excel Online。
在連線頁面上，選取 OneDrive for Business，然後選取建立。
在 OneDrive for Business 上，選取 BoilerParts.xlsx 檔案。
選取 Excel 檔案中的表格 (Maria 會使用預設名稱 Table1 建立表格)，然後選取連線。
Power Apps 產生應用程式時，請稍候。
在已生成應用程式時，您會看到瀏覽畫面，會顯示活頁簿中各零件表格列的 CategoryID、ID 和圖像欄位。
目前顯示的欄位無法協助工程師選取產品。在顯示瀏覽的窗格中，選取資料第一列中的換熱器標籤。在公式列中，從下拉式清單中選取 Text 屬性。變更 ThisItem.Name 的屬性值。每一列第一個欄位中的文字都會切換成顯示零件名稱。

注意

在下列圖像中，表單上顯示的熱交換器標籤已變更為產品名稱 3.5 W/S Heater。
針對 ID 和圖像標籤重複上一個步驟。將 ID 欄位中的文字屬性變更為CategoryID，並將圖像的文字屬性欄位變更為概覽。瀏覽畫面現在看起來就像下面的圖像，這是讓現場工程師更容易尋找零件的實用説明。
瀏覽畫面的搜尋功能預設為使用當此案例中生成—畫面時，初始選取的欄位，在此案例中為 CategoryID、ID 和圖像。結果會根據 CategoryID 排序。將這種方式切換至名稱、類別名稱和概覽欄位，並在結果中依名稱排序。在樹狀結構視圖窗格中選取 BrowseGallery1 控制項。在公式列左側的下拉式清單中，選取 Items 屬性。將公式列的下邊緣向下拖動，讓公式完全可見。此公式包含下列運算式：
```
**SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))
```

使用下列公式，變更搜尋運算式以參考名稱、類別名稱和概覽欄位：

SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

表單標題中的標題沒有幫助，而且預設主題不符合 VanArsdel 的公司外觀。在瀏覽畫面中，選取 Table1 標籤，然後在公式列上，將標籤的文字屬性變更為瀏覽零件 (在數值中包括雙引號)。
在工具列上選取主題 (您可能必須展開工具列才能顯示其他項目)，然後選取森林主題。瀏覽畫面的色彩與樣式將會變更以符合主題。

將詳細資料畫面變得更有幫助

您已經建立了基本應用程式，並修改了瀏覽畫面，以顯示可供工程師用來識別零件的欄位。應用程式也包含詳細資料畫面，其中顯示所選取零件的所有資訊。此畫面上的欄位目前並未以邏輯順序顯示，所以您應該重新排列它們。您也可以從本畫面中移除 ID 欄位，因為此資訊與工程師無關。

在樹狀結構視圖窗格中，向下滾動並選取 DetailScreen1。這個畫面會顯示使用者在瀏覽畫面上所選取之零件的詳細資料。
在中間窗格的詳細資料畫面標頭中，選取 Table1 標籤。在右窗格的屬性索引標籤上，將文字屬性變更為零件詳細資料。

注意

在許多案例中，您可以使用編輯欄作為屬性窗格來完成相同的結果。但是，部分只能透過屬性窗格使用的屬性。
在樹狀結構視圖窗格中，在 DetailScreen1 下方選取 DetailScreen1。在右側窗格的屬性索引標籤，選取欄位旁邊編輯欄位。在中間窗格中，選取並拖動欄位，讓它們按下列順序顯示 (從上到下)：
- 名字
- CategoryID
- 概觀
- 價格
- NumberInStock
- 圖像
- 識別碼
選取 ID 欄位，選取出現在欄位右側的省略號，然後從出現的下拉式功能表中選取移除。此動作會從表單中移除 ID 欄位。
在樹狀檢視窗格中，在 CategoryID_DataCard1 下方選取 DetailScreen1。此元素是 DataCard 控制項，顯示欄位名稱 (稱為金鑰) 及其值。

在右側窗格的進階索引標籤，選取解鎖變更屬性。在資料區段中，將 DisplayName 欄位變更為類別 (包括引號)。

注意

與屬性索引標籤一樣，進階索引標籤上的許多屬性也可以透過編輯欄存取。若要設定這些屬性，您可以使用編輯欄 (如果您願意的話)。
重複上一個步驟，將 NumberInStock_DataCard1 的金鑰變更為庫存數量 (包括引號)。
您必須調整價格欄位的格式，才能將資料顯示為貨幣值。在樹狀檢視窗格中，在 Price_DataCard1 下方的 DetailForm1 下方選取 DataCardValue7。此欄位會顯示欄位的值價格。在右邊的 DataCardValue7 窗格中，在進階索引標籤上，將文字屬性變更為 Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

Parent.Default 運算式是指將上層控制項 (DataCard) 系結至資料項目—在此案例中的價格欄。文字函數會使用指定為第二個參數的格式來重新格式化此值; 在此範例中，這是本機貨幣 (兩個小數位)。
圖像資料卡應該會顯示該部分的圖像，而不是圖像檔的 URL。在樹狀檢視窗格 DetailForm1 下的 Image_DataCard1，選取 DataCardValue3，然後選取刪除移除此控制項。
選取 Image_DataCard1。在左窗格上，選取 + 插入。在插入窗格中，展開媒體然後選取圖像。
返回至樹狀檢視窗格，並確認 Image1 文字控制項已新增至 Image_DataCard1 控制項中。
在窗格的樹狀檢視中，選取 Image_DataCard1。在右窗格的進階索引標籤上，將高度變更為 500，以留出足夠的空間來顯示圖像。
在樹狀檢視窗格中，選取 Image1。設定下列屬性：
- 圖像：Parent.Default
- ImagePosition：ImagePosition.Fit
- 寬度：550
- 高度：550
注意

顯示的圖像目前是空白的，因為 Excel 活頁簿中的 URL 只是預留位置。當您將應用程式在後面的章節中將應用程式綁定至 Web API 時，您將會使用這個問題，並取得真正的 URL。

應用程式也包含編輯畫面，讓使用者可以變更部件的資訊。工程師不應能夠變更部件的詳細資料、建立新零件或從目錄中移除零件。

在樹狀檢視窗格中，選取EditScreen1。選取省略符號按鈕，然後選取刪除以移除此畫面。
在窗格的樹狀檢視中，選取DetailsScreen1。請注意，Power Apps Studio 畫面會顯示錯誤訊息。發生此錯誤的原因是 DetailsScreen1 包含參照 EditScreen1 畫面的運算式，而該畫面已不存在。
在 DetailsScreen1 的標頭中，選取鉛筆 (IconEdit1) 圖示。此控制項的 OnSelect 屬性包含運算式 EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)。選取編輯圖示時，此運算式會執行，並嘗試移至 EditScreen1 畫面。
在樹狀結構視圖窗格中，選取 IconEdit1，然後選取刪除。不再需要此圖示。
選取 IconDelete1，然後選取刪除。這個圖示是用來刪除目前的零件，也不是必要的。
請注意，部分詳細資料文字已從畫面標頭消失，而 Power Apps Studio 顯示錯誤訊息。發生此問題的原因是會計算顯示文字的標籤控制項寬度。在窗格的樹狀檢視中，選取 LblAppName2。檢查寬度屬性。此屬性的值是運算式上層的結果 Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width。
將寬度屬性的運算式變更為 Parent.Width - Self.X。錯誤消失後，部分詳細資料文字會重新顯示在畫面標題中。
在窗格的樹狀檢視中，選取 BrowseScreen1。此畫面也會顯示錯誤訊息。工具列 (IconNewItem1) 中的 + 圖示可讓使用者新增新的零件。此圖示的 OnSelect 屬性參照 EditScreen1 畫面。
選取 IconNewItem1，然後選取刪除。與之前一樣，畫面標頭中的文字會消失，並顯示錯誤訊息，並有同樣的理由。
在樹狀結構視圖窗格中，在 BrowseScreen1 下方選取 LblAppName1。移除 IconNewItem1 的參照，以修改寬度屬性的運算式 IconNewItem1.Width。新的運算式應該是 Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width。
標頭發生問題。雖然瀏覽零件文字已經重新整理，但顯示的是錯誤，而且重新整理和排序圖示位於錯誤的位置。在樹狀檢視窗格中，選取 IconSortUpDown1。尋找此控制項的 X 屬性。此屬性會判斷圖示在標頭中的水準位置。它目前是根據 IconNewItem1 控制項的寬度進行計算。
將 X 屬性的運算式變更為 Parent.Width - Self.Width。
在樹狀檢視窗格中，選取 IconRefresh1。將 X 屬性的運算式變更為 Parent.Width - IconSortUpDown1.Width - Self.Width。錯誤應該全都消失。

儲存並測試應用程式

現在您可以儲存和測試應用程式。

選取檔案 > 另存新檔。
在另存新檔底下，選取雲端，輸入名稱 VanArsdelApp，然後選取儲存。
選取上一步箭頭以返回首頁畫面。
選取 F5 以預覽應用程式。在瀏覽零件頁面上，選取任何零件右側的右角括弧 (>)。出現零件的詳細資料畫面。
在詳細資料畫面標頭中，選取左角括號 (<)，返回瀏覽畫面。
在瀏覽零件畫面的搜尋方塊中輸入文字。在您輸入時會篩選項目，只會顯示在名稱、CategoryID 或概覽欄位中有符合文字的那些項目。
關閉預覽視窗並返回 Power Apps Studio。

項目 2：現場知識庫應用程式

若要存取知識庫、Maria 和 Caleb（技術人員）envisage 簡單的介面，讓使用者輸入搜尋字詞，而應用程式會顯示提及該詞彙的所有知識庫文章。 Maria 知道此程式會涉及 Azure 認知搜尋，但是不需要，也不需要 —甚至想 —要瞭解其運作方式。因此，Maria 決定只提供基本使用者介面，稍後再與 Kiana 合作新增實際功能。

Maria 決定根據清單上提供的清單範本，建立新的畫面 Power Apps Studio。

在 Power Apps Studio首頁畫面工具列上選取新增畫面，然後選取清單。
在畫面標頭中，選取顯示文字 [Title] 的標籤。將文字屬性變更為查詢 (包括引號)。
在畫面標頭中，選取加號 (+)，然後選取刪除。 + 圖示是用來讓使用者在清單中新增更多專案的方式。知識庫只是查詢，因此不需要此功能。

請注意，移除此圖示會造成標頭發生錯誤，因為其他專案的位置和寬度也會計算。您會在庫存管理畫面之前看到此功能，而且解決方案是相同的，如下列步驟中所述。
在樹狀結構視圖窗格中，向下滾動至 Screen1 區段，然後選取 LblAppName3。將寬度屬性變更為公式 Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width。
在樹狀檢視窗格中，選取 IconSortUpDown2。將 X 屬性修改為公式 Parent.Width - IconSortUpDown2.Width。
在選取窗格中，選取 IconRefresh2。將 X 屬性修改為公式 Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width。這應該能解決畫面的所有錯誤。
選取檔案 > 儲存。
在版本注釋方塊中輸入新增知識庫 UI的文字，然後選取儲存。
返回首頁畫面，然後選取 F5 來預覽新畫面。它看起來應該像下列的圖像。

請注意，如果您選取任何虛擬專案旁邊的 > 圖示，則詳細資料功能目前無法運作。當您將 Azure 認知搜尋整合至應用程式時，您可以稍後再解決此情況。
關閉預覽視窗並返回 Power Apps Studio。

項目 3：現場調度和注意事項

Maria 與 Malik、辦公室接待員一起，為應用程式的現場排程和約會部分設計介面。 Malik 會提供包含部分資料範例的 Excel 活頁簿，供 Maria 用來建立約會畫面。活頁簿包含具有下列各欄的表格：

ID (預約 ID)
客戶 ID (客戶的唯一識別碼)
客戶名稱
客戶地址
問題詳細資料 (對客戶遇到之問題的文字描述)
連絡電話
狀態
約會日期
約會時間
注釋 (包含工程師所新增任何註解的文字描述)
圖像 (裝置照片，在修復或為工程師註解的輔助圖片時是在工作狀態中)

約會活頁簿。

注意

與現場庫存管理資料一樣，此活頁簿會提供非正常化的資料檢視。在現有的約會系統中，這些資料會儲存在不同的表中，其中保留約會資料和客戶資料。

Maria 將此檔案以 Appointments.xlsx 的名稱儲存在 OneDrive 帳戶中。 Maria 記得先前在活頁簿中使用了表格的預設名稱，並且必須在各種已產生的畫面中變更標題，因此將活頁簿中的表格重新命名為約會。

注意

您可以在本指南的 Git 存訪庫的資產資料夾中找到此活頁簿。

Maria 想要直接從 Excel 檔案建立應用程式的約會區段。 Maria 決定採用與現場庫存管理功能類似的方法，只是這次要允許專員建立和編輯約會。

Maria 決定將約會畫面最初建立為不同的應用程式。如此一來，Maria 就可以使用 Power Apps Studio 自動產生大部分的應用程式。 Power Apps Studio 目前並未讓您從現有應用程式的資料連線中生成額外的畫面。建立並測試畫面後，Maria 將這些畫面複製到現場庫存和知識庫應用程式。

注意

替代方法是將 Excel 檔案中的約會表格新增為現有應用程式的第二個資料來源，然後手工製作約會的畫面。 Maria 選擇從活頁簿新增新畫面並複製畫面。與手動建置畫面相比，她目前更加熟悉複製和貼上的概念，並且隨著建置此應用程式的過程進展，逐漸了解如何從頭開始建立畫面。

建立約會應用程式

在 Power Apps Studio 功能表中，選取檔案。
在左窗格上，選取新檔案。在主要窗格中，選取 OneDrive for Business - 手機配置 方塊。
在連接窗格中，選取約會。
在 Excel 檔案中，選取約會表格，然後選取連接。
正在等待應用程式生成。新應用程式出現時，它會包含瀏覽畫面、詳細資料畫面及編輯畫面 (使用預設主題)。
在樹狀檢視窗格中，在 BrowseGallery1 底下的 BrowseScreen1 區段中，選取 Image1，然後選取刪除。瀏覽畫面只會列出約會，而不是任何與其關聯的圖像。

請注意，移除圖像1 控制項會造成畫面發生數個錯誤，因為標題1 控制項的寬度和位置兩者都會參考圖像控制項。您將會在下列步驟中修正這些問題。
在樹狀結構視圖窗格中，在 BrowseGallery1 下方選取 Title1。將 X 屬性中的值變更為 16。將寬度屬性中的公式變更為 Parent.TemplateWidth - 104。這應該能解決畫面的所有錯誤。
在樹狀結構視圖窗格中，在 BrowseGallery1 下方選取 Body1。此控制項目前顯示客戶的連絡人電話詳細資料。將文字屬性中的值變更為 ThisItem.'Customer Name' (包括單引號)。

瀏覽畫面名稱上的詳細資料現在會顯示客戶名稱。
在樹狀檢視窗格中，選取 BrowseGallery1。使用公式欄，檢查項目屬性中的運算式。控制項會使用約會日期、時間和連絡人號碼來搜尋約會。將此公式變更為搜尋顧客名稱而不是連絡人號碼：
```
SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).
```
請注意，約會是依日期和時間 (顯示的前兩個欄位) 來排序。
在樹狀檢視窗格中，刪除 IconNewItem1。只有內部部署人員才能為工程師和技術人員預訂新的約會。請注意，此動作會導致表單發生錯誤，因為標題中的其他控制項的寬度和位置參照的是您剛移除的圖示。
在樹狀檢視窗格中，選取 LblAppName1。變更寬度屬性的公式。至 Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width。
在樹狀檢視窗格中，選取 IconRefresh1。將 X 屬性的數值變更為 Parent.Width - IconSortUpDown1.Width - Self.Width。
在樹狀檢視窗格中，選取 iconSortUpDown1。將 X 屬性的數值變更為 Parent.Width - Self.Width。
在樹狀檢視窗格中，選取 BrowseScreen1，然後選取省略號按鈕 (...)。在出現的下拉式功能表中，選取重新命名，並將畫面的名稱變更為 BrowseAppointments。
使用相同的技術，將 BrowseGallery1 控制項的名稱變更為 BrowseAppointmentsGallery。

完成瀏覽畫面。

建立詳細資料畫面

您現在可以將注意力變成詳細資料畫面。

在樹狀結構視圖窗格中，向下滾動至 DetailScreen1 區段。您可以看到詳細資料會依欄位名稱以字母排序顯示，而且某些有用的資訊 — (例如備註欄位 — 根本不會顯示)。
在窗格的樹狀檢視中，選取 DetailForm1。在右側窗格的屬性索引標籤，選取欄位旁邊編輯欄位。在中間窗格中，選取下列每個欄位，然後選取刪除：
- 約會日期
- 約會時間
- 客戶識別碼
- 識別碼
選取 + 新增欄位，並新增下欄欄位：
- 備註
- 問題詳細資料
- 狀態
拖動每個欄位，讓它們依下列順序顯示 (從上到下)：
- 客戶名稱
- 客戶地址
- 連絡電話
- 問題詳細資料
- 狀態
- 備註
- 圖像
在樹狀檢視窗格中，選取備註_DataCard1。將高度屬性變更為 320。
在樹狀檢視窗格中，刪除 IconDelete1。工程師不應可以從系統中移除約會。
選取 LblAppName2，並變更寬度屬性為 Parent.Width - Self.X - IconEdit1.Width。
使用先前描述的技術，將 DetailsScreen1 的名稱變更為 AppointmentDetails。

若要編輯畫面

現在，要查看的最後一個畫面就是編輯畫面。

在樹狀檢視窗格中，選取EditScreen1。
在樹狀檢視窗格的 EditScreen1 區段中，選取 EditForm1。在右側窗格的屬性索引標籤，選取欄位旁邊編輯欄位。
移除下列欄位：
- 客戶地址
- 識別碼
- 客戶識別碼
- 約會日期
- 約會時間
新增下列欄位：
- 問題詳細資料
- 狀態
- 備註
拖動每個欄位，讓它們依下列順序顯示 (從上到下)：
- 連絡人名稱
- 客戶編號
- 問題詳細資料
- 狀態
- 備註
- 圖像
選取客戶名稱欄位，然後展開它以查看其屬性。將控制項類型變更為查看文字。這種變更會讓控制項成為唯讀；在編輯畫面上查看客戶名稱十分有用，但是工程師無法變更。
選取連絡電話欄位，然後展開它以查看其屬性。將控制項類型變更為查看文字。此欄位應該也是唯讀的。
選取備註欄位，展開然後變更控制項類型以編輯多行文字。此設定可讓工程師新增可跨越數行的詳細備註。
選取狀態欄位，展開然後變更控制項類型至允許值。
在樹狀檢視窗格中，選取狀態_DataCard5。在右側窗格的屬性索引標籤，選取解鎖變更屬性。向下滾動至 AllowedValues 屬性，並將文字變更為 [固定、已訂購的零件、已解決] (包括方括弧)。現場工程師只能將狀態設定為這些已定義的值之一。
在樹狀結構視圖窗格中，將 EditScreen1 重新命名為 EditAppointment。

您可以儲存和測試應用程式。

選取檔案 > 另存新檔。
在另存新檔底下，選取雲端，輸入名稱 VanArsdelAppointments，然後選取儲存。
在 Power Apps Studio 中選取上一步箭頭以返回首頁畫面。
選取 F5 以預覽應用程式。在約會頁面上，選取任何約會旁邊的 > 圖示。 約會的詳細資料畫面隨即顯示。在標頭中，選取編輯以更新約會。驗證下列項目：
- 客戶名稱和連絡電話欄位是唯讀的。
- 狀態欄位限制為下拉式清單中的值。
- 您可以輸入橫跨數行的筆記。
- 您可以將圖像檔案上傳至圖像欄位。
注意

您將會在稍後新增的增強功能，讓您從應用程式中使用手機，並將它新增至圖像欄位。

將畫面合併成單一應用程式

Maria 此建立兩個應用程式，但想要將其組合成單一應用程式。為此，Maria 將約會應用程式的畫面複製到現場庫存管理和知識庫應用程式中，如下所示：

打開新的瀏覽器視窗，並使用您的帳戶詳細資料登入 Power Apps Studio。
在左窗格中選取應用程式，選取 VanArdselApp，然後選取編輯。
在工具列上，選取新螢幕，然後選取 Blank。此動作會在應用程式中新增畫面，讓您為 VanArsdelAppointments 應用程式複製瀏覽畫面的控制項。
新畫面將命名為 Screen2。在樹狀結構視圖窗格中，將其重新命名為 BrowseAppointments。
重複上述步驟兩次，新增兩個空白的畫面 (Screen3 和 Screen4)。
將 Screen3 重新命名為 AppointmentDetails，並將 Screen4 重新命名為 EditAppointment。
在左邊的工具列上 Power Apps Studio，選取資料圖示。在資料窗格中，選取新增資料。在選取資料來源下拉式清單的搜尋欄位中，輸入 OneDrive 然後選取 OneDrive for Business。
在 Appointments.xlsx Excel 檔案中，選取約會表格，然後選取連接。
切換至顯示 VanArsdelAppointments 應用程式的瀏覽器視窗。
在工具列上選取主題 (您可能必須展開工具列才能顯示其他項目)，然後選取森林主題。這是 VanArsdel 應用程式所使用的相同主題。
在左工具列上，選取樹狀結構視圖圖示，選取 BrowseAppointments 畫面，然後選取 Ctrl+A。此動作會選取畫面中的所有控制項。
選取 Ctrl + C 將這些控制項複製到剪貼簿。
返回顯示 VanArsdelApp 應用程式的瀏覽器視窗。
在左工具列上，選取樹狀結構視圖圖示，選取 BrowseAppointments 畫面。
選取 Ctrl + V 在選取的畫面貼上控制項。

注意

有時畫面標題會略低得太低。若要修正此問題，請選取 IconSortUpDOwn1_1、IconRefresh1_1、LblAppName1_1 和 RectQuickActionBar1_1 控制項於樹狀檢視窗格 (按住 Shift 同時按一下以選取多個控制項)，然後在設計窗格中使用滑鼠或方向鍵將它們上下移動。
切換回顯示 VanArsdelAppointments 應用程式的瀏覽器視窗，然後選取 AppointmentDetails 畫面中的控制項並複製至剪貼簿 (Ctrl+A 然後 Ctrl+C)。
返回至顯示 VanArsdelApp 應用程式的瀏覽器視窗，選取 AppointmentDetails 畫面，然後貼上控制項 (Ctrl+V)。視需要調整畫面標頭中控制項的位置。

注意

您將會在 AppointmentDetails 畫面的標頭中看到錯誤報表錯誤。發生此錯誤的原因是畫面參照了尚未複製的 EditAppointment 畫面中的控制項。接下來的步驟應該可糾正此錯誤。
切換回顯示 VanArsdelAppointments 應用程式的瀏覽器視窗，然後選取 EditAppointment 畫面中的控制項並複製至剪貼簿。
返回至顯示 VanArsdelApp 應用程式的瀏覽器視窗，選取 EditAppointment 畫面，然後貼上控制項。再如有需要，在畫面標題中移動控制項。
在 樹狀結構視圖 窗格中，選取 AppointmentDetails 畫面確認先前指出的錯誤現在已經消失。
在樹狀檢視窗格中，選取 BrowseScreen1 畫面。將此畫面重新命名為 BrowseParts。
將 DetailsScreen1 畫面重新命名為 PartDetails。
將 Screen1 畫面重新命名為知識庫。

注意

將畫面重新命名以反映其功能，而不是使用由生成的預設名稱 Power Apps Studio (尤其是當您的應用程式包含數個畫面時)。這有助於避免在其他開發人員修改應用程式時發生混淆。

將首頁畫面新增至應用程式

最後一階段是將首頁畫面新增至應用程式。首頁畫面可讓工程師在應用程式的不同部分 (庫存管理、知識庫和約會) 之間進行移動。

在工具列的 VanArsdelApp 應用程式中，選取新畫面，然後選取空白。
在樹狀結構視圖窗格中，將 Screen2 重新命名為首頁。
在工具列上，選取插入。在控制項清單中，展開媒體，然後選取圖像。控制項就會新增至畫面。
將控制項的 X 位置設為 16，並將 Y 位置設定為 22。將寬度變更為 605，並將高度變更為 127。將圖像位置變更為填充。
仍在屬性索引標籤的圖像下拉式清單中選取 + 新增圖像檔案，然後將 VanArsdelLogo.png 圖像上傳至控制項。

注意

您可以在本指南的 Git 存訪庫的資產資料夾中找到此圖像檔案。
從控制項清單中，將四個文字標籤控制項新增至表單，並將它們放在 VanArsdel 標誌下。
選取最上面的文字標籤控制項。在右窗格的屬性索引標籤上，將文字屬性設定為下一個約會。將字型大小設定為 30，並使用顏色挑選器將字體顏色設定為綠色 (以符合標誌)。
選取次要文字標籤控制項。將 Text 屬性中的值變更為 First(Appointments).'自訂名稱' (包括單引號)。此公式會從約會表格的第一列中檢索客戶名稱。

注意

目前，此公式只充當預留位置。您將會在稍後修改標籤，以檢索工程師的下一個約會，而不是總是顯示第一個約會。
選取第三個文字標籤控制項，並將 Text 屬性設為 First(Appointments).'Appointment Date'。
將第四標籤控制項的 Text 屬性設為 First(Appointments).'Appointment Time'。將字型大小屬性設定為 30。
從控制項清單中，新增矩形控制項。設定控制項的下列屬性：
- 顯示模式：檢視
- X：0
- Y：632
- 寬度：635
- 高度：1
此控制項的作用是穿過畫面中間的直觀分隔符號。
將三個按鈕控制項新增至畫面，並在分隔符號下方上下均勻排列。將頂端按鈕的 Text 屬性設為 Appointments，中間按鈕的 Text 屬性設為 Parts，並將下方按鈕的 Text 屬性設定為 Knowledgebase。
選取約會按鈕。將 OnSelect 動作中的運算式變更為公式 Navigate(BrowseAppointments, ScreenTransition.Fade)。當使用者選取按鈕時，此動作會將顯示切換至約會畫面。
設定零件按鈕的OnSelect動作為 Navigate(BrowseParts, ScreenTransition.Fade)。
設定知識庫按鈕的OnSelect動作為 Navigate(Knowledgebase, ScreenTransition.Fade)。

除了從首頁畫面瀏覽至系統中的其他畫面之外，約會、零件及知識庫畫面都需要可讓使用者返回至首頁畫面的方式。 Maria 決定將後退按鈕新增至這些畫面。

在樹狀檢視窗格中，選取 BrowseParts 畫面。
選取 RectQuickActionBar1 控制項以提供焦點。
選取插入功能表，然後選取新增圖示。將圖示移至 RectQuickActionBar1 控制項的左側。請注意，圖示會遮蔽至瀏覽零件標籤的一部分。
在樹狀檢視功能表上，將新圖示控制項的名稱變更為 IconReturn1。
將 OnSelect 動作中的公式變更為運算式 Back(ScreenTransition.Fade)。返回函數會將使用者瀏覽至他們所訪問的先前畫面。
在屬性索引標籤上，將圖示屬性變更為 < 左。
在畫面標頭中，選取瀏覽零件標籤。將 X 屬性中的值變更為 IconReturn1.Width + 20。。 瀏覽零件標籤將不再部分遮蓋。
遵循步驟 16 至 22 中所述的程式，將名為 IconReturn2 的圖示新增至知識庫畫面中的 RectQuickActionBar3 控制項。
同樣地，將名為 IconReturn3 的圖示新增至 BrowseAppointments 畫面中的 RectQuickActionBar1_1 控制項。
在樹狀檢視窗格中，選取應用程式物件。將 StartScreen 屬性變更為運算式首頁。這可確保每當應用程式開始時，都會顯示首頁畫面：

注意

如果您未指定當應用程式開始時要顯示的畫面，就會使用出現在樹狀結構視窗格頂端的畫面。若要將畫面移至清單的起始處，請在樹狀結構視圖窗格中以滑鼠右鍵按一下畫面，並選取上移直至它位於頂端。

最後，您可以測試應用程式。

選取檔案 > 儲存。在版本註釋方塊中，輸入完整版含主畫面，然後選取儲存。
選取向後箭頭返回至首頁畫面，然後選取 F5 來執行應用程式。
確認應用程式的首頁畫面出現。
選取約會。約會畫面應該會出現。
選取上一步箭頭以返回首頁畫面。
選取零件。應該會出現零件瀏覽器。
選取上一步箭頭以返回首頁畫面。
選取知識庫。隨即會出現知識庫查詢畫面。
選取上一步箭頭以返回首頁畫面。
關閉預覽視窗並返回 Power Apps Studio。

原型應用程式現在已完成。

上一個下一個

共用方式為