华为云用户手册

背景信息 根据图元的不同使用场景，BPM图元可以分为以下三类： 事件（Events）：驱动流程流转的事件图元，用来表明BPM的生命周期中发生的事件，例如开始、捕获信号等。 网关（Gateways）：根据条件分发的网关图元。网关用来控制流程的执行流向，可理解为决策、判断。 活动（Activities）：提供用户交互或系统调用的图元，是BPM的核心图元，可理解为节点或者步骤，例如调用脚本、用户需要做的任务。 图1 BPM组成图元

抛出信号 当BPM执行到达“抛出信号”事件时，引擎向系统内部发出一个事件，事件发出后流程沿后续路线继续执行。抛出的信号，可以被“捕获信号”订阅处理。 使用该图元时，需要配置抛出的具体事件，并需要在“输入参数”配置事件参数。 图3 抛出信号的“事件配置”页面 事件：请选择待发送的事件。 分区字段：从事件中选择一个自定义参数用作分区字段，根据该字段值进行路由，相同的值将路由到同一个分区。如果不指定，则默认随机路由到不同分区，从而提升并发处理性能。 目标/源：配置事件的数据，即为事件自定义参数赋值，将“源”取值赋值到“目标”中。

排他网关 排他网关用来在流程中，实现一组分支的唯一决策。系统将按照“条件顺序”评估流出网关的分支，流程会执行第一个连线条件被评估为true（当多个条件为true时，将执行第一个决策）的分支，并且不再继续评估下面的分支。如果所有分支条件决策都为false且该网关定义了一个默认的连线，那么该默认分支将被执行。如果没有可到达的分支，抛出异常，流程被中断，在BPM设计上应避免这种情况发生。 图1 排他网关配置页面 图2 分支连线配置

流式布局高级页面 在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。 创建流式布局类型高级页面。 参考如何登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置高级页面标签和名称，布局类型选择“流式布局”，单击“添加”。 图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 预览高级页面

自定义组件结构 自定义组件包，目录结构如下。 // 组件目录结构my-package.zip├── components| └── my-component // my-component 组件| ├── custom-property-editor // 自定义属性编辑控件（可选）| │ └── index.js //| ├── custom-panel // 自定义属性面板（可选）| │ └── index.js //| ├── design-time // 组件设计态代码（可选）| │ └── index.js //| ├── resources // 组件图片资源（可选）| │ └── default.png //| ├── index.js // 组件运行态代码| ├── my-component.json // 组件定义文件├── manifest.json // 组件清单文件└── README.md // 组件包说明文件 组件zip包的目录及文件的名称不能是中文，且编译后的组件包大小应在1M以内。 组件名遵循Vue组件命名，并且要在当前应用中唯一。您可参考Vue框架指南定义Vue组件代码，并参考Vue组件打包指南对Vue组件进行打包，打包后才能使用。 表1 组件包文件说明 目录/文件 是否可选 描述 custom-property-editor/index.js 可选 自定义属性的编辑控件。 custom-panel/index.js 可选 自定义属性的面板。 design-time/index.js 可选 组件设计态。 resources目录 可选 组件相关静态资源，如组件图片。 index.js - 组件运行态。 my-component.json - 组件定义文件。 组件包样例。 单击链接，可下载样例包。 图1 目录格式 组件描述文件。 组件描述文件test-project.json是自定义组件配置面板的规格文件，用于校验和辅助编写自定义组件配置面板json文件。该文件编写需遵循JSON Schema规范，以便于与主流的编辑器（vscode、atom、sublime text和webstorm）集成。 组件描述文件在插件包位置如下： 图2 组件描述文件 组件描述文件，既可以在插件包开发时修改，也可以在插件包编译以后修改。编译之后，组件描述文件的位置如下所示。 图3 编译后的组件描述文件位置 图4 组件描述 样例代码： { // 下面的属性会用于页面组件右侧属性中 "name": "my-component", "title": "%component.title%", "description": "%component.description%", "category": "add-on", "icon": { "default": "./resources/default.png", "hover": "./resources/hover.png" }, // ... 此处省略了组件的其他属性} 表2 组件约束 参数名 功能 限制 描述 name 组件名 需要以英文字母开头，支持数字与特殊字符“_”、“-”，不支持中文，长度在64字符以内。 建议由厂商名_组件名_版本号组成，例如aaa_img-button_1.1.1。 组件名会存放在界面元数据的type中，如type: "my-component1"。 配置文件中的名称，用于后台元数据存储、解析等。 zip包名应该与name值保持一致，例如此处name为img-button，zip包名必须为img-button.zip。 title 组件别名 建议简短并能展示组件特性，长度在100字符以内。 组件别名，会显示在标准页面开发界面左侧“组件”页签下的扩展组件中，建议简短并能展示组件特性。 description 组件描述 长度在200字符以内。 当鼠标悬停时，展示的组件描述信息。 category 组件分类 使用平台提供的组件分类。 为了保持界面构建器组件分类一致性，请使用平台提供的组件分类，具体请参考表3。 icon 组件图标 png格式，包括2个（未选中时和选中时），每个png的大小在16K以内。 在页面中展示的图标，自动压缩到40*40。 其他 包大小 编译后的组件包大小，需要在1M以内。 - 表3 组件分类 平台分类 说明 navigation 导航组件，例如菜单、工具栏或侧栏。 data 数据组件，可以查看和/或编辑应用程序中的数据，例如Form、Table或List。 common 通用组件，例如标签、图片、标题或段落。 container 容器组件，可以包含其他组件的容器。例如，栅格布局组件Row/Col、流式布局组件、Panel、Tabs、Collapse或WidgetContainer。 input 显示和编辑实体属性，例如文本框、日期选择器。 file 文件处理组件。例如，文件上传/下载组件、图片浏览组件或PDF预览组件。 button 触发动作的按钮，例如保存按钮、页面跳转按钮。 report 聚合数据并以表格或图表的形式显示，例如图表、透视表。 widget 业务卡片。 add-on 扩展组件。

