注意:這篇文章是搭配 SharePoint Online 使用 PowerApps、Microsoft Flow 及 Power BI 之教學課程系列的一部分。 請確定您閱讀系列簡介以了解大致概念,以及相關下載項目。

在這項工作中,我們會從頭建置應用程式。 此應用程式可讓使用者將經理指派至專案,並且更新專案詳細資料。 您會看到也在第一個應用程式中看到的一些相同控制項和公式,但是這次您將自行建置應用程式。 處理程序更為複雜,但是您將能深入了解,因此我們認為是合理的取捨。

提示:此案例的下載套件包括此應用程式的已完成版本:project-details-app.msapp。

PowerApps Studio 的快速檢閱

您在最後一項工作中使用適用於 Web 的 PowerApps Studio,但是在繼續作業之前,我們想要確定您了解所有組件。 您可以繼續在適用於 Web 的 PowerApps Studio 中工作,或者您可以使用適用於 Windows 的 PowerApps Studio

PowerApps Studio 有三個窗格和一個功能區,讓應用程式建立類似於在 PowerPoint 中建立投影片簡報:

  1. 左側導覽列,顯示所有應用程式畫面和控制項的階層檢視,以及畫面的縮圖

  2. 中間窗格,其中包含您正在處理的應用程式畫面

  3. 右窗格,您在其中設定版面配置和資料來源等選項

  4. [屬性] 下拉式清單,您在其中選取要套用公式的屬性

  5. 公式列,您在其中新增可定義應用程式行為 (如 Excel) 的公式

  6. 功能區,您可在其中新增控制項及自訂設計元素

PowerApps Studio

步驟 1:建立畫面

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

建立並儲存應用程式

  1. 在 PowerApps Studio 中,按一下或點選 [新增],然後在 [空白應用程式] 底下按一下或點選 [手機配置]。

    空白應用程式 - 手機配置

  2. 按一下或點選 [檔案],這樣會開啟至 [應用程式設定] 索引標籤。 輸入名稱「專案管理應用程式」。

    應用程式名稱

  3. 按一下或點選 [另存新檔],確認該應用程式將會儲存到雲端,然後按一下右下角的 [儲存]。

    儲存到雲端

  4. 按一下或點選 返回應用程式圖示 以返回應用程式。

將四個畫面新增至應用程式

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

畫面 用途
SelectTask 開啟畫面,瀏覽至其他畫面
AssignManager 將經理指派給已核准的專案
ViewProjects 檢視專案的清單,具有摘要資訊
UpdateDetails 檢視及更新專案的詳細資料
  1. 在 [首頁] 索引標籤上,按一下或點選 [NewScreen],然後按一下或點選 [可捲動的畫面]。

    可捲動的畫面

  2. 將畫面重新命名為 SelectTask

    重新命名畫面

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

    1. 按一下或點選 [NewScreen],然後按一下或點選 [可捲動的畫面]。 將畫面重新命名為 AssignManager
    2. 按一下或點選 [NewScreen],然後按一下或點選 [清單畫面]。 將畫面重新命名為 ViewProjects
    3. 按一下或點選 [NewScreen],然後按一下或點選 [表單畫面]。 將畫面重新命名為 UpdateDetails
  4. 選取 Screen1旁的省略符號 (...),然後按一下或點選 [刪除]。

    刪除畫面

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

所有應用程式畫面

步驟 2:連線至 SharePoint 清單

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

  1. 在左側導覽列中,按一下或點選 [SelectTask] 畫面。

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

    連接到資料

  3. 按一下或點選 [新增連接]。

    新增連接

  4. 按一下或點選 [SharePoint]。

    SharePoint 連線

  5. 選取 [直接連線 (雲端服務)],然後按一下或點選 [建立]。

    直接連線 (雲端服務)

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

    要連線的 SharePoint URL

  7. 選取 [專案詳細資料] 清單,然後按一下或點選 [連線]。

    選取專案詳細資料清單

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

    資料來源索引標籤

步驟 3:建置 SelectTask 畫面

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

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

  1. 在左側導覽列中,選取 [SelectTask] 畫面。

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

    公式列中的 Text 屬性

  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"

    更新按鈕文字

    注意:按鈕的標籤為 [更新詳細資料],但是我們會先瀏覽至 [ViewProjects] 畫面以選取要更新的專案。

執行應用程式

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

  1. 按一下或點選 [SelectTask] 畫面 (應用程式永遠會從 PowerApps Studio 的所選取畫面中以預覽模式啟動)。

  2. 按一下或點選 右上角的執行應用程式圖示 以執行應用程式。

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

  4. 按一下或點選 右上角的關閉應用程式預覽圖示 以關閉應用程式。

步驟 4:建置 AssignManager 畫面

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

注意:我們稍後會在應用程式中建置一個頁面,讓您編輯專案的所有欄位 (包括經理欄位),但是我們認為建置一個與這個畫面類似的畫面也很酷。

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

  2. 在左側導覽列中,按一下或點選 [AssignManager] 畫面。

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

  1. 將 [標題] 變更為 [指派經理]。

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

    • Color 屬性 = DarkGray
    • Size 屬性 = 18
    • Text 屬性 = "Select a project, then assign a manager"

    指派經理版面配置

