华为云用户手册

  • 创建聚合对象并通过Lookup关联子节点对象 参考登录经典应用设计器中操作,进入应用的经典版设计器。 鼠标放在应用的文件夹旁,单击加号,选择“聚合对象”。 选择“创建新的聚合对象”,输入基本信息后单击“添加”。 图1 新建聚合对象 表2 新建聚合对象参数说明 参数 参数说明 标签 聚合对象的在页面显示的名称。 名称 聚合对象的名称,是在系统中的唯一标识。 描述 聚合对象的描述信息。 在“根节点”中,选择根节点对象。 根节点对象为该聚合对象的基础对象。这里根节点对象设置为“Product__ CS T”。选择根节点对象后,该节点对象的所有字段详情会显示在右下侧区域空白处。 图2 设置根节点对象 单击节点对象详情框中的“+”,选择与根节点关联的对象“Price__CST”,添加关联对象,只能向子对象进行关联。 图3 选择关联对象 选择两个对象之间的关联字段“product__CST”。 两个关联对象之间,可能会有多个字段进行关联。此处,请选择希望进行关联的具体字段。 图4 选择关联字段 选择关联字段后,关联对象“Price__CST”的所有字段详情会显示在区域中。两个关联对象之间会有连线,连线上显示关联的具体字段标签。 图5 关联结果 参考5~6,添加与根节点关联的对象“Stock__CST”。 图6 添加关联对象“Stock__CST” (可选)您可单击节点名称,在右侧“Properties”区域设置“Label”参数取值,设置节点名称,以区分不同节点。 表3 节点名属性区域参数说明 参数 参数说明 标签 节点在界面的展示名称。 名称 节点的名称,是节点在系统中的唯一标识。 实体对象 节点的对象名。 对象字段 所用到的,该节点对象的字段。目前只能选该对象全部字段,不支持选择部分字段。 父对象 节点对象的父对象。 子对象 节点对象的子对象。 单击页面上方的,保存该聚合对象的设置。
  • 场景描述 新建一个订单聚合对象,该聚合对象中产品对象通过Lookup关联价格、库存子节点对象,并基于该订单聚合对象定义增加操作。再通过属性配置,关联客户对象。 表1 对象说明 对象名 自定义字段名 字段类型 字段说明 Product__CST description__CST text 产品描述。 Price__CST product__CST Lookup 产品描述。该字段的取值来源于“Product__CST”对象。 price__CST Currency 产品价格。 Stock__CST remain__CST Number 库存数量。 product__CST Lookup 产品描述。该字段的取值来源于“Product__CST”对象。 Customer__CST - - -
  • 低代码平台中的对象 低代码平台中的对象(也可以称为Object)相当于传统方式开发业务系统时,数据库中创建的一个表。每个对象对应一张数据库表,用于保存业务系统需要的配置数据和业务数据。 对象可以存储组织或业务特有的数据,您可以围绕对象这一核心,定义相关的字段、字段校验规则、界面样式、字段变更时的触发事件等。如果把待开发的业务系统比作一部电影,对象就是电影中的各个角色,需要勾勒角色的外貌、性格特点、人物关系和所经历的剧情。 低代码平台预置了一部分标准对象(Standard Object),您可以为这些标准对象新增字段,但不能修改、删除预置字段。租户开发者也可以根据自己的业务需要,创建自定义对象(Custom Object),支持增、删、改自定义对象及自定义对象的字段。 创建一个自定义对象后,系统会为自定义对象自动创建一些标准字段(Standard Fields),如图1所示。 图1 自定义对象的标准字段
  • 场景描述 本节介绍的是在应用内创建业务权限凭证,您还可以在管理中心进行配置,相关操作请参考设置业务权限。两者的区别是在应用中创建的业务权限凭证,可在打包发布应用时,将业务权限凭证一起发布出去,在管理中心创建业务权限凭证无法随应用发布出去。 通过该章节创建业务权限后,参考设置业务权限在权限配置的“业务权限凭证”页签,配置用户的业务权限。在自定义接口URL时,可通过配置该业务权限,控制只有该业务权限的用户才可访问自定义接口URL。自定义接口的业务权限配置,请参考如何自定义调用脚本的URL和如何自定义调用服务编排的URL。
  • 对象类型及功能介绍 在低代码平台中,支持创建如下类型的对象。 标准对象:低代码平台预置的对象,对象名称和对象字段均已定义好,可以满足最基本的业务需要。 标准对象只允许用户扩展新字段,禁止修改/删除基线字段。 自定义对象:开发者自定义的对象,允许用户增/删/改对象和字段。更多介绍,请参见数据对象建模。 视图对象:与数据库中的View视图类似,用于对2个以上的对象进行关联查询,并把结果集以对象的形式展现,这样的对象称之为视图对象。视图对象中的数据只支持查询,不支持增/删/改。更多介绍,请参见如何创建视图对象。 聚合对象:由一个主对象和多个子对象构成的复合对象,实现不同对象之间建立关联关系。聚合对象对外展现为一个对象,从而简化对象管理。更多介绍,请参见如何创建聚合对象。
  • 自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局,确保一个页面在所有终端上(各种尺寸的PC、平板、手机、智能手表等)都能显示出令人满意的效果。利用流式布局加弹性布局,分别为不同的屏幕分辨率定义布局。 标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件,“栏”组件可以简单理解为上一小节介绍的“容器”组件,用来提供某一部分的布局,多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中,“栏”组件的呈现形式,实现不同大小屏幕下不同的显示方案,如图13。 图13 分栏组件 “分栏”组件右侧属性配置面板的“行布局”中,可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件,在PC端包含多少个“栏”。 为了方便说明,如何使用“分栏”组件实现自适应布局,向画布中拖拽一个“分栏”组件,在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景,如图14。 图14 分栏组件模拟录入员工信息 “phone”属性中,可以依据图示,选择“分栏”组件中“栏”,在移动端的布局形式,如图12所示。当在“PC”选择左到右三个“栏”的布局形式时,移动端的屏幕较小,仍然选择从左到右布局可能导致页面元素显示不全或变形,这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列,此时单击页面上方的“全屏”,手机图标就可以模拟在移动端展示的效果,如图15。 图15 移动端展示效果“竖排” 如果在“phone”中,依旧选择从左到右的布局方式,则展示效果如图16。 图16 移动端展示效果“横排” 布局模式:可以调整“分栏”组件为流式布局或弹性布局,用来控制“分栏”组件中多个“栏”组件或其他组件的布局,更多流式布局和弹性布局的介绍请参见标准页面布局。 录入分隔比例:在“PC”属性的选项中,单击最后的齿轮按钮,可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份,每个“栏”组件所占宽度比例,通过设置“录入分隔比例”,在不同大小的屏幕下“分栏”组件获得屏幕的宽度,决定每个“栏”的宽度,即使在不同大小的屏幕下显示的比例是不变的,从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分,显示“录入分隔比例”为“8:8:8”,如图17所示。 图17 “录入分隔比例”为“8:8:8” 调整“录入分隔比例”为“6:12:6”时,中间的“栏”的宽度就会按比例放大,两侧“栏”的宽度按比例缩小,如图18。 图18 “录入分隔比例”为“6:12:6”
  • 基础布局设置 标准页面提了流式布局(Flow Layout)和弹性布局(Flex Layout),标准页面的基础布局主要是通过“容器”组件实现的。 容器组件就是基础的布局容器,可以将其理解为 CSS 中DIV的概念。DIV是层叠样式表中的定位技术,全称Division,即为划分,有时可以称其为图层。 DIV是HTML中的一个标签元素,用来为HTML文档内大块的内容提供结构和背景的元素,可以将“容器”简单理解为画布,通过设置外层画布的属性达到控制内容布局的效果。 流式布局 容器组件默认弹性布局未开启,处于流式布局的状态,如图1所示。 图1 流式布局 在流式布局中,组件默认为块级(Block)元素,即不论组件宽度是多少,默认占据全部父级元素的宽度。如图2所示,向画布中拖拽一个“容器”组件,再向“容器”组件中拖入两个“标题”组件,“标题”组件为块级元素,默认占据全部父级元素宽度,即外层“容器”的宽度,第二个“标题”组件会在第一个“标题”组件的下方。 图2 流式布局中组件为块级元素 流式布局中,组件由上至下依次排布,可以通过“水平对齐方式”对容器内组件进行水平位置调整,如图3、图4所示。 图3 居中水平对齐 图4 靠右水平对齐 弹性布局 将“容器”组件属性面板中的“弹性布局”开启后,布局由流式布局切换到弹性布局,弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”,如图5所示。 图5 弹性布局 为了方便说明弹性布局,向画布中拖拽一个“容器”组件,再向“容器”组件中拖入五个“容器”组件,将每个“容器”组件的宽度和高度设置为100px,并为每个“容器”组件设置不同的背景颜色,在每个“容器”中加入一个“标题”组件,分别显示A、B、C、D、E。 默认弹性布局下,排列方向为“行”,水平对齐方式为“起点对齐”,垂直对齐方式为“起点对齐”,如图6所示。 图6 弹性布局默认效果 排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时,容器内组件从左到右排布。排列方向为“列”时,容器内组件从上到下排布,如图7。 图7 排列方向“列” 水平排列方式属性,决定了容器主轴方向排列方式。当容器排列方向为“行”时,水平排列方式属性作用于水平方向。当容器排列方向为“列”时,水平排列方式属性作用于垂直方向。排列方向为行时起点为左,水平对齐方式选择“中间对齐”和“终点对齐”时,如图8、图9所示。 图8 水平对齐方式选择“中间对齐” 图9 水平对齐方式选择“终点对齐” 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时,垂直排列方式属性作用于垂直方向。容器排列方向为“列”时,垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上,垂直对齐方式选择“中间对齐”和“终点对齐”时,如图10、图11所示。 图10 垂直对齐方式选择“中间对齐” 图11 垂直对齐方式选择“终点对齐” 通过对弹性布局属性的不同组合配置,实现用户想要实现的布局效果。例如,将排列方向设置为“行”,水平对齐方式和垂直对齐方式设置成“中间对齐”,实现居中布局的效果,如图12所示。 图12 弹性布局实现居中
  • 如何使用布局增删改查对象数据 执行下面操作,必须具备如下条件: 条件1:已有了需要增删改查数据的目标对象,则不需要执行条件2、条件3。本章节仅以条件2、条件3中的对象和字段为例,介绍如何通过“布局”增删改查对象数据。 条件2:创建一个简单的对象Class,对象创建过程请参见创建自定义数据对象。 条件3:在对象Class建一个自定义数字类型字段number,自定义字段创建过程请参见定义自定义对象的字段(Fields)。 在对象详情页单击“布局”页签,进入该对象的布局。 如图3,单击“Class Records”后的,会弹出布局预览页面。 图3 如何进入布局预览页面 在布局的预览页面,单击“添加”,新增并保存即完成增加一条数据操作。 图4 如何新增数据 若需要在布局页面添加对象字段,则执行如下操作。 在对象详情页的“布局”页签,单击“Class Records”,进入对象布局页面。 图5 进入对象布局编辑页面 单击左上方的,获取锁,选中页面中的表格组件后,单击右侧属性配置处的“添加字段”,选中添加的字段,单击“确定”,添加字段到表格表头上。 图6 添加字段入口 图7 选中字段 设置完成后,单击,保存修改。 保存成功后,单击,可查看添加字段的数据记录。 另外您还可以使用控制台、脚本或服务编排快速查询数据,详细操作请参见使用SQL查询数据。 图8 控制台查询对象数据 如果想实现批量快速增删改查数据,需深入学习TypeScript脚本语言和AstroZero平台的相关库和接口,请参见脚本开发。
  • 为对象配置内嵌触发器 AstroZero支持用户给对象增加内嵌触发器,实现在增/删/改对象的记录数据时,自动执行内嵌触发器脚本(该脚本由用户自定义,其实就是一段普通的TypeScript脚本,没有输入输出参数)。例如,在对象记录插入前、记录插入后、记录更新前、记录更新后、记录删除前或者记录删除后,自动执行内嵌触发器脚本。 下面以之前创建的对象“CNAME__Class__CST”为例,创建一个记录删除后的触发器,实现在删除一条“CNAME__Class__CST”对象的记录后,把相应的“name”、“CNAME__number__CST”数据记录到日志对象“CNAME__log__CST”中。在此需要提前创建如下的日志对象“CNAME__log__CST”,如何创建请参考上一节中对象“CNAME__Class__CST”的创建过程。 表2 “CNAME__log__CST”对象的字段 对象 字段来源 字段名称 字段数据类型 CNAME__log__CST 自定义字段,手动创建 CNAME__operator__CST 文本,数据长度36。 自定义字段,手动创建 CNAME__className__CST 文本 自定义字段,手动创建 CNAME__classNumber__CST 数字,表示班级编号。 在对象“CNAME__Class__CST”配置页面,单击“内嵌触发器”页签,再单击“新建”。 图5 新建内嵌触发器 输入触发器的基本信息,单击“保存”。 图6 输入信息 表3 内嵌触发器参数说明 参数 参数说明 标签 内嵌触发器在用户界面展示的名称。 名称 内嵌触发器的名称,单击后默认自动生成,与“标签”值保持一致。 事件触发时机 内嵌触发器在什么时候生效,可直接在下拉框中选择。即在系统执行如下某动作时,自动执行触发器的脚本: 插入前:记录插入操作前触发。 修改前:记录更新操作前触发。 删除前:记录删除操作前触发。 插入后:记录插入操作后触发。 修改后:记录更新操作后触发。 删除后:记录删除操作后触发。 描述 内嵌触发器的描述。 编写触发器的脚本,其中对象名称、字段名称和之前创建的保持一致。 对象的内嵌触发器脚本,其实就是一段普通的TypeScript脚本,没有输入输出参数。在脚本中可以通过“对象名.字段名”,来访问当前记录的具体字段值。针对“事件触发时机”为“修改前”或者“修改后”的触发器(即触发器脚本执行条件是对象记录更新前、记录更新后),脚本代码中通过“对象名.字段名”获取到的都是当前记录的具体字段值,目前不支持获取更新前的记录值。 //test_delete_triggerimport * as db from 'db';import * as context from 'context';let name = CNAME__Class__CST.name;let CNAME__number__CST = CNAME__Class__CST.CNAME__number__CST;let logObj = db.dynamicObject('CNAME__log__CST');logObj.insert({ "CNAME__operator__CST": context.getUserId(), "CNAME__className__CST": name, "CNAME__classNumber__CST": CNAME__number__CST,}); 关于脚本的更多说明,请参考脚本开发。 编辑后单击上方的,进行保存。 保存成功后,单击,启用脚本。 启用后在内嵌触发器列表,可查看到当前触发器状态为“ON”,表示当触发条件满足时,AstroZero会自动执行该触发器脚本。 图7 启用触发器 验证触发器。 在对象“CNAME__Class__CST”配置页面,单击“布局”页签,在“Class Records”后单击。 “对象名 Records”显示对象数据的记录列表。预览该页面可增、删、改、查对象数据。 在布局的预览页面,单击“添加”,新增并保存,增加数据,为下一步删除数据做准备。 图8 如何新增数据 单击数据所在列的“删除”,删除数据。 图9 删除数据 在对象“CNAME__log__CST”配置页面,单击“布局”页签,在“log Records”后单击。 图10 预览Records页面 查看到对象“CNAME__log__CST”数据列表中,已记录一条刚删除的“CNAME__Class__CST”数据,触发器生效。 图11 触发器脚本新增的一条数据
  • 什么是校验器和触发器 对象校验器:在向对象中录入记录数据时,为了保证对象数据的有效性,可以定义一些校验规则,对字段值以及各字段之间的逻辑关系进行校验。例如,name字段不能为空,MinPrice字段不能大于maxPrice字段等。 对象触发器:与数据库中的触发器类似,可以为对象定义触发器。在增/删/改对象的记录数据时,自动触发自定义的TypeScript脚本执行。脚本的执行结果将会影响主操作(即增删改记录)的结果,系统保证主操作与触发器在一个事务中执行,要么都成功,要么都失败。
  • 提供AI代码补全功能 代码补全引擎会从开发者历史创建脚本中,学习其编码习惯,从当前代码脚本中获得代码上下文语法知识。开发者在编写脚本代码过程中,系统根据代码上下文和历史代码,对将要编写的代码进行提示,从而自动构建智能代码补全服务,增强IDE代码补全能力。 AI代码补全功能具体使用方法:开发者在代码编辑器中,编写脚本代码过程中,敲击字符时自动触发代码推荐,选中后按Enter补全。开发者将鼠标移动到待查看详细信息的字段,将字段悬浮窗中的文字选中复制粘贴到代码中。 如果想深入了解AI代码补全功能,请继续阅读以下内容: 常规补全:开发者编码过程中,输入任意字符均会触发的补全提示。 例如:开发者键入“@u”,如下图所示,系统根据意图在代码编辑器中给出最可能使用的方法。 定制补全:低代码平台脚本开发中,提供了内部预置系统级依赖库,供开发者调用。用户也可以在前台页面配置对象数据、系统参数、错误码、事件和工作流后,在脚本中引用这些内容。定制补全是指在脚本开发中引用依赖库和各配置项时,IDE触发的对潜在内容名称的补全提示。 依赖库补全:脚本代码中引入依赖的代码行时,对依赖库的名称进行推荐提示。如下图所示,开发者键入“import * as xxx from”后,提示z开头的依赖库名称。 表名(即对象名)补全:脚本代码引入对象数据的代码行中,推荐提示对象名称。如下图所示,开发者键入“@useObject”后提示m开头的对象名。 表字段提示:脚本代码中引用表字段时,鼠标移动到表名上,悬浮窗会对表名进行提示。如下图所示,开发者鼠标放在表名上,展示所有字段。 错误码补全:脚本中引入数据表的代码行中,对表名称进行推荐提示。如下图所示,开发者键入“setI18nError”后,提示相关错误码名。 错误码内容提示:脚本代码中引入数据表的代码行中,对表名称进行推荐提示。如下图所示,鼠标放在错误码名称上,展示相关描述。 系统参数补全:脚本代码中引入系统参数的代码行中,对参数名称进行推荐提示。如下图所示,开发者键入“sys.getParameter”后,提示相关系统参数。
  • 脚本开发有什么限制 不支持以下正则表达式语法 (?=) // Lookahead (positive), currently a parsing error(?!) // Lookahead (backhead), currently a parsing error\1 // Backreference (\1, \2, \3, ...), currently a parsing error 使用场景限制 触发器目前只能使用ES5 JavaScript语法。 独立的脚本支持TypeScript语法。 Script中只可使用平台封装的标准库API,不能使用Formula公式。 console不兼容特性 console模块目前不支持格式化参数功能。 console.log('在 main 中,a.done=%j,b.done=%j', a.done, b.done); 不支持异步ES 7语法和库,如async/wait。
  • 代码编辑器 在代码编辑区域,在符号上单击鼠标右键,会出现如图2所示代码导航功能。除此之外,脚本编辑器还提供了智能提示、代码补全、显示光标的所在行和列信息等能力。 图2 代码导航 Go to Definition 在代码编辑区域,在符号上单击鼠标右键,选择Go To Definition,可以跳转到符号的定义代码部分。 Go to References 在代码编辑区域,在符号上单击鼠标右键,选择Go to References,可以查看符号在脚本中的引用情况。 Run 在代码编辑区域,在符号上单击鼠标右键,选择Run,执行脚本。 Go to Symbol 在代码编辑区域,单击鼠标右键,选择Go To Symbol,选择任意符号,可以跳转到该符号的定义代码部分。 Peek Definition 在代码编辑区域,在符号上单击鼠标右键,选择Peek Definition,可以查看代码的定义。 Peek References 在代码编辑区域,在符号上单击鼠标右键,选择Peek References,可以查看代码的引用。 Rename Symbol 在代码编辑区域,在符号上单击鼠标右键,选择Rename Symbol,可重命名所选符号。 Change All Occurrences 在代码编辑区域,选中一个字符串,单击鼠标右键,选择Change All Occurrences,可以批量修改代码中所有包含该字符串的内容。 Format Document/Format Selection 在代码编辑区域,选择一块代码,单击鼠标右键,选择Format Selection;或者直接在任意位置单击鼠标右键,选择Format Document,可以对代码进行格式化排版。 Fix lint issue 在代码编辑区域,选择一块代码,单击鼠标右键,选择Fix lint issue;或者直接在任意位置单击鼠标右键,选择Fix lint issue,可以对代码进行静态规范错误修复。 Cut/Copy 在代码编辑区域,选择代码单击鼠标右键,选择Copy,可以剪切或者拷贝所选代码。 Command Palette 在代码编辑区域,在符号上单击鼠标右键,选择Command Palette或者按F1,进入命令面板,可以执行很多编辑功能。 图3 命令面板 Hover 把鼠标停留在符号上,可以查看符号的定义概要。再按住Ctrl键,单击符号,可以查看符号更加详细的定义。 例如,鼠标停留在“useObject”上,显示如下图所示,可查看其定义概要。按Ctrl键,单击“useObject”,可查看更详细的定义。 图4 查看定义概要 图5 查看更详细的定义 Bracket matching 高亮显示与选择内容匹配的符号,如{}、()、[]等。 图6 Bracket mathching Errors & Warnings 编辑代码时,如果有语法错误,会在这个语法下面显示红色波浪线,鼠标移动上去,会显示具体错误。 图7 Errors&Warnings Go to Line 按“Ctrl + g”,再输入行号,可以跳转到指定的代码行。 Search and Replace 按“Ctrl + f”,输入关键字,可以搜索当前代码的内容。表示搜索的内容分别支持大小写匹配、全文匹配、正则表达式。 按Ctrl + h,输入关键字,可以查找并替换代码中的内容。 Code Complete 全局符号补全 图8 complete_symbol 对象成员补全 图9 complete_member 参数补全 图10 complete_parameter Comment Code 在代码编辑区域,选择一块代码,输入“ctrl + /”组合键,可以注释或去注释选择的代码块。 Save File 在代码编辑区域,“按Ctrl + s” ,或者单击右上角的保存图标,可以保存脚本。
  • 样例代码解读 通过以下详细的脚本代码内容解读,对脚本有一个更具体的认识。 一般情况下,编写脚本的大致流程为: 按需引入平台标准库。 图11 引入平台标准库 定义出参、入参结构。 图12 定义入参 图13 定义出参 定义方法以及使用的对象。 图14 定义方法及使用对象 进行数据库操作。 图15 数据库相关操作 以下将通过解读一个脚本样例,带您了解脚本的总体结构框架及编写要求。 import * as decimal from 'decimal';@action.object({type: "param"})export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject;}@action.object({type: "param"})export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal;}@action.object({type: "param"})export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[];}@action.object({type: "method"})export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; }} 上述示例脚本主要分为如下三部分: 导入标准库或其他模块。 上例中,第1行表示使用平台提供的decimal库。 import * as decimal from 'decimal'; 除了平台预置的标准库,还可以声明对其他自定义模块的引用。例如,已提前开发了一个脚本cirle,可以用如下方式加载它。 import * as circle from './circle'; 定义输入、输出变量。 脚本可以有多个输入、输出参数,也可以没有。所有的输入或输出参数,必须封装在一个class中,作为实例成员。 本例中,脚本有6个输入参数,被封装为ActionInput。每个参数都必须定义其参数类型,同时还可以定义是否必填、标签、最大值、最小值等可选属性。 @action.object({type: "param"})export class ActionInput { @action.param({type: 'String', required: true, label: 'your name', description: 'please input your name'}) name: string; @action.param({type: 'Number', required: true, min: 1, max: 100, message: 'age must during [1, 100]'}) age: decimal.Decimal; @action.param({type: 'Date', pattern: 'yyyy-MM-dd'}) birthday: Date; @action.param({type: 'String', isCollection: true}) schools: string[]; @action.param({type: 'Boolean'}) married: boolean; @action.param({type: 'MyObject'}) obj: MyObject;} 因为第6个输入参数“obj”的参数类型为自定义对象,所以还需要给出“ MyObject”的定义。 @action.object({type: "param"})export class MyObject { @action.param({type: 'String'}) something: string; @action.param({type: 'Number'}) otherthing: decimal.Decimal;} 脚本中有1个输出参数,被封装为ActionOutput。 @action.object({type: "param"})export class ActionOutput { @action.param({type: 'String', isCollection: true}) greets: string[];} 定义方法 样例中,ActionDemo是外部调用的class,使用export导出。ActionDemo定义了一个action method,使用action.method装饰,表明调用脚本时从此方法入口。greet是class的实例方法,其输入、输出参数就是前面定义的ActionInput和ActionOutput。在一个脚本文件中,action.method只能使用一次。 @action.object({type: "method"})export class ActionDemo { @action.method({ label: 'greeting something', description: 'greeting something.', input: 'ActionInput', output: 'ActionOutput' }) public greet(inarg: ActionInput): ActionOutput { console.log('name = ', inarg.name); console.log('age = ', inarg.age); console.log('birthday = ', inarg.birthday); console.log('schools = ', inarg.schools); console.log('married = ', inarg.married); console.log('obj = ', inarg.obj); let out = new ActionOutput(); out.greets = ['hello', 'hi', 'how are you', 'how old are you', 'long time no see']; return out; }} 脚本编辑页面不支持单步调试,样例里的console.log可实现在日志里打印过程输出,方便代码调试。
  • 脚本主要用什么语言和库 低代码平台的脚本引擎采用TypeScript语言。脚本执行时,TypeScript语言会被翻译成JavaScript语言,由JavaScript引擎执行。 在JavaScript es5的官方标准库外,低代码平台还扩展了10+预置标准库(即预置API),帮助您更高效地开发脚本,有关系统预置的标准库说明请参见脚本中预置的API。 库的使用方法举例: import * as http from 'http';
  • 脚本用什么编辑器 AstroZero提供一个方便简洁的在线开发IDE,即脚本编辑界面,脚本编辑界面开发体验接近离线的开发工具,具有如下优势: 现代化的编辑界面,语法高亮显示。 智能提示,智能补全。 精确查看定义,代码预览,查找引用。 快速在线编译。 友好的语法错误提示。 可以使用console.log,写 日志分析 复杂的问题。 脚本编辑界面如图1所示,您可以在线编辑、测试和发布脚本。 图1 脚本编辑界面 按钮区域 脚本编辑页面常用的图标按钮区,具体功能说明如表1所示。 表1 图标说明 图标 说明 / 获取锁、释放锁。脚本在获取锁后,才能进行编辑。 / ,单击即可启用脚本,该图标高亮时,表示当前脚本已被启用。 ,单击即可禁用脚本,该图标非高亮时,表示当前脚本未启用。 说明: 脚本开发完成后,需要启用脚本。只有启用状态的脚本,才能在被其他资源(如服务编排、标准页面)调用时,搜索到。 保存脚本。 另存为脚本。 设置脚本属性,如可见性、是否开启允许覆盖等。 执行脚本。 / 操作回退、撤销回退。 对已开发好的脚本代码进行性能检查、兼容性检查和静态配置检查。 说明: 代码检查的具体操作,请参见脚本代码性能检查规则说明。 刷新当前引入的脚本到最新状态。 单击该图标,脚本编辑器可分屏显示。 脚本启用后,单击右上角的,可查看该组件的调用关系图。 版本对比。 切换版本。 代码编辑区域 在该区域开发代码,实现功能。代码编辑器提供智能提示、代码补全、显示光标的所在行和列信息等能力,更多介绍请参见提供AI代码补全功能。 脚本编辑页面同样支持离线编辑器中的常规快捷键操作,例如“Ctrl+S”可以保存当前修改,“Ctrl+H”可以调出查找替换对话框,您也可以根据自己的开发习惯,尝试各种快捷键操作。 测试区 运行代码后的显示区域。在“输入参数”页签输入参数后,单击测试区右侧的运行按钮,运行脚本。即可在“输出参数”页签,查看输出结果是否正确。在“问题”和“日志”页签,查看问题和日志。除此之外,还支持清除日志输出、运行脚本并动态检查和保存输入参数。
  • 前提条件 若已有需要导入导出数据的目标对象,可直接执行导入导出操作。 若没有目标对象,需要先创建一个对象,再创建自定义字段,配置“允许API批量访问”后,再执行导入导出操作。 新建一个简单的对象Class,对象创建过程请参见创建自定义数据对象。 在对象Class中创建一个自定义数字类型字段number,自定义字段创建过程请参见定义自定义对象的字段(Fields)。 在对象Class的“基本信息”页签中,勾选“允许API批量访问”,如图1所示。 图1 自定义对象Class
  • 如何使用控制台查询数据 参考登录经典应用设计器中操作,进入经典版应用设计器。 在应用开发页面的左侧导航栏中,单击,弹出控制台页面。 图1 控制台入口 在“对象管理”页签,输入SQL语句,单击“执行”。 例如,输入“select CNAME__number__CST from CNAME__Class__CST”,即可显示查询的字段列,如图2所示。关于控制台的更多介绍,请参见使用控制台分析查询SQL。 图2 执行SQL查询对象“Account”数据
  • 如何使用服务编排查询数据 使用服务编排中“记录查询”图元,查询自定义对象Class(CNAME__Class__CST),实现“select name, CNAME__number__CST from CNAME__Class__CST”。 服务编排开发的相关内容,请参见如何使用服务编排开发数据的增删改查。 参考如何开发服务编排中操作,新建服务编排“flowSearchData”。 在全局上下文中,创建变量“name”、“number”,类型分别为“文本”、“数字”。 在服务编排的“基本”图元中,拖拽一个记录查询到画布,参考图4,配置对象和输出。 图4 正确配置“记录查询” 连接开始图元和记录查询图元,参考下图,配置服务编排出参。 图5 正确配置“输出” 配置完成后,单击,保存服务编排,单击,进入运行页面。 图6 保存服务编排并运行 本服务编排不需要输出参数,请直接单击“运行”,即可查看输出的json格式结果。 图7 服务编排实现查询自定义对象的字段
  • 场景描述 本示例以新建一个学生成绩管理对象为例,为您介绍对象间关联的相关内容。本示例中对象里的班级对象是通过Lookup(字段类型)关联学生、班主任对象,学生对象通过LooKup关联课程成绩对象。请参见创建自定义数据对象和定义自定义对象的字段(Fields)新建下面的Class__CST、HeadTeacher__CST、Student__CST、Grades__CST对象和它们分别对应的自定义字段。 表1 对象说明 自定义对象名 自定义字段名 字段类型 对象中的字段说明 Class__CST number__CST Number 班级编号。 HeadTeacher__CST class__CST Lookup 班级编号。 该字段的取值来源于“Class__CST”对象。 Student__CST class__CST Lookup 班级编号。 该字段的取值来源于“Class__CST”对象。 Grades__CST student__CST Lookup 学生信息。 该字段的取值来源于“Student__CST”对象。 course__CST text 课程。 score__CST Number 成绩分数。 对象“Class__CST”这种类型的名字前面一般带命名空间,如“XXX__Class__CST”。name字段是标准字段,在对象创建之后,已经存在,不需要手动创建: 班级Class__CST的name字段,如20届一班、二班、三班。 班主任HeadTeacher__CST的name字段,如王老师、李老师、陈老师。 学生Student__CST的name字段,如小明、小红、小兰。
  • 调试事件 打开一个标准页面。 图1 标准页面实例 选择一个组件,例如“上传”组件,在右侧区域切换到“事件”页签,单击“文件上传”事件后的“+”,进入“上传”事件的编排页面。 图2 单击文件上传后的加号 在代码编辑区域,使用“debugger” 语句设置断点,单击“创建”。 图3 使用“debugger”设置断点 返回标准页面开发界面,单击,保存标准页面后,单击,预览标准页面。 在弹出的预览页面,按“F12”或者“Ctrl + Shift + I”,开启浏览器调试工具。 在“Console”页签,查看日志相关信息。在“Network”页签,查看网络请求信息。 图4 “Console”页签查看日志相关信息 图5 在“Network”页签查看网络请求信息 单击上传按钮上传文件,由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点,因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点,按“F10”可跳转下一行,根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码
  • 方式二:在组件的事件代码中,直接调用服务 除了将服务编排、脚本和API封装成模型调用外,还可以在组件的事件代码中,直接调用服务。 在代码编辑页面左侧,单击“服务类”下的“服务编排”按钮,获取调用服务编排的代码。通过简单的修改,如服务编排的名称,版本号,即可初始化并得到服务编排对象。 系统提供了多种内置API,用来操作服务编排对象。例如,run方法用来一次性执行完服务编排,也可以调用start、next、back、finish、resume、terminate等方法,实现在服务编排特定阶段执行回调方法。 图7 服务编排快捷代码 在代码编辑界面左侧,单击“服务类”下的“脚本编排”按钮,获取调用脚本编排的代码。通过简单的修改,如脚本编排的名称,即可初始化并得到脚本编排对象。调用平台内置run方法,来执行脚本。 图8 脚本编排快捷代码 在代码编辑界面左侧,单击“服务类”下的“服务请求”按钮,获取调用API请求的代码。通过将样例代码中的url替换成真实业务url,配置请求参数,请求方法和请求头信息,调用平台内置run方法即可请求API。 图9 服务请求快捷代码 对象、服务编排和脚本编排也可以配置成API,通过API的方式进行调用,更多内容请参见API接口。
  • 什么是执行后台逻辑 在标准页面执行后台逻辑,即在标准页面组件的事件中,调用其他服务补充和实现当前事件的行为。 例如,在员工信息录入页面中,在信息“提交”按钮的“点击”事件中,调用API,将表单中的员工信息发送到数据库进行保存。或者调用在标准页面中的服务编排或脚本,并对需要保存的信息进行预处理。 标准页面执行后台逻辑一般是通过调用标准页面服务和调用第三方接口两种方式实现。本章节主要介绍调用标准页面服务,关于标准页面调用第三方接口的内容请参见如何调用第三方接口。 标准页面的服务主要分为服务编排(Flow)、脚本(Script)和公共接口(API)三种,对应的页面模型为“服务”。 图1 页面模型(服务)
  • 操作步骤 参考登录经典应用设计器中操作,登录经典版应用设计器。 将鼠标放在应用的某个文件夹上(如Logic),单击“+”,选择“决策表”。 设置决策表的标签和名称,单击“添加”。 图1 创建决策表 设置输入参数和输出参数,并配置规则。 单击输入参数或者输出参数后的“+” ,可增加参数。 单击参数后的,可设置数据类型和描述信息。 图2 设置数据类型 单击“添加规则”,可设置输入参数和输出参数之间的值映射规则,从下拉框选择配置逻辑。 图3 添加规则 图4 设置后效果 单击页面上方的,保存决策表。 单击页面上方的,启用决策表。
  • 操作步骤 参考登录经典应用设计器中操作,登录经典版应用设计器。 将鼠标放在某个文件夹上,单击加号,选择“BPM”,去创建一个BPM。 图1 创建一个BPM 在BPM开发设计页面,选中空白区域,在右侧配置界面选择。 在“基本信息”页面,可以设置BPM的流程是否可以撤销,以及通过哪个元素后不允许撤销。 图2 BPM基本信息配置 设置后,在运行态可查看到“撤销”按钮,终止的流程该按钮置灰。 图3 运行态效果 单击,在运行态配置页面的“实例显示名”中,可配置BPM运行后,BPM实例在运行态的显示名。 在运行态配置页面的“BPM布局”区域,单击实例详情后的,可编辑BPM运行态布局。 图4 编辑BPM运行态布局 在编辑布局页面,支持修改“实例基本信息”、“当前任务”、“流程历史”的运行态显示标题,还可以编辑“流程历史”中需要显示的列。 单击编辑器上方的,保存BPM。 运行BPM后,在经典版应用设计器左侧,单击,可预览该应用。 在应用预览界面,单击“历史”,在历史任务中单击该实例后的“查看”,可查看到该BPM的运行态布局,查看布局是否符合预期。 图5 预览应用 图6 历史任务 图7 BPM运行态布局
  • 流式布局高级页面 在流式布局中,拖拽到页面中的组件,将根据从上到下、从左到右的顺序依次排列,组件的高度将根据组件内容大小进行自适应,宽度可按百分比进行配置。 创建流式布局类型高级页面。 参考登录经典应用设计器中操作,登录经典版应用设计器。 在模块树中,将鼠标放在某个文件夹上,单击加号,选择“高级页面”。 设置高级页面标签和名称,布局类型选择“流式布局”,单击“添加”。 图9 新建流式布局类型高级页面示例 绝对布局类型高级页面与流式布局类型高级页面不同之处。 在流式布局类型高级页面中,不可拖拽组件位置和大小,同样在“组件属性设置”栏中,也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。 流式布局类型高级页面的画布划分为12列,新拖入的组件默认宽度为100%,即占据12列。 也可以通过拖拽组件最右侧边框,调节其所占列数。 图10 流式布局中调整组件宽度示例 当原上下排布的多个组件所占列数之和小于12时,会自动调整到同一行。如下图所示,三个组件的所占列数分别调整为4,则本例中三个组件将会按照从左到右的顺序依次排布。 通过拖拽的方式,调整组件上下、左右的排布次序。 图11 调整组件上下、左右的排布次序示例 流式布局类型高级页面,在高级页面工具栏中新增悬浮模式,开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列,可以设置其相对位置。 图12 悬浮模式示例 上图中标注说明如下: 标注1:在高级页面工具栏中开启悬浮模式。 标注2:拖入新组件。 标注3:悬浮模式下,组件相对位置设置选项。 相对定位 Screen:该组件基于当前视图的相对位置。 Layout:该组件基于当前布局的相对位置。 Widget:该组件基于其他组件的相对位置。 组件位置:设置相对定位的具体方位,共9个设置项。 显示顺序:当组件出现堆叠时,可以设置组件的显示顺序,设置值越大,显示越靠前。 最大高度:设置该组件的最大高度,单位为px或%。 宽度:设置该组件的宽度,单位为px或%。
  • 绝对布局高级页面 创建绝对布局类型的高级页面。 参考登录经典应用设计器中操作,登录经典版应用设计器。 在模块树中,将鼠标放在某个文件夹上,单击加号,选择“高级页面”。 设置高级页面标签和名称,布局类型选择“绝对布局”,单击“添加”。 图1 新建绝对布局类型高级页面 开发绝对布局类型的高级页面。 以开发如下所示高级页面为例,向您介绍绝对布局类型高级页面中组件的布局方法。 图2 绝对布局类型高级页面组件布局示例 如上图所示,示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方,单击,设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件,通过拖拽进行初步位置、大小调整。 图4 拖拽所需的组件到画布中 设置文本编辑组件内容为“绝对布局类型高级页面”,字号为“大号”。 图5 设置文本编辑组件内容 通过组件属性,精确设置组件大小。 本例中,设置组件宽度为600px、高度为350px。 图6 精确设置组件大小 复制组件。 将上图左侧组件逐个复制,并将其拖拽到右侧,通过对齐提示线将其与左侧组件对齐。 图7 复制组件 单击页面上方的,保存页面。 单击,预览高级页面,查看当前页面在运行态的效果。 图8 预览高级页面
  • BPM运行依赖 BPM的运行,依赖如何管理BPM中对象。 表4 BPM运行依赖的对象说明 分类 对象名 说明 流程核心对象 FlowInstance BPM流程实例表。 TaskInstance BPM任务实例表,其中“processInsID”字段指向所属的BPM流程实例FlowInstance。 ValueInstance BPM变量值表,其中“parent”字段指向所属的BPM流程实例FlowInstance。 SLAInstance BPM的SLA实例表,其中“parent”字段指向所属的BPM流程实例FlowInstance, FlowHistory BPM流程流转历史表,记录了流程的每一步的流转历史轨迹。 辅助对象 TaskComment 任务评论,其中“processInsID”指向所属的BPM流程实例,“taskID”指向所属的任务实例。 AttachFile 流程附件,其中“instanceID”字段指向所属的BPM流程实例,“taskID”字段指向所属任务实例。
  • 属性绑定 除了值绑定外,不同组件还拥有不同的属性,例如禁用、只读、隐藏和必填等。这些属性也可以绑定到数据模型或模型中的某个字段上,类似vue中的v-bind语法。 “模态框”组件默认弹出是不可拖动的,在上例的基础上增加一个按钮,当单击该按钮让模态框变为可拖动的,以此来演示“属性绑定”,如图9所示。 图9 新增一个按钮用来控制模态框“可拖动”属性 新增一个自定义模型“modalDrag”并将该模型与“模态框”组件的“可拖动”属性绑定,如下图所示。 图10 模态框组件属性绑定 与上一个例子类似,在新增的“模态框拖动”按钮的点击事件中,将“modalDrag”设置为true。 图11 设置事件 图12 编辑代码 单击,保存页面后,单击,进入预览页面。在预览界面即可看到模态框第一次弹出时默认不可拖动,关闭模态框单击“模态框拖动”按钮后,模态框再次弹出即为可拖动效果。 图13 属性绑定演示效果
  • 值绑定 值绑定类似vue中的v-model语法,组件上创建双向数据绑定。值绑定会根据组件类型,自动选取正确的方法来更新元素。同时,负责监视各类引起绑定数据变化的事件以更新数据。 为了方便演示说明,新建一个标准页面,向页面中拖动一个“按钮”组件和一个“模态框”组件。将模态框绑定在一个数据模型上,当按钮被单击时模态框弹出,实现组件间通过数据模型交互的效果,如图2。 图2 “值绑定”示例页面 选中“模态框”组件,在右侧属性配置面板配置值绑定,选择一个数据模型进行绑定,此处新建一个自定义模型“modalShow”,如图3,单击“下一步”,再次单击“下一步”,单击“确定”,选中该模型。 图3 新建模型 图4 选择模型 图5 完成值绑定后页面展示效果 支持选择任意类型的模型,进行值绑定,更多标准页面模型内容请参见如何获取后台数据。 选中“按钮”组件,在按钮组件的事件配置面板,为按钮组件添加“点击”事件。 图6 为“按钮”组件添加“点击”事件 在弹出的编辑面板,单击左侧“设置模型实例数据”,将代码粘贴到编辑面板。将模型名称替换为待修改的模型“modalShow”,值设置为“true”。 图7 编辑单击事件 单击,保存页面后,单击,进入预览页面。在预览界面,单击“弹出模态框”按钮,“模态框”组件弹出。 图8 “值绑定”演示效果 以上示例简单说明了,如何通过“值绑定”实现组件间的交互。将组件的值(value)绑定在一个模型上,通过其他组件触发事件,改变绑定数据模型的值。例如,此例中“模态框”组件的值,绑定在“modalShow”模型上,“按钮”组件的点击事件将“modalShow”改变为true,模态框即显示,单击“模态框”关闭按钮“modalShow”模型的值变为false。
共100000条