了解 Microsoft PowerApps 中的数据窗体Understand data forms in Microsoft PowerApps

添加三种类型的控件,使用户能够浏览记录、显示有关记录的详细信息,以及编辑或创建记录:Add three types of controls so that the user can browse for a record, display details about that record, and edit or create a record:

活动Activity 控件Control 说明Description
浏览记录Browse for a record 控件Gallery control 筛选、排序、搜索和滚动浏览数据源中的记录,以及选择特定的记录。Filter, sort, search, and scroll through records in a data source, and select a specific record. 显示每条记录中的几个字段,以便一次性显示多条记录,即使是在小屏幕上显示。Display only a few fields from each record to show several records at a time, even on a small screen.
显示记录的详细信息Show details of a record 显示窗体控件Display form control 显示单条记录中的多个或所有字段。For a single record, display many or all fields in that record.
编辑或创建记录Edit or create a record 编辑窗体控件Edit form control 更新单条记录中的一个或多个字段(或创建以默认值开始的记录),并将这些更改保存回到基础数据源。Update one or more fields in a single record (or create a record starting with default values), and save those changes back to the underlying data source.

将每个控件放在不同的屏幕上,以方便区分:Put each control on a different screen to make them easier to distinguish:

跨三个屏幕浏览、查看和编辑记录

根据本主题中所述,使用公式组合这些控件,以创建整体用户体验。As this topic describes, combine these controls with formulas to create the overall user experience.

先决条件Prerequisites

  • 注册安装 PowerApps,然后打开该程序,并提供注册所用的同一凭据进行登录。Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.
  • 了解如何在 PowerApps 中 配置控件Learn how to configure a control in PowerApps.

浏览生成的应用Explore a generated app

PowerApps 可以根据指定的数据源自动生成应用。PowerApps can automatically generate an app based on a data source that you specify. 每个应用包含三个屏幕,其中显示前面所述的控件,以及用于连接控件的公式。Each app contains three screens with the controls described earlier and formulas that connect them. “现成地”运行这些应用,根据具体的目标自定义这些应用,或者探索其工作原理,以了解适用于你自己的应用的有用概念。Run these apps "out of the box," customize them for your specific goals, or examine how they work so that you can learn useful concepts that apply to your own apps. 以下部分介绍驱动生成的应用的屏幕、控件和公式。In the following sections, inspect the screens, controls, and formulas that drive a generated app.

浏览屏幕Browse screen

浏览屏幕控件

此屏幕包括以下重要公式:This screen features these key formulas:

控件Control 支持的行为Supported behavior 公式Formula
BrowseGallery1BrowseGallery1 显示“资产”数据源中的记录。Display records from the Assets data source. 库的 Items 属性设置为基于“资产”数据源的公式。The Items property of the gallery is set to a formula that's based on the Assets data source.
ImageNewItem1ImageNewItem1 显示“编辑和创建”屏幕,其中的每个字段设置为默认值,使用户能够轻松创建记录。Display the Edit and Create screen with each field set to a default value, so that the user can easily create a record. 图像的 OnSelect 属性设置为此公式:The OnSelect property of the image is set to this formula:
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NewForm( EditForm1 );
Navigate( EditScreen1, None )
NextArrow1(在库中)NextArrow1 (in the gallery) 显示“详细信息”屏幕,用于查看当前所选记录的多个或所有字段。Display the Details screen to view many or all fields of the currently selected record. 箭头的 OnSelect 属性设置为此公式:The OnSelect property of the arrow is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

此屏幕上的主要控件 BrowseGallery1 覆盖大部分屏幕区域。The primary control on this screen, BrowseGallery1, covers most of the area of the screen. 用户可以滚动浏览库来找到特定的记录,显示更多字段或更新字段。The user can scroll through the gallery to find a specific record to display more fields or to update.

将库的 Items 属性设置为显示库中数据源的记录。Set the Items property of a gallery to show records from a data source in it. 例如,将该属性设置为 Assets 可显示使用该名称的数据源中的记录。For example, set that property to Assets to show records from a data source of that name.

注意:在生成的应用中,Items 默认设置为复杂得多的公式,使用户能够排序和搜索记录。Note: In a generated app, Items is set to a significantly more complicated formula by default so that the user can sort and search for records. 本主题稍后将介绍如何构建该公式;暂时使用更简单的版本便已足够。You'll learn how to build that formula later in this topic; the simpler version is enough for now.

用户可以选择库上面的“+”符号创建记录,而无需查找要显示或编辑的记录。Instead of finding a record to display or edit, the user can create a record by selecting the "+" symbol above the gallery. 添加一个 Image 控件,在其中显示“+”符号,然后将其 OnSelect 属性设置为以下公式,即可创建这种效果:Create this effect by adding an Image control, showing a "+" symbol in it, and setting its OnSelect property to this formula:
NewForm( EditForm1 ); Navigate( EditScreen1, None )NewForm( EditForm1 ); Navigate( EditScreen1, None )

