生成用于处理项目申请的应用Generate an app to handle project requests

注意:本文属于将 PowerApps、Microsoft Flow 和 Power BI 与 SharePoint Online 结合使用的系列教程。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:

    • RequestDateRequestDate
    • DescriptionDescription
    • TitleTitle
    • RequestorRequestor

      库字段

  4. 在仍选择“BrowseGallery1”的情况下,选择“Items”属性。With BrowseGallery1 still selected, select the Items property.

    项属性

  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)).

    编辑栏

    这样,可以按“Title”字段(而不是 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. 在右侧窗格中,将“Title”字段拖到顶部。In the right pane, drag the Title field to the top.

    “Title”字段

  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. 如上所述,将“Title”字段拖到顶部。As above, drag the Title field to the top.

    “Title”字段

第 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. 更新“Description”字段(即将最后一个词从“group”更改为“team”),再单击或点击 复选标记图标Update the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    更新“Description”字段

  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 步中,我们修改了“BrowseGallery1”的“Items”属性的公式。In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. 具体而言,我们更改为按“Title”字段(而不是 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 函数:在条件为 true 时返回一个值,在条件为 false 时返回另一个值。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 函数会将此本文与列表中“Title”列内每个字符串的开头文本进行比较。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). 然后,此函数返回“Descending”或“Ascending”值。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. 在此示例中,这个函数是按“Title”字段(但可能不同于搜索所依据的字段)进行排序。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.