建立畫布應用程式來管理專案

注意

本文章屬於使用 Power Apps、Power Automate 和 SharePoint Online 的 Power BI 的系列教學課程的一部分。 請確定您已閱讀系列簡介 以了解大致概念，以及相關下載項目。

在此工作中，我們會從頭建置畫布應用程式。 此應用程式可讓使用者指派一個管理者（經理）給專案，並且更新專案詳細資料。 您將會看到在第一個應用程式中也曾看到的某些相同控制項和公式，但是這次您將自行建置應用程式的更多部分。 處理程序更為複雜，但是您將能了解更多，因此我們認為是場公平的交易抵換。

快速回顧 Power Apps Studio

Power Apps Studio 有三個窗格和一個功能區，讓應用程式的建立像在 PowerPoint 中建立投影片簡報：

1. 左側瀏覽列，顯示所有應用程式畫面和控制項的階層式檢視，以及畫面的縮圖
2. 中間窗格，包含您正在處理的應用程式畫面
3. 右窗格，有著設定版面配置和資料來源等選項
4. 屬性下拉式清單，可選取您要套用至公式之屬性的地方
5. 公式列，您可在其中新增可定義應用程式行為的公式（如 Excel）
6. 功能區，您可在其中新增控制項及自訂設計元素

步驟 1：建立畫面

先將檢閱擺在一邊，讓我們開始建置應用程式。

建立應用程式

建立名為「專案管理應用程式」和手機配置的空白畫布應用程式。

新增四個畫面至應用程式

在此步驟中，我們將為應用程式建立四個空白畫面。 我們會根據畫面的用途，使用不同的畫面配置。 我們將會在稍後的步驟中新增至這些畫面。

畫面	用途
選取工作	開啟畫面；瀏覽至其他畫面
指派經理	指派經理到已核准的專案
檢視專案	檢視具有摘要資訊的專案清單
更新詳細資料	檢視及更新專案的詳細資料

1. 在首頁索引標籤上，按一下或點選新增畫面，然後按一下或點選可捲動的畫面。

   

2. 將畫面重新命名為選取工作。

   

3. 建立並重新命名其他畫面：

   1. 按一下或點選新增畫面，然後按一下或點選可捲動的畫面。 將畫面重新命名為指派經理。
   2. 按一下或點選新增畫面，然後按一下或點選清單畫面。 將畫面重新命名為檢視專案。
   3. 按一下或點選新增畫面，然後按一下或點選表單畫面。 將畫面重新命名為更新詳細資料。

4. 選取畫面 1 旁的省略符號（. . .），然後按一下或點選刪除。

   

應用程式現在看起來應該類似下列影像。

步驟 2：連接至使用 Microsoft Lists 建立的清單

在此步驟中，我們將連接至產品詳細資料清單。 我們在此應用程式中只使用一個清單，但是如果您想要擴充應用程式，可以輕鬆地連接到兩個清單。

1. 在左側導覽列中，按一下或點選選取工作畫面。

2. 在右窗格中，按一下或點選新增資料來源。

   

3. 點擊或點選 New connection。

   

4. 按一下或點選 SharePoint。

   

5. 選取直接連線 （雲端服務），然後按一下或點選建立。

   

6. 輸入 SharePoint URL，然後按一下或點選前往。

   

7. 選取專案詳細資料清單，然後按一下或點選連接。

   

   右窗格的資料來源索引標籤現在會顯示您建立的連線。

   

步驟 3：建置選取工作畫面

在此步驟中，我們會提供瀏覽至應用程式其他畫面的方法 - 使用一些控制項、公式和 Power Apps 提供的格式設定選項。

更新標題並且插入簡介文字

1. 在左側導覽列中，選取選取工作畫面。

2. 在中間窗格中，選取預設 「標題」，然後在公式列中，將 Text 屬性更新為 "Contoso Project Management"。

   

3. 在插入索引標籤上，按一下或點選標籤，然後將標籤向下拖曳至置頂橫幅的下方。

   

4. 在公式列中，設定標籤的下列屬性：

   • Color 屬性 = DarkGray

   • Size 屬性 = 18

   • Text 屬性 = "Click or tap a task to continue..."

     