场景描述 自定义主题时，可以自定义修改标准页面的样式。设置完并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。然后先单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。 图1 启用前效果图 图2 启用后效果图

操作步骤 参考如何登录经典应用设计器中操作，进入经典版应用设计器。 在左侧菜单栏下方，单击“配置”。 图3 选择“主题配置” 在“主题配置”页签，配置“显示名称”，该名称将会显示在运营配置页签。 新建主题。 新建主题有如下两种方式，请根据需要选择所需的方式。 代码化方式 在主题管理中，单击“代码化新建”，弹出“创建主题”页面，如图4，界面中包含了所有组件的样式。 图4 创建主题 修改相关的组件样式代码，关于组件的介绍请参考平台标准组件介绍。 例如，在输入框组件添加一个背景色，设置为红色，如图5。 图5 添加背景色 修改样式后，输入“主题名称”，单击页面右上方的“保存”进行编译保存，如图6。 图6 编译保存 若编译不成功，您需要修改主题配置，单击禁用该主题，再单击编辑按钮。 关闭“创建主题”页面，返回“主题配置”页签。 在主题列表中，单击刚配置好主题后的打开开关“OFF”，打开后显示如图7所示，启用该主题。 图7 开启主题 界面化方式 在主题管理中，单击“界面化新建”。 配置相关组件或者颜色、排版主题样式。 例如，修改按钮组件的样式，在左侧选择“按钮”组件，在中间区域直接修改界面参数设置样式。 鼠标悬浮在界面参数上，会有参数说明。 在右侧设置“主题名称”，例如“按钮字体颜色为黄色”，单击页面右上方保存图标。 设置后，在租户库中会出现创建的主题。 图8 查看库 打开标准页面，在右侧“库”中单击“新增库”，查找并引入主题库，单击“确定”。 图9 新增库 图10 引入库 返回标准页面，单击“预览”按钮，在弹出的效果页面会看到自定义样式后的效果，如图11。 图11 代码化新建的效果界面

