練習 - 將資料來源新增至畫布應用程式和設計功能頁面

8 分鐘

在 Power Apps 中，您可以將資料與已經存在的應用程式或從頭開始建置的應用程式連線。您的應用程式可以連線到 SharePoint、Microsoft Dataverse、Salesforce、OneDrive 或任何其他數據源。

我們將使用 SharePoint 作為此應用程式的主要數據源。您可以連線到 SharePoint 網站，以從自定義清單自動產生應用程式、建立連線，再將數據新增至現有的應用程式，或從頭開始建置應用程式。

建立 SharePoint 網站

使用您的Microsoft組織認證登入 SharePoint 入口網站。
在 SharePoint 起始頁面上選取 [+ 建立網站 ] 以建立 SharePoint 網站。
在 SharePoint 起始頁面上，您會發現下列資訊：
- 選擇網站類型;選擇是通訊網站或小組網站。選取 通訊網站。
- 輸入網站的適當名稱;例如， Easy Sales。
- 視需要新增 網站描述 （選擇性）。
- 從下拉式清單中選取您選擇的語言。
選取 [完成 ] 以建立 SharePoint 網站以載入您的數據。

幾秒內就可以建立並開始使用新式 SharePoint 網站。您現在可以在新建立的網站中建立清單、文檔庫、頁面等等。

備註

如果您選取 [小組網站]，也會建立Microsoft 365 群組。

建立 SharePoint 列表

SharePoint 清單會收集一些結構的數據，類似於數據表、電子表格或簡單資料庫。它可以包含許多不同類型的資訊，例如數位、文字、附件，甚至是影像。

針對 我們的 Easy Sales 應用程式，我們將建立包含所有產品類別詳細數據的清單：沙發、椅子、桌子和地毯。

在名為 Easy Sales 的新建立 SharePoint 網站中，選取 [+ 新增 ] 下拉式清單，然後選取 [ 清單 ] 以建立 SharePoint 列表。
在 [ 建立清單] 視窗中，選取 [ 空白列表 ]，從頭開始建立 SharePoint 清單。
設定 [ 建立] 窗格，如下所示：
- 輸入清單的適當名稱;例如， Easy Sales。
- 如有需要，請填入描述（選擇性）。
- 保持選取 [在網站導覽中顯示] 核取方塊。
- 選取 [建立]。

將數據新增至 SharePoint 清單

建立清單之後，是時候新增數據了。在這裡，「數據」表示任何特定產品的詳細數據。產品詳細數據包含下列資訊：名稱、影像、價格、維度、權數、色彩、PrimaryMaterial、Area、Height，以及要以混合實境檢視之產品的 3D 模型/影像。

在建立的 [輕鬆銷售 ] 清單中，選取 [+ 新增數據行 ] 以新增特定類型的數據行。下列清單顯示需要建立的數據行，其名稱和類型格式如下：數據行 - 數據行類型的名稱。
- 名稱：單行文字
- ImageLink：單行文字
- 價格：單行文字
- 維度：單行文字
- 重量：單行文字
- 色彩：單行文字
- PrimaryMaterial：單行文字
- 高度：數位
- 深度：數位
- 寬度：數位
- 價格/cm2：數字
- ProductCategory：單行文字
- FileType：單行文字
從下拉式清單中選取數據行類型;例如，選取 [單行文字]。

在 [ 建立數據行 ] 索引標籤中輸入數據行的詳細數據，然後選取 [ 儲存]。

針對上述清單中的其餘數據行重複相同的程式。

備註

建立 SharePoint 列表之後，會建立預設 的 Title 資料行，您可以重新命名為 Name。
新增數據行之後，我們必須在這些數據行底下新增實際數據。下載包含所有四個清單之所有產品詳細數據的自定義資料夾，以開始將數據加入資料行。若要存取數據，請選取下列連結、選取頁面右上角的 [ 更多檔案動作 ] 按鈕 [...]，然後選取 [ 下載]。

Power Apps 自定義資料夾
選取 [+ 新增 ] 以新增專案，然後填入所下載 Excel 檔案中提供的必要詳細數據。選取 [儲存 ] 以儲存輸入的詳細數據。

備註

網格線檢視可讓您自由地將資訊新增至不同的數據列或數據行。
開始在各自的數據行中新增您的數據，如圖所示：

備註

如果您想要添加自己的影像連結，可以在 ImageLink 資料行底下，新增互聯網上公開影像的連結。您可以按下滑鼠右鍵並選取 [ 複製映射位址 ] 選項，以取得影像連結。

備註

對於 [地毯] 類別清單，您不需要高度、深度和寬度值。此產品類別會接受 [在 MR 中測量] 工作階段期間測量的面積值，並根據計算的面積給出地毯的價格。不過，我們已新增 Price/cm2 數據行來協助計算程式。

建立連線

既然應用程式所需的所有數據都儲存在 SharePoint 清單中，我們將在 Power Apps 中建立連線。建立連線之後，您可以輕鬆地透過應用程式存取 SharePoint 資料。

