利用 SharePoint 创建应用Creating an app from SharePoint

生成基于 SharePoint 列表的三屏应用,然后通过应用探索屏幕和控件。Generate a three screen app from a SharePoint list, then explore screens and controls from the app. 更新应用屏幕、控件和字段,并使用公式来进一步自定义应用行为。Update app screens, controls, and fields; and use formulas to further customize app behavior.

你将了解操作方式...

生成应用Generate an app

在本课程的这一部分中,我们将创建基于“地面材料估算”SharePoint 列表的应用。In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. 现场访问客户的估算人员可使用此应用来引用并不断更新列表。The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. “入门”部分已介绍过如何生成基于同一列表的应用,为什么要再次介绍此应用的生成方法呢?In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? 首先,我们不是在 PowerApps Studio 中开始操作。所以,现在要介绍如何将 PowerApps 集成到 SharePoint Online 中。First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. 其次,我们将深入介绍应用的组成部分,以及如何自定义应用。Second, we dig deeper into how the app is put together, and show you how to customize it. 阅读完此部分后,你一定会掌握一些新知识。那么,让我们开始吧!You'll definitely get some new information going through this section, so let's jump in!

生成应用Generate the app

下图展示了“地面材料估算”SharePoint 列表,其中包含名称、价格等基本信息,以及每种地面材料的图像。The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. 你会发现,PowerApps 和 Microsoft Flow 现已集成到 SharePoint Online 中,这样你就可以轻松生成基于列表的应用和流了。You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

“地面材料估算”列表

若要生成应用,请依次单击“PowerApps”和“创建应用”。To build an app, click PowerApps, then Create an app. 在右侧窗格中,输入应用名称,然后单击“创建”。In the right hand pane, enter a name for the app, then click Create. 在你单击“创建”后,PowerApps 便会开始生成应用。After you click Create, PowerApps starts to generate the app. PowerApps 会进行各种数据推论,生成实用应用,以便你可以在此基础上进行各种自定义。PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

生成基于列表的应用

在 PowerApps Studio 中查看应用View the app in PowerApps Studio

此时,新建的三屏应用会在 PowerApps Studio 中打开。Your new three-screen app opens in PowerApps Studio. 所有基于数据生成的应用都有一组相同的屏幕:All apps generated from data have the same set of screens:

  • 浏览屏幕:可以在此屏幕中浏览、排序、筛选和刷新从列表中拉取的数据,并能通过单击 (+) 图标添加项。The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • 详细信息屏幕:可以在此屏幕中查看项的详细信息,并能选择删除或编辑项。The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • 编辑/创建屏幕:可以在此屏幕中编辑现有项,也可以创建新项。The edit/create screen: where you edit an existing item or create a new one.

在左侧导航栏中,单击或点击右上角的图标,切换到缩略图视图。In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

切换视图

单击或点击每个缩略图,查看相应屏幕上的控件。Click or tap each thumbnail to view the controls on that screen.

生成的应用

在预览模式下运行应用Run the app in preview mode

单击或点击右上角的Click or tap 启动应用预览箭头 ,以运行应用。in the top-right corner to run the app. 如果浏览应用,便会发现其中包含列表中的所有数据,并提供令人满意的默认体验。If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

在预览模式下运行应用

接下来,我们将详细探索应用并自定义应用,使其更能满足我们的需求。Next we'll explore the app in more detail and later customize the app so it better suits our needs.

浏览生成的应用Explore a generated app

此主题将更深入地介绍生成的应用,即探索定义应用行为的屏幕和控件。In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. 虽然我们的介绍无法面面俱到,但深入了解此应用的工作方式将有助于你生成自己的应用。We won't go through all the details, but seeing more about how this app works will help you to build your own apps. 后续主题将介绍与屏幕和控件结合使用的公式。In a later topic, we'll look at the formulas that work with screens and controls.

了解 PowerApps 中的控件Understanding controls in PowerApps