新增兩個瀏覽按鈕

1. 在插入索引標籤上，按一下或點選按鈕，然後將按鈕拖曳至標籤下方。

   

2. 在公式列中，設定按鈕的下列屬性：

   • OnSelect 屬性 = Navigate(AssignManager, Fade)。 當您執行應用程式並且按一下此按鈕時，您會瀏覽至應用程式中的第二個畫面，畫面切換間會有淡入淡出轉場效果。

   • Text 屬性 = "Assign Manager"

3. 調整按鈕大小以容納文字。

   

4. 插入另一個具有下列屬性的按鈕：

   • OnSelect 屬性 = Navigate(ViewProjects, Fade)。

   • Text 屬性 = "Update Details"

     

     注意

     按鈕的標籤已設為 更新詳細資料，但是我們會先瀏覽至檢視專案畫面以選取要更新的專案。

執行應用程式

應用程式還無法執行許多作業，但如果您想要的話可以執行它：

1. 按一下或點選選取工作畫面（應用程式一律會從 Power Apps Studio 中所選畫面的預覽模式開始）。

2. 請按一下或點選 在右上角以執行應用程式。

3. 按一下或點選其中一個按鈕來瀏覽至另一個畫面。

4. 請按一下或點選 在右上角以關閉應用程式。

步驟 4：建置指派經理畫面

在此步驟中，我們會使用資源庫來顯示所有已核准但還沒有經理的專案。 我們會新增其他控制項，所以您可以指派經理。

注意

我們稍後會在應用程式中建置一個頁面，讓您可以編輯專案的所有欄位（包括經理欄位），但是我們認為建置一個像這樣的畫面也很酷。

1. 儲存您到目前為止所做的變更。

2. 在左側導覽列中，按一下或點選指派經理畫面。

更新標題並且插入簡介文字

1. 將 「標題」 變更為指派經理。

2. 新增具有下列屬性的標籤：

   • Color 屬性 = DarkGray

   • Size 屬性 = 18

   • Text 屬性 = "Select a project, then assign a manager"

     

新增一個返回箭號以返回選取工作畫面

1. 按一下或點選畫面頂端的藍色列。

2. 在插入索引標籤上，按一下或點選圖示，然後按一下或點選左。

   

3. 將箭號移至藍色列的左邊，然後設定下列屬性：

   • Color 屬性 = White

   • Height 屬性 = 40

   • OnSelect 屬性 = Navigate(SelectTask, Fade)

   • Width 屬性 = 40

     

新增並修改資源庫

1. 在插入索引標籤上，按一下或點選資源庫，然後按一下或點選垂直。

   

2. 從右窗格中的版面配置 選單中，選取標題、子標題與本文。

   

   資源庫現在具有正確的版面配置，但是仍然帶有預設範例文字。 我們會在下一步修正。

   

3. 設定資源庫的下列屬性：

   • BorderThickness 屬性 = 1

   • BorderStyle 屬性 = Dotted

   • Items 屬性 = Filter('Project Details', PMAssigned="Unassigned")。 只有未指派經理的專案會包含在資源庫中。

     

4. 在右窗格中，更新欄位以符合下列清單：

   • 核准日期

   • 狀態

   • 職稱

     

5. 適當地調整資源庫中標籤的大小，然後從第一個資源庫項目移除箭號（我們不需要從這個資源庫瀏覽到其他任何地方）。

   

   畫面現在看起來應該像下列影像。

   

變更項目被選取時的色彩

1. 選取資源庫，然後將 TemplateFill 屬性設為 If (ThisItem.IsSelected=true, Orange, White)。

2. 選取資源庫中的項目。 畫面現在看起來應該像下列影像。

   

新增標籤、文字輸入和確定按鈕來提交經理指派

1. 按一下或點選您正在使用之資源庫的外面。

2. 在插入索引標籤上，按一下或點選標籤。 將資源庫下方的標籤拖曳至左邊。 設定標籤的下列屬性：

   • Size 屬性 = 20

   • Text 屬性 = "Manager:"

   

