教程：选择选项

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

10–15 分钟

您将构建的内容

您将构建一个披萨订购应用。该应用的用户可以执行以下操作：

  • 订购披萨并选择披萨的尺寸和馅料
  • 在表中查看所有订单
  • 更新馅料选项

您将学到的内容

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

  • 设置不同种类的输入微件
  • 以三种方式为输入微件设置选项

您还将创建数据模型、添加页面、使用绑定在微件中设置选项，相关内容将在其他教程中详细介绍。

创建应用

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

设置应用的数据模型和界面

  1. 添加 Cloud SQL 模型，并将其命名为“Orders”。
  2. 添加以下字段：
字段名称 类型
CustomerEmail 字符串
Size 字符串
Toppings 字符串
  1. 点击 Size 字段，然后点击 Advanced。点击 Possible values 字段，输入尺寸（如“small”），然后点击 Add。如果要添加更多尺寸，如“medium”和“large”，请重复此步骤。点击 Done。

  2. 在左侧导航栏中，点击 NewPage。在属性编辑器中，设置以下属性：

    1. Name - PizzaOrders
    2. DisplayName - Pizza Orders
    3. datasource - Orders

  3. 打开微件选项面板 ，将 “Form”微件添加到页面。

    1. 仍使用数据源“Inherited:Orders”。
    2. 选择 Insert 类型表单。
    3. 取消勾选 Choose form fields 页面上的 Id 复选框。

    表单将使用与数据源中的字段相对应的文本字段自动填充。在接下来的步骤中，您将添加微件以替换一些文本字段。但是，您不会删除文本字段，因为这些字段向您显示了微件如何与数据源关联。

  4. 在该表单旁添加一个 “Table”微件。保留所有默认设置。

添加选项微件

在本部分中，您将设置微件，以允许用户选择披萨尺寸和馅料。

  1. 创建一个用于选择披萨尺寸的下拉列表：

    1. 将 “Dropdown”微件添加到 Customer Email 文本字段下方的 Pizza Orders 表单。
    2. 在属性编辑器中，将该“Dropdown”微件命名为“SizeSelector”。
    3. 将 label 设置为“Select size:”。
    4. 点击 options。要将下拉选项绑定到 Size 字段的可能值，请将 options 设置为 @datasource.model.fields.Size.possibleValues。
    5. 点击 values 并选择 Size。此设置将值绑定到 @datasource.item.Size。如果点击 Size 文本字段微件，您会看到它具有相同的值。value 将微件与数据源关联起来。当用户创建订单时，应用向数据模型添加记录，并将 Size 字段设置为在微件中选择的值。
    6. 删除 Size 文本字段微件。

  2. 创建一个多选微件以用于选择披萨馅料：

    1. 将 “Multi select”微件添加到 Select size 下拉列表下方的页面。
    2. 在属性编辑器中，将该多选微件命名为“ToppingsSelector”。
    3. 将 label 设置为“Select toppings:”。

    4. 点击 options。在绑定代码编辑器中，删除 @datasource.text 并输入 ["basil", "eggplant", "garlic", "tomatoes"]（或您最喜欢的其他馅料）。

      请注意，您没有将选项绑定到为数据源中的 Toppings 字段设置的可能值。可能的值用作数据验证器，并且完全匹配。对于多选微件，要使用该方法，您需要输入每一种馅料和所有馅料组合，例如“basil”、“eggplant”、“garlic”、“tomatoes”、“basil,eggplant”、“basil,garlic”、“basil,eggplant,garlic”等等。

    5. 点击 values 并将绑定设置为 @datasource.item.Toppings#strToArray()。如果点击 Toppings 文本字段微件，您会看到它具有类似的值。由于用户可能在多选微件中选择多种馅料，因此您可以使用 #strToArray() 将微件中的列表转换为数据源中存储的数组。

    6. 删除 Toppings 文本字段微件。

  3. 关闭微件选项面板（点击“Close”）。

  4. 预览和测试应用：

    1. 点击 Preview 并允许应用访问数据。
    2. 在 Create Orders 窗格中，订购披萨。点击 Submit 后，披萨订单会添加到表中。
    3. 关闭预览标签页。

使用数据绑定设置馅料选项

如果您的菜单需要经常更改，怎么办？您不希望在每次增加馅料选项时都要修改微件选项并重新部署应用。在本部分中，您将添加一个用于添加馅料的页面，以及一个用于查看馅料的表。您将设置数据绑定，以使用新选项自动更新馅料选择器。

  1. 添加一个 Cloud SQL 模型，并将其命名为“Toppings”。
  2. 在 Fields 标签中，添加字符串类型字段，并将其命名为“Topping”。
  3. 添加一个新页面。在属性编辑器中进行以下更改：
    1. 将页面命名为“CreateToppings”。
    2. 将数据源设置为 Toppings。
    3. 在 Security 部分，点击 Who can see this page 菜单并选择 Admins only。进行该设置后，您的客户无法访问页面，也无法添加更多馅料。他们只能访问 PizzaOrders 页面。

  4. 打开微件选项面板 ，将 “Form”微件添加到页面。

    1. 仍使用数据源 Inherited: Toppings。
    2. 选择 Insert 表单类型。
    3. 取消勾选 Choose form fields 页面上的 Id 复选框。
    4. （可选）调整微件的尺寸，以将其收窄。

  5. 在插入表单旁添加一个表。请保留默认值。

  6. 转到 Create Orders 页面。

  7. 在 CreateOrders 表单中，选择 SelectToppings 多选微件。

  8. 在属性编辑器中，点击 options。删除之前生成的 JavaScript 数组。在 Application 下，选择 datasources Toppings items projections Topping。其值为 @datasources.Toppings.items..Topping。现在，微件选项是 Toppings 数据模型中的值。

  9. 预览和测试应用：

    1. 点击 Preview。
    2. 请注意，在 PizzaOrders 页面的 Create Orders 窗格中，目前没有任何馅料选项。您必须在 Toppings 数据库中添加一些馅料。
    3. 使用页面选择器转到 CreateToppings 页面。
    4. 添加馅料，您添加后它们即会填入表中。
    5. 使用页面选择器转到 PizzaOrders 页面。现在，Create Orders 窗格显示您刚刚添加的所有馅料。

恭喜！您刚刚创建了一个应用，该应用通过多种常见方法让用户选择选项。

后续步骤

  1. 尝试通过数据绑定在 Create Order 表单中设置披萨尺寸选项。

  2. 尝试通过“单选按钮组” 微件设置披萨尺寸选择器。

    提示：要让单选按钮选项显示 Size 字段值而非 Id 字段，请转到您的数据模型，点击 Size 字段，然后点击 Set as display field。您是否想要使用单选按钮组来选择馅料？

  3. 学习供应商评分模板应用。CompanyCreate 页面具有一个多选微件，用于选择公司的区域。区域通过关系与公司记录关联。