建立應用程式來管理專案Create an app to manage projects

注意:這篇文章是搭配 SharePoint Online 使用 PowerApps、Microsoft Flow 及 Power BI 之教學課程系列的一部分。Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. 請確定您閱讀系列簡介以了解大致概念,以及相關下載項目。Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

在這項工作中,我們會從頭建置應用程式。In this task, we'll build an app from scratch. 此應用程式可讓使用者將經理指派至專案,並且更新專案詳細資料。This app allows a user to assign a manager to projects and to update project details. 您會看到也在第一個應用程式中看到的一些相同控制項和公式,但是這次您將自行建置應用程式。You will see some of the same controls and formulas you saw in the first app, but you will build more of the app yourself this time. 處理程序更為複雜,但是您將能深入了解,因此我們認為是合理的取捨。The process is more complex, but you'll learn more, so we think it's a fair trade-off.

提示:此案例的下載套件包括此應用程式的已完成版本:project-details-app.msapp。Tip: The download package for this scenario includes a finished version of this app: project-details-app.msapp.

PowerApps Studio 的快速檢閱Quick review of PowerApps Studio

您在最後一項工作中使用適用於 Web 的 PowerApps Studio,但是在繼續作業之前,我們想要確定您了解所有組件。You used PowerApps Studio for web in the last task, but we want to make sure you understand all the parts before we move on. 您可以繼續在適用於 Web 的 PowerApps Studio 中工作,或者您可以使用適用於 Windows 的 PowerApps StudioYou can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

PowerApps Studio 有三個窗格和一個功能區,讓應用程式建立類似於在 PowerPoint 中建立投影片簡報:PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in PowerPoint:

  1. 左側導覽列,顯示所有應用程式畫面和控制項的階層檢視,以及畫面的縮圖Left navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. 中間窗格,其中包含您正在處理的應用程式畫面Middle pane, which contains the app screen you are working on
  3. 右窗格,您在其中設定版面配置和資料來源等選項Right-hand pane, where you set options like layout and data sources
  4. [屬性] 下拉式清單,您在其中選取要套用公式的屬性Property drop-down list, where you select the properties that formulas apply to
  5. 公式列,您在其中新增可定義應用程式行為 (如 Excel) 的公式Formula bar, where you add formulas (like in Excel) that define app behavior
  6. 功能區,您可在其中新增控制項及自訂設計元素Ribbon, where you add controls and customize design elements

PowerApps Studio

步驟 1:建立畫面Step 1: Create screens

先將檢閱擺在一邊,讓我們開始建置應用程式。With that review out of the way, let's start building an app.

建立並儲存應用程式Create and save the app

  1. 在 PowerApps Studio 中,按一下或點選 [新增],然後在 [空白應用程式] 底下按一下或點選 [手機配置]。In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    空白應用程式 - 手機配置

  2. 按一下或點選 [檔案],這樣會開啟至 [應用程式設定] 索引標籤。輸入名稱「專案管理應用程式」。Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    應用程式名稱

  3. 按一下或點選 [另存新檔],確認該應用程式將會儲存到雲端,然後按一下右下角的 [儲存]。Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    儲存到雲端

  4. 按一下或點選Click or tap 返回應用程式圖示 以返回應用程式。to go back to the app.

將四個畫面新增至應用程式Add four screens to the app

在此步驟中,我們將為應用程式建立四個空白畫面。In this step, we'll create four blank screens for the app. 我們會根據畫面的用途,使用不同的畫面配置。We'll use different screen layouts, depending on the screen's purpose. 我們會將在稍後的步驟中新增至這些畫面。We'll add to these screens in later steps.