若要開始建立連線，請登入 Power Apps ，然後選取左側導覽列中的 [ 連線 ]。然後選取左上角附近的 [+ 新增連線 ]。
選取 [SharePoint]。我們正在選取 SharePoint ，因為我們已將所需的數據儲存在 SharePoint 清單中。
若要連線到 SharePoint Online，請選取 [直接連線] [雲端服務]，然後選取 [ 建立]，然後在出現提示時提供認證。
連結已建立，而且您可以從零開始建置應用程式。

備註

即使已建立連線，您仍然可以新增、編輯和刪除儲存在 SharePoint 清單中的數據。所有變更都會透過連線反映在應用程式中。

讓我們開始根據 SharePoint 資料建置 Easy Sales 應用程式，然後視需要從其他來源新增數據。遵循此程式，您將能夠設計應用程式的一些主頁面。例如，您將瞭解如何設計啟動顯示畫面、產品頁面和產品清單頁面。我們也會透過Power Apps資源庫控件存取儲存在SharePoint清單中的數據。

開啟空白應用程式

移至 Power Apps 首頁，然後選取左側功能表中的 [建立 ]。選取 [空的應用程式]，然後選取 [空白畫布應用程式] 底下的 [建立]。
指定應用程式的名稱;例如 Easy-Sales。選取 [手機]，然後選取 [建立]。

Power Apps Studio 會為手機建立空白應用程式。

備註

雖然您可以從頭開始設計各種裝置的應用程式，但本主題著重於設計手機應用程式。
如果 [ 歡迎使用 Power Apps Studio ] 對話框開啟，請選取 [ 略過]。

連線到資料

若要在 Power App 中包含資料，您必須透過應用程式中的連接器連線到資料。因為我們已將所有數據儲存在 SharePoint 清單中，所以我們會將 SharePoint 選取為其中一個連接器。

在 Power Apps Studio 左側，選取 [數據] 選項。
開啟 [ 數據 ] 窗格之後，選取 [ 新增數據 ] 按鈕以連線到數據。
在 [ 選取數據源] 視窗中，展開 [ 連接器 ] 區段，然後選取 [SharePoint] 選項。
在上一個練習中，我們已建立連線。選取已建立的連線，以將數據新增至您的應用程式。選取以 Easy Sales 名稱建立的 SharePoint 網站。
選取 Easy Sales SharePoint 網站之後，即會顯示在該網站上建立的所有清單。接下來，選取針對應用程式建立的 SharePoint 清單，然後按兩下 [ 連線]。
所有必要的數據都已連線並準備好在應用程式中使用。您現在可以開始建置應用程式。

建立啟動顯示畫面

選取 Power Apps Studio 左側的 [樹視圖] 選項。您應該已在Power Apps Studio 中擁有空白畫面;如果不是，請在 [ 首頁 ] 索引標籤上，選取 [ 新增畫面 ] 旁的向下箭號，以開啟螢幕類型清單。然後，選取 [ 空白 ] 以建立空白畫面。
選取螢幕名稱旁邊的三個點...圖示，然後選取 [重新命名] 選項，將螢幕重新命名為Splash screen。
選取新建立的畫面，以在畫面右側的 [ 屬性 ] 索引卷標中變更其屬性。
選取 [背景影像] 屬性旁邊的下拉式清單，將影像新增至畫面。選取 [+ 新增影像檔 ] 以選取下載的標誌檔案。
將影像位置設定為 Fit ，讓整個影像符合指定的大小。 [調整] 選項會按比例調整影像，而且不會裁剪影像。
在 [ 插入] 索引標籤上，展開 [ 輸入 ] 下拉式清單，然後選取 [ 定時器]。然後，將按鈕拖曳到畫面上，並將它放在您想要的位置。
若要編輯某些定時器屬性，您可以使用左上角的 [ 屬性 ] 下拉式清單或使用 [ 屬性 ] 窗格。設定下列屬性：
- AutoStart：true
- 持續時間：2000
- 可見： false
  
  備註
  
  根據預設，持續時間會以毫秒為單位來測量。由於 1 秒 = 1000 毫秒，我們會輸入 2000 作為持續時間的值。
我們希望啟動畫面僅顯示兩秒，然後轉到首頁。建立空白畫面，就像我們在上一個步驟中所做的一樣，並將它重新命名為首頁。稍後，選取新增至 啟動顯示 畫面的定時器按鈕，並設定 OnTimerEnd 屬性。將 false 取代為下列內容：
```
Navigate('Home Page',ScreenTransition.Fade)
```
流覽至 [ 檔案>儲存] 以儲存您的應用程式。接下來，選取 [ 雲端 ] 選項，然後選取 [ 儲存]。

建立首頁

