# 内置控件列表

# Edit

名称：文本框
用途：输入单行的字符串
推荐使用infopath控件：文本框
支持的数据类型：string,integer,double
支持的特殊属性:

MaxLength 设置文本框最大输入长度

# TextArea

名称：大文本框
用途：输入多行的字符串
推荐使用infopath控件：大文本框
支持的数据类型：string
支持的特殊属性:

MaxLength 设置文本框最大输入长度

# RichText

名称：富文本框
用途：输入富文本
推荐使用infopath控件：大文本框
支持的数据类型：XHTML

# Remark

名称：备注
用途：输入多行字符串，且没有足够的位置显示一个大文本框。鼠标移上去后会有缩略内容显示，点击后可以进行编辑修改
推荐使用infopath控件：文本框
支持的数据类型：string
支持的特殊属性:

MaxLength 设置文本框最大输入长度

备注：

在infopath里画完文本框后，将其高度宽度都设置成16px，在浏览器里实际渲染的大小就是16*16

# Date

名称：日期框
用途：输入日期
推荐使用infopath控件：日期框
支持的数据类型：date
支持的特殊属性:

Format 可以设置格式为'yy-mm-01'来支持只输入年月，日期会自动选择成1号

备注：

日期控件自带正则验证

# Date控件暴露方法

# min([value]) Exposed Functions

根据value参数设置日期控件可选的最小日期，value为unix时间戳，参数不传或者传空字串或者null表示清空可选最小日期

# max([value]) Exposed Functions

根据value参数设置日期控件可选的最大日期，value为unix时间戳，参数不传或者传空字串或者null表示清空可选最大日期

# range([min,max]) Exposed Functions

根据min参数设置日期控件可选的最小日期，根据max参数设置日期控件可选的最大日期，min和max为unix时间戳，参数不传或者传空字串或者null表示清空可选最小或最大日期

注意

由于流程前端渲染页在移动端使用了原生的日期控件，在ios下以上三个函数会失效，这是由于safari对于min,max这两个属性支持不好引起的，现在没有更好的解决办法，在提交时可使用前端和后端的校验来避免日期错误。这可以认为是移动端safari的bug，期待苹果能尽快解决这个问题，跟踪此问题可查看此处 (opens new window)。

示例在动态脚本中根据表单选项和已经选择的日期设置当前日期控件的可选范围