畫面Screen 用途Purpose
SelectTaskSelectTask 開啟畫面,瀏覽至其他畫面Opening screen; navigate to other screens
AssignManagerAssignManager 將經理指派給已核准的專案Assign a manager to an approved project
ViewProjectsViewProjects 檢視專案的清單,具有摘要資訊View a list of projects, with summary information
UpdateDetailsUpdateDetails 檢視及更新專案的詳細資料View and update the details for a project
  1. 在 [首頁] 索引標籤上,按一下或點選 [NewScreen],然後按一下或點選 [可捲動的畫面]。On the Home tab, click or tap NewScreen, then Scrollable screen.

    可捲動的畫面

  2. 將畫面重新命名為 SelectTaskRename the screen to SelectTask.

    重新命名畫面

  3. 建立並重新命名其他畫面:Create and rename additional screens:

    1. 按一下或點選 [NewScreen],然後按一下或點選 [可捲動的畫面]。Click or tap NewScreen, then Scrollable screen. 將畫面重新命名為 AssignManagerRename the screen to AssignManager.
    2. 按一下或點選 [NewScreen],然後按一下或點選 [清單畫面]。Click or tap NewScreen, then List screen. 將畫面重新命名為 ViewProjectsRename the screen to ViewProjects.
    3. 按一下或點選 [NewScreen],然後按一下或點選 [表單畫面]。Click or tap NewScreen, then Form screen. 將畫面重新命名為 UpdateDetailsRename the screen to UpdateDetails.
  4. 選取 Screen1旁的省略符號 (...),然後按一下或點選 [刪除]。Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    刪除畫面

應用程式現在看起來應該類似下列映像。The app should now look like the following image.

所有應用程式畫面

步驟 2:連線至 SharePoint 清單Step 2: Connect to a SharePoint list

在此步驟中,我們將連線至產品詳細資料 SharePoint 清單。In this step, we'll connect to the Product Details SharePoint list. 我們在此應用程式中只使用一個清單,但是如果您想要擴充應用程式,您可以輕鬆地同時連線兩個清單。We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. 在左側導覽列中,按一下或點選 [SelectTask] 畫面。In the left navigation bar, click or tap the SelectTask screen.
  2. 在右窗格中,按一下或點選 [新增資料來源]。In the right pane, click or tap Add data source.

    連接到資料

  3. 按一下或點選 [新增連接]。Click or tap New connection.

    新增連接

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

    SharePoint 連線

  5. 選取 [直接連線 (雲端服務)],然後按一下或點選 [建立]。Select Connect directly (cloud services), then click or tap Create.

    直接連線 (雲端服務)

  6. 輸入 SharePoint URL,然後按一下或點選 [前往]。Enter a SharePoint URL, then click or tap Go.

    要連線的 SharePoint URL

  7. 選取 [專案詳細資料] 清單,然後按一下或點選 [連線]。Select the Project Details list, then click or tap Connect.

    選取專案詳細資料清單

    右窗格中的 [資料來源] 索引標籤現在會顯示您建立的連線。The Data sources tab in the right pane now shows the connection that you have created.

    資料來源索引標籤

步驟 3:建置 SelectTask 畫面Step 3: Build the SelectTask screen

在此步驟中,我們會提供瀏覽至應用程式其他畫面的方法 - 使用一些控制項、公式和 PowerApps 提供的格式設定選項。In this step, we'll provide a way to navigate to the other screens in the app - working with some of the controls, formulas, and formatting options that PowerApps provides.

更新標題並且插入簡介文字Update the title and insert introductory text

  1. 在左側導覽列中,選取 [SelectTask] 畫面。In the left navigation bar, select the SelectTask screen.
  2. 在中間窗格中,選取預設 [標題],然後在公式列中,將 Text 屬性更新為 "Contoso Project Management"。In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    公式列中的 Text 屬性

  3. 在 [插入] 索引標籤上,按一下或點選 [標籤],然後將標籤向下拖曳至橫幅上方。On the Insert tab, click or tap Label, then drag the label down below the top banner.

    新增標籤

  4. 在公式列中,設定標籤的下列屬性:In the formula bar, set the following properties for the label:

    • Color 屬性 = DarkGrayColor property = DarkGray
    • Size 屬性 = 18Size property = 18
    • Text 屬性 = "Click or tap a task to continue..."Text property = "Click or tap a task to continue..."

      更新標籤文字

