从头开始创建应用Create an app from scratch

使用多种数据源中的任意一种从头开始创建自己的应用,之后如果需要,还可添加更多资源。Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. 指定每个 UI 元素的外观和行为,这样就可以优化具体目标和工作流的结果。Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. 自动生成应用相比,此方法耗费的时间要多得多,但有经验的应用创作者可以根据需要生成最佳应用。This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

备注

本主题针对 Windows 版 PowerApps Studio 编写,但在浏览器中打开 PowerApps 的步骤是类似的。This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

按照本教程中的步骤进行操作,可以创建包含两个屏幕的应用。By following this tutorial, you'll create an app that contains two screens. 在一个屏幕上,用户可以浏览一组记录:On one screen, users can browse through a set of records:

用户可以在其中滚动浏览一组数据的屏幕

在另一个屏幕上,用户可以创建记录、更新记录中的一个或多个字段,或删除整条记录:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

用户可以在其中添加或更新数据的屏幕

先决条件Prerequisites

你可以查看本教程,了解一些基本概念,也可以严格按照以下步骤完成操作。You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. 复制此数据,并将其粘贴到 Excel 文件中。Copy this data, and then paste it into an Excel file.

    开始日期Start Day 开始时间Start Time 志愿者 1Volunteer 1 志愿者 2Volunteer 2
    星期六Saturday 上午 10:00-中午10am-noon VasquezVasquez KumashiroKumashiro
    星期六Saturday 中午-下午 2:00noon-2pm IceIce SinghalSinghal
    星期六Saturday 下午 2:00-4:002pm-4-pm MykMyk MuellerMueller
    星期日Sunday 上午 10:00-中午10am-noon LiLi AdamsAdams
    星期日Sunday 上午 10:00-中午10am-noon SinghSingh MorganMorgan
    星期日Sunday 上午 10:00-中午10am-noon BatyeBatye NguyenNguyen
  2. 将该数据格式化为名为 Schedule 的表,以便 PowerApps 能够分析信息。Format that data as a table, named Schedule, so that PowerApps can parse the information.

    有关详细信息,请参阅 Create an Excel table in a worksheet(在工作表中创建 Excel 表)。For more information, see Create an Excel table in a worksheet.

  3. 将文件以 eventsignup.xls 名称保存,然后将其上载到云存储帐户,例如 OneDrive。Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.

  4. 如果你是 PowerApps 的新用户:If you're new to PowerApps:

创建空白应用并连接到数据Create a blank app, and connect to data

  1. 在 PowerApps Studio 中,单击或点击“文件”菜单(屏幕左边缘附近)上的“新建”。In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    “文件”菜单上的“新建”选项

  2. 在“空白应用”磁贴上,单击或点击“手机布局”。On the Blank app tile, click or tap Phone layout.

    用于从数据创建应用的选项

  3. 如果系统提示,获取此简介教程,了解 PowerApps 的主要部分(也可以单击或点击“跳过”)。If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    快速教程

    稍后可通过单击或点击屏幕左上角附近的问号图标,然后单击或点击“简介教程”,随时获取此教程。You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

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

    切换视图

  5. 单击或点击右侧窗格中的“添加数据源”。In the right-hand pane, click or tap Add data source.

    添加数据源

  6. 执行以下任一步骤:Perform either of these steps:

    • 如果已具有到云存储帐户的连接,请单击或点击该连接。If you already have a connection to your cloud-storage account, click or tap it.
    • 如果还没有到云存储帐户的连接,请单击或点击“添加连接”,然后单击或点击帐户类型,接着单击或点击“连接”,随后(如果出现系统提示)提供你的凭据。If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. 在“选择 Excel 文件”下,浏览到“eventsignup.xlsx”,然后单击或点击该文件。Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    指定要使用的 Excel 文件

  8. 在“选择表”下,选择“计划”复选框,然后单击或点击“连接”。Under Choose a table, select the Schedule check box, and then click or tap Connect.

    指定想要在 Excel 中使用的表

    右侧窗格的“数据源”选项卡显示已添加到应用的数据源。The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    显示已连接的数据源

    本教程仅需要一个数据源,但稍后可以添加更多的数据源。This tutorial requires only one data source, but you can add more data sources later.

