產生應用程式以處理專案要求Generate an app to handle project requests

注意:這篇文章是搭配 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.

既然 SharePoint 清單已就緒,我們可以建立並自訂我們的第一個應用程式。Now that the SharePoint lists are in place, we can build and customize our first app. PowerApps 與 SharePoint 整合,所以直接從清單產生基本的三個畫面應用程式很容易。PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. 此應用程式可讓您檢視每個清單項目的摘要和詳細資訊、更新現有清單項目,以及建立新的清單項目。This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. 如果您直接從清單建立應用程式,應用程式會針對該清單顯示為檢視。If you create an app directly from a list, the app appears as a view for that list. 然後您可以在瀏覽器中以及行動電話上執行該應用程式。You can then run that app in a browser, as well as on a mobile phone.

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

步驟 1:從 SharePoint 清單產生應用程式Step 1: Generate an app from a SharePoint list

  1. 在您建立的 [專案要求] 清單中,按一下或點選 [PowerApps],然後按一下或點選 [建立應用程式]。In the Project Requests list you created, click or tap PowerApps, then Create an app.

    建立應用程式

  2. 指定應用程式名稱,例如「專案要求應用程式」,然後按一下或點選 [建立]。Give the app a name, like "Project Requests app", then click or tap Create. 應用程式就緒時,它會在適用於 Web 的 PowerApps Studio 中開啟。When the app is ready, it opens in PowerApps Studio for web.

    指定應用程式名稱

步驟 2:在 PowerApps Studio 中檢閱應用程式Step 2: Review the app in PowerApps Studio

  1. 在 PowerApps Studio 中,左側導覽列預設會顯示畫面的階層檢視和應用程式中的控制項。In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    具有階層檢視的 PowerApps Studio

  2. 按一下或點選縮圖圖示以切換檢視。Click or tap the thumbnail icon to switch views.

    PowerApps Studio 檢視選擇器

  3. 按一下或點選每個畫面以在中間窗格中檢視。Click or tap each screen to view it in the middle pane. 有三個畫面:There are three screens:

    1. 瀏覽畫面,您可以在其中瀏覽、排序和篩選從清單提取的資料。The browse screen, where you browse, sort, and filter the data pulled in from the list.
    2. 詳細資料畫面,您可以在其中檢視更詳細的項目資訊。The details screen, where you view more detail about an item.
    3. 編輯/建立畫面,您可以在其中編輯現有的項目或建立新的項目。The edit/create screen, where you edit an existing item or create a new one.

      具有縮圖檢視的 PowerApps Studio

步驟 3:自訂應用程式的瀏覽畫面Step 3: Customize the app's browse screen

  1. 按一下或點選瀏覽畫面。Click or tap the browse screen.

    此畫面具有版面配置,其中包含資源庫以顯示清單項目,以及其他控制項,例如搜尋列和排序按鈕。This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. 按一下第一筆記錄外的任何記錄,以選取 BrowseGallery1 資源庫。Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    瀏覽資源庫

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

    • 要求日期RequestDate
    • DescriptionDescription
    • TitleTitle
    • RequestorRequestor

      資源庫欄位

  4. BrowseGallery1 保持選取的同時,選取 Items 屬性。With BrowseGallery1 still selected, select the Items property.

    Items 屬性

  5. 將公式變更為 SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending))Change the formula to SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    公式列

    這可讓您依據 [標題] 欄位排序和搜尋,而不是依據 PowerApps 挑選的預設值。This allows you to sort and search by the Title field, instead of the default that PowerApps picked. 如需詳細資訊,請參閱深入了解公式See Formula deep-dive for more information.

  6. 按一下或點選 [檔案],然後按一下或點選 [儲存]。Click or tap File, then Save. 按一下或點選 [返回應用程式圖示] 以返回應用程式。Click or tap Back to app icon to go back to the app.

步驟 4:自訂應用程式的詳細資料畫面及編輯畫面Step 4: Customize the app's details screen and edit screen

  1. 按一下或點選詳細資料畫面。Click or tap the details screen.

    此畫面有不同的版面配置,其中包含顯示表單以顯示在資源庫中選取之項目的詳細資料。This screen has a different layout that contains a display form to show the details for an item selected in the gallery. 它具有控制項,可以編輯和刪除項目,並且返回瀏覽畫面。It has controls to edit and delete items, and to go back to the browse screen.

  2. 選取 DetailForm1 顯示表單。Select the DetailForm1 display form.

    詳細資料顯示表單

  3. 在右窗格中,將 [標題] 欄位拖曳至頂端。In the right pane, drag the Title field to the top.

    標題欄位

  4. 按一下或點選編輯畫面。Click or tap the edit screen.

    此畫面包含編輯表單以編輯選取的項目,或建立新的項目 (如果您是直接從瀏覽畫面來到這裡)。This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). 它具有控制項,可以儲存或捨棄變更。It has controls to save or discard changes.

  5. 選取 EditForm1 編輯表單。Select the EditForm1 edit form.

    編輯表單

  6. 如上所述,將 [標題] 欄位拖曳至頂端。As above, drag the Title field to the top.

    標題欄位