方式二：在组件的事件代码中，直接调用服务 除了将服务编排、脚本和API封装成模型调用外，还可以在组件的事件代码中，直接调用服务。 在代码编辑页面左侧，单击“服务类”下的“服务编排”按钮，获取调用服务编排的代码。通过简单的修改，如服务编排的名称，版本号，即可初始化并得到服务编排对象。 系统提供了多种内置API，用来操作服务编排对象。例如，run方法用来一次性执行完服务编排，也可以调用statrt、next、back、finish、resume、terminate等方法，实现在服务编排特定阶段执行回调方法。 图7 服务编排快捷代码 在代码编辑界面左侧，单击“服务类”下的“脚本编排”按钮，获取调用脚本编排的代码。通过简单的修改，如脚本编排的名称，即可初始化并得到脚本编排对象。调用平台内置run方法，来执行脚本。 图8 脚本编排快捷代码 在代码编辑界面左侧，单击“服务类”下的“服务请求”按钮，获取调用API请求的代码。通过将样例代码中的url替换成真实业务url，配置请求参数，请求方法和请求头信息，调用平台内置run方法即可请求API。 图9 服务请求快捷代码 对象、服务编排和脚本编排也可以配置成API，通过API的方式进行调用，更多内容请参见API接口。

什么是执行后台逻辑 在标准页面执行后台逻辑，即在标准页面组件的事件中，调用其他服务补充和实现当前事件的行为。 例如，在员工信息录入页面中，在信息“提交”按钮的“点击”事件中，调用API，将表单中的员工信息发送到数据库进行保存。或者调用在标准页面中的服务编排或脚本，并对需要保存的信息进行预处理。 标准页面执行后台逻辑一般是通过调用标准页面服务和调用第三方接口两种方式实现。本章节主要介绍调用标准页面服务，关于标准页面调用第三方接口的内容请参见如何调用第三方接口。 标准页面的服务主要分为服务编排（Flow）、脚本（Script）和公共接口（API）三种，对应的页面模型为“服务”。 图1 页面模型（服务）

调试事件 打开一个标准页面。 图1 标准页面实例 选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。 图2 单击文件上传后的加号 在代码编辑区域，使用“debugger” 语句设置断点，单击“创建”。 图3 使用“debugger”设置断点 返回标准页面开发界面，单击，保存标准页面后，单击，预览标准页面。 在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。 在“Console”页签，查看日志相关信息。在“Network”页签，查看网络请求信息。 图4 “Console”页签查看日志相关信息 图5 在“Network”页签查看网络请求信息 单击上传按钮上传文件，由于之前在上传事件的自定义JS代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。 按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。 图6 调试js代码

提供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，可以对代码进行格式化排版。 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所示。 图1 定义模型 低代码平台支持四类模型（如图1），每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义函数 开发者自由定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的更多信息请参考3.1 了解对象模型。 系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。 系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务 服务模型是由后台服务映射生成的。当前支持与服务编排或脚本映射，关于服务模型的更多信息请参考7.1 什么是服务编排和8.1 什么是脚本？。 参数根据后台服务的入参、出参映射生成为inputParam和outputParam节点。 系统自动生成run方法 ，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件 事件模型是由后台事件的字段映射生成的，并且支持websocket刷新模型数据。 参数根据后台事件的字段映射生成。 直接使用 直接使用 除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。 获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。 若上一步来源选择“自定义函数”，需要添加子节点自定义参数及类型。 若上一步来源选择“对象”，需要配置模型关联的对象以及字段。 若上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者具体的API。 若上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。

数据绑定方式 在标准页面开发界面，选中任意组件，在右侧“属性”页签进行数据绑定。 数据绑定分为值绑定和属性绑定，如图2所示，绑定会在指定组件上，创建双向数据绑定。 值绑定：表单、表格、列表视图对应的数据绑定，以及输入框、下拉框等基础组件对应的value绑定，类似Vue的v-model。 属性绑定：将组件的某个属性，如只读、禁用、必填等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。 图1 数据绑定配置面板

属性绑定 除了值绑定外，不同组件还拥有不同的属性，例如禁用、只读、隐藏和必填等。这些属性也可以绑定到数据模型或模型中的某个字段上，类似vue中的v-bind语法。 “模态框”组件默认弹出是不可拖动的，在上例的基础上增加一个按钮，当单击该按钮让模态框变为可拖动的，以此来演示“属性绑定”，如图9所示。 图9 新增一个按钮用来控制模态框“可拖动”属性 新增一个自定义模型“modalDrag”并将该模型与“模态框”组件的“可拖动”属性绑定，如下图所示。 图10 模态框组件属性绑定 与上一个例子类似，在新增的“模态框拖动”按钮的点击事件中，将“modalDrag”设置为true。 图11 设置事件 图12 编辑代码 单击，保存页面后，单击，进入预览页面。在预览界面即可看到模态框第一次弹出时默认不可拖动，关闭模态框单击“模态框拖动”按钮后，模态框再次弹出即为可拖动效果。 图13 属性绑定演示效果