新增兩個瀏覽按鈕Add two navigation buttons

  1. 在 [插入] 索引標籤上,按一下或點選 [按鈕],然後將按鈕拖曳至標籤下方。On the Insert tab, click or tap Button, then drag the button below the label.

    [新增] 按鈕

  2. 在公式列中,設定按鈕的下列屬性:In the formula bar, set the following properties for the button:

    • OnSelect 屬性 = Navigate(AssignManager, Fade)OnSelect property = Navigate(AssignManager, Fade). 當您執行應用程式並且按一下此按鈕時,您會瀏覽至應用程式中的第二個畫面,在畫面之間有淡出轉換。When you run the app and click this button, you navigate to the second screen in the app, with a fade transition between the screens.
    • Text 屬性 = "Assign Manager"Text property = "Assign Manager"
  3. 調整按鈕大小以容納文字。Resize the button to accommodate the text.

    更新按鈕文字

  4. 插入具有下列屬性的另一個按鈕:Insert another button with the following properties:

    • OnSelect 屬性 = Navigate(ViewProjects, Fade)OnSelect property = Navigate(ViewProjects, Fade).
    • Text 屬性 = "Update Details"Text property = "Update Details"

      更新按鈕文字

      注意:按鈕的標籤為 [更新詳細資料],但是我們會先瀏覽至 [ViewProjects] 畫面以選取要更新的專案。Note: The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

執行應用程式Run the app

應用程式還無法執行許多作業,但是如果您想要的話可以執行它:The app doesn't do a lot yet, but you can run it if you like:

  1. 按一下或點選 [SelectTask] 畫面 (應用程式永遠會從 PowerApps Studio 的所選取畫面中以預覽模式啟動)。Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).
  2. 按一下或點選Click or tap 執行應用程式圖示 以執行應用程式。in the upper right corner to run the app.
  3. 按一下或點選其中一個按鈕以瀏覽至另一個畫面。Click or tap one of the buttons to navigate to another screen.
  4. 按一下或點選Click or tap 右上角的關閉應用程式預覽圖示 以關閉應用程式。in the upper right corner to close the app.

步驟 4:建置 AssignManager 畫面Step 4: Build the AssignManager screen

在此步驟中,我們會使用資源庫來顯示已核准但是還沒有經理的所有專案。In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. 我們會新增其他控制項,因此您可以指派經理。We'll add other controls, so you can assign a manager.

注意:我們稍後會在應用程式中建置一個頁面,讓您編輯專案的所有欄位 (包括經理欄位),但是我們認為建置一個與這個畫面類似的畫面也很酷。Note: We'll build a page later in the app that allows you to edit all fields for a project (including the manager field), but we thought it would be cool to build a screen like this one as well.

  1. 儲存您到目前為止所做的變更。Save the changes you've made so far.
  2. 在左側導覽列中,按一下或點選 [AssignManager] 畫面。In the left navigation bar, click or tap the AssignManager screen.

更新標題並且插入簡介文字Update the title and insert introductory text

  1. 將 [標題] 變更為 [指派經理]。Change [Title] to Assign Manager.
  2. 新增具有下列屬性的標籤:Add a label with the following properties:

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

      指派經理版面配置