3. 在插入索引標籤中，按一下或點選文字，然後按一下或點選文字輸入。 將資源庫下方的文字輸入拖曳至中央。 設定下拉式清單的下列屬性：

   • Default 屬性 = ""

   • Height 屬性 = 60

   • Size 屬性 = 20

   • Width 屬性 = 250

   

4. 在插入索引標籤上，按一下或點選按鈕。 將資源庫下方的按鈕拖曳至右邊。 設定按鈕的下列屬性：

   • Height 屬性 = 60

   • OnSelect 屬性 = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text})。 如需詳細資訊，請參閱深入了解公式。

   • 此公式會更新專案詳細資料清單，設定指派的專案經理欄位的值。

   • Size 屬性 = 20

   • Text 屬性 = "OK"

   • Width 屬性 = 80

   

已完成的畫面現在看起來應該像下列影像。

步驟 5：建置檢視專案畫面

在此步驟中，我們將會變更檢視專案畫面上資源庫的屬性。 這個資源庫會顯示專案詳細資料清單的項目。 您選取這個畫面上的項目，然後在更新詳細資料畫面上編輯詳細資料。

1. 在左側導覽列中，按一下或點選檢視專案畫面。

2. 將 「標題」 變更為檢視專案。

3. 在左側導覽列中，按一下或點選檢視專案畫面底下的瀏覽資源庫 1。

4. 從右窗格中的版面配置 選單中，選取標題、子標題與本文。

   

   資源庫現在具有正確的版面配置，也有預設範例文字。

   

5. 選取重新整理按鈕 ，然後將其 OnSelect 屬性設為 Refresh('Project Details')。

6. 選取新增項目按鈕 ，然後將其 OnSelect 屬性設為 NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None)。

新增一個返回箭號以返回選取工作畫面

1. 在左側導覽列中，按一下或點選指派經理畫面。

2. 選取您在該處新增的返回箭號，並且複製它。

3. 將箭號貼至檢視專案畫面，並且將它放在重新整理按鈕的左邊。

   

   它的所有屬性都會一起複製，包括 OnSelect 屬性為 Navigate(SelectTask, Fade)。

變更瀏覽資源庫 1 資源庫的資料來源

1. 選取瀏覽資源庫 1 資源庫，然後將資源庫的 Items 屬性設為 SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))。

   這會將資源庫的資料來源設為專案詳細資料清單，並且使用標題欄位來搜尋及排序。

2. 選取 在第一個資源庫項目中，將 OnSelect 屬性設為 Navigate(UpdateDetails, None)。

   

3. 在右窗格中，更新欄位以符合下列清單：

   • 狀態

   • 指派的專案經理

   • 職稱

     

     已完成的畫面現在看起來應該像下列影像。

     

步驟 6：建置更新詳細資料畫面

在此步驟中，我們會將更新詳細資料畫面上的編輯表單連線至我們的資料來源，然後進行一些屬性和欄位的變更。 您可以在這個畫面上，編輯您在檢視專案畫面所選取之專案的詳細資料。

1. 在左側導覽列中，按一下或點選更新詳細資料畫面。

2. 將 「標題」 變更為更新詳細資料。

3. 在左側導覽列中，按一下或點選更新詳細資料底下的編輯表單 1。

4. 設定表單的下列屬性：

   • DataSource 屬性 = 'Project Details'

   • Item 屬性 = BrowseGallery1.Selected

5. 表單保持選取，然後在右窗格中按一下或點選下列欄位的核取方塊，順序如下所示：

   • 標題

   • 指派的專案經理

   • 狀態

   • 專案開始日期

   • 專案結束日期

   • 預計天數

   • 實際天數

     

6. 選取取消按鈕，然後將其 OnSelect 屬性設為 ResetForm(EditForm1); Back()。

7. 選取儲存按鈕 並查看 OnSelect 公式 - SubmitForm(EditForm1)。 因為我們使用編輯表單控制項，所以可以使用 Submit()，而不像我們稍早所做的，使用 Patch()。

已完成的畫面現在看起來應該類似下列影像（如果這些欄位是空白，請確定您選了檢視專案畫面上的項目）。

步驟 7：執行應用程式