显示数据Show the data

  1. 在“开始”选项卡中,依次单击或点击“新屏幕”和“列表屏幕”。In the Home tab, click or tap New screen and then click or tap List screen.

    添加带有标题、副标题和主体元素的布局

    包含多个默认控件(如搜索框和“”控件)的屏幕已添加。A screen is added with several default controls, such as a search box and a Gallery control. 库覆盖搜索框下的整个屏幕。The gallery covers the entire screen under the search box.

  2. 单击或点击库中的任意位置(箭头除外),如搜索框的正下方。Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    选择库

  3. 在右侧窗格中,打开“布局”列表,再单击或点击显示标题、副标题和正文的选项。In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    选择库

  4. 在属性列表中,单击或点击 Items,复制此公式,并将其粘贴到编辑栏:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    如果不确定属性列表的位置,请参阅添加和配置控件If you're not sure where the property list is, see Add and configure controls.

    备注

    对于列名称带空格的 Excel 或 SharePoint 数据源,PowerApps 会将空格替换为“_x0020_”。For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". 在此示例中,“Volunteer 1”列在公式中显示为“Volunteer_x0020_1”。In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    此库显示来自“Schedule”表的数据。This gallery shows the data from the Schedule table.

    默认情况下,库中的“计划”数据

    搜索框中可以根据用户键入的文本来筛选库。A search box can filter the gallery based on text that the user types. 如果用户在搜索框中键入至少一个字母,则库将仅显示志愿者 1 字段中包含用户键入文本的那些记录。If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    排序按钮可以根据志愿者 1 列中的数据中对记录进行排序。The sort button can sort the records based on data in the Volunteer 1 column. 如果用户单击或点击该按钮,则排序顺序在升序和降序之间切换。If a user clicks or taps that button, the sort order toggles between ascending and descending.

    该公式包含 SortIfIsBlankFilterText 函数。That formula contains the Sort, If, IsBlank, Filter, and Text functions. 有关这些函数和其他函数的详细信息,请参阅公式参考For more information about these and other functions, see the formula reference

  5. 在搜索框中键入 i,然后单击或点击排序图标一次(或奇数次)。Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    库将显示以下结果。The gallery shows these results.

    对库进行排序和筛选

    有关 SortFilter其他函数 的详细信息More information about the Sort, Filter, and other functions

  6. 单击或点击屏幕顶部的“标签”控件以选择它。Select the Label control at the top of the screen by clicking or tapping the control.

    选择标题栏

  7. 在属性列表中,单击或点击“文本”,复制此文本,然后将其粘贴到编辑栏。In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    “查看记录”"View Records"

    更改标题栏

创建 ChangeScreen 及其横幅Create the ChangeScreen and its banner

  1. 删除“Screen1”,并将“Screen2”重命名为“ViewScreen”。Delete Screen1, and rename Screen2 to ViewScreen.

    重命名屏幕

  2. 添加一个屏幕,并将其重命名为 ChangeScreenAdd a screen, and rename it ChangeScreen.

    添加并重命名屏幕

  3. 在“插入”选项卡上,依次单击或点击“文本”和“标签”。On the Insert tab, click or tap Text, and then click or tap Label.

  4. 配置刚刚添加的“标签”控件:Configure the Label control that you just added:

    • 将其 Text 属性设置为以下公式:Set its Text property to this formula:
      “更改记录”"Change record"

    • 将其 Fill 属性设置为以下公式:Set its Fill property to this formula:
      RGBA(62, 96, 170, 1)RGBA(62, 96, 170, 1).

    • 将其 Color 属性设置为以下公式:Set its Color property to this formula:
      RGBA(255, 255, 255, 1)RGBA(255, 255, 255, 1)

    • 将其 Align 属性设置为 CenterSet its Align property to Center.

    • 将其 X 属性设置为 0Set its X property to 0.

    • 将其 Width 属性设置为 640Set its Width property to 640. 此时,“标签”控件会反映出你所作的更改。The Label control reflects your changes.

      带横幅的 ChangeScreen