控件只是一种与行为相关联的 UI 元素。A control is simply a UI element that has behaviors associated with it. PowerApps 中的许多控件与你在其他应用中用过的控件(如标签、文本输入框、下拉列表、导航元素等)相同。Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. 不过,PowerApps 具有更为专业化的控件,如“”(显示摘要数据)和“窗体”(显示详细数据并允许创建和编辑项)。But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). 还有其他一些相当棒的控件,如“图像”、“照相机”和“条形码”。And also some other really cool controls like Image, Camera, and Barcode. 若要查看可用控件,请单击或点击功能区上的“插入”,然后依次单击或点击从“文本”到“图标”的各个选项。To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

PowerApps Studio 功能区上的“控件”选项卡

探索浏览屏幕Explore the browse screen

三个应用屏幕都有一个主控件和一些附加控件。Each of the three app screens has a main control and some additional controls. 应用中的第一屏是浏览屏幕,默认命名为 BrowseScreen1The first screen in the app is the browse screen, named BrowseScreen1 by default. 此屏幕上的主控件是名为 BrowseGallery1 的库。The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 包含其他控件,例如 NextArrow1(一种图标控件,单击或点击它可以转到详细信息屏幕)。BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). 此屏幕上还有独立控件,例如 IconNewItem1(一种图标控件,单击或点击它可以在编辑/创建屏幕中创建项)。There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

包含控件的浏览屏幕

PowerApps 提供各种库类型,以便你可以使用最能满足应用布局要求的类型。PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. 此部分的后续主题将介绍更多布局控制方法。You will see more ways to control layout later in this section.

PowerApps 库选项

探索详细信息屏幕Explore the details screen

第二屏是详细信息屏幕,默认命名为 DetailScreen1Next is the details screen, named DetailScreen1 by default. 此屏幕上的主控件是名为 DetailForm1 的显示窗体。The main control on this screen is a display form named DetailForm1. DetailForm1 包含其他控件,例如 DataCard1(一种卡片控件,在此示例中用于显示地面材料类别)。DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). 此屏幕上还有独立控件,例如 IconEdit1(一种图标控件,单击或点击它可以在编辑/创建屏幕上编辑当前项)。There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

包含控件的详细信息屏幕

虽然有许多库选项,但窗体更简便易用(不是编辑窗体,就是显示窗体)。There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

PowerApps 窗体选项

探索编辑/创建屏幕Explore the edit/create screen

应用中的第三屏是编辑/创建屏幕,默认命名为 EditScreen1The third screen in the app is the edit/create screen, named EditScreen1 by default. 此屏幕上的主控件是名为 EditForm1 的编辑窗体。The main control on this screen is an edit form named EditForm1. EditForm1 包含其他控件,例如 DataCard8(一种卡片控件,在此示例中可方便你编辑地面材料类别)。EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). 此屏幕上还有独立控件,例如 IconAccept1(一种图标控件,单击或点击它可以保存在编辑/创建屏幕上做出的更改)。There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

包含控件的编辑屏幕

至此,你已大致了解应用包含哪些屏幕和控件,下一主题将介绍如何自定义应用。Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

自定义应用Customize the app

在此部分的前两个主题中,你生成了基于 SharePoint 列表的应用,并探索了组成应用的三个屏幕。In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. 虽然 PowerApps 生成的应用非常有用,但经常需要在生成应用后进行自定义。The app that PowerApps generated is useful, but you will often customize an app after it's generated. 此主题将逐步介绍如何对应用的每个屏幕进行一些基本更改。In this topic, we'll walk through some basic changes for each screen in the app. 还可以自定义应用的更多方面,后续主题将对此进行介绍。There is a lot more you can do to customize an app - we'll get to that in later topics. 在此期间,可以利用此主题介绍的内容自定义应用。In the meantime, you can take what you learn in this topic and build on it. 采用生成的基于列表、Excel 文件或其他源的任何应用,了解如何自定义应用。Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. 这确实是了解应用的各组成部分的最佳方式。It really is the best way to learn how apps are put together.

浏览屏幕Browse screen