此公式打开“编辑和创建”屏幕,其中包含名为 EditForm1编辑窗体控件。This formula opens the Edit and Create screen, which features an Edit form control named EditForm1. 该公式还会将该窗体切换到“新建”模式,在此模式下,窗体将显示数据源中的默认值,使用户能够轻松从头开始创建记录窗体。The formula also switches that form into New mode, in which the form shows default values from the data source so that the user can easily create a record from scratch.

若要了解 BrowseGallery1 中显示的任何控件,请在该库的第一个部分(充当其他所有部分的模板)中选择该控件。To examine any control that appears in BrowseGallery1, select that control in the first section of that gallery, which serves as a template for all other sections. 例如,选择左边缘中间的“标签”控件:For example, select the middle Label control on the left edge:

浏览屏幕控件

在此示例中,控件的 Text 属性设置为 ThisItem.AssignedTo,这是“资产”数据源中的一个字段。In this example, the control's Text property is set to ThisItem.AssignedTo, which is a field in the Assets data source. 库中其他三个“标签”控件的“Text”属性设置为类似的公式,每个控件显示数据源中的不同字段。The Text property of the other three Label controls in the gallery are set to similar formulas, and each control shows a different field in the data source.

选择形状控件(箭头),确认其 OnSelect 属性是否设置为此公式:Select the Shape control (the arrow), and confirm that its OnSelect property is set to this formula:
Navigate( DetailScreen1, None )Navigate( DetailScreen1, None )

如果用户在 BrowseGallery1 中找到记录,可以选择该记录的箭头,在 DetailScreen1 中显示有关该记录的更多信息。If the user finds a record in BrowseGallery1, the user can select the arrow for that record to show more information about it in DetailScreen1. 用户可以通过选择箭头来更改 BrowseGallery1Selected 属性值。By selecting an arrow, the user changes the value of the Selected property of BrowseGallery1. 在此应用中,该属性确定哪个记录不仅要显示在 DetailScreen1 中,而且当用户确定要更新该记录时,该记录还要显示在“编辑和创建”屏幕中。In this app, that property determines which record appears in not only DetailScreen1 but also, if the user decides to update the record, the Edit and Create screen.

详细信息屏幕Detail screen

详细信息屏幕控件

此屏幕包括以下重要公式:This screen features these key formulas:

控件Control 支持的行为Supported behavior 公式Formula
DetailForm1DetailForm1 显示“资产”数据源中的记录Displays a record in the Assets data source DataSource 属性设置为 AssetsSet the DataSource property to Assets.
DetailForm1DetailForm1 确定要显示哪条记录。Determines which record to display. 在生成的应用中,显示用户在库中选择的记录。In a generated app, displays the record that the user selected in the gallery. 将此控件的 Item 属性设置为此值:Set the Item property of this control to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
卡片控件Card controls 显示窗体控件中,显示记录中的单个字段。In a Display form control, displays a single field in a record. DataField 属性设置为字段的名称,并将值括在双引号中(例如 "Name")。Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageBackArrow1ImageBackArrow1 当用户选择此控件时,将打开 BrowseScreen1When the user selects this control, opens BrowseScreen1. OnSelect 属性设置为以下公式:Set the OnSelect property to this formula:
Back()Back()
ImageDelete1ImageDelete1 当用户选择此控件时,将删除记录。When the user selects this control, deletes a record. OnSelect 属性设置为以下公式:Set the OnSelect property to this formula:
Remove( Assets, BrowseGallery1.Selected )Remove( Assets, BrowseGallery1.Selected )
ImageEdit1ImageEdit1 当用户选择此控件时,将打开当前记录的“编辑和创建”屏幕。When the user selects this control, opens the Edit and Create screen to the current record. OnSelect 属性设置为以下公式:Set the OnSelect property to this formula:
Navigate( EditScreen1, None )Navigate( EditScreen1, None )

在屏幕顶部,DetailForm1 的外部有三个图像,它们充当按钮,在应用的三个屏幕之间协调操作。At the top of the screen, three images sit outside of DetailForm1 and act as buttons, orchestrating between the three screens of the app.