if(!$INIT) {
    // 设置今天为最小可选日期
    if($fieldDateType=="min"){
        this.min($_VAR_NOW);
    }
    // 设置明天为最大可选日期
    if($fieldDateType=="max"){
        this.max($_VAR_NOW+86400);
    }
    // 清除最小可选日期
    if($fieldDateType=="clearMin"){
        this.min();
    }
    // 清除最大可选日期
    if($fieldDateType=="clearMax"){
        this.max();
    }
    // 设置可选日期范围为从今天开始的一周内
    if($fieldDateType=="range"){
        this.range($_VAR_NOW,$_VAR_NOW+86400*6);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Time

名称：时间框
用途：输入时间
推荐使用infopath控件：文本框
支持的数据类型：time

# Check

名称：复选框
用途：复选
推荐使用infopath控件：复选框
支持的数据类型：boolean
支持的特殊属性:

PlaceHolder 点击时确认提示文字

# Check控件暴露方法

# checkLabel([content, isHtml]) Exposed Functions

获取或者设置勾选标签内容，isHtml参数设置为true表示标签是html格式

示例在动态脚本中设置勾选标签内容

this.checkLabel('我的选择');

# check([highlight]) Exposed Functions

选中Check，参数highlight控制是否高亮check的标签，缺省为true，由不选中的变成选中则标签会高亮

# uncheck([highlight]) Exposed Functions

不选中Check，参数highlight控制是否高亮check的标签，缺省为true，由选中的变成不选中则标签会高亮

示例在动态脚本中根据表单选项选中或不选中Check

if(!$INIT) {
    if ($fieldOption==='1') {
        this.check();
    } else {
        // 不选中时不高亮标签
        this.uncheck(false);
    }
}

1
2
3
4
5
6
7
8

# toggle([highlight]) Exposed Functions

切换Check选中状态，原先选中就改为不选中，原先不选中就改为选中。参数highlight控制是否高亮check的标签，缺省为true。

# Switch

名称：切换开关
用途：切换状态
推荐使用infopath控件：文本框
支持的数据类型：boolean
备注：Switch功能和Check相类似，本质是切换true,false状态，主要用于在移动版上替代Check，这个控件更符合移动设备的体验

# CheckList

名称：复选框
用途：可以从一个代码表构造出一堆复选框，或者输入DataSource属性来构造复选框
推荐使用infopath控件：文本框，文本框的宽度确定了这一串复选框的占据的最大宽度
支持的数据类型：string，复选框勾选后的值为每个选中的复选框的值以逗号连接，比如三个复选框值分别为A、B、C,勾选了A和C后其值为A,C
备注:

从代码表构造复选框时，请为CheckList选择CodeTable
从DataSource属性构造复选框时候，DataSource属性是以单引号括起来的一个字串，每个选项以逗号或者回车(\n)分隔,例如要构造选项分别为A、B、C的复选框，DataSource属性需要设置成'A\nB\nC'或者'A,B,C'
可以用设置动态datasource的方式构造复选框，在字段的动态属性面板中设置dataSource为'A\nB\nC'或者'A,B,C'即可

# CheckList控件暴露方法

# check(value,[highlight]) Exposed Functions

按参数value的值选中CheckList中对应复选框，value可以是单值也可以是多值，当是多值时候用逗号分隔。参数highlight表示选中后是否高亮标签，默认是true，注意只有改变选中状态的值对应的标签才会高亮。

# uncheck(value,[highlight]) Exposed Functions

按参数value的值不选中CheckList中对应复选框，value可以是单值也可以是多值，当是多值时候用逗号分隔。参数highlight表示不选中后是否高亮标签，默认是true，注意只有改变选中状态的值对应的标签才会高亮。

示例在动态脚本中根据表单选项选中或不选中CheckList对应的值

if(!$INIT) {
    if ($fieldOption==='1') {
        this.check('110000,120000');
    } else {
        this.uncheck('120000');
        this.check('130000,140000');
    }
}

1
2
3
4
5
6
7
8

# checkAll([highlight]) Exposed Functions

选中所有CheckList中的选项，参数highlight表示选中后是否高亮标签，默认是true，注意只有改变选中状态的值对应的标签才会高亮。

# uncheckAll([highlight]) Exposed Functions

不选中所有CheckList中的选项，参数highlight表示不选中后是否高亮标签，默认是true，注意只有改变选中状态的值对应的标签才会高亮。

示例在动态脚本中根据表单控件$fieldCheckAll是否被选中来选中CheckList所有选项，或不选中所有选项

if(!$INIT) {
    if($fieldCheckAll) {
        this.checkAll();
    } else {
        this.uncheckAll();
    }
}

1
2
3
4
5
6
7

# disable([value, uncheck=false]) Exposed Functions

禁用参数value指定的选项，uncheck表示在禁用的同时是否取消选中该选项(布尔类型，缺省false)

禁用的选项可以单个，也可以多个以逗号分隔
value不传表示禁用所有
如果uncheck参数为true，被禁用的选项如果原先是选中的那么会被取消选中。

示例在动态脚本中根据表单控件$fieldDisableOption来禁用checklist中的选项

if(!$INIT) {
    // 条件是1时，禁用code1选项
    if($fieldDisableOption==='1') {
        this.disable('code1');
        return;
    }
    // 条件是2时，禁用code1和code2选项，并且如果原来已选中code1和code2则取消选中
    if($fieldDisableOption==='2') {
        this.disable('code1,code2',true);
        return;
    }
    // 条件是3时，禁用所有且取消选中
    if($fieldDisableOption==='3') {
        // 为了传递第二个参数true，需要第一个value参数传null
        this.disable(null,true);
        return;
    }
    // 其余情况下禁用所有选项
    this.disable();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# enable([value]) Exposed Functions

启用参数value指定的选项

启用的选项可以单个，也可以多个以逗号分隔
value不传表示启用所有

示例在动态脚本中根据表单控件$fieldEnableOption来启用checklist中的选项

if(!$INIT) {
    // 条件是1时，启用code1选项
    if($fieldEnableOption==='1') {
        this.enable('code1');
        return;
    }
    // 条件是2时，启用code1和code2选项
    if($fieldEnableOption==='2') {
        this.enable('code1,code2');
        return;
    }
    // 其余情况下启用所有选项
    this.enable();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Option

名称：单选按钮
用途：单选
推荐使用infopath控件：选项按钮
支持的数据类型：string,boolean 其中数据类型为boolean为特殊情况，用于重复表中表示是否选择了该行
备注:

选项按钮后面显示的字符要自行在infopath中输入
选中后的值在选项按钮的属性中设置
如果在重复表中有一个选项按钮，且数据类型为布尔，这样的选项按钮有特殊的使用场景，其可以表示是否选中了该行，当某行选中时候别的行的选项按钮自动取消选中。

# Option控件暴露方法

# check(value, [highlight]) Exposed Functions

选中指定值对应项，参数highlight控制是否高亮check的标签，缺省为true，由不选中的变成选中的标签会高亮

# uncheck(value, [highlight]) Exposed Functions

不选中指定值对应项，参数highlight控制是否高亮check的标签，缺省为true，由选中变成不选中的标签会高亮

示例在动态脚本中根据表单fieldCheck是否选中来选中或不选中Option中值为'1'的项

if(!$INIT) {
    if ($fieldCheck===true) {
        this.check('1');
    } else {
        this.uncheck('1');
    }
}

1
2
3
4
5
6
7

# OptionList

名称：单选按钮
用途：可以从一个代码表构造出一堆单选按钮，或者输入动态dataSource来构造选项
推荐使用infopath控件：文本框，文本框的宽度确定了这一串单选按钮占据的最大宽度
支持的数据类型：Code
备注：

从代码表构造单选按钮时，请为OptionList选择CodeTable
用dataSource构造时候，请填写要从哪个字段的哪个属性构造，例如$fieldUser.departments

# OptionList控件暴露方法

# check(value, [highlight]) Exposed Functions

选中指定值对应项，参数highlight控制是否高亮check的标签，缺省为true，由不选中的变成选中的标签会高亮

# uncheck(value, [highlight]) Exposed Functions

不选中指定值对应项，参数highlight控制是否高亮check的标签，缺省为true，由选中变成不选中的标签会高亮

示例在动态脚本中根据表单fieldCheck是否选中来选中或不选中Option中值为'1'的项

if(!$INIT) {
    if ($fieldCheck===true) {
        this.check('1');
    } else {
        this.uncheck('1');
    }
}

1
2
3
4
5
6
7

# disable([value, uncheck=false]) Exposed Functions

禁用参数value指定的选项，uncheck表示在禁用的同时是否取消选中该选项(布尔类型，缺省false)

禁用的选项可以单个，也可以多个以逗号分隔
value不传表示禁用所有
如果uncheck参数为true，被禁用的选项如果原先是选中的那么会被取消选中。

示例在动态脚本中根据表单控件$fieldDisableOption来禁用optionlist中的选项

if(!$INIT) {
    // 条件是1时，禁用code1选项
    if($fieldDisableOption==='1') {
        this.disable('code1');
        return;
    }
    // 条件是2时，禁用code1和code2选项，并且如果原来已选中code1或code2则取消选中
    if($fieldDisableOption==='2') {
        this.disable('code1,code2',true);
        return;
    }
    // 条件是3时，禁用所有且取消选中
    if($fieldDisableOption==='3') {
        // 为了传递第二个参数true，需要第一个value参数传null
        this.disable(null,true);
        return;
    }
    // 其余情况下禁用所有选项
    this.disable();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# enable([value]) Exposed Functions

启用参数value指定的选项

启用的选项可以单个，也可以多个以逗号分隔
value不传表示启用所有

示例在动态脚本中根据表单控件$fieldEnableOption来启用optionlist中的选项

if(!$INIT) {
    // 条件是1时，启用code1选项
    if($fieldEnableOption==='1') {
        this.enable('code1');
        return;
    }
    // 条件是2时，启用code1和code2选项
    if($fieldEnableOption==='2') {
        this.enable('code1,code2');
        return;
    }
    // 其余情况下启用所有选项
    this.enable();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Select

名称：下拉框
用途：可以从一个代码表构造，或者输入动态dataSource来构造一个下拉框
推荐使用infopath控件：下拉框
支持的数据类型：Code

备注：

从代码表构造下拉框时，请为其选择CodeTable
用dataSource构造时候，请填写要从哪个字段的哪个属性构造，例如$fieldUser.departments
通过设置parent属性，可以让其支持联动

# Suggester

名称：提示输入框
用途：可以智能感知用户输入，随着用户输入缩小提示范围,用于感知的输入可以是拼音缩写，多个感知条件之间用空格或者逗号分隔
推荐使用infopath控件：文本框
支持的数据类型：Code,User,Organize
支持的特殊属性:

AllowExt 是否允许外部输入，如果为true，那么可以输入一个不在感知结果之中的值
IndepDeptOnly 是否只显示顶级部门（仅对Organize数据类型有效，true|false）
UserFilters 参见UserFilters
UserPosts 已废弃，请使用UserFilters
UserTraversal 当数据类型为User类型时，是否不需要至少输入2个字符才能查询选人，缺省为false（需要至少输入2个字符）

备注：

通过设置parent属性，可以让Suggester支持联动

# Suggester2

名称：提示输入框
用途：Suggester的替代控件，和Suggester比较用户体验更好，建议尽量使用Suggester2
推荐使用infopath控件：文本框
支持的数据类型：Code,User,Organize
支持的特殊属性: 同Suggester

备注：

通过设置parent属性，可以让Suggester2支持联动

# Suggester2控件暴露方法

# dropdownAutoWidth([auto]) Exposed Functions

按参数auto的值设置Suggester2的下拉选项列表是否自动宽度，缺省为true。下拉选项列表自动宽度表示下拉选项列表的宽度由里面选项值内容决定，即宽度自适应选项内容长度。auto参数为false表示下拉选项列表宽度为一个定宽，由表单上画的控件宽度决定。Suggester2控件缺省情况下就是自动宽度，所以如果您想设置宽度固定为表单控件宽度，只需用false作为参数调用改方法即可。

示例初始化时设置下拉宽度固定为表单控件宽度

this.dropdownAutoWidth(false);

# Label

名称：标签
用途：用于显示，不能编辑内容
推荐使用infopath控件：文本框
支持的数据类型：string,anyURI,XHTML,integer,double,boolean,date,datetime,Code,User,Organize
支持的特殊属性:

Format 用于格式化显示数字类型(double,integer)的和日期类型的数据

数字格式

Number	Format	显示
10000	'0,0.0000'	10,000.0000
10000.23	'0,0'	10,000
10000.23	'+0,0'	+10,000
-10000	'0,0.00'	-10,000.00
10000.1234	'0.000'	10000.123
-10000	'(0,0.0000)'	(10,000.0000)
0.673467	'0.00%'	67.35%
-0.36	'0%'	-36%

日期格式

格式字符	说明
yyyy	四位显示年份
MM	两位显示月份
dd	两位显示日期
hh	两位显示时
mm	两位显示分
ss	两位显示秒

其中年份可以用yy只显示最后2位，月份可以用M显示一位(10,11,12还是显示2位)，比如5月用MM显示是05，用M显示就是5，其余格式都支持类似短显示方式
缺省日期的格式是yyyy-MM-dd，如果想改成中文显示那么只需将格式改为'yyyy年MM月dd日'即可。

# Hidden

名称：隐藏字段
用途：用于只记录字段值，但是在界面中不显示
推荐使用infopath控件：文本框
支持的数据类型：string,anyURI,integer,double,boolean,date,Code,User,Organize,location

# Hidden控件暴露方法

# startLocating Exposed Functions

用于根据表单上用户的一些选项，动态开启定位功能

示例根据表单上用户是否选择校内动态开启定位功能

if ($fieldOption === '校内') {
    this.startLocating();
}

1
2
3

# stopLocating Exposed Functions

用于根据表单上用户的一些选项，动态关闭定位功能

示例根据表单上用户是否选择校内动态关闭定位功能

if ($fieldOption !== '校内') {
    this.stopLocating();
}

1
2
3

# Anchor

名称：链接
用途：显示一个超链接
推荐使用infopath控件：文本框
支持的数据类型：string, anyURI, Code
支持的特殊属性:

DisplayText 链接上的显示文字
WindowMode 设置链接打开方式，分Modal，Modeless，Dialog，Modal Window，Modeless Window，Self六种

备注：

当使用string，anyURI数据类型时，链接的url就是控件的值,链接上显示的文字填在DisplayText里。一般我们在字段的初始值(InitialValue)里填写url即可，如果该url地址和表单的一些变量相关，可以使用${变量名}的语法进行变量替换，例如https://myweb.sjtu.edu.cn/?id=${_VAR_ENTRY_NUMBER} ，这样就会将当前表单的流水号作为参数跳转链接，这里使用的是内置变量，您也可以使用表单上任何字段作为变量做替换拼接url，所有内置变量请参考此处。如果您的链接具有更复杂的动态逻辑，请在render事件中赋值即可。
当使用Code数据类型时，代码值是url，代码显示值是链接显示文字。
链接打开有以下六种方式

Modal 本窗口模式
当前页面内打开一个内置的窗口，显示链接网址内容，该窗口为模式窗口
Modeless 本窗口非模式
当前页面内打开一个内置的窗口，显示链接网址内容，该窗口非模式窗口可最小化
Dialog 新窗口对话框（不推荐）
当前页面弹出一个窗口显示链接网址内容，不推荐该方式，可能被浏览器阻止
Modal Window 新窗口模式
打开一个新的标签页显示链接网址内容，且当前表单页面会有提示：在新窗口操作完毕后继续
Modeless Window 新窗口非模式 (推荐该方式)
打开一个新的标签页显示链接网址内容，当前表单页面无提示
Self 本窗口打开（不推荐）
本窗口打开链接网址，填表内容会丢失

# File

名称：文件上传控件
用途：上传文件
推荐使用infopath控件：文本框
支持的数据类型：string,File ({id:id,name:name,size:size,uri:uri}),Doc 如果是string类型，那么其值是File对象的JSON格式,Doc类型和File类型其数据结构目前是一致的
支持的特殊属性:

PlaceHolder 上传提示文字
FileTypes 上传文件后缀限制，比如pdf或者xls,如果允许多种后缀的文件上传，那么文件名之间用逗号分隔，比如doc,docx
MaxLength 上传文件最大字节数限制
MultipleUpload 是否可上传多个文件，缺省false，当设置为true时可以上传多个文件(无须外套重复节支持)

# Doc

名称：Doc文件在线编辑控件
用途：在线编辑office文件（限文件后缀为docx,xlsx）
推荐使用infopath控件：文本框
支持的数据类型：Doc({id:id,name:name,size:size,uri:uri})
支持的特殊属性:

PlaceHolder 上传提示文字备注：
File控件和Doc控件都支持在线编辑office文件，区别在于File文件上传后编辑是在新窗口打开，Doc控件文件上传后就在本页面编辑。

# Image

名称：图片显示控件
用途：显示图片
推荐使用infopath控件：文本框
支持的数据类型：string,anyURI,File
备注：

可以在初值里填写图片的url
用文本框的长和宽控制图片尺寸

# Picture

名称：图片上传控件
用途：上传图片
推荐使用infopath控件：文本框
支持的数据类型：string,File
备注：

该控件和image的区别是可以上传
用文本框的长和宽控制图片预览尺寸
上传后的图片直接预览显示在表单上

# Help

名称：帮助
用途：在表单上显示一个问号图标，用于显示提示帮助信息
推荐使用infopath控件：文本框
支持的数据类型：string

# Button

名称：按钮
用途：显示一个按钮，点击时触发后台fieldChange事件
推荐使用infopath控件：文本框
支持的数据类型：string
支持的特殊属性:

DisplayText 按钮显示文字
按钮显示的文字可以用初值或者DisplayText来设置，DisplayText优先
PlaceHolder 点击时确认提示文字

# LinkButton

名称：链接按钮
用途：显示一个链接，但是其功能和按钮完全一致，点击时触发后台fieldChange事件
推荐使用infopath控件：文本框
支持的数据类型：string
支持的特殊属性:

DisplayText 按钮显示文字
按钮显示的文字可以用初值或者DisplayText来设置，DisplayText优先
PlaceHolder 点击时确认提示文字

# CheckButton

名称：Check按钮
用途：显示一个按钮，有选中和不选中两种状态
推荐使用infopath控件：文本框
支持的数据类型：boolean code
支持的特殊属性:

DisplayText 按钮显示文字
当使用boolean数据类型时，按钮显示的文字用DisplayText来设置
code数据类型当使用code数据类型时，code.displayValue为按钮显示值，code.value一般用于后台处理用，按钮是否被按下用code.attributes里的checked属性来表示

# CheckButton控件暴露方法 Exposed Functions

# check

选中CheckButton

# uncheck

不选中CheckButton

示例在动态脚本中根据表单选项选中或不选中CheckButton

if(!$INIT) {
    if ($fieldOption==='1') {
        this.check();
    } else {
        this.uncheck();
    }
}

1
2
3
4
5
6
7

# toggle

切换CheckButton选中状态，原先选中就改为不选中，原先不选中就改为选中。

# IFrame

名称：IFrame控件
用途：主要用于显示比较复杂的第三方开发的页面，这些页面的内容不方便做成通用的表单控件，通过iframe控件可以将第三方开的的控件或者页面集成进来
推荐使用infopath控件：文本框
支持的数据类型：anyURI
官方认证的所有IFrame控件列表请参考此处，欢迎投稿
IFrame控件设计指引请参考此处

# Thing

名称：物品
用途：输入物品
推荐使用infopath控件：文本框
支持的数据类型：Thing
支持的特殊属性:

Format 用于物品条码打印

备注：

Format不输入则按照缺省格式打印，如果要自定义格式，可以在这里输入$fieldThing或者${fieldThing}都可以显示条码，其他表单字段或者全局字段都可以使用，例如$_VAR_ACTION_REALNAME表示操作人。如果想打印一个分隔行可以用---代表分隔符，缺省分隔符号高度为10px，如果想自定义高度可以将数字写在中间，例如-50-表示高度为50px的分隔

# Map

名称：地图
用途：用于显示地理位置或者选取一个地理位置
推荐使用infopath控件：文本框
支持的数据类型：Location

备注：

Location数据：位置数据用WGS84坐标系，记录格式是"经度,纬度,缩放水平",其中缩放水平指地图中缩放的level。如果用户在地图上标记位置时添加了位置的标签，那么标签内容也会保存，这个类似于代码表，即经纬度缩放水平是其值，标签为其显示值。
初值：地图的初值用"经度,纬度,缩放水平"的格式，其中缩放水平是可以省略的，标签的初值填在displayText中。在开发过程中如果需要将地图初始坐标写到初值中，首先到 http://api.map.baidu.com/lbsapi/getpoint/index.html 取初始位置的百度坐标，然后随便在一个表单渲染页面中用F12打开调试窗，在console的tab中输入$$.transformLocation(lng,lat)就可以获取到WGS84坐标，把这个坐标填写到初值里就可以了。
导航功能：在移动版支持对地图上已经标记的位置进行导航，会调用手机上已经安装的百度地图，高德地图，腾讯地图其中之一，如果都没安装，那么会没有效果。
初始位置：如果地图没有初值位置，那么会自动定位用户的当前位置，这个需要用户在浏览器弹出询问窗口时点击允许

← 通用属性