選取先前建立的首頁。若要插入四個按鈕，請流覽至 [ 插入 ] 索引標籤，然後選取 [ 按鈕 ] 選項以將按鈕新增至畫面。視需要調整這些按鈕的大小和位置。將它們分別重新命名為 Sofas_button、 Chairs_button、 Tables_button和 Carpets_button。
變更按鈕的顯示文字，以指出 沙發、椅子、桌子和地毯等產品類別。
我們將使用這些按鈕來瀏覽至各種類別下的產品清單。若要這樣做，我們必須根據 產品類別，從 SharePoint 清單中篩選出產品。建立兩個新的空白畫面，並將其重新命名為產品和地毯。
選取新建立 Sofas_button 按鈕，然後設定 OnSelect 屬性。選取按鈕之後，必須帶我們前往上一個步驟中建立的產品清單頁面。將 false 取代為下列程式代碼：
```
Navigate(Products,ScreenTransition.Cover, {ID:1});
```
備註

標識碼是具有某些指派值的內容變數。此值會傳遞至 Navigate 函式中所提及的目的地頁面。指派給變數的值會根據 產品類別篩選出產品。
針對其他三個按鈕重複相同的程式。同樣地，請確定您在 Navigate 函式中提供適當的螢幕名稱;例如，若要設定 Chair、Tables 和 Carpets 按鈕的 OnSelect 屬性，請使用 Navigate 函式，如下所示：
```
Navigate(Products,ScreenTransition.Cover, {ID:2});
```
```
Navigate(Products,ScreenTransition.Cover, {ID:3});
```
```
Navigate(Carpets,ScreenTransition.Cover)
```
小提示

若要儲存進度，請選取頂端的 [ 檔案 ] 索引卷標，然後選取 [ 儲存] 選項。您也可以使用 Ctrl+S 來儲存進度。
備註

Navigate 函式的預設語法為：Navigate（Screen [， Transition [， UpdateContextRecord]]] ）
- 畫面：必要。要顯示的畫面。
- 轉換：選擇性。目前畫面和下一個畫面之間要使用的視覺效果轉換。預設值為 None。
- UpdateContextRecord：選擇性。一個資料列，包含至少一個資料行的名稱和每個資料行的值。此記錄會更新新畫面的內容變數，就像傳遞至 UpdateContext 函式一樣。
小提示

您可以按下鍵盤上的 F5 鍵或按下 Power Apps Studio 右上角的 [ 播放 ] 按鈕來測試您的應用程式。

使用資源庫控制項

既然我們已新增產品類別，我們將在每個類別下顯示產品清單。在 Power Apps 中，我們使用 資源庫控件 來查看數據的記錄。

在 [產品] 畫面的 [插入] 索引標籤上，選取 [資源庫>] 以將 資源庫控件 新增到畫面中。

將它重新命名為 Gallery_products。在左側窗格的 [ 屬性 ] 索引標籤上，設定 Items 屬性，如下所示：

If(
ID = 1,
Filter('Easy Sales',(ProductCategory = "Sofa")),
ID = 2,
Filter('Easy Sales',(ProductCategory = "Chair")),
ID = 3,
Filter('Easy Sales',(ProductCategory = "Table")),
ID = 4,
Filter('Easy Sales',(ProductCategory = "Carpet")))

我們會根據產品類別篩選儲存在 SharePoint 清單中的產品。內容變數用於篩選程式。

選取 [編輯]，在 [>] 窗格中設定 [資源庫欄位] 屬性：
- 將 Price 指派給 Subtitle1 標題。
- 將 Title 指派給 Title1 標題。
在指派前述欄位時，您會觀察到反映在 [資源庫] 的資料。
視需要調整 Gallery_products 的大小。若要將 ImageLink 新增至 Image1 的標題，請在畫廊中選取 Image，然後在 [屬性] 索引標籤上透過新增此行程式碼來設定 Image 屬性：
```
ThisItem.ImageLink
```
現在，讓我們透過選取 [標籤] 選項，將標籤插入到畫面頂端。然後，自定義位置、色彩和文字顯示，如圖所示：
在先前新增的標籤上新增返回圖示，以協助使用者在需要時流覽至首頁。若要新增 [上一頁 ] 圖示，請展開 [ 圖示 ] 下拉式清單，然後選取 [上一頁 ] 圖示。
如有需要，請正確放置 [上一頁 ] 圖示並變更其顯示色彩。新增下列項目以設定其 OnSelect 屬性：
```
Navigate('Home Page',ScreenTransition.Cover)
```
遵循 [地毯] 頁面的相同程式。以下列方式設定資源庫的 Items 屬性，而此資源庫已新增至 [地毯] 頁面：
```
Filter('Easy Sales',ProductCategory = "Carpet")
```
小提示

若要儲存進度，請選取頂端的 [ 檔案 ] 索引卷標，然後選取 [ 儲存] 選項。您也可以使用 Ctrl+S 來儲存進度。

實作上述步驟之後，以下是您的應用程式必須的外觀。應用程式會包含絕佳的 啟動顯示畫面、首頁，以及可瀏覽產品的產品清單。

意見反應

此頁面對您有幫助嗎？