DetailForm1 控制此屏幕,显示用户在库中选择的记录(因为窗体的 Item 属性设置为 BrowseGallery1.Selected)。DetailForm1 dominates this screen and displays the record that the user selected in the gallery (because the form's Item property is set to BrowseGallery1.Selected). 窗体的 DataSource 属性还提供有关数据源的元数据,例如每个字段的用户友好显示名称。The DataSource property of the form also provides metadata about the data source, such as a user-friendly display name for each field.

DetailForm1 包含多个卡片控件。DetailForm1 contains several Card controls. 可以选择卡片控制本身或它包含的控件来查看更多信息。You can select either the Card control itself or the control that it contains to discover additional information.

在创作体验中选择的详细信息卡片和卡片控件

卡片控件的 DataField 属性确定卡片显示哪个字段。The DataField property of a Card control determines which field the card displays. 在本例中,该属性设置为 AssetIDIn this case, that property is set to AssetID. 卡片包含“标签”控件,此控件的“Text”属性设置为“Parent.Default”。The card contains a Label control for which the Text property is set to Parent.Default. 此控件显示卡片的默认值,此值是通过 DataField 属性设置的。This control shows the Default value for the card, which is set through the DataField property.

在生成的应用中,卡片控件默认已锁定。In a generated app, Card controls are locked by default. 锁定卡片后,无法修改某些属性(例如 DataField),并且不会为这些属性提供公式栏。When a card is locked, you can't modify some properties, such as DataField, and the formula bar is unavailable for those properties. 这种限制有助于确保自定义设置不会破坏生成的应用的基本功能。This restriction helps ensure that your customizations don't break the basic functionality of the generated app. 但是,可以在右窗格中更改卡片及其控件的某些属性:However, you can change some properties of a card and its controls in the right-hand pane:

已打开选项窗格的详细信息屏幕

在右窗格中,可以选择要显示的字段,以及每个字段显示的控件类型。In the right-hand pane, you can select which fields to display and in which kind of control each field displays.

编辑/创建屏幕Edit/Create screen

编辑屏幕控件

此屏幕包括以下重要公式:This screen features these key formulas:

控件Control 支持的行为Supported behavior 公式Formula
EditForm1EditForm1 显示“资产”数据源中的记录。Displays a record in the Assets data source. DataSource 属性设置为 AssetsSet the DataSource property to Assets.
EditForm1EditForm1 确定要显示哪条记录。Determines which record to display. 在生成的应用中,显示用户在 BrowseScreen1 中选择的记录。In a generated app, displays the record that the user selected in BrowseScreen1. Item 属性设置为此值:Set the Item property to this value:
BrowseGallery1.SelectedBrowseGallery1.Selected
卡片控件Card controls 编辑窗体控制中提供控件,使用户能够编辑记录中的一个或多个字段。In a Edit form control, provides controls so that the user can edit one or more fields in a record. DataField 属性设置为字段的名称,并将值括在双引号中(例如 "Name")。Set the DataField property to the name of a field, enclosed in double quotation marks (for example, "Name").
ImageCancel1ImageCancel1 当用户选择此控件时,将丢弃正在进行的任何更改并打开“详细信息”屏幕。When the user selects this control, discards any changes in progress, and opens the Details screen. OnSelect 属性设置为以下公式:Set the OnSelect property to this formula:
ResetForm( EditForm1 ); Back()ResetForm( EditForm1 ); Back()
ImageAccept1ImageAccept1 当用户选择此控件时,会将更改提交到数据源。When the user selects this control, submits changes to the data source. OnSelect 属性设置为以下公式:Set the OnSelect property to this formula:
SubmitForm( EditForm1 )SubmitForm( EditForm1 )
EditForm1EditForm1 如果已接受更改,则返回上一屏幕。If changes are accepted, returns to the previous screen. OnSuccess 属性设置为以下公式:Set the OnSuccess property to this formula:
Back()Back()
EditForm1EditForm1 如果未接受更改,则保留在当前屏幕上,使用户能够修复任何问题并尝试重新提交。If changes aren't accepted, remain on the current screen so that the user can fix any issues and try to submit again. OnFailure 属性保留空白。Leave the OnFailure property blank.
LblFormError1LblFormError1 如果未接受更改,则显示错误消息。If changes aren't accepted, shows an error message. Text 属性设置为此值:Set the Text property to this value:
EditForm1.ErrorEditForm1.Error

与在“详细信息”屏幕中一样,一个名为 EditForm1 的窗体控件将控制“编辑和创建”屏幕。As in the Details screen, a form control, named EditForm1, dominates the Edit and Create screen. 此外,EditForm1Item 属性设置为 BrowseGallery1.Selected,使窗体显示用户在 BrowseScreen1 中选择的记录。In addition, the Item property of EditForm1 is set to BrowseGallery1.Selected, so the form displays the record that the user selected in BrowseScreen1. 尽管“详细信息”屏幕将每个字段显示为只读,但用户可以使用 EditForm1 中的控件更新一个或多个字段的值。While the Details screen shows each field as read-only, the user can update the value of one or more fields by using the controls in EditForm1. 用户还可以使用 DataSource 属性来访问有关此数据源的元数据,例如每个字段的用户友好显示名称,以及应该将更改保存到的位置。It also uses the DataSource property to access metadata about this data source, such as the user-friendly display name for each field and the location where changes should be saved.

如果用户选择“X”图标取消更新,ResetForm 函数将放弃所有未保存的更改,Back 函数将打开“详细信息”屏幕。If the user selects the "X" icon to cancel an update, the ResetForm function discards any unsaved changes, and the Back function opens the Details screen. “详细信息”屏幕与“编辑和创建”屏幕将一直显示同一条记录,直到用户在 BrowseScreen1 中选择不同的记录。Both the Details screen and the Edit and Create screen show the same record until the user selects a different one on BrowseScreen1. 该记录中的字段将保留设置为最近保存的值而不是用户所做的任何更改,然后被丢弃。The fields in that record remain set to the values that were most recently saved, not any changes that the user made and then abandoned.

如果用户在窗体中更改一个或多个值,然后选择“复选标记”图标,SubmitForm 函数会将用户的更改发送到数据源。If the user changes one or more values in the form and then selects the "checkmark" icon, the SubmitForm function sends the user's changes to the data source.

  • 如果成功保存更改,窗体的 OnSuccess 公式将会运行,Back() 函数将打开详细信息屏幕以显示更新的记录。If the changes are successfully saved, the form's OnSuccess formula runs, and the Back() function opens the detail screen to show the updated record.
  • 如果未成功保存更改,窗体的 OnFailure 公式将会运行,但不更改任何内容,因为它是空白的If the changes aren't successfully saved, the form's OnFailure formula runs, but it doesn't change anything because it's blank. “编辑和创建”屏幕将保持打开状态,使用户能够取消更改或修复错误。The Edit and Create screen remains open so that the user can either cancel the changes or fix the error. LblFormError1 显示用户友好的错误消息,窗体的 Error 属性即设置为该消息的内容。LblFormError1 shows a user-friendly error message, to which the form's Error property is set.

显示窗体控件一样,编辑窗体控件包含卡片控件,而卡片控件又包含显示记录中不同字段的其他控件:As with a Display form control, an Edit form control contains Card controls, which contain other controls that show different fields in a record:

在创作体验中选择的编辑卡片和卡片控件

在上图中,选定的卡片显示了 AssetID 字段并包含文本输入控制,使用户能够编辑该字段的值。In the previous image, the selected card shows the AssetID field and contains a Text input control so that the user can edit the value of that field. (相比之下,详细信息屏幕在“标签”控件中显示相同字段,但字段是只读的。)文本输入控件具有一个设置为 Parent.DefaultDefault 属性。(In contrast, the detail screen shows the same field in a Label control, which is read-only.) The Text input control has a Default property, which is set to Parent.Default. 如果用户创建而不是编辑记录,该控件将显示一个初始值,用户可以更改新记录的该值。If the user were creating a record instead of editing one, that control would show an initial value that the user can change for the new record.

在右窗格中,可以显示或隐藏每个卡片、重新排列卡片,或者将它们配置为显示不同类型的控件中的字段。In the right-hand pane, you can show or hide each card, rearrange them, or configure them to show fields in different types of controls.

已打开选项窗格的编辑屏幕

从头开始构建应用Build an app from scratch

了解 PowerApps 如何生成应用后,你可以自行构建一个使用本主题前面所述的相同构建基块和公式的应用。By understanding how PowerApps generates an app, you can build one yourself that uses the same building blocks and formulas discussed earlier in this topic.

确定测试数据Identify test data

为了让本主题发挥最大的参考价值,可以从一个可以试验的数据源着手。To get the most from this topic, start with a data source with which you can experiment. 该数据源应该包含可以任意读取和更新的测试数据。It should contain test data that you can read and update without concern.

注意:如果使用列名称带空格的 SharePoint 列表或 Excel 表作为数据源,PowerApps 会将空格替换为“_x0020_”。Note: If you use a SharePoint list or an Excel table that contains column names with spaces as your data source, PowerApps will replace the spaces with "_x0020_". 例如,如果 SharePoint 或 Excel 中的“Column Name”在数据布局中显示或用于公式,它将在 PowerApps 中显示为“Column_x0020_Name”。For example, "Column Name" in SharePoint or Excel will appear as "Column_x0020_Name" in PowerApps when displayed in the data layout or used in a formula.

若要完全根据原文参考本主题的余下部分,请创建名为“Ice Cream”的 SharePoint 列表,其中包含以下数据:To follow the rest of this topic exactly, create a SharePoint list named "Ice Cream" that contains this data:

Ice Cream SharePoint 列表

  • 从头开始创建一个手机应用,并将其连接到数据源Create an app from blank, for phones, and connect it to your data source.

    注意:平板电脑中的应用非常相似,但可能需要使用不同的屏幕布局,以充分利用多出的屏幕空间。Note: Tablet apps are very similar, but you may want a different screen layout to make the most of the extra screen space.

    本主题余下部分中的示例基于名为 Ice Cream 的数据源。The examples in the rest of the topic are based on a data source named Ice Cream.

浏览记录Browse records

通过在浏览屏幕上的库中查找某条记录,可获取该记录中的简要信息片段。Get a quick piece of information from a record by finding it in a gallery on a browse screen.

  1. 添加“垂直”库,并将库布局更改为仅“标题”。Add a Vertical gallery, and change the layout to Title only.

    库已连接到 Ice Cream 数据源

  2. 将库的“Items”属性设置为“Ice Cream”。Set the gallery's Items property to Ice Cream.
  3. 如果设置为其他任何值,请将库中第一个标签的“Text”属性设置为“ThisItem.Title”。Set the Text property of the first label in the gallery to ThisItem.Title if it's set to something else.

    现在,标签将显示每个记录的“标题”字段值。The label now shows the value in the Title field for each record.

    库已连接到 Ice Cream 数据源

  4. 重设库大小以适应屏幕,再将“TemplateSize”属性设置为“60”。Resize the gallery to fill the screen, and set its TemplateSize property to 60.

    该屏幕应类似于下面的示例,其中显示了数据源中的所有记录:The screen resembles this example, which shows all records in the data source:

    库已连接到 Ice Cream 数据源

查看详细信息View details

如果库未显示所需的信息,请选择记录对应的箭头打开详细信息屏幕。If the gallery doesn't show the information that you want, select the arrow for a record to open the details screen. 该屏幕上的显示窗体控件将显示所选记录的更多(也许是全部)字段。A Display form control on that screen shows more, possibly all, fields for the record that you selected.

显示窗体控件使用两个属性来显示记录:The Display form control uses two properties to display the record:

  • DataSource 属性。DataSource property. 保存记录的数据源的名称。The name of the data source that holds the record. 此属性填充右面板中的字段,确定每个字段的显示名称和数据类型(字符串、数字、日期等)。This property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) of each field.
  • Item 属性。Item property. 要显示的记录。The record to display. 此属性通常连接到控件的 Selected 属性,使用户能够在控件中选择记录,然后深入到该记录。This property is often connected to the Selected property of the Gallery control so that the user can select a record in the Gallery control and then drill into that record.