步驟 5:從清單執行應用程式Step 5: Run the app from the list

  1. 在 [專案要求] 清單中,按一下或點選 [所有項目],然後按一下或點選 [專案要求應用程式]。In the Project Requests list, click or tap All Items, then Project Requests app.

    檢視專案要求應用程式

  2. 按一下 [開啟],以在新的瀏覽器索引標籤中開啟應用程式。Click Open, which opens the app in a new browser tab.

    開啟專案要求應用程式

  3. 在應用程式中,按一下或點選In the app, click or tap 瀏覽資源庫中第一個項目的移至詳細資料圖示 for the first item in the browse gallery.

    第一個資源庫項目

  4. 按一下或點選Click or tap 鉛筆編輯圖示 以編輯項目。to edit the item.
  5. 更新 [說明] 欄位 – 將最後一個字從 "group" 變更為 "team",然後按一下或點選核取記號圖示Update the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    更新說明欄位

  6. 關閉瀏覽器索引標籤。Close the browser tab.
  7. 返回 [專案要求] 清單,按一下或點選 [專案要求應用程式],然後按一下或點選 [所有項目]。Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    檢視所有項目

  8. 請確認您從應用程式所做的變更。Verify the change you made from the app.

    請確認您的編輯

這是非常簡單的應用程式,我們只會進行一些基本的自訂,但是您會發現可以快速建置一些有趣的項目。This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. 我們將移至下一個工作,但是想要的話再看一下應用程式,並且了解控制項和公式如何共同運作以驅動應用程式行為。We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

深入了解公式Formula deep-dive

本節為選擇性,但是它會協助您深入了解公式的運作方式。This section is optional, but it will help you understand more about how formulas work. 在這項工作的步驟 3 中,我們會修改 BrowseGallery1Items 屬性的公式。In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. 具體來說,我們會將排序和搜尋變更為使用 [標題] 欄位,而不是 PowerApps 挑選的欄位。Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. 以下是修改過的公式:Here's the modified formula:

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

但是這個公式能夠做什麼?But what does this formula do? 它決定在資源庫中出現的資料來源、根據在搜尋方塊中輸入的任何文字篩選資料,以及根據應用程式中的排序按鈕排序結果。It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. 此公式會使用函式以執行其工作。The formula uses functions to do its work. 函式會採用參數 (也就是輸入),執行作業 (例如篩選),然後傳回值 (也就是輸出):Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

  • SortByColumns 函式會根據一或多個資料行排序資料表。The SortByColumns function sorts a table based on one or more columns.
  • Filter會尋找資料表中滿足您指定之公式的記錄。The Filter function finds the records in a table that satisfy a formula that you specify.
  • StartsWith 函式會測試某個文字字串的開頭是否為另一個文字字串。The StartsWith function tests whether one text string begins with another.
  • 如果條件成立則 If 函式會傳回一個值,如果相同條件不成立則傳回另一個值。The If function returns one value if a condition is true, and returns another value if the same condition is false.

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

  1. 如果您在搜尋方塊中輸入文字,StartsWith 函式會比較該文字與清單之 [標題] 資料行中每個字串的開頭文字。If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith ( Title, TextSearchBox1.Text )StartsWith ( Title, TextSearchBox1.Text )

    例如,如果您在搜尋方塊中輸入 "de",您會看到四個結果,包括以 "Desktop" 和 "Device" 開頭的項目。For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." 您不會看到所有 "Mobile devices" 項目,因為這些項目不是以 "de" 開頭。You won't see all the "Mobile devices" items because those don't start with "de."

  2. Filter 函式從 [專案要求] 資料表傳回資料列。The Filter function returns rows from the Project Requests table. 如果要比較的搜尋方塊中沒有任何文字,Filter 會傳回所有資料列。If there is no text in the search box to compare, Filter returns all rows.

    Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. If 函式會查看變數 SortDescending1 設為 true 或 false (應用程式中設定它的排序按鈕)。The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). 函式會傳回值為遞減遞增The function then returns a value of Descending or Ascending.

    If ( SortDescending1, Descending, Ascending )If ( SortDescending1, Descending, Ascending )

  4. 現在 SortByColumns 函式可以排序資源庫。Now the SortByColumns function can sort the gallery. 在此情況下,會依據 [標題] 欄位排序,但是這可能是與您搜尋的欄位不同的欄位。In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

如果您和我們一起進行到這裡,希望您對於此公式的運作方式,以及如何結合函式和其他元素以驅動您的應用程式所需的行為,有更好的概念。If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. 如需詳細資訊,請參閱 PowerApps 的公式參考For more information, see Formula reference for PowerApps.

後續步驟Next steps

此教學課程系列的下一個步驟是建立流程以管理專案核准The next step in this tutorial series is to Create a flow to manage project approvals.