新增上一頁箭號以返回 SelectTask 畫面Add a back arrow to return to the SelectTask screen

  1. 按一下或點選畫面頂端的藍色列。Click or tap the blue bar at the top of the screen.
  2. 在 [插入] 索引標籤上,按一下或點選 [圖示],然後按一下或點選 [左]。On the Insert tab, click or tap Icons, then click or tap Left.

    插入向左箭號

  3. 將箭號移至藍色列的左邊,然後設定下列屬性:Move the arrow to the left side of the blue bar, and set the following properties:

    • Color 屬性 = WhiteColor property = White
    • Height 屬性 = 40Height property = 40
    • OnSelect 屬性 = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)
    • Width 屬性 = 40Width property = 40

      新增上一頁按鈕

  1. 在 [插入] 索引標籤上,按一下或點選 [資源庫],然後按一下或點選 [垂直]。On the Insert tab, click or tap Gallery, then Vertical.

    新增垂直資源庫

  2. 從右窗格中的 [版面配置] 功能表,選取 [標題、子標題與本文]。Select Title, subtitle, and body from the Layout menu in the right pane.

    變更資源庫版面配置

    資源庫現在具有正確的版面配置,但是仍然有預設範例文字。The gallery now has the right layout, but it still has the default sample text. 我們會在下一步修正。We'll fix that next.

    具有預設文字的資源庫

  3. 設定資源庫的下列屬性:Set the following properties for the gallery:

    • BorderThickness 屬性 = 1BorderThickness property = 1
    • BorderStyle 屬性 = DottedBorderStyle property = Dotted
    • Items 屬性 = Filter('Project Details', PMAssigned="Unassigned").Items property = Filter('Project Details', PMAssigned="Unassigned"). 只有未指派經理的專案會包含在資源庫中。Only projects with no manager assigned are included in the gallery.

      具有清單文字的資源庫

  4. 在右窗格中,更新欄位以符合下列清單:In the right pane, update the fields to match the following list:

    • ApprovedDateApprovedDate
    • 狀態Status
    • 標題Title

      資源庫欄位

  5. 適當地調整資源庫中標籤的大小,然後從第一個資源庫項目移除箭號 (我們不需要從這個資源庫瀏覽到任何位置)。Resize labels in the gallery as appropriate, and remove the arrow from the first gallery item (we don't need to navigate anywhere from this gallery).

    移除箭號圖示

    畫面現在看起來應該像下列映像。The screen should now look like the following image.

    格式化的資源庫

如果選取項目,則變更項目的色彩Change the color of an item if it's selected

  1. 選取資源庫,然後將 [TemplateFill] 屬性設為 If (ThisItem.IsSelected=true, Orange, White)Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).
  2. 選取資源庫中的項目。Select an item in the gallery. 畫面現在看起來應該像下列映像。The screen should now look like the following image.

    具有已選取項目的資源庫

新增標籤、文字輸入和確定按鈕來提交經理指派Add a label, text input, and OK button to submit manager assignments

  1. 按一下或點選您使用之資源庫的外面。Click or tap outside the gallery you've been working on.
  2. 在 [插入] 索引標籤上,按一下或點選 [標籤]。On the Insert tab, click or tap Label. 將資源庫下方的標籤拖曳至左邊。Drag the label below the gallery, to the left. 設定標籤的下列屬性:Set the following properties for the label:

    • Size 屬性 = 20Size property = 20
    • Text 屬性 = "Manager:"Text property = "Manager:"

    新增經理標籤

  3. 在 [插入] 索引標籤中,按一下或點選 [文字],然後按一下或點選 [文字輸入]。On the Insert tab, click or tap Text, then Text input. 將資源庫下方的文字輸入拖曳至中央。Drag the text input below the gallery, in the center. 設定下拉式清單的下列屬性:Set the following properties for the drop down:

    • Default 屬性 = ""Default property = ""
    • Height 屬性 = 60Height property = 60
    • Size 屬性 = 20Size property = 20
    • Width 屬性 = 250Width property = 250

    新增文字輸入

  4. 在 [插入] 索引標籤上,按一下或點選 [按鈕]。On the Insert tab, click or tap Button. 將資源庫下方的按鈕拖曳至右邊。Drag the button below the gallery, to the right. 設定按鈕的下列屬性:Set the following properties for the button:

    • Height 屬性 = 60Height property = 60
    • OnSelect 屬性 = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text})OnSelect property = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). 如需詳細資訊,請參閱深入了解公式For more information, see Formula deep-dive.
    • 此公式會更新專案詳細資料清單,設定 PMAssigned 欄位的值。This formula updates the Project Details list, setting a value for the PMAssigned field.
    • Size 屬性 = 20Size property = 20
    • Text 屬性 = "OK"Text property = "OK"
    • Width 屬性 = 80Width property = 80

    新增確定按鈕