设置 DataSource 属性后,可以通过右窗格添加和删除字段,以及更改字段的显示方式。When the DataSource property is set, you can add and remove fields through the right-hand pane and change how they're displayed.

在此屏幕上,用户不能有意或无意更改记录的任何值。On this screen, users can't intentionally or accidentally change any values of the record. 显示窗体控件是只读的控件,因此不会修改记录。The Display form control is a read-only control, so it won't modify a record.

若要添加显示窗体控件,请执行以下操作:To add a Display form control:

  1. 添加一个屏幕,然后在其中添加显示窗体控件Add a screen, and then add a Display form control to it
  2. 将窗体控件的 DataSource 属性设置为 'Ice Cream'Set the DataSource property of the form control to 'Ice Cream'.

在右窗格中,可以选择要在屏幕上显示的字段,以及要为每个字段显示的卡片类型。In the right-hand pane, you can select the fields to display on your screen and which type of card to display for each field. 在右窗格中进行更改时,每个卡片控件的 DataField 属性将设置为用户交互的字段。As you make changes in the right-hand pane, the DataField property on each Card control is set to the field that the user will interact with. 屏幕应类似于下面的示例:Your screen should resemble this example:

Ice Cream 数据源的显示窗体

最后,需要将显示窗体控制连接到控制,以便查看特定记录的详细信息。Finally, we need to connect the Display form control to the Gallery control so that we can look at details for a specific record. 完成设置 Item 属性后,窗体中将显示库中的第一条记录。As soon as we complete setting the Item property, the first record from the gallery will appear in our form.

  1. 显示窗体控制的 Item 属性设置为 Gallery1.SelectedSet the Item property of the Display form control to Gallery1.Selected.

    所选项的详细信息将显示在窗体中。The details for the selected item appear in the form.

    已连接到库控件的 Ice Cream 数据源的显示窗体