既然應用程式已完成，讓我們執行它以查看其運作如何。 我們會在 SharePoint 網站上新增一個連結至應用程式。 您可以在瀏覽器中執行應用程式，但是您可能需要共用應用程式，讓其他人也可以執行它。 如需詳細資訊，請參閱共用應用程式。

新增連結至應用程式

1. 在 Office 365 應用程式啟動器中，按一下或點選 Power Apps。

   

2. 在 Power Apps 中，按一下或點選專案管理應用程式的省略符號（. . .），然後按一下或點選開啟。

   

3. 複製瀏覽器中應用程式的位址（URL）。

   

4. 在 SharePoint 中，按一下或點選編輯連結。

   

5. 按一下或點選 （+）連結。

   

6. 輸入「專案管理應用程式」，並且貼上應用程式的位址。

   

7. 按一下或點選確定，然後按一下或點選儲存。

   

指派經理到專案

現在我們已經在 SharePoint 網站具有應用程式，我們將會充當專案核准者的角色 - 我們將會尋找任何未指派經理的專案，並且將經理指派至這些專案中的其中一個。 然後我們將會充當專案經理的角色，並且新增一些指派給我們之專案的相關資訊。

1. 首先，讓我們看看 SharePoint 中的專案詳細資料清單。 兩個專案在指派的專案經理資料行中具有未指派的值。 我們將會在應用程式中看到。

   

2. 按一下或點選您建立至應用程式的連結。

3. 在第一個畫面上，按一下或點選指派經理。

   

4. 在指派經理畫面上，您會看到清單的兩個未指派專案。 選取新的 BI 軟體專案。

   

5. 在經理文字輸入中，輸入 「Joni Sherman」，然後按一下確定。

   變更會套用至清單，然後資源庫會重新整理，只顯示剩餘的未指派專案。

   

6. 返回至清單，並且重新整理頁面。 您會看到專案項目現在已更新專案經理名稱。

   

更新專案的詳細資料

1. 按一下或點選 若要返回第一個畫面，請按一下或點選更新詳細資料。

   

2. 在檢視專案畫面上，在搜尋方塊中輸入「新的」 。

   

3. 按一下 開啟新的 BI 軟體項目。

   

4. 在更新詳細資料畫面上，設定下列值：

   • 專案開始日期欄位 = 「3/6/2017」

   • 專案結束日期欄位 = 「3/24/2017」

   • 預計天數欄位 = "15"

   

5. 請按一下或點選 將變更套用至清單。

6. 關閉應用程式，然後返回清單。 您會看到專案項目現在已更新日期和天數變更。

   

深入了解公式

這是 Power Apps 公式中第二個選擇性的區段。 在第一個深入了解中，我們探討了其中一個 Power Apps 為三畫面應用程式的瀏覽資源庫而生成的公式。 在此深入了解中，我們會探討用於第二個應用程式之指派經理畫面的公式。 公式如下：

Patch( 'Project Details', LookUp( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

這個公式能夠做什麼？ 當您選取資源庫中的項目並且按一下確定按鈕時，公式會更新專案詳細資料清單，將指派的專案經理資料行設為您在文字輸入中指定的值。 此公式會使用函式來執行工作：

• Patch 函式 會修改資料來源的一或多筆記錄。

• LookUp 函式 會尋找資料表中符合公式的第一筆記錄。

當您在公式中將函式放在一起時，會發生下列情況：

1. 當您按一下確定按鈕時，會呼叫 Patch 函式來更新專案詳細資料清單。

2. 在 Patch 函式內，LookUp 函式會識別要更新專案詳細資料清單的哪一個資料列。 它會藉由比較所選資源庫項目的識別碼與清單中的識別碼，來執行這項操作。 例如，識別碼 12 表示新的 BI 軟體的項目應該更新。

3. 既然 Patch 函式具有正確的識別碼，它會將指派的專案經理欄位更新為文字輸入 1.文字中的值。

後續步驟

此教學課程系列的下一個步驟是建立 Power BI 報表來分析專案。

請參閱

• SharePoint 整合案例

注意

是否能請您告知您偏好的慣用文件語言？ 請填寫問卷。 (請注意，本問卷為英文版)

完成問卷大約需要七分鐘。 本問卷將不會收集個人資料 (隱私權聲明)。