已完成的畫面現在看起來應該像下列映像。The completed screen should now look like the following image.

已完成指派經理畫面

步驟 5:建置 ViewProjects 畫面Step 5: Build the ViewProjects screen

在此步驟中,我們將會變更 [ViewProjects] 畫面上資源庫的屬性。In this step, we'll change properties for the gallery on the ViewProjects screen. 這個資源庫會顯示 [專案詳細資料] 清單的項目。This gallery displays items from the Project Details list. 您選取這個畫面上的項目,然後在 [UpdateDetails] 畫面上編輯詳細資料。You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. 在左側導覽列中,按一下或點選 [ViewProjects] 畫面。In the left navigation bar, click or tap the ViewProjects screen.
  2. 將 [標題] 變更為 [「檢視專案」]。Change [Title] to "View Projects".
  3. 在左側導覽列中,按一下或點選 [ViewProjects] 畫面底下的 [BrowserGallery1]。In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.
  4. 從右窗格中的 [版面配置] 功能表,選取 [標題、子標題與本文]。Select Title, subtitle, and body from the Layout menu in the right pane.

    變更資源庫版面配置

    資源庫現在具有正確的版面配置,有預設範例文字。The gallery now has the right layout, with the default sample text.

    具有預設文字的資源庫

  5. 選取重新整理按鈕 重新整理圖示,然後將其 OnSelect 屬性設為 Refresh('Project Details')Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').
  6. 選取新增項目按鈕 新增圖示,然後將其 OnSelect 屬性設為 NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None)Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

新增上一頁箭號以返回 SelectTask 畫面Add a back arrow to return to the SelectTask screen

  1. 在左側導覽列中,按一下或點選 [AssignManager] 畫面。In the left navigation bar, click or tap the AssignManager screen.
  2. 選取您在該處新增的上一頁箭號,並且複製它。Select the back arrow you added there, and copy it.
  3. 將箭號貼上至 [ViewProjects] 畫面,並且將它放在重新整理按鈕的左邊。Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    上一頁按鈕

    它的所有屬性都會一起複製,包括 OnSelect 屬性為 Navigate(SelectTask, Fade)All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

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

    這會將資源庫的資料來源設為 [專案詳細資料] 清單,並且使用 [標題] 欄位來搜尋及排序。This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. 選取第一個資源庫項目中的 詳細資料箭號圖示,並且將 OnSelect 屬性設為 Navigate(UpdateDetails, None)Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="b09d2-322">檢視專案資源庫 - 選取的第一個項目</span><span class="sxs-lookup"><span data-stu-id="b09d2-322">View Projects gallery - first item selected</span></span>

  3. 在右窗格中,更新欄位以符合下列清單:In the right pane, update the fields to match the following list:

    • 狀態Status
    • PMAssignedPMAssigned
    • 標題Title

      資源庫欄位

      已完成的畫面現在看起來應該像下列映像。The completed screen should now look like the following image.

      檢視專案畫面已完成

步驟 6:建置 UpdateDetails 畫面Step 6: Build the UpdateDetails screen