很好!Great! 接下来,我们了解导航:用户如何从库屏幕打开详细信息屏幕,以及从详细信息屏幕打开库屏幕。We now turn to navigation: how a user opens the details screen from the gallery screen and opens the gallery screen from the details screen.

  1. 在屏幕中添加一个按钮控件,将其 Text 属性设置为显示后退,然后将其 OnSelect 属性设置为 Back()Add a Button control to the screen, set its Text property to show Back, and set its OnSelect property to Back().

    在用户查看完详细信息后,此公式会将用户返回到库。This formula returns the user back to the gallery when they finish viewing details.

包含后退按钮的 Ice Cream 数据源显示窗体

现在,我们返回到控件,并在详细信息屏幕中添加一些导航控件。Now, let's return to the Gallery control and add some navigation to our detail screen.

  1. 切换到托管“”控件的第一屏,再选择库中第一项内的箭头。Switch to the first screen, which is hosting our Gallery control, and select the arrow in the first item in the gallery.
  2. 将该形状的 OnSelect 属性设置为以下公式:Set the OnSelect property of the shape to this formula:
    Navigate( Screen2, None )Navigate( Screen2, None )

    包含后退按钮的 Ice Cream 数据源显示窗体

  3. 按 F5,再在库中选择箭头,以显示项的详细信息。Press F5, and then select an arrow in the gallery to show the details for an item.
  4. 选择后退按钮返回到产品的库,然后按 Esc。Select the Back button to return to the gallery of products, and then press Esc.

编辑详细信息Editing details

最后,我们的最后一项核心活动就是更改记录的内容,用户可在编辑窗体控件中完成此操作。Finally, our last core activity is changing the contents of a record, which users accomplish in an Edit form control.