我们将从浏览屏幕开始。We'll start with the browse screen. SharePoint 列表包含每个产品的图像,但图像默认不显示。The SharePoint list contains an image for each product but the image isn't displayed by default. 让我们来解决此问题。Let's fix that. 在右侧窗格的“布局”选项卡上,为浏览屏幕选择其他布局。In the right-hand pane, on the Layout tab, select a different layout for the browse screen. 你会立即看到所选布局,因为 PowerApps 在你执行更改的同时更新应用。You see the results right away because PowerApps updates the app as you make changes.

更改浏览屏幕布局

设置正确的基本布局后,现在让我们来更改显示字段。With the right basic layout, now change the fields that are displayed. 单击或点击第一项中的字段,然后在右侧窗格中更改每一项的显示数据。Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. 这样一来,便可以改进列表中每一项的摘要。This provides a better summary of each item in the list.

更改浏览屏幕字段

详细信息屏幕Details screen

在详细信息屏幕上,我们要更改字段顺序,并且也要显示图像。On the details screen, we want to change the order of the fields and display the image also. 由于此屏幕上的控件不同,因此过程与浏览屏幕略有不同。There are different controls on this screen, so the process is a little different from the browse screen. 单击或点击字段,然后在右侧窗格中将“标题”字段拖到顶部。Click or tap a field, then in the right-hand pane, drag the Title field to the top. 然后,单击或点击“图像”字段,显示此字段。Then click or tap the Image field to display it.

更改详细信息屏幕字段

编辑/创建屏幕Edit/create screen

最后,在编辑和创建条目的屏幕上,我们要更改字段,以简化文本输入。Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. 依次单击或点击“Overview”字段的下拉列表和“编辑多行文本”控件。Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

更改编辑屏幕字段

你会发现,只需执行几个基本步骤,就可以改善生成的应用的外观和使用体验。You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. 在本主题中,我们将重点放在了 PowerApps Studio UI 上,其中有许多应用自定义选项。In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. 下一主题将介绍在定义应用行为方面发挥重要作用的公式。In the next topic, we'll get into formulas, which play an important role in driving app behavior.

探索应用公式Explore app formulas

PowerApps 的主要优势之一是,无需编写传统的应用程序代码。也就是说,无需成为开发者也可以创建应用!One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! 不过,仍需要通过一种方法在应用中表达逻辑,并控制应用的导航、筛选、排序及其他功能。But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. 这时候公式便派上用场。This is where formulas come in. 如果你用过 Excel 公式,就不会对 PowerApps 采用的方法感到陌生。If you have used Excel formulas, the approach that PowerApps takes should feel familiar. 此主题将介绍几个用于设置文字格式的基本公式,然后逐个介绍 PowerApps 在生成的应用中添加的三个公式。In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. 你将大致了解公式的用途。You will get a taste of what formulas can do. 然后,可以花时间查看生成的应用中的其他公式,然后编写你自己的公式。Then you can spend some time looking at other formulas in the generated app and writing your own.

了解公式和属性Understanding formulas and properties

在上一主题中,我们在浏览屏幕库中添加了“价格”字段,但显示的是不含货币符号的纯数字。In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. 假设我们要添加美元符号,并根据商品价格更改文字颜色(例如,如果超过 5 美元,文字颜色为红色;否则,文字颜色为绿色)。Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). 下图展示了显示结果。The following image shows the idea.

添加货币符号并更改文字颜色

让我们从添加货币符号开始。Let's start with the currency formatting. 默认情况下,PowerApps 只拉取每个商品的价格,将其设置为价格标签的“Text”属性By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

价格默认格式

若要添加美元货币符号,请单击或点击标签控件,然后在编辑栏中将“Text”属性设置为以下公式。To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

添加价格货币符号

