输入微件

使用输入微件可处理点击和文本条目等用户输入。

“按钮”微件 按钮

用户通过点击按钮来执行操作,如提交表单或发送电子邮件。

用法

将按钮拖放到页面上并使用属性编辑器来配置其文本、外观和功能。

常规工作流

  • 在“属性编辑器”中,设置在响应事件时所执行的操作;例如,应用用户点击按钮属于 onClick 事件。
  • 将标签的文本绑定到数据源或脚本。

样式

使用操作栏中的主题背景选择器来控制按钮的外观。

其他信息

微件 API 提供了有关此微件样式、属性、方法和事件的更多信息。

示例

许多样本模板均使用按钮。

“标签”微件 标签

使用“标签”微件可为页面上的对象添加文本标签。

用法

将标签拖放到页面上,然后使用属性编辑器来配置其文本和外观。

常规工作流

  • 为图片提供说明。
  • 将标签的文本属性绑定到数据源。

样式

使用操作栏中的主题背景选择器来控制标签的外观。您可以进一步自定义字体和字号。

其他信息

微件 API 提供了有关此微件样式、属性、方法和事件的更多信息。

示例

许多样本模板均使用标签。

“文本框”微件 文本框

使用“文本框”微件可为用户提供输入和修改文本的位置。

用法

将文本框拖放到页面上,然后使用属性编辑器来配置其标签、外观和初始值。

常规工作流

  • 为用户提供输入文本的位置。
  • 向用户展示默认但可修改的文本值。
  • 将初始值绑定到数据源。

样式

使用操作栏中的主题背景选择器从多种不同的外观(部分带有搜索图标)中进行选择。

示例

Material Gallery 模板中具有多个文本框。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“文本区域”微件 文本区域

使用“文本区域”微件可提供较大的滚动字段,供用户输入文本。

用法

将文本区域拖放到页面上,然后使用属性编辑器来配置其文本和外观。

常规工作流

  • 允许用户输入较长的滚动文本值。
  • 将标签的文本属性绑定到数据源。

样式

使用操作栏中的主题背景选择器来控制文本区域的外观。

示例

Material Gallery 模板中具有多个文本区域。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“复选框”微件 复选框

使用“复选框”微件可为用户提供两种选择:开启或关闭。

用法

将复选框拖放到页面上,然后使用属性编辑器来配置其标签和初始值。

常规工作流

  • 允许用户启用或停用设置。
  • 绑定一个值,以显示特定开/关功能的状态。

样式

使用操作栏中的主题背景选择器将微件显示为复选框或滑块。

示例

Material Gallery 模板中具有多个复选框。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“下拉列表”微件 下拉列表

使用“下拉列表”微件使用户能够从选项列表中进行选择。它们有助于从一组可能的值中分配一个值,或者设置一个关系端。

用法

将“下拉列表”微件拖放到页面上,然后使用属性编辑器来配置其选项。

常规工作流

  • 让用户从多个选项中选择一项。
  • 使用数据模型中的项填充下拉列表

下拉列表微件有如下重要属性:

属性 说明
value 基于用户的下拉列表选择分配给数据绑定属性的值
options 一组用于构成下拉列表内容且以字符串形式表示的选项
names 一组要替代 options 的默认字符串显示的字符串。该数组的长度必须与 options 相同。
allowNull 一个复选框,勾选该复选框会将下拉列表的初始 value 设置为 null
nullItemName 针对下拉列表的 null 值显示的字符串,通常用作提示用户如何选择的内容

以下是下拉列表绑定的一些示例:

下面这个简单的示例允许用户从列表的 ColorNames 属性投影所代表的一系列 Colors 中选择 FavoriteColor

  • value@datasource.item.FavoriteColor
  • options@datasources.Color.items
  • names@datasources.Color.items..ColorNames

下面这个示例允许用户将 Currency 字段分配给其 possibleValues 属性中列出的某种货币。

  • value@datasource.item.Currency
  • options@datasource.model.fields.Currency.possibleValues

下面这个示例允许用户将 InternetSpeed 绑定到由数组字面量组成的 JavaScript 表达式。

  • value@datasource.item.InternetSpeed
  • options["Google Fiber", "Cable Modem", "DSL", "Dial up"];

样式

使用操作栏中的主题背景选择器来控制下拉列表的外观。

示例

Material Gallery 模板中使用了多个下拉列表微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“日期框”微件 日期框

使用“日期框”微件可支持用户输入日期。用户可以手动输入日期,也可以点击日历图标以显示日期选择器。

用法

将“日期框”微件拖放到页面上,然后使用属性编辑器来配置其选项,包括日期格式和时区。

常规工作流

  • 允许用户在表格、表单和文本区域中输入日期。

样式

使用操作栏中的主题背景选择器来控制日期框的外观。

示例

差旅审批模板中包含多个日期框。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“单选按钮组”微件 单选按钮组

使用“单选按钮组”微件可允许用户选择多个预配置选项之一。

用法

将“单选按钮组”微件拖放到页面上,然后使用属性编辑器来配置其值和选项。

常规工作流

单选按钮组允许用户从一组 options 中选择一个 value

样式

使用操作栏中的主题背景选择器来控制微件是水平显示还是垂直显示。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“星级”微件 星级

使用“星级”微件可支持用户对页面上的另一个对象进行分级。

用法

将“星级”微件拖放到页面上,然后使用属性编辑器来配置其选项,包括总星数以及在该微件加载后选择的星数。

常规工作流

  • 设置星数并将该值绑定到数据源。

样式

使用操作栏中的主题背景选择器来选择该微件是使用星形还是心形外观。

示例

供应商评分模板中使用了星级。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“滑块”微件 滑块

使用“滑块”微件可允许用户从一系列值中进行选择。