编辑窗体控件使用两个属性来显示和编辑记录:The Edit form control uses two properties to display and edit the record:

  • DataSource 属性。DataSource property. 保存记录的数据源的名称。The name of the data source that holds the record. 与在显示窗体控件中一样,此属性填充右面板中的字段,确定每个字段的显示名称和数据类型(字符串、数字、日期等)。Just as with the Display form control, this property populates the right-hand panel with fields and determines the display name and data type (string, number, date, etc.) for each field. 在将每个字段的值提交到基础数据源之前,此属性还可确定该值是否有效。This property also determines whether each field's value is valid before submitting it to the underlying data source.
  • Item 属性。Item property. 编辑的记录,通常是连接到控件的 Selected 属性的记录。The record to edit, which is often connected to the Selected property of the Gallery control. 这样,你便可以在控件中选择记录,在详细信息屏幕中显示该记录,并“编辑和创建”屏幕中对其进行编辑。That way, you can select a record in the Gallery control, show it in the details screen, and edit it in the Edit and Create screen.

若要添加编辑窗体控件,请执行以下操作:To add an Edit form control:

  1. 添加一个屏幕,添加一个编辑窗体控制,然后将该窗体的 DataSource 属性设置为 'Ice Cream'Add a screen, add an Edit form control, and then set the form's DataSource property to 'Ice Cream'.
  2. Item 属性设置为 Gallery1.SelectedSet the Item property to Gallery1.Selected.

现在,可以选择要在屏幕上显示的字段。You can now select the fields to display on your screen. 还可以选择要为每个字段显示哪种类型的卡片。You can also select which type of card to display for each field. 在右窗格中进行更改时,每个卡片控件的 DataField 属性将设置为用户交互的字段。As you make changes in the right-hand pane, the DataField property on each Card control is set to the field your user will interact with. 屏幕应类似于下面的示例:Your screen should resemble this example:

Ice Cream 数据源的显示窗体

这两个属性与显示窗体控件中的属性相同。These two properties are the same as the properties on the Display form control. 只需使用这两个属性,即可显示记录的详细信息。And with these alone, we can display the details of a record.

编辑窗体控件还有其他功能,它提供 SubmitForm 函数用于将更改写回到数据源。The Edit form control goes further by offering the SubmitForm function to write back changes to the data source. 在按钮或图像控件中使用此函数可保存用户的更改。You use this with a button or image control to save a user's changes.

  • 添加一个按钮控件,将其 Text 属性设置为显示“保存”,然后将其 OnSelect 属性设置为以下公式:Add a Button control, set its Text property to show Save, and set its OnSelect property to this formula:
    SubmitForm( Form1 ) SubmitForm( Form1 )

Ice Cream 数据源的编辑窗体

若要在此屏幕中添加导航控件,请执行以下操作:To add navigation to and from this screen:

  1. 添加另一个按钮控件,将其 Text 属性设置为显示“取消”,然后将其 OnSelect 属性设置为以下公式:Add another Button control, set its Text property to show Cancel, and set its OnSelect property to this formula:
    ResetForm( Form1 ); Back()ResetForm( Form1 ); Back()

    此公式将丢弃所有未保存的编辑并打开上一屏幕。This formula discards any unsaved edits and opens the previous screen.

    Ice Cream 数据源的显示窗体

  2. 将窗体的 OnSuccess 属性设置为 Back()Set the OnSuccess property of the form to Back().

    成功保存更新后,上一屏幕(在本例中为详细信息屏幕)将自动打开。When updates are successfully saved, the previous screen (in this case, the details screen) opens automatically.

    包含添加的“OnSuccess”规则的编辑窗体

  3. 在“显示”屏幕中添加一个按钮,将其 Text 属性设置为显示“编辑”,然后将其 OnSelect 属性设置为以下公式:On the Display screen, add a button, set its Text property to show Edit, and set its OnSelect property to this formula:
    Navigate( Screen3, None )Navigate( Screen3, None )

    包含添加的“编辑”按钮的显示窗体

现已构建一个包含三个屏幕、用于查看和输入数据的基本应用。You've built a basic app with three screens for viewing and entering data. 若要试用该应用,请显示库屏幕,然后按 F5(或选择屏幕左上角附近的右箭头“预览”按钮)。To try it out, show the gallery screen, and then press F5 (or select the forward arrow "Preview" button near the upper-left corner of the screen). 粉红色的点表示执行每个步骤时,用户在屏幕上的哪个位置单击或点击。The pink dot indicates where the user clicks or taps the screen at each step.

试用 Ice Cream 应用

创建记录Create a record

用户可以通过与同一个“编辑”窗体交互来更新和创建记录。The user interacts with the same Edit form to both update and create records. 当用户创建记录时,NewForm 函数会将窗体切换到“新建”模式。When the user wants to create a record, the NewForm function switches the form to New mode.

窗体处于“新建”模式时,每个字段的值设置为数据源的默认值。When the form is in New mode, the value of each field is set to the defaults of the data source. 提供给窗体的 Item 属性的记录将被忽略。The record that's provided to the form's Item property is ignored.

当用户准备好保存新记录时,SubmitForm 将会运行。When the user is ready to save the new record, SubmitForm runs. 成功提交窗体后,窗体将切换回到 EditModeAfter the form is successfully submitted, the form is switched back to EditMode.