在此步驟中,我們會將 [UpdateDetails] 畫面上的編輯表單連線至我們的資料來源,然後進行一些屬性和欄位的變更。In this step, we'll connect the edit form on the UpdateDetails screen to our data source, and we'll make some property and field changes. 您可以在這個畫面上,編輯您在 [檢視專案] 畫面選取之專案的詳細資料。On this screen, you edit details for a project that you selected on the View Projects screen.

  1. 在左側導覽列中,按一下或點選 [UpdateDetails] 畫面。In the left navigation bar, click or tap the UpdateDetails screen.
  2. 將 [標題] 變更為 [「更新詳細資料」]。Change [Title] to "Update Details".
  3. 在左側導覽列中,按一下或點選 [UpdateDetails] 底下的 [EditForm1]。In the left navigation bar, click or tap EditForm1 under UpdateDetails.
  4. 設定表單的下列屬性:Set the following properties for the form:

    • DataSource 屬性 = 'Project Details'DataSource property = 'Project Details'
    • Item 屬性 = BrowseGallery1.SelectedItem property = BrowseGallery1.Selected
  5. 仍然選取表單,然後在右窗格中按一下或點選下列欄位的核取方塊,順序如下所示:With the form still selected, in the right pane click or tap the checkbox for the following fields, in the order shown:

    • 標題Title
    • PMAssignedPMAssigned
    • 狀態Status
    • ProjectedStartDateProjectedStartDate
    • ProjectedEndDateProjectedEndDate
    • ProjectedDaysProjectedDays
    • ActualDaysActualDays

      編輯表單欄位

  6. 選取取消按鈕 取消圖示,然後將其 OnSelect 屬性設為 ResetForm(EditForm1); Back()Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().
  7. 選取儲存按鈕 勾號儲存圖示,然後簽出 OnSelect 公式 - SubmitForm(EditForm1)Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). 因為我們使用編輯表單控制項,所以可以使用 Submit(),而不像我們稍早使用 Patch()Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

已完成的畫面現在看起來應該類似下列映像 (如果這些欄位是空白,請確定您選取 [檢視專案] 畫面上的項目)。The completed screen should now look like the following image (if the fields are blank, make sure you select an item on the View Projects screen).

更新詳細資料畫面已完成

步驟 7:執行應用程式Step 7: Run the app

既然應用程式已完成,讓我們執行它以查看其運作如何。Now that the app is complete, let's run it to see how it works. 我們會將 SharePoint 網站上的連結新增至應用程式。We'll add a link on the SharePoint site to the app. 您可以在瀏覽器中執行應用程式,但是您可能需要共用應用程式,讓其他人執行它。You will be able to run the app in the browser, but you might need to share the app for other people to run it. 如需詳細資訊,請參閱共用應用程式For more information, see Share your apps.

  1. 在 Office 365 應用程式啟動器中,按一下或點選 [PowerApps]。In the Office 365 app launcher, click or tap PowerApps.

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

  2. 在 PowerApps 中,按一下或點選 [專案管理應用程式] 的省略符號 (...),然後按一下或點選 [開啟]。In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    選取專案管理應用程式

  3. 複製瀏覽器中應用程式的位址 (URL)。Copy the address (URL) for the app in the browser.

    複製應用程式 URL

  4. 在 SharePoint 中,按一下或點選 [編輯連結]。In SharePoint, click or tap EDIT LINKS.

    編輯 SharePoint 網站連結

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

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

  6. 輸入「專案管理應用程式」,並且貼上應用程式的位址。Enter "Project Management app", and paste in the address for the app.

    編輯連結屬性

  7. 按一下或點選 [確定],然後按一下或點選 [儲存]。Click or tap OK, then Save.

    儲存連結變更

將經理指派至專案Assign a manager to a project

現在我們已經在 SharePoint 網站具有應用程式,我們將會假設專案核准者的角色 - 我們尋找未指派經理的任何專案,並且將經理指派至其中一個專案。Now that we have the app in our SharePoint site, we'll assume the role of the project approver - we'll look for any projects that don't have a manager assigned, and assign a manager to one of the projects. 然後我們假設專案經理的角色,並且新增一些指派給我們之專案的相關資訊。Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. 首先,讓我們看看 SharePoint 中的 [專案詳細資料] 清單。First, let's look at the Project Details list in SharePoint. 兩個專案在 [PMAssigned] 資料行中具有值 [未指派]。Two projects have a value of Unassigned in the PMAssigned column. 我們會在應用程式中看到。We will see these in the app.

    SharePoint 清單中的未指派專案

  2. 按一下或點選您要建立至應用程式的連結。Click or tap the link that you created to the app.
  3. 在第一個畫面上,按一下或點選 [指派經理]。On the first screen, click or tap Assign Manager.

    應用程式簡介畫面

  4. 在 [指派經理] 畫面上,您會看到清單的兩個未指派專案。On the Assign Manager screen, you see the two unassigned projects from the list. 選取 [新的 BI 軟體] 專案。Select the New BI software project.

    具有已選取項目的資源庫

  5. 在 [經理] 文字輸入中,輸入 "Joni Sherman",然後按一下 [確定]。In the Manager text input, enter "Joni Sherman", then click OK.

    變更會套用至清單,然後資源庫會重新整理,只顯示剩餘的未指派專案。The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    將經理指派至專案

  6. 返回至 SharePoint 清單,並且重新整理頁面。Go back to the SharePoint list and refresh the page. 您會看到專案項目現在已更新專案經理名稱。You'll see that the project entry is now updated with the project manager name.

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