添加并配置窗体Add and configure a form

  1. 在“插入”选项卡上,单击或点击“窗体”,然后单击或点击“编辑”。On the Insert tab, click or tap Forms, and then click or tap Edit.

  2. 移动并调整窗体大小以覆盖大部分屏幕。Move and resize the form to cover most of the screen.

    添加表单

    默认情况下将此窗体命名为 Form1,除非已添加并删除一个窗体。The form is named Form1 by default unless you already added and removed a form. 在这种情况下,将窗体重命名为 Form1In that case, rename the form to Form1.

  3. Form1DataSource 属性设置为 ScheduleSet DataSource property of Form1 to Schedule.

  4. Form1Item 属性设置为以下表达式:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected

  5. 在右侧窗格中,单击或点击选中每个字段对应的复选框,以便显示相应字段。In the right-hand pane, click or tap the checkbox for each field to show it.

    显示窗体上的字段

  6. 在窗体底部附近,单击或点击“添加自定义卡片”。Near the bottom of the form, click or tap Add a custom card.

    添加自定义卡

  7. 在新卡片中添加“标签”控件。Add a Label control in the new card.

  8. 将新控件的 AutoHeight 属性设置为 true,并将其 Text 属性设置为以下公式:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    此时,标签会显示窗体中的所有错误。The label will show any errors from the form.

  9. 在左侧导航栏中,单击或点击对应于 ChangeScreen 的缩略图将其选中。In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.

  10. 在“插入”选项卡上,单击或点击“图标”,然后单击或点击添加“上一步箭头”的选项,再将该箭头移至屏幕左下角。On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.

  11. 将该箭头的 OnSelect 属性设置为以下公式:Set the arrow's OnSelect property to this formula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    用户单击或点击此箭头时,Navigate 函数将打开 ViewScreenWhen the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. 在此窗体下添加 按钮 控件,并将该按钮的 Text 属性设置为 "保存"Add a Button control under the form, and set the button's Text property to "Save".

    添加保存按钮

  13. 将此按钮的 OnSelect 属性设置为此公式:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    用户单击或点击此按钮时,SubmitForm 函数将所有更改都保存到数据源,并且 ViewScreen 会重新显示。When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  14. 在此屏幕的底部,添加另一个按钮,将其 Text 属性设置为 "删除",并将其 OnSelect 属性设置为此公式:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    用户单击或点击此按钮时,Remove 函数将删除记录,并且 ViewScreen 会重新显示。When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. 将“删除”按钮的 Visible 属性设置为此公式:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    在用户创建记录时,此步骤将隐藏“删除”按钮。This step hides the Remove button when the user is creating a record.

    ChangeScreen 匹配此示例:The ChangeScreen matches this example:

    最终 ChangeScreen

从 ViewScreen 设置导航Set navigation from ViewScreen

  1. 在左侧导航栏中,单击或点击对应于 ViewScreen 的缩略图。In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    打开 ViewScreen

  2. 单击或点击“下一步”箭头,获取库中的第一个记录。Click or tap the Next arrow for the first record in the gallery.

    “下一步”箭头

  3. 将该箭头的 OnSelect 属性设置为此公式:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. 在右上角单击或点击加号图标。In the upper-right corner, click or tap the plus icon.

    添加记录

  5. 将所选图标的 OnSelect 属性设置为此公式:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    用户单击或点击此图标时,将显示 ChangeScreen 且每个字段均为空,这样用户可以更轻松地创建记录。When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

运行应用Run the app

自定义应用时,通过以预览模式运行应用,可测试所做的更改,具体如本节中的步骤所述。As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. 在左侧导航栏中,单击或点击顶部的缩略图以选择 ViewScreenIn the left navigation bar, click or tap the top thumbnail to select the ViewScreen.

    选择 ViewScreen

  2. 按 F5(或者单击或点击右上角附近的“预览”图标)打开预览模式。Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    打开预览模式

  3. 单击或点击某个记录的“下一步”箭头可显示该记录的详细信息。Click or tap the Next arrow for a record to show details about that record.

  4. ChangeScreen 上,更改一个或多个字段中的信息,然后单击或点击“保存”以保存所做的更改,或单击或点击“删除”以删除记录。On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.

  5. 按 Esc(或者单击或点击标题栏下方的关闭图标)关闭预览模式。Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    关闭预览模式

后续步骤Next steps

  • 按 Ctrl-S 在云中保存应用,以便从其他设备运行该应用。Press Ctrl-S to save your app in the cloud so that you can run it from other devices.
  • 共享应用,便于其他人运行该应用。Share the app so that other people can run it.
  • 详细了解 窗体公式Learn more about galleries, forms, and formulas.