在第一个屏幕中添加“新建”按钮:On the first screen, you'll add a New button:

  1. 在包含库的屏幕中添加按钮控件。On the screen with the gallery, add a Button control.
  2. 将该按钮的 Text 属性设置为 New,将其 OnSelect 属性设置为以下公式:Set the button's Text property to New and its OnSelect property to this formula:
    NewForm( Form1 ); Navigate( Screen3, None ) NewForm( Form1 ); Navigate( Screen3, None )

    此公式将 Screen3 上的编辑窗体控件切换为“新建”模式并打开该屏幕,使用户能够在其中填充信息。This formula switches the Edit form control on Screen3 to New mode and opens that screen so that the user can fill it in.

包含添加的“编辑”按钮的显示窗体

“编辑和创建”屏幕打开时,该窗体为空,让用户添加项。When the Edit and Create screen opens, the form is empty, ready for the user to add an item. 当用户选择“保存”按钮时,SubmitForm 函数将确保创建而不是更新记录。When the user selects the Save button, the SubmitForm function ensures that a record is created instead of being updated. 如果用户选择“取消”按钮,ResetForm 函数会将窗体切换回到“编辑”模式,Back 函数将打开用于浏览库的屏幕。If the user selects the Cancel button, the ResetForm function switches the form back to Edit mode, and the Back function opens the screen for browsing the gallery.

删除记录Delete a record

  1. 在“显示”屏幕中添加一个按钮,并将其 Text 属性设置为显示“删除”。On the Display screen, add a button, and set its Text property to show Delete..
  2. 将该按钮的 OnSelect 属性设置为以下公式:Set the button's OnSelect property to this formula:
    Remove( 'Ice Cream', Gallery1.Selected ); Back()Remove( 'Ice Cream', Gallery1.Selected ); Back()

    包含添加的“编辑”按钮的显示窗体

处理错误Handling errors

在此应用中,如果某个字段的值无效、必填的字段为空、已断开网络连接,或者出现任意数量的其他问题,则会发生错误。In this app, an error occurs when the value of a field is not valid, a required field is blank, you're disconnected from the network, or any number of other problems pop up.

如果 SubmitForm 出于任何原因而失败编辑窗体控件的 Error 属性将包含一条向用户显示的错误消息。If SubmitForm fails for any reason, the Error property of the Edit form control contains an error message to show the user. 用户应该可以参考此信息纠正问题,然后重新提交更改或取消更新。With this information, the user should be able to correct the issue and resubmit the change, or they can cancel the update.

  1. 在“编辑和创建”屏幕中,添加“标签”控件,然后将它移到“保存”按钮的正下方。On the Edit and Create screen, add a Label control, and move it just below the Save button.

    用户选择此控件保存更改后,任何错误将显而易见。Any error will be easy to see after the user selects this control to save changes.

  2. 将“标签”控件的“Text”属性设置为显示“Form1.Error”。Set the Text property of the Label control to show Form1.Error.

包含添加的“编辑”按钮的显示窗体

在 PowerApps 基于数据生成的应用中,此控件的 AutoHeight 属性设置为 true,以便在未出错时不会占用空间。In an app that PowerApps generates from data, the AutoHeight property on this control is set to true so that no space is consumed if no error occurs. 考虑到出错时此控件会扩大,编辑窗体控件的 HeightY 属性也会动态调整。The Height and Y properties of the Edit form control are also adjusted dynamically to account for this control growing when an error occurs. 若要了解其他详细信息,可基于现有数据生成一个应用并查看这些属性。For more details, generate an app from existing data, and inspect these properties. 未发生错误时,用于显示错误的文本框控件很短,可能需要打开“高级”视图(位于“视图”选项卡上)才能选择此控制。The text-box control for errors is very short when no error has occurred, you may need to open the Advanced view (available on the View tab) to select this control.

基于数据创建的应用的编辑窗体,其中已选择错误文本控件

基于数据创建的应用的编辑窗体,其中已选择窗体控件

刷新数据Refresh data

每当用户打开应用时,数据源将会刷新,但用户可能想要在不关闭应用的情况刷新库中的记录。The data source is refreshed whenever the user opens the app, but the user might want to refresh the records in the gallery without closing the app. 可以添加一个“刷新”按钮,让用户选择它来手动刷新数据:Add a Refresh button so that the user can select it to manually refresh the data:

  1. 在包含控件的屏幕中添加按钮控件,并将其 Text 属性设置为显示“刷新”。On the screen with the Gallery control, add a Button control and set its Text property to show Refresh.
  2. 将此控件的 OnSelect 属性设置为以下公式:Set the OnSelect property of this control to this formula:
    Refresh( 'Ice Cream' )Refresh( 'Ice Cream' )

刷新数据源

在 PowerApps 基于数据生成的应用中,我们忘记了讨论“浏览”屏幕顶部显示的两个控件。In the app that PowerApps generated from data, we neglected to discuss two controls at the top of the Browse screen. 用户可以使用这些控件搜索一个或多个记录,以及按升序和/或降序为记录列表排序。By using these controls, the user can search for one or more records, sort the list of records in ascending or descending order, or both.