更新專案的詳細資料Update details for the project

  1. 按一下或點選 返回圖示 以返回第一個畫面,然後按一下或點選 [更新詳細資料]。Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    應用程式簡介畫面

  2. 在 [檢視專案] 畫面上,在搜尋方塊中輸入 "New"。On the View Projects screen, enter "New" in the search box.

    在應用程式資源庫中搜尋

  3. 按一下新的 BI 軟體項目的 詳細資料箭號圖示Click Details arrow icon for the New BI software item.

    已選取資源庫項目

  4. 在 [更新詳細資料] 畫面上,設定下列值:On the Update Details screen, set the following values:

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

    更新項目詳細資料

  5. 按一下或點選Click or tap 核取記號圖示 將變更套用至 SharePoint 清單。to apply the change to the SharePoint list.
  6. 關閉應用程式,然後返回清單。Close the app, and go back to the list. 您會看到專案項目現在已更新日期和天數變更。You see that the project entry is now updated with the date and day changes.

    已更新 SharePoint 清單

深入了解公式Formula deep-dive

這是 PowerApps 公式中第二個選擇性的區段。This is the second optional section on PowerApps formulas. 在第一個深入了解中,我們探討了其中一個公式,PowerApps 針對三個畫面應用程式的瀏覽資源庫而產生該公式。In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app. 在此深入了解中,我們會探討用於第二個應用程式之 [AssignManager] 畫面的公式。In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. 公式如下:Here's the formula:

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

這個公式能夠做什麼?What does this formula do? 當您選取資源庫中的項目並且按一下 [確定] 按鈕時,公式會更新 [專案詳細資料] 清單,將 [PMAssigned] 資料行設為您在文字輸入中指定的值。When you select an item in the gallery and click the OK button, the formula updates the Project Details list, setting the PMAssigned column to the value that you specify in the text input. 此公式會使用函式以執行其工作:The formula uses functions to do its work:

  • Patch 函式會修改資料來源的一或多筆記錄。The Patch function modifies one or more records of a data source.
  • LookUp 函式會尋找資料表中第一筆符合公式的記錄。The LookUp function finds the first record in a table that satisfies a formula.

當您在公式中將函式放在一起時,會發生下列情況:When you put the functions together in the formula, here's what happens:

  1. 當您按一下 [確定] 按鈕時,會呼叫 Patch 函式以更新 [專案詳細資料] 清單。When you click the OK button, the Patch function is called to update the Project Details list.
  2. Patch 函式內,LookUp 函式會識別要更新 [專案詳細資料] 清單的哪一個資料列。Within the Patch function, the LookUp function identifies which row of the Project Details list to update. 它會藉由比較已選取資源庫項目的識別碼與清單中的識別碼,來執行這項操作。It does this by comparing the ID of the selected gallery item to the ID in the list. 例如,識別碼 12 表示新的 BI 軟體的項目應該更新。For example, an ID of 12 means that the entry for New BI software should be updated.
  3. 既然 Patch 函式具有正確的識別碼,它會將 [PMAssigned] 欄位更新為 [TextInput1.Text] 中的值。Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

後續步驟Next steps

此教學課程系列的下一個步驟是建立 Power BI 報告來分析專案The next step in this tutorial series is to create a Power BI report to analyze projects.