教程 5:关联数据模型

“Button”微件 应用制作工具中级技能

大约 30 分钟

您将构建的内容

您将构建一个按部门列出员工的人力资源应用。应用用户可以执行以下操作:

  • 添加、修改、排序和删除部门及员工记录
  • 以两种方式查看员工记录:

    • 仅按部门
    • 按部门或查看全部

此应用不支持用户在页面之间移动。要在页面之间移动,您需要在预览模式下使用页面选择器。

您将学到的内容

本教程将指导您如何执行以下操作:

  • 在数据模型之间建立关系。在本教程中,您将在 Departments 模型和 Employees 模型之间建立一对多的关系。一个部门可以有多个员工。
  • 显示满足关系的记录,如人力资源部门所有员工的记录。

创建应用

  1. 登录雇主或学校提供的 G Suite 帐号。
  2. 打开应用制作工具
  3. 创建一个空应用,并将其命名为 Relations

设置 Departments 数据模型

  1. 添加一个 Cloud SQL 数据模型,并将其命名为 Departments
  2. 添加以下字段:

    字段名称字段类型
    Department字符串
    Location字符串

  3. 点击 Department 字段,然后点击 Set as display field。

    如果您将 Deparment 设置为显示字段,应用制作工具使用字段值来引用该模型中的记录。例如,当您在本教程后面部分添加“Dropdown”微件时,Department 字段的值会自动填充下拉选项(通过绑定表达式 @datasource.items)。

设置 Employees 数据模型

  1. 添加一个 Cloud SQL 数据模型,并将其命名为 Employees
  2. 添加以下字段:

    字段名称字段类型
    FirstName字符串
    LastName字符串
    Email字符串
    StartDate日期

    您无需为 Employees 模型设置显示字段。

添加关系

  1. 点击 Departments 模型,然后点击 Relations 标签页。

  2. 点击 Add Relation

    1. 对于 Departments 模型关系端,点击 Count 向下箭头并选择 One。输入“Department”作为此关系端的名称。
    2. 对于另一模型,点击 Model 向下箭头并选择 Employees。
    3. 对于 Employees 模型关系端,点击 Count 向下箭头并选择 Many。输入“Employees”作为此关系端的名称。
    4. 点击 Create

创建可以在其中添加部门的页面

  1. NewPage 页面重命名为 EditDepartments。此时页面的顶级面板为选中状态。
  2. 在属性编辑器中,点击 datasource 属性,然后选择 Departments。
  3. 向此页面添加一个插入表单。保留表单的默认选项。
  4. 关闭微件选项面板(点击“Close”)。

创建可以在其中添加员工的页面

  1. 添加一个新页面,将其命名为 EditEmployees,将数据源设置为 Employees,并点击 Create
  2. 向此页面添加一个插入表单。保留表单的默认选项。
  3. 关闭微件选项面板。

创建可以在其中按部门列出员工的页面

您可以通过两种方式使用关系,以便按部门制作员工表。本教程介绍了这两种方法:

  • 仅特定部门(在本部分演示)- 使用关系作为数据源。使用此数据源的表不支持分页或基于列的排序。
  • 特定部门;如果未选择部门,则所有员工(在下一部分演示)- 对关系使用查询过滤器。使用查询过滤器的表支持分页。您还可以按列对表进行排序。

在实际应用中,请选择一种方法。我们推荐第二种方法,因为该方法支持分页、可排序,并且仅当部门没有员工时才为空。

要创建仅按部门列出员工的页面,请执行以下操作:

  1. 添加一个页面,将其命名为 RelationDatasource,将数据源设置为 Departments,然后点击 Create。
  2. 添加下拉列表以允许应用用户选择部门:

    1. 点击“Widgets”,并将“Dropdown” 微件添加到 RelationDatasource 页面。
    2. 点击 options 属性,并选择 More options datasource items。点击 OK。此操作将下拉列表的可能值设置为数据源的显示字段,在本例中为 Department 字段中的值。
    3. 点击 value 属性,并选择 More options datasource item。点击 OK。此操作将微件的值设置为用户选择的条目。
    4. 点击 label 属性,并输入 Select a department。
  3. 添加一个表以显示员工记录:

    1. 将“Table”“Table”微件微件添加到“Dropdown”微件下方的页面。将表与下拉列表微件的左边缘对齐。
    2. 选择 Department: Employee (relation) 数据源,并点击 Next。使用该数据源,表可显示与下拉列表微件的值匹配的所有员工。
    3. 保留此表的默认选项。点击 NextFinish
  4. 关闭微件选项面板。

创建可以在其中按部门列出员工或列出所有员工的页面

  1. 添加一个页面并将其命名为 QueryFilter,将数据源设置为 Employees,然后点击 Create。
  2. 添加下拉列表以允许用户选择部门:

    1. 点击“Widgets”,并将“Dropdown” 添加到 QueryFilter 页面。
    2. 对于 value 属性,选择绑定表达式 More options datasource query filters Department _equals。点击 OK
    3. 对于 options 属性,从左侧的 Application 面板中选择绑定表达式:datasources Department items。点击 OK
    4. 点击 label 属性,并输入 Select a department。
    5. 打开属性编辑器的 Events 部分,点击 onValueEdit 并选择 Reload datasource,以便在应用用户更改下拉列表的值时重新加载数据源并重新运行查询。
  3. 添加一个表以显示与选择的部门匹配的员工记录:

    1. 将“Table”“Table”微件 添加到下拉列表下方的页面。将表与下拉列表微件的左边缘对齐。
    2. 此时数据源 Inherited: Employees 为选中状态。保留表的默认选项;依次点击 NextNextFinish
  4. 关闭微件选项面板。

预览和测试应用

  1. 点击右上角的 Preview,在新的浏览器标签页中运行您的应用。
  2. 选择您的帐号,并点击 Allow 以允许您的应用使用特定信息。
  3. 输入部门数据:
    1. 从页面选择器中选择 EditDepartments
    2. Edit Department 表单上,输入若干个部门的名称和位置。点击 Create 以创建各个新记录。
  4. 输入员工数据:
    1. 从页面选择器中选择 EditEmployees
    2. Edit Employee 表单上,输入若干个员工的信息。点击 Create 以创建各个新记录。为员工选择不同部门。
  5. 在针对表使用关系数据源的页面上,按部门查看员工:

    1. 从页面选择器中选择 RelationDatasource
    2. 从下拉列表中选择一个部门。表中将包含该部门的员工记录。如果未选择任何部门,则表为空。
  6. 在针对表使用查询过滤器加载数据的页面上,按部门查看员工:

    1. 从页面选择器中选择 QueryFilter
    2. 如果未选择任何部门,则表中包含所有员工记录。从下拉列表中选择一个部门。现在,该表包含该部门的员工记录。

恭喜!您使用应用制作工具成功构建了一个使用关系的应用。

后续步骤

  1. 详细了解关系
  2. 学习关系示例应用。该应用与您刚才创建的应用相似。
  3. 了解查询数据源过滤器