在浏览屏幕中排序和搜索控件

当用户选择排序按钮时,库的排序顺序将会反转。When the user selects the sort button, the sort order of the gallery reverses. 若要创建此行为,可使用上下文变量跟踪库的排序方向。To create this behavior, we use a context variable to track the direction in which the gallery is sorted. 当用户选择该按钮时,变量将会更新,方向将会反转。When the user selects the button, the variable is updated, and the direction reverses. 排序按钮的 OnSelect 属性设置为以下公式:UpdateContext( {SortDescending1: !SortDescending1} )The OnSelect property of the sort button is set to this formula: UpdateContext( {SortDescending1: !SortDescending1} )

UpdateContext 函数创建 SortDescending1 上下文变量(如果不存在)。The UpdateContext function creates the SortDescending1 context variable if it doesn't already exist. 该函数将读取该变量的值并使用 ! 运算符将它设置为逻辑求反The function will read the value of the variable and set it to the logical opposite by using the ! operator. true 值将变成 falseIf the value is true, it becomes false. false 值将变成 trueIf the value is false, it becomes true.

控件的 Items 属性公式使用此上下文变量以及 TextSearchBox1 控件中的文本:The formula for the Items property of the Gallery control uses this context variable, along with the text in the TextSearchBox1 control:

Gallery1.Items = Sort( If( IsBlank(TextSearchBox1.Text),
                           Assets,
                           Filter( Assets,
                                   TextSearchBox1.Text in Text(ApproverEmail) ) ),
                        ApproverEmail,
                        If(SortDescending1, Descending, Ascending) )

让我们剖析整个公式:Let's break this down:

  • 外部的 Sort 函数采用三个参数:一个表、一个作为排序依据的字段,以及排序的方向。On the outside, we have the Sort function, which takes three arguments: a table, a field on which to sort, and the direction in which to sort.

    • 排序方向取自用户选择 ImageSortUpDown1 控件时切换的上下文变量。The sort direction is taken from the context variable that toggles when the user selects the ImageSortUpDown1 control. true/false 值将转换为常量 DescendingAscendingThe true/false value is translated to the constants Descending and Ascending.
    • 作为排序依据的字段固定为 ApproverEmailThe field to sort on is fixed to ApproverEmail. 如果更改库中显示的字段,则也需要更改此参数。If you change the fields that appear in the gallery, you'll need to change this argument too.
  • 内部的 Filter 函数采用表作为参数,并使用一个表达式来为每条记录求值。On the inside, we have the Filter function, which takes a table as an argument and an expression to evaluate for each record.

    • 表是原始的“资产”数据源,即筛选或排序之前的起点。The table is the raw Assets data source, which is the starting point before filtering or sorting.
    • 该表达式在 ApproverEmail 字段中的 TextSearchBox1 内搜索字符串的实体。The expression searches for an instance of the string in TextSearchBox1 within the ApproverEmail field. 同样,如果更改库中显示的字段,则也需要更新此参数。Again, if you change the fields that appear in the gallery, you'll also need to update this argument.
    • 如果 TextSearchBox1 为空,而用户想要显示所有记录,则会绕过 Filter 函数。If TextSearchBox1 is empty, the user wants to show all records, and the Filter function is bypassed.

这只是其中的一个示例;你可以根据应用的需求,通过将 FilterSort 和其他函数与运算符组合在一起,为 Items 属性编写自己的公式。This is but one example; you can craft your own formula for the Items property, depending on the needs of your app, by composing Filter, Sort, and other functions and operators together.

屏幕设计Screen design

到目前为止,我们尚未讨论跨屏幕分布控件的其他方法。So far, we haven't discussed other ways to distribute controls across screens. 这是因为,可用的选项有很多,而最佳的选择取决于具体的应用需求。That's because you have many options, and the best selection depends on your specific app's needs.

由于手机屏幕上的实际空间非常有限,我们也许需要在不同的屏幕上浏览、显示和编辑/创建控件。Because real estate on phone screens is so limited, you probably want to browse, display, and edit/create on different screens. 本主题中所述的 NavigateBack 函数可打开每个屏幕。In this topic, the Navigate and Back functions open each screen.

在平板电脑上,可通过两个甚至一个屏幕浏览、显示和编辑/创建控件。On a tablet, you can browse, display, and edit/create on two or even one screen. 对于后者,不需要使用 NavigateBack 函数。For the latter, no Navigate or Back function would be required.

如果用户在同一屏幕上操作,则你需要注意,用户不能更改在中所做的选择,并且有可能会丢失编辑窗体控件中所做的编辑。If the user is working on the same screen, you need to be careful that the user can't change the selection in the Gallery and potentially lose edits in the Edit form control. 为了防止在对一条记录所做的更改尚未保存的情况下用户选择另一条记录,请将库的 Disabled 属性设置为以下公式:To keep the user from selecting a different record when changes to another record haven't been saved yet, set the Disabled property of the gallery to this formula:
EditForm.Unsaved EditForm.Unsaved