公式 - Text(Price, "[$-en-US]$ ##.00" 使用 Text 函数来指定应如何设置数字格式。The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. 这就像 Excel 公式一样,不同之处在于 PowerApps 公式引用的是控件和其他应用元素,而不是电子表格中的单元格。The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. 如果依次单击或点击控件和属性下拉列表,便会看到与控件相关的属性列表。If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. 例如,下图展示了标签的一部分属性列表。For example, here is a partial list of the properties for a label. 一些属性适用于各种控件,另一些属性专用于特定控件。Some properties are relevant across a broad range of controls and others only for a specific control.

设置属性

若要根据价格有条件地设置颜色,请对标签的“Color”属性使用以下公式:If(Price > 5, Color.Red, Color.Green)To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

设置价格颜色

生成的应用中包含的公式Formulas included in the generated app

至此,你已了解如何结合使用公式和属性。我们将继续介绍 PowerApps 在生成的应用中使用的三个示例公式。Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. 示例公式均来自浏览屏幕,并与 OnSelect 属性结合使用,此属性定义了在用户单击或点击应用控件时发生什么。The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • 第一个公式与 IconNewItem1 控件 新建项图标 相关联。The first formula is associated with the IconNewItem1 control: New item icon. 单击或点击此控件后,可从浏览屏幕转到编辑/创建屏幕并创建项。You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • 公式为 NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • 此公式实例化新的编辑窗体,然后转到编辑/创建屏幕,以便你可以新建项。The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. ScreenTransition.None 表示没有屏幕切换效果(如淡化)。A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • 第二个公式与 IconSortUpDown1 控件 库排序图标 相关联。The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. 单击或点击此控件后,可对浏览屏幕库中的项列表进行排序。You click or tap this control to sort the list of items in the browse screen gallery.

    • 公式为 UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • 此公式使用 UpdateContext 更新名为 SortDescending1变量The formula uses UpdateContext to update a variable called SortDescending1. 单击控件的同时,此变量的值来回切换。The value of the variable switches back and forth as you click the control. 这可指示此屏幕上的库如何进行项排序(如需了解更多详情,请观看视频)。This tells the gallery on this screen how to sort the items (watch the video for more details).
  • 第三个公式与 NextArrow1 控件 转到详细信息屏幕箭头图标 相关联。The third formula is associated with the NextArrow1 control: Go to details arrow icon. 单击或点击此控件后,可从浏览屏幕转到详细信息屏幕。You click or tap this control to go from the browse screen to the details screen.

    • 公式为 Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • 此公式转到详细信息屏幕,同样没有切换效果。The formula navigates to the details screen, again with no transition.

应用中还有许多其他公式,请花时间点击控件,了解为各种属性设置的公式。There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

总结Wrapping it all up

至此,你已阅读完“探索生成的应用”部分,并了解了屏幕、控件、属性和公式是如何在后台运行,从而让应用具备各种功能的。This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. 学习本课程到现在,应该对生成的应用的工作方式有了更深入的了解。If you've followed along, you should have a better understanding of how a generated app works. 现在,你可以利用所掌握的知识来创建你自己的应用。Now you can take this understanding into creating your own apps.

在继续介绍下一部分前,我们要回顾一下 SharePoint,并介绍如何在应用中集成列表体验。Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. 如你所见,FlooringApp 现在作为列表视图,点击“打开”即可启动应用。As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. 这样一来,可以通过易用的自定义方式轻松管理列表。This provides a simple way to manage your lists with a friendly customized experience.

作为 Sharepoint 列表视图的应用

至此,你已阅读完有关 SharePoint 应用的部分,可以选择接下来要浏览的主题:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

管理部分不仅介绍了如何共享应用和进行版本控制,还介绍了环境(即应用、数据和其他资源的容器)。The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. 建议每个人都适时浏览管理部分,不过 Common Data Service 部分也介绍了一些非常有用的信息,包括自定义应用的更多方面。We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

恭喜!

你已完成“Microsoft PowerApps 引导式学习课程”中的“利用 Sharepoint 创建应用”部分。You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

你已了解操作方式...

下一个教程

利用 Common Data Service 创建应用Creating an app from the Common Data Service

作者

  • Michael Blythe
  • olprod