新增上一頁箭號以返回 SelectTask 畫面

  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. 在右窗格中,更新欄位以符合下列清單:

    • ApprovedDate
    • 狀態
    • 標題

    資源庫欄位

  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})。 如需詳細資訊,請參閱深入了解公式
    • 此公式會更新專案詳細資料清單,設定 PMAssigned 欄位的值。
    • Size 屬性 = 20
    • Text 屬性 = "OK"
    • Width 屬性 = 80

    新增確定按鈕

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

已完成指派經理畫面

步驟 5:建置 ViewProjects 畫面

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

  1. 在左側導覽列中,按一下或點選 [ViewProjects] 畫面。

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

  3. 在左側導覽列中,按一下或點選 [ViewProjects] 畫面底下的 [BrowserGallery1]。

  4. 從右窗格中的 [版面配置] 功能表,選取 [標題、子標題與本文]。

    變更資源庫版面配置

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

    具有預設文字的資源庫

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

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

新增上一頁箭號以返回 SelectTask 畫面

  1. 在左側導覽列中,按一下或點選 [AssignManager] 畫面。

  2. 選取您在該處新增的上一頁箭號,並且複製它。

  3. 將箭號貼上至 [ViewProjects] 畫面,並且將它放在重新整理按鈕的左邊。

    上一頁按鈕

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

變更 BrowseGallery1 資源庫的資料來源

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

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

  2. 選取第一個資源庫項目中的 詳細資料箭號圖示 ,並且將 OnSelect 屬性設為 Navigate(UpdateDetails, None)

     檢視專案資源庫 - 選取的第一個項目

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

    • 狀態
    • PMAssigned
    • 標題

    資源庫欄位

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

    檢視專案畫面已完成

步驟 6:建置 UpdateDetails 畫面

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

  1. 在左側導覽列中,按一下或點選 [UpdateDetails] 畫面。

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

  3. 在左側導覽列中,按一下或點選 [UpdateDetails] 底下的 [EditForm1]。

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

    • DataSource 屬性 = 'Project Details'
    • Item 屬性 = BrowseGallery1.Selected
  5. 仍然選取表單,然後在右窗格中按一下或點選下列欄位的核取方塊,順序如下所示:

    • 標題
    • PMAssigned
    • 狀態
    • ProjectedStartDate
    • ProjectedEndDate
    • ProjectedDays
    • ActualDays

    編輯表單欄位

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

  7. 選取儲存按鈕 勾號儲存圖示 ,然後簽出 OnSelect 公式 - SubmitForm(EditForm1)。 因為我們使用編輯表單控制項,所以可以使用 Submit(),而不像我們稍早使用 Patch()

已完成的畫面現在看起來應該類似下列映像 (如果這些欄位是空白,請確定您選取 [檢視專案] 畫面上的項目)。

更新詳細資料畫面已完成

步驟 7:執行應用程式

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

將連結新增至應用程式

  1. 在 Office 365 應用程式啟動器中,按一下或點選 [PowerApps]。

    Office 365 應用程式啟動器中的 PowerApps

  2. 在 PowerApps 中,按一下或點選 [專案管理應用程式] 的省略符號 (...),然後按一下或點選 [開啟]。

    選取專案管理應用程式

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

    複製應用程式 URL

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

    編輯 SharePoint 網站連結

  5. 按一下或點選 [(+) 連結]。

    將應用程式連結新增至 SharePoint 網站

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

    編輯連結屬性

  7. 按一下或點選 [確定],然後按一下或點選 [儲存]。

    儲存連結變更

將經理指派至專案

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

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

    SharePoint 清單中的未指派專案

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

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

    應用程式簡介畫面

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

    具有已選取項目的資源庫

  5. 在 [經理] 文字輸入中,輸入 "Joni Sherman",然後按一下 [確定]。

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

    將經理指派至專案

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

    在 SharePoint 清單中已指派專案經理

更新專案的詳細資料

  1. 按一下或點選 返回圖示 以返回第一個畫面,然後按一下或點選 [更新詳細資料]。

    應用程式簡介畫面

  2. 在 [檢視專案] 畫面上,在搜尋方塊中輸入 "New"。

    在應用程式資源庫中搜尋

  3. 按一下新的 BI 軟體項目的 詳細資料箭號圖示

    已選取資源庫項目

  4. 在 [更新詳細資料] 畫面上,設定下列值:

    • ProjectedStartDate 欄位 = "3/6/2017"
    • ProjectedEndDate 欄位 = "3/24/2017"
    • ProjectedDays 欄位 = "15"

    更新項目詳細資料

  5. 按一下或點選 核取記號圖示 將變更套用至 SharePoint 清單。

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

    已更新 SharePoint 清單

深入了解公式

這是 PowerApps 公式中第二個選擇性的區段。 在第一個深入了解中,我們探討了其中一個公式,PowerApps 針對三個畫面應用程式的瀏覽資源庫而產生該公式。 在此深入了解中,我們會探討用於第二個應用程式之 [AssignManager] 畫面的公式。 公式如下:

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

這個公式能夠做什麼? 當您選取資源庫中的項目並且按一下 [確定] 按鈕時,公式會更新 [專案詳細資料] 清單,將 [PMAssigned] 資料行設為您在文字輸入中指定的值。 此公式會使用函式以執行其工作:

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

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

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

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

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

  3. 既然 Patch 函式具有正確的識別碼,它會將 [PMAssigned] 欄位更新為 [TextInput1.Text] 中的值。

後續步驟

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