用法

将“滑块”微件拖放到页面上,然后使用属性编辑器来配置其选项,包括值的范围。

常规工作流

  • 设置值的范围并将它们绑定到数据源。

样式

此微件没有样式选项。

示例

Material Gallery 模板中具有一个“滑块”微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“建议框”微件 建议框

使用“建议框”微件有助于用户使用您已预先配置的值来填充文本字段。

用法

将“建议框”微件拖放到页面上,然后使用属性编辑器来配置其选项。

常规工作流

  • 使用 value 属性来指定值,使用 options 来提供建议值。options 中项目的类型应与 value 中项目的类型相匹配。
  • 您可以配置建议框,以便从具有可能值的字段、关系或者现有模型内的记录中提取建议值。目前,这只能使用建议文本字段中提供的界面来完成。

样式

使用操作栏中的主题背景选择器来控制建议框的外观。

示例

供应商评分模板中使用了“建议框”微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“文本编辑器”微件 文本编辑器

使用“文本编辑器”微件可提供文本编辑器,用户可以在其中写入较长的文本条目并设置其格式。

用法

将“文本编辑器”微件拖放到页面上,然后使用属性编辑器来配置其选项。

常规工作流

  • 允许用户输入较长的滚动文本值。
  • 将标签的文本属性绑定到数据源。

样式

使用操作栏中的主题背景选择器来控制文本编辑器的外观。

示例

供应商评分模板中使用了“文本编辑器”微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“多选”微件 多选

支持用户使用“多选”微件从一组选项中选择多个项目。

用法

将“多选”微件添加到页面上,并使用属性编辑器来配置其选项。

要设置可供应用用户选择的选项,请设置 options 属性。点击 options,然后在绑定代码编辑器中输入以下内容之一:

  • 一组选项,如 ["east", "north", "south", "west"]
  • 数据源字段中 items 的绑定(使用以下语法):

    @datasource.items..field-name

    ..投影运算符,允许您访问字段的一列编译值。例如,如果一个模型具有名为 Region 的字段,那么,您可以通过 @datasource.items..Region 绑定将多选选项设置为所有记录中 Region 的所有值。如果一条记录的 Region 为“east”,另一条记录的 “Region”为“north, south”,那么在该应用中,用户可以选择“east”、“north”和“south”这几个选项。

要存储用户选择的值,请使用数据绑定来设置 values 属性。如果用户选择多个字符串,则必须将它们转换为数组。要创建数组,可采用的一种方式是使用 strToArray 绑定转换器:

@datasource.item.field-name#strToArray()

options 中项目的类型应该与 values 中项目的类型相匹配。

常规工作流

  • 用于为重复字段分配值或者设置多个关系端。

样式

要控制“多选”微件的外观,请使用操作栏中的主题背景选择器

示例

选择选项教程介绍了如何设置“多选”微件。供应商评分模板中使用了“多选”微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“云端硬盘选择器”微件 云端硬盘选择器

使用“云端硬盘选择器”微件可允许用户在其云端硬盘中查找文件并将其上传到您的应用中。

用法

  1. 将您的应用配置为以用户身份运行
  2. 将“云端硬盘选择器”微件拖放到页面上,然后使用属性编辑器来配置其选项。

常规工作流

此微件将返回:

  • 文件名
  • 文件网址,可用于链接到相应文件
  • 文件 ID,可用于获取文件对象。这使您能够调用多项操作,例如:
    • File.setOwner(user)
    • File.setStarred(starred)
    • File.setTrashed(trashed)
    • File.makeCopy()
    • File.getDownloadUrl()

您必须将应用配置为以用户身份运行,才能使用此微件。

默认情况下,“云端硬盘选择器”微件允许用户选择其 Google 云端硬盘上的文件,或者选择其计算机上的文件,然后上传到 Google 云端硬盘。云端硬盘选择器属性组中包含一个 views 属性,用于为视图添加其他标签。例如,将 FOLDERS 添加到 views 属性即可在云端硬盘选择器上添加一个用于显示用户的 Google 云端硬盘文件夹的标签;添加 IMAGE_SEARCH 即可添加一个 Google 图片搜索标签;添加 SPREADSHEETS 即可显示一个标签,其中仅展示用户的 Google 云端硬盘中的电子表格。如需详细了解“云端硬盘选择器”微件中的视图,请参阅选择器类引用

您可以使用云端硬盘选择器属性组中的 features 属性来修改视图的行为。例如,添加 MULTISELECT_ENABLED 即可允许用户一次选择多个项目。如需详细了解“云端硬盘选择器”微件的功能,请参阅选择器类引用

如果添加 Folders 视图,云端硬盘选择器会记住用户查看的最后一个文件夹,并且会在用户再次点击“云端硬盘选择器”(Drive Picker) 按钮时显示该文件夹。用户可以通过点击微件顶部导航路径中显示的任何文件夹名称直接导航到相应文件夹。

样式

使用操作栏中的主题背景选择器来控制云端硬盘选择器的外观。

示例

供应商评分模板中使用了“云端硬盘选择器”微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。

“用户选择器”微件 用户选择器

“用户选择器”微件允许用户查找组织中的其他人员。当用户输入时,该微件会提供自动填充建议,包括照片、姓名和电子邮件地址。

用法

  1. 目录模型添加到您的应用。
  2. 将“用户选择器”微件拖放到页面上,然后使用属性编辑器来配置其选项。

常规工作流

  • 将选定人员的电子邮件地址绑定到模型中的字段。

样式

使用操作栏中的主题背景选择器来控制“用户选择器”的外观。

示例

文档审批模板中使用了“用户选择器”微件。

其他信息

Widget API 提供了有关样式、属性、方法和事件的更多信息。