值绑定 值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。 为了方便演示说明，新建一个标准页面，向页面中拖动一个“按钮”组件和一个“模态框”组件。将模态框绑定在一个数据模型上，当按钮被单击时模态框弹出，实现组件间通过数据模型交互的效果，如图2。 图2 “值绑定”示例页面 选中“模态框”组件，在右侧属性配置面板配置值绑定，选择一个数据模型进行绑定，此处新建一个自定义模型“modalShow”，如图3，单击“下一步”，再次单击“下一步”，单击“确定”，选中该模型。 图3 新建模型 图4 选择模型 图5 完成值绑定后页面展示效果 支持选择任意类型的模型，进行值绑定，更多标准页面模型内容请参见4.6 如何获取后台数据。 选中“按钮”组件，在按钮组件的事件配置面板，为按钮组件添加“点击”事件。 图6 为“按钮”组件添加“点击”事件 在弹出的编辑面板，单击左侧“设置模型实例数据”，将代码粘贴到编辑面板。将模型名称替换为待修改的模型“modalShow”，值设置为“true”。 图7 编辑单击事件 单击，保存页面后，单击，进入预览页面。在预览界面，单击“弹出模态框”按钮，“模态框”组件弹出。 图8 “值绑定”演示效果 以上示例简单说明了，如何通过“值绑定”实现组件间的交互。将组件的值（value）绑定在一个模型上，通过其他组件触发事件，改变绑定数据模型的值。例如，此例中“模态框”组件的值，绑定在“modalShow”模型上，“按钮”组件的点击事件将“modalShow”改变为true，模态框即显示，单击“模态框”关闭按钮“modalShow”模型的值变为false。

自适应布局 自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的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平台的相关库和接口，请参见脚本开发。

场景描述 本示例以新建一个学生成绩管理对象为例，为您介绍对象间关联的相关内容。本示例中对象里的班级对象是通过Lookup（字段类型）关联学生、班主任对象，学生对象通过LooKup关联课程成绩对象。请参见创建自定义数据对象和定义自定义对象的字段（Fields）新建下面的Class__ CS T、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字段，如小明、小红、小兰。

为对象配置内嵌触发器 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脚本执行。脚本的执行结果将会影响主操作（即增删改记录）的结果，系统保证主操作与触发器在一个事务中执行，要么都成功，要么都失败。

创建普通变量或者集合变量 参考如何开发服务编排中操作，进入服务编排编辑器页面。 在服务编排编辑器页面右侧，选择。 在全局上下文页面，单击“变量”后的加号。 图1 创建变量 单击新增变量后的“...”，选择“设置”。 设置页面参数，单击“保存”。 图2 配置变量 表1 变量参数说明 参数 参数说明 名称 新建变量的名称。 数据类型 新建变量的数据类型，直接在下拉框中选择即可。 默认值 变量的默认取值。 描述 新建变量的描述信息。 是否为数组 是否为数组型变量即集合变量。

创建公式变量 公式变量主要用于变量赋值，表达式计算，参数传递等。 参考如何开发服务编排中操作，进入服务编排编辑器页面。 在服务编排编辑器页面右侧，选择。 在全局上下文页面，单击“公式”后的加号。 图5 单击公式后的加号 设置页面参数，单击“保存”。 图6 配置公式变量 表3 公式变量参数说明 参数 参数说明 名称 新建公式变量的名称。 数据类型 公式变量的数据类型，直接在下拉框中选择即可。 描述 新增公式变量的描述信息。 表达式 设置新增变量的表达式。 若表达式中需要运用公式，可根据需要双击“公式”区域中系统预置的公式，该公式会显示在右侧“表达式”区域中。当表达式中需要有变量参数时，可从变量区域中直接选择变量拖入到表达式中。