华为云用户手册

工作流开发流程 创建一个工作流的主要流程，如图3所示。 图3 工作流开发流程 如下是开发工作流的主要步骤，可根据以下步骤快速开发工作流。如何创建一个端到端的工作流，请参见简易出差审批应用开发。 表2 开发工作流步骤 步骤序号 相关术语 描述 操作 1 创建工作流 新建：创建空白工作流。 导入既有：将同一租户或平台中已有的工作流以导入的方式创建工作流，方便用户快速继承已有工作流的配置，增加效率。 基于模板：系统预置了一些典型场景的工作流模板，可基于这些模板，快速创建工作流。目前系统内置的模板有以下几类： 通用：基础审批流、多步骤审批流和并行审批流。 HR：请假申请、出差申请、绩效管理、试用期确认和工作交接。 金融：贷款申请、ERP信用提升和商业计划申请。 项目：进度管理、版本管理和发布管理。 根据需要选择不同的方式，创建工作流。 若业务场景贴合已有模板，建议选择“基于模板”来快速创建工作流。快速创建后，只需要创建泳道中配置的工作队列即可使用工作流。 2 （可选）工作流的开始类型 工作流的开始类型，可以从“Star”开始图元下进行配置。开始种类包括如下两种： 自定义：默认为“自定义”，即不指定事件的起因，即不需要指定触发条件，主要用于接口调用进行启动。 表单：使用表单或页面启动工作流。选择该项时，需要配置具体的表单、标准页面或高级页面。 一般选择“自定义”，当工作流由表单或者页面启动时，选择“表单”类型。 选中“Star”开始图元，设置开始类型，一般选择“自定义”。当工作流由表单或者页面启动时，选择“表单”类型。 3 创建或配置工作流变量 创建对象或全局结构体。 在全局上下文中，根据实际情况进行创建。 4 定义泳道并选择图元 一条泳道代表工作流的流程处理中的一种用户角色。 工作流中每个泳道都和队列一一对应。处于不同泳道的图元，分别归属不同的队列中的用户去处理。当图元由系统处理时，泳道中不用配置队列。 工作流编辑器提供了一些图元，作为编排工作流使用。 在工作流开发页面，单击“Add Lane”，添加泳道。根据场景定义泳道。 根据逻辑设计，从工作流编辑器面板区域，拖拽相应类型下的图元至画布中。 5 配置图元 在泳道中，选中图元后，即可根据需要在右侧属性配置区，进行配置。 可以根据需要选择图元，进行配置。 如果使用了“规则”图元，需要提前创建好决策表。 如果使用了“用户任务”图元，且任务界面要用到标准表单，建议提前创建好标准表单。 6 连接图元并指定图元的逻辑关系 根据实际业务场景，需要确定工作流中用到的图元和逻辑顺序。根据逻辑实现，需要在拖入并配置好所有图元后，将图元按照逻辑顺序有序的连接起来。在执行工作流时，系统会根据连线顺序有序执行图元任务，从而实现整个流程运转。 根据逻辑设计有序连接各图元。 7 （可选）配置运行态界面布局 在配置完整个工作流图元及流程后，还可根据需要选择性的配置工作流运行态界面布局。 -

规则6：SELECT语句中聚集函数必须增加别名 SELECT语句中，聚合函数必须使用别名方式存储查询结果，以免因聚合函数返回的结果不一致，导致存在兼容性问题。 错误代码示例 import * as db from 'db';let errorDemo = db.sql().exec("select count(*) from object_demo where object_name = 'HuaWei'") 正确代码示例 import * as db from 'db';let correctDemo = db.sql().exec("select count(*) as count from object_demo where object_name = 'HuaWei'") 推荐代码示例 ***聚合函数示例 ****select count(*) as count_res，select max(*) as max_res,select min(*) as min_res,select avg(*) as avg_res,select sum(*) as sum_res

规则7：SELECT语句中严禁使用“select from...”形式查询语句 严禁使用“select ...”形式查询语句，请指出select的具体字段。 错误代码示例 import * as db from 'db';let errorDemo = db.sql().exec("select from object_demo where object_name = 'test'") 正确代码示例 import * as db from 'db';let correctDemo = db.sql().exec("select id, object_type from object_demo where object_name = 'test'")

规则8：SELECT语句中拼接的参数值请谨慎使用入参变量 SELECT语句中，拼接的参数值请谨慎使用入参变量，以免引起SQL注入的风险。 错误代码示例 import * as db from 'db';let errorDemo = "select id,name from object_demo where id = ";errorDemo += input.parameter let errorDemoResult = db.sql().exec(errorDemo) 其中，“input.parameter”为脚本入参。 正确代码示例 import * as db from 'db';let correctDemo = "select id,name from object_demo where id = ?";let correctDemoResult = db.sql().exec(correctDemo, { params: [input.parameter] }) 其中，“input.parameter”为脚本入参。

规则10：SELECT语句中谨慎使用order by SELECT语句中，请谨慎使用order by。如果需要使用order by，请为排序字段增加索引，以提高查询效率。如果无法增加索引，需要关注是否存在查询性能低下的风险。 错误代码示例 import * as db from 'db';let errorDemo = db.sql().exec("select object_name from object_demo where object_id = 'HuaWei' Orde by createdDate") 表“object_demo”中的“createdDate”，并没有创建索引。 正确代码示例 import * as db from 'db';let correctDemo = db.sql().exec("select object_name from object_demo where id = 'HuaWei' Order by createdDate") “object_demo”中的“createdDate”，创建了索引。

规则4：SELECT语句中查询字段不在表的索引库中 如果SELECT语句where条件中，查询字段并未创建索引，请判断该字段是否需要创建索引，以提高代码查询效率。 错误代码示例 import * as db from 'db';let errorDemo = db.sql().exec("select object_name from object_demo where object_id = ?") 表“object_demo”中的“object_id”并没有创建索引。 正确代码示例 import * as db from 'db';let correctDemo = db.sql().exec("select object_name from object_demo where id = ?") 表“object_demo”中的“id”创建了索引。

场景说明 根据对象的数据，生成资源列表数据，用于前台数据呈现，启用本脚本后，可实现数据导入模板使用。 创建脚本前，需要先创建脚本中操作的对象ApprovedResource，其字段如表1所示。 表1 对象说明 字段标签 字段名称 字段类型 取值 读写权限 含义 ownerId ownerId 文本 长度：255 全选 资源拥有者ID ResourceName ResourceName 文本 长度：255 全选 资源名称 Type Type 选项列表 枚举值如下： File Folder 全选 资源类型 SubmitDate SubmitDate 日期/时间 不涉及 全选 资源提交时间 ApproveDate ApproveDate 日期/时间 不涉及 全选 资源审批时间 Status Status 选项列表 枚举值如下： Waiting Submitted Approved 全选 审批状态

操作步骤 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“逻辑”。 单击编排后的，进入添加服务编排页面。 按照下图，创建服务编排GetResourveListFlow，单击“添加”。 图1 创建服务编排 创建该服务编排的入参和出参变量。 由于该服务编排封装的是“ResourceListScript”脚本，所以该服务编排的入参和出参的字段类型和字段名与“ResourceListScript”脚本保持一致。 表5 服务编排变量 变量类型 参数名 Data Type Input/Output Type 普通变量Variable ownerId text Input Only limit number Input Only offset number Input Only totalCount number Output Only 结构体变量Struct resource struct Output Only 在服务编排设计页面右侧，选择，在私有结构体页面单击“新增”。 创建输出参数结构体类型变量“resource”前，首先需要创建私有结构体类型。 图2 添加私有结构体类型 设置页面参数。 在“基本信息”中，输入结构体名字、描述信息。 在“结构体成员”中，设置自定义成员变量，包括设置成员变量的名称、数据类型、是否必填、是否是集合、描述信息等。单击“新增”，可增加成员变量。成员变量需要和“ResourceListScript”脚本中定义的出参“resource”成员变量（参见表4）保持一致。 创建私有结构体后，即可创建私有结构体变量。 图3 配置私有结构体 在服务编排设计页面右侧，选择，在全局上下文页面，单击“对象变量”后的。 图4 单击对象变量后的加号 选择“私有结构体”，设置页面参数。 图5 配置私有结构体变量 表6 私有结构体变量参数说明 参数 参数说明 名称 结构体的变量名称，与“ResourceListScript”脚本中定义的出参命名保持一致。 本示例设置为resource。 私有结构体 结构体变量类型。 本示例选择刚创建的结构体类型名称“resourcestruct”。 默认值 变量的默认取值。 本示例不用配置。 描述 变量的描述说明，建议设置为该变量的作用。 是否为数组 是否为数组型变量，即集合变量。 本示例请勾选。 在服务编排设计页面右侧，选择，在全局上下文页面，单击“变量”后的。 单击新增变量后的“...”，选择“设置”。 图6 设置变量 配置普通变量“ownerId”。 图7 配置变量 表7 普通变量参数说明 参数 参数说明 名称 新建变量的名称。 本示例设置为ownerId。 数据类型 变量的数据类型。 默认值 变量的默认取值。 本示例不用配置。 描述 新增变量的描述说明，建议设置为变量的作用。 是否为数组 是否为数组型变量即集合变量。 本示例不用勾选。 参考上述操作，创建表5中其他普通变量。 在服务编排设计页面右侧，选择，按照表5从全局上下文页面中拖拽参数到相应的入参和出参区域，设置服务编排的入参和出参。 图8 设置服务编排的入参和出参 拖拽“基本”下的“脚本”图元至画布中。 单击，如图9所示，设置页面参数。 将服务编排中的变量赋值给脚本中的输入参数，脚本中的输出参数赋值给服务编排中的变量。 图9 配置脚本 表8 脚本配置参数说明 参数 参数说明 脚本 调用的脚本名称，选择“命名空间_ResourceListScript”。 只有在启用状态下同一应用工程内的脚本，才能被服务编排调用。 输入参数/目标 脚本的输入参数名称，直接在下拉框中选择。 输入参数/源 服务编排中的变量，为目标赋值。 请从“全局上下文”中，拖拽之前创建的服务编排输入变量。 输出参数/源 脚本的输出参数名称，直接在下拉框中选择。 输出参数/目标 服务编排中的变量，脚本中的输出参数赋值给服务编排中的变量，请从“全局上下文”中拖拽之前创建的服务编排输出变量。 若有多个输入参数或输出参数，请单击“新增行”，进行添加。 连接所有元素。 单击页面上方的，保存服务编排。

调试过程 单击页面上方的，输入参数后单击“运行”，运行服务编排。 在“输入参数”中，输入如下参数： { "ownerId":"123", "limit":3, "offset":1} 检查输出页签的结果，是否符合预期。 输出如下： { "interviewId": "002N000000P4ApgMJOM4", "outputs": { "resource": [ { "ownerId": "123", "resourceName": "Folder01", "status": "Waiting", "type": "Folder" }, { "ownerId": "123", "resourceName": "File02", "status": "Waiting", "type": "File" }, { "ownerId": "123", "resourceName": "Folder02", "status": "Waiting", "type": "Folder" } ], "totalCount": 100 }} 单击服务编排设计页面右上方的“跟踪”，打开“日志跟踪器”页面。 在“日志跟踪器”页面中，可查看服务编排执行的每一步的详细信息。 图10 查看跟踪日志 单击页面上方的，启用服务编排。

前提条件 已创建名为“Approved Resource”的Object，用于存储资源数据，该对象中需要包含如下字段。 表2 Approved Resource对象说明 字段标签 字段名称（系统自动生成） 字段类型 取值 读写权限 是否加入界面布局 含义 ownerId ownerId__ CS T 文本 长度：255 全选 不勾选 资源拥有者ID ResourceName ResourceName__CST 文本 长度：255 全选 不勾选 资源名称 Type Type__CST 选项列表 枚举值如下： File Folder 全选 不勾选 资源类型 SubmitDate SubmitDate__CST 日期/时间 不涉及 全选 不勾选 资源提交时间 ApproveDate ApproveDate__CST 日期/时间 不涉及 全选 不勾选 资源审批时间 Status Status__CST 选项列表 枚举值如下： Waiting Submitted Approved 全选 不勾选 审批状态 已创建场景描述中的脚本。该脚本根据对象的数据生成资源列表数据，用于前台数据呈现。示例脚本为“ResourceListScript.zip”，单击下载链接可获取该脚本包。该脚本中定义的入参和出参说明，如表3和表4所示。 表3 入参说明 参数 参数类型 说明 ownerId string 资源拥有者ID。 limit number 每页展示的资源条数。 offset number 每页展示第一条资源的偏移量，即从offset+1条资源开始展示。 表4 出参说明 参数 参数类型 说明 resource struct 返回资源数组集合。 approveDate：审批时间，若该记录已审批则返回审批时间。 ownerId：资源拥有者ID。 resourceName：资源名称。 status：资源状态。 Waiting：记录未提交。 Submitted：记录已提交未审批。 Approved：记录已审批。 submitDate：资源提交时间。 type：资源类型。 totalCount number 资源总数（固定100）。

创建空白脚本 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“逻辑”。 单击脚本后的，进入新增脚本页面。 选择“创建一个新脚本”，设置脚本名称（如httpTest），单击“添加”，进入脚本编辑器页面。 图1 新增httpTest脚本 在脚本编辑器中，将以下脚本代码粘贴到代码编辑区。 import * as http from 'http' // 导入http库let client = http.newClient() // 实例化let resp = client.get("https://www.huawei.com/")// 请求网址console.log(resp.headers) // 打印返回headers 单击页面上方的，保存脚本。 运行测试脚本。 单击编辑器上方的，执行脚本。 在页面底部单击测试窗口右上角的，返回消息头信息。 { Age: [ '10309' ], Cache-Control: [ 'no-store' ], Content-Type: [ 'text/html; charset=utf-8' ], Date: [ 'Thu, 01 Dec 2022 03:41:39 GMT' ], Expires: [ 'Wed, 30 Nov 2022 22:01:57 GMT' ], Pragma: [ 'no-cache' ], Processtime: [ '0.049' ], Server: [ 'PAAS-WEB' ], Set-Cookie: [ 'HMF_CI=596020aa4dbe4b6***42343ba04a; Expires=Sat, 31-Dec-22 03:41:39 GMT; Path=/' ], Strict-Transport-Security: [ 'max-age=31536000' ], Ws-S2h-Acc-Level: [ '1' ], X-Content-Type-Options: [ 'nosniff' ], X-Download-Options: [ 'noopen' ], X-Frame-Options: [ 'SAMEORIGIN' ], X-Powered-By: [ 'ASP.NET' ], X-Via: [ '1.1 PSjsczsxga60:2 (Cdn Cache Server V2.0), 1.1 uzhoudianxin101:13 (Cdn Cache Server V2.0), 1.1 wdx18:10 (Cdn Cache Server V2.0)' ], X-Ws-Request-Id: [ '63882273_wdx18_41265-37840' ], X-Xss-Protection: [ '1; mode=block' ] } 以上步骤已完成了一个简单脚本的编写，如果后续其他脚本、服务编排、编译打包等需要继续使用该脚本，则必须单击页面上方的，启用该脚本。如果未启用，其他组件无法查询到该脚本，查询时会报错该脚本不存在或未启用。 后续在新版本功能中如果需要更新该脚本，可单击编辑器上方的，选择“新建版本”，在新建的版本中更改脚本并保存、测试及启用。单击编辑器上方的，选择对比版本，可将当前版本与历史版本进行比对。

调试服务编排 在服务编排设计器中，选中需要设置断点的图元，单击鼠标右键选择“设置断点”。 设置断点后，选中图元，单击鼠标右键选择“禁用断点”或者“移除断点”，可禁用或移除断点。 目前不支持在等待Wait图元及等待图元之后的所有图元，设置断点。 图3 设置断点 单击服务编排设计器上方的，开始调试服务编排。 在弹出的输入参数页面进行配置，单击“运行”。 如果有输入参数，请输入入参，再单击“运行”。如果该服务编排没有输入参数，请直接单击“运行”。 在服务编排编辑器左侧，可看到调试页面，单击，可执行到下一断点，单击，可停止调试，查看执行到某一断点的参数变化是否符合预期。 图4 调试页面 左侧调试页面参数说明： 变量：展示执行到当前断点，服务编排中的变量取值情况，包括全局变量、某图元的输入输出变量等。 调用堆栈：执行到当前断点时，出现的调用堆栈。 正在调试：正在调试的服务编排名。当执行到子服务编排时，该处显示当前子服务编排名。 断点：展示设置的所有断点，选中某一断点，单击鼠标右键可出现“移除断点”、“移除所有断点”、“启用所有断点”或“禁用所有断点”。也可以单击该区域某一断点，进行启用或禁用该断点。 单击服务编排设计器页面右上方的“跟踪”，打开“跟踪器”页面。 在弹出的页面，可查看服务编排执行的每一步的详细信息。 图5 查看详情信息 关闭跟踪器页签，单击，至执行完最后一个断点，调试结束。 重新设计问题图元及前后逻辑，再次运行服务编排，直至结果符合预期。 单击服务编排设计器页面上方的，启用服务编排。 调试服务编排符合预期后，需要启用服务编排。启用后，服务编排才能在系统中使用。

运行服务编排 在服务编排设计器中，单击页面上方的，保存服务编排。 保存后，系统会对服务编排进行编译。如果有报错或者警告，请单击“确定”，在服务编排编辑器页面修改服务编排。修改后再次保存，直至无报错和警告。 保存成功后，单击页面上方的，运行服务编排。 在弹出的输入参数页面进行配置，单击“运行”。 如果有输入参数，请输入参数后，再单击“运行”。如果该服务编排没有输入参数，可直接单击“运行”。 表1 基本信息参数说明 参数 参数说明 请求头参数 请求消息头的参数配置，“键”为参数名，“值”为参数取值。 单击“请求头参数”前的，会显示映射区域“键”和“值”。若需要多个请求头参数，请单击“添加行”。 responseType('arraybuffer') 表示返回响应的类型。勾选时，表示返回响应是一个包含二进制数据的JavaScript ArrayBuffer。 输入参数 填写该服务编排运行实例的输入参数及取值。 检查输出页签的调试结果，是否符合预期。 图1 调试结果 表2 输出页签 调试结果 取值 查看日志 单击该按钮，可弹出“日志跟踪器”，显示该服务编排实例的运行日志。 结果 调试结果。 成功 '参数名'的值'%!v(BADINDEX)'无效或格式非法 输出 该服务编排的输出内容，检查输出是否和预期一致。 若输出结果符合预期，单击服务编排设计器页面上方的，启用服务编排。 若发现输出结果不符合预期，单击服务编排设计器页面右上方的“跟踪”，打开“跟踪器”页面，查看详细信息。 在“跟踪器”页面，查看服务编排执行的每一步的详细信息。检查哪一步的输出不符合预期，并按照调试服务编排进行调试。 图2 日志跟踪器

如何使用Native服务图元 在Native服务中，拖拽所需的Native服务图元至画布中。 选中Native服务图元，单击，设置基本信息。 表1 基本信息参数说明 参数 参数说明 标签 图元的标签，用于在页面展示。系统会自动填入该值，格式为原生服务名+序号。序号从“0”开始，表示同类型图元序号。 名称 图元的标识，请确保在当前服务编排中唯一。 描述 图元的描述信息。 单击，在“Native服务”页面进行配置。 图1 配置Native服务图元 表2 Native服务图元配置参数说明 参数 参数说明 操作方法 原生服务中已自定义好的API接口。 入参/目标 当选择具体操作方法（API）后，API的输入参数将会显示在入参的目标列。 入参/源 服务编排中的变量，需要和目标的参数类型保持一致。该源会将服务编排中的变量，赋值给调用API的输入参数。 出参/源 当选择具体操作方法（API）后，API的输入参数将会显示在出参的源列。 出参/目标 服务编排中的变量，需要和输出参数的类型保持一致。将API中的输出参数赋值给服务编排中的变量，供服务编排中使用。

创建对象变量/结构体变量/事件变量 在服务编排设计器右侧，选择。 在全局上下文页面，单击“对象变量”后的。 设置页面参数，以创建对象变量为例进行介绍。 图9 配置对象变量 对象：变量的类型为对象变量。 全局结构体：变量的类型为全局结构体。 私有结构体：变量的类型为私有结构体。 事件：变量的类型为事件变量。 名称：新建变量的名称。 对象：请选择具体的对象。选择“对象”类型时，该参数才会显示。 全局结构体：请选择具体的全局结构体。选择“全局结构体”类型时，该参数才会显示。 私有结构体：请选择具体的私有结构体。选择“私有结构体”类型时，该参数才会显示。 事件：请选择具体的事件。选择“事件”类型时，成员变量为事件的自定义字段，不包括系统预置的标准字段。选择“事件”类型时，该参数才会显示。 默认值：变量的默认取值。 描述：该变量的描述信息。 是否为数组：是否为数组变量，即集合变量。

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

创建私有结构体 服务编排中如果涉及复杂结构体参数，可以先创建全局或私有结构体，并用作参数类型。 创建全局结构体和私有结构体后，再参考创建对象变量/结构体变量/事件变量中操作，创建全局结构体变量和私有结构体变量，作为服务编排的参数类型。 在服务编排设计器右侧，选择，在私有结构体页面单击“新增”。 该“私有结构体”页面有两个“新增”按钮，单击上面的“新增”按钮，是通过设置页面参数新建私有结构体。单击下面的“新增”按钮，是通过输入JSON Schema类型的数据源码定义私有结构体。 图5 添加私有结构体类型 （若上一步单击“私有结构体”页面上方的“新增”按钮，请执行该步骤）设置页面参数。 在“基本信息”中，输入结构体名字、描述信息。 在“结构体成员”中，设置自定义成员变量，包括设置成员变量的名称、数据类型、是否必填、是否是集合和描述信息等。单击“新增”，可增加成员变量，支持设置全局结构体或私有结构体成员变量。当私有结构体的成员变量包含结构体类型时，您需要提前定义成员结构体。例如，下图中成员变量“hobby”为私有结构体类型，需要提前创建“create”私有结构体。 图6 配置私有结构体 （若上一步单击“私有结构体”页面下方的“新增”按钮，请执行该步骤）在“创建JSON Schema”页面中，定义结构体名称，在“JSON源码”中输入数据源码，单击，系统会进行校验，转换成服务编排中的结构体类型，单击“保存”。 图7 创建JSON Schema 数据源码示例如下： {"name": "xiaoming","age": 18,"father": {"name": "daliu","gender":"male"},"brother": {"name": "xiaolei","gender":"male"}} 创建成功后，页面显示如下。 图8 创建成功 该方式创建的结构体中，包含成员结构体时，成员结构体具体定义不会在界面显示，且其他结构体不可引用。 JSON结构体支持嵌套，例如上述创建的“family”结构体，在“JSON Schema结构体”区域再次单击“新增”，新增“company”结构体，里面“ceo”嵌套引用“family”结构体，如下图所示，在定义结构体输入值时，您可以输入“$”符号，选择当前服务编排中的其它结构体进行嵌套引用。

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

修改对象数据 介绍如何通过记录更新图元，修改Respirator对象数据。 参考如何开发服务编排中操作，创建“名称”和“标签”为“UpdateRespirator”的服务编排。 定义服务编排用到的变量，并设置该服务编排的入参。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图15 新建对象变量“RespiratorInfos” 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“入参”中。 图16 配置开始图元 拖拽“基本”目录中的“记录更新”图元到画布中，并与“开始”图元进行如下连线。 图17 拖拽图元 配置“记录更新”图元。 单击画布中的“记录更新”图元，在“基本信息”页面中，配置图元标签及名称为“UpdateRespirator”，并勾选“使用快速更新模式”。 图18 配置“记录更新”图元基本信息 单击，在“记录更新”页面，将创建的对象变量RespiratorInfos由展开的“全局上下文”页面拖拽到“变量”输入框中。 图19 配置“记录更新”页面 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 在服务编排运行页面，设置输入参数，单击“运行”。 在“输入参数”中，输入如下参数，修改Respirator对象数据，更新状态为“使用中”。其中，“CNAME”替换为环境中实际配置的命名空间，“id”取值替换为查询对象数据中查询出呼吸机的id。 { "RespiratorInfos": [ { "id": "cnE0000000m5Kvrl7kSe", "CNAME__status__CST": "使用中" }, { "id": "cnE0000000m5KvrtM7EW", "CNAME__status__CST": "使用中" } ]} 单击页面上方的，激活服务编排。

删除对象数据 介绍如何通过记录删除图元，删除Respirator对象数据。 参考如何开发服务编排，创建“名称”和“标签”为“DeleteRespirator”的服务编排。 定义服务编排用到的变量，并设置该服务编排的出参。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图20 新建对象变量“RespiratorInfos” 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“入参”中。 图21 配置开始图元 拖拽“基本”目录中的“记录删除”图元到画布中，并连接“开始”和“记录删除”图元。 配置“记录删除”图元。 单击画布中的“记录删除”图元，在“基本信息”页面中配置图元标签及名称为“DeleteRespirator”，并勾选“使用快速删除模式”。 单击，在“记录删除”页面将创建的对象变量RespiratorInfos由展开的“全局上下文”页面拖拽到“变量”输入框中。 图22 配置“记录删除”页面 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 设置输入参数，单击“运行”，删除2条对象记录。 其中，“id”取值替换为查询对象数据中查询出的呼吸机的id。 { "RespiratorInfos": [ { "id": "cnE0000000m5Kvrl7kSe" }, { "id": "cnE0000000m5KvrtM7EW" } ]} 单击页面上方的，启用服务编排。

创建对象数据 由于服务编排中内置的记录创建图元无法批量创建，需要循环调用记录创建图元，进行批量创建。 参考如何开发服务编排中操作，创建“名称”和“标签”为“CreateRespirator”的服务编排。 参照表1，定义服务编排用到的变量，并设置该服务编排的入参。 表1 变量说明 变量名 变量类型 变量说明 RespiratorInfo Respirator对象 系统中空闲状态下的呼吸机资源数组元素。 RespiratorInfos Respirator对象数组 系统中空闲状态下的呼吸机资源数组。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 图1 添加对象变量 设置对象变量名称为“RespiratorInfo” ，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），单击“保存”。 图2 新建对象变量RespiratorInfo 服务编排中只允许引用当前应用工程下的资源（例如对象、脚本），上图中的对象需要和服务编排在同一应用中。 按照上述操作，新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图3 配置数组类型对象变量 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“入参”中。 图4 配置开始图元 拖拽快捷目录中的“循环”图元以及“基本”目录中的“记录创建”图元到画布中，并与“开始”图元进行如下连线。 图5 拖拽图元 配置“循环”图元。 单击画布中的“循环”图元，在“基本信息”页面中配置图元标签和名称为“LoopRespiratorInfos”。 图6 配置“循环”图元基本信息 单击，进入“循环”配置页面，展开“全局上下文”页面，拖拽对象变量RespiratorInfos到“数组”输入框中，拖拽对象变量RespiratorInfo到“元素”输入框中。 图7 配置“循环”页面 如上图配置，能够将数组对象变量RespiratorInfos进行遍历，并将数组中的每个元素放置到对象变量RespiratorInfo中，进行下一步操作。 配置“记录创建”图元。 单击画布中的“记录创建”图元，在“基本信息”页面中配置图元标签及名称为“CreateRespirator”，并勾选“使用快速创建模式”。 图8 配置“记录创建”图元基本信息 单击，在“记录创建”页面，展开“全局上下文”页面，将对象变量RespiratorInfo拖拽到“变量”输入框中。 图9 配置“记录创建”页面 单击页面上方的，保存服务编排。 保存后，单击，运行服务编排。 在服务编排运行页面，设置输入参数，单击“运行”，创建3条对象记录。 其中，“CNAME”替换为环境中实际配置的命名空间。 { "RespiratorInfos": [ { "name": "呼吸机1", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机2", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机3", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" } ]} 单击页面上方的，启用该服务编排。

查询对象数据 介绍如何通过记录查询图元，查询Respirator对象数据中“状态”为“空闲”的对象记录。 参考如何开发服务编排中操作，创建“名称”和“标签”为“SelectRespirator”的服务编排。 定义服务编排用到的变量，并设置该服务编排的出参。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图10 创建数组类型对象变量“RespiratorInfos” 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将数组对象变量“RespiratorInfos”拖拽到“出参”中。 图11 配置开始图元 拖拽“基本”目录中的“记录查询”图元到画布中，并与“开始”图元进行如下连线。 图12 拖拽图元 配置“记录查询”图元。 单击画布中的“记录查询”图元，在“基本信息”页面中，配置图元标签及名称为“SelectRespirator”，并勾选“使用快速查询模式”。 图13 配置“记录查询”图元基本信息 如下图所示，单击，在“记录查询”页面中，将创建的对象变量RespiratorInfos由展开的“全局上下文”页面拖拽到“变量”输入框中。在“条件”中单击“新增行”，新增条件语句，“排序”为可选配置。 图14 配置“记录查询”页面 条件中的“值”，需要使用英文双引号。 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 由于该服务编排没有配置入参，直接单击“运行”，即可查询对象数据。 查看是否返回所有状态为空闲的对象记录。 { "interviewId": "002N0000XXXXXXx5Cy", "outputs": { "RespiratorInfos": [ { "createdBy": "10gd000XXXXXX7Pea", "createdBy.name": "XXX", "createdDate": "2021-08-10 14:25:18", "currencyIsoCode": "USD", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲", "id": "cnE0000000m5Kvrl7kSe", "lastModifiedBy": "10gd000XXXXXXq7Pea", "lastModifiedBy.name": "XXX", "lastModifiedDate": "2021-08-10 14:25:18", "name": "呼吸机1", "owner": "10gd0000XXXXXXq7Pea", "owner.name": "gonCNAMEhen" }, { "createdBy": "10gd000000bZHUAq7Pea", "createdBy.name": "XXX", "createdDate": "2021-08-10 14:25:18", "currencyIsoCode": "USD", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲", "id": "cnE0000000m5KvrtM7EW", "lastModifiedBy": "10gd0000XXXXXXea", "lastModifiedBy.name": "XXX", "lastModifiedDate": "2021-08-10 14:25:18", "name": "呼吸机2", "owner": "10gd000000bZHUAq7Pea", "owner.name": "XXX" }, { "createdBy": "10gd000XXXXXX7Pea", "createdBy.name": "XXX", "createdDate": "2021-08-10 14:25:18", "currencyIsoCode": "USD", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲", "id": "cnE0000000m5KvrykUhk", "lastModifiedBy": "10gd0000XXXXXXPea", "lastModifiedBy.name": "XXX", "lastModifiedDate": "2021-08-10 14:25:18", "name": "呼吸机3", "owner": "10gd000000bZHUAq7Pea", "owner.name": "XXX" } ] }} 单击页面上方的，启用服务编排。

场景描述 实现场景：由于呼吸机资源缺乏，为了有效利用剩余的呼吸机，需要提供呼吸机申请服务进行资源调度。申请人调用服务接口提供医院信息和申请呼吸机资源数量，服务根据系统中处于空闲状态下的呼吸机资源判断资源是否充足，在资源充足的情况下返回被申请的呼吸机信息并修改系统中相应呼吸机的医院信息和状态。 实现方案：使用服务编排实现上述功能，实现逻辑如下： 通过调用查询对象数据中创建的服务编排，获取系统中空闲状态下的呼吸机信息。 通过调用使用服务编排开发业务的基本逻辑中创建的服务编排，进行资源是否充足的判断，返回被申请的呼吸机信息。 通过决策图元判断上一步骤返回的申请呼吸机信息，做出下一步操作。 走“ResourceEnough”分支：在资源满足的情况下，调用修改对象数据中创建的服务编排，修改系统中被申请的呼吸机的医院信息和状态。 走“ResourceNotEnough”分支：在资源不足的情况下，返回错误信息。 图1 呼吸机申请服务总体流程

如何开发呼吸机申请服务 参考如何开发服务编排中操作，创建“名称”和“标签”为“RespiratorApply”的服务编排。 参照表1，定义服务编排用到的变量，并设置该服务编排的入参和出参。 表1 变量说明 变量名 变量类型 变量说明 num 数字 申请的呼吸机数量。 hospital 文本 申请呼吸机的医院。 msg 文本 申请结果。 RespiratorInfos Respirator对象数组 系统中空闲状态下的呼吸机资源数组（后用于存放信息修改后的资源数组）。 RespiratorRecs Respirator对象数组 此次申请的原始呼吸机资源数组。 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“变量”后的。 图2 创建变量 单击新增变量后的“...”，选择“设置”。 图3 设置变量 配置数字类型的变量“num”，单击“保存”。 图4 配置变量 表2 普通变量参数说明 参数 参数说明 名称 新增变量的名称，直接输入“num”。 数据类型 变量的数据类型，根据业务需求直接在下拉框中选择。 本示例设置为“数字”。 默认值 变量的默认取值。 本示例不用配置。 描述 新增变量的描述说明，建议填写该变量的作用。 是否为数组 是否为数组型变量即集合变量。 本示例不勾选。 参考上述操作，创建文本类型的变量“hospital”、“msg”。 图5 成功创建变量 在服务编排编辑器页面右侧，选择，在全局上下文页面单击“对象变量”后的。 图6 创建对象变量 参考上述操作，新建对象变量“RespiratorInfos”，对象中选择前提条件中创建的对象Respirator，设置字段描述信息（可选），选中“是否为数组”，单击“保存”。 图7 配置数组类型对象变量 参考上述操作，创建数组类型的对象变量“RespiratorRecs”，注意要选中“是否为数组”。 单击画布中的“开始”图元，在右侧菜单选择，单击右上角“全局上下文”展开“全局上下文”页面，将变量num、变量hospital拖拽到“入参”中，将变量msg、对象变量RespiratorRecs拖拽到“出参”中。 图8 配置开始图元 编排该服务主要使用了三种图元，分别是“子服务编排”“赋值”、“决策”图元，按照下图将相关图元拖拽到画布中对应位置。 图9 拖拽图元 在画布上，把鼠标放在起点图元上，从“+”拖动鼠标，在起点图元和“子服务编排”图元Flow0间增加连线。 配置“子服务编排”图元Flow0。 单击画布中的“子服务编排”图元Flow0，在“基本信息”页面中配置图元标签为“查询呼吸机资源”，名称为“SelectRespirator”。 图10 配置“子服务编排”图元基本信息 如下图所示，单击，在“子服务编排”页面“服务编排实例”中，选择查询对象数据创建的服务编排“SelectRespirator”。配置输出参数，从“全局上下文”页面拖拽变量到“目标”中。 图11 配置子服务编排图元Flow0 如上图配置，将调用查询对象数据中开发的查询对象记录服务编排，并将查询结果存放到对象变量RespiratorInfos中。 从“子服务编排”图元“SelectRespirator”，连向“子服务编排”图元Flow1。 配置“子服务编排”图元Flow1。 单击画布中的“子服务编排”图元Flow1，在“基本信息”页面中配置图元标签为“处理呼吸机资源”，名称为“ProcessRespiratorResouce”。 如下图所示，单击，在“子服务编排”页面“服务编排实例”中，选择使用服务编排开发业务的基本逻辑创建的服务编排“ProcessRespiratorResource”，配置入参和出参。 图12 配置子服务编排图元Flow1 如上图配置，将调用使用服务编排开发业务的基本逻辑中开发的资源处理服务编排，并将查询对象记录服务编排中返回的空闲状态下呼吸机资源以及申请医院、资源数量作为入参传入，返回申请结果、被申请的呼吸机资源以及修改信息后的呼吸机资源数组存入相应对象变量。 从“子服务编排”图元“ProcessRespiratorResouce”连向“决策”图元Decision0。 配置“决策”图元Decision0。 单击画布中的“决策”图元Decision0，在“基本信息”页面中配置图元标签为“判断资源是否充足”，名称为“judgeResource”。 在“决策”页面中，单击“默认”结果，将名称设置为“ResourceEnough”，单击“新增”，新增一个名为“ResourceNotEnough”的结果，并按照下图进行配置。 图13 配置默认结果 图14 新增“ResourceNotEnough” “ResourceNotEnough”结果表示当返回的资源数组为空时，代表资源不足，走向赋值图元设置错误信息。默认的“ResourceEnough”结果代表资源充足，将进行系统中数据的修改。 从“决策”图元“judgeResource”连向“子服务编排”图元Flow2，连线类型为“ResourceEnough”，从“决策”图元Decision0连向“赋值”图元Assignment0，连线类型为“ResourceNotEnough”。 配置“子服务编排”图元Flow2。 单击画布中的“子服务编排”图元Flow2，在“基本信息”页面中配置图元标签为“修改呼吸机资源状态”，名称为“UpdateRespiratorResource”。 如下图所示，单击，在“子服务编排”页面“服务编排实例”中，选择修改对象数据中创建的服务编排“UpdateRespirator”，并配置输入参数。 图15 配置子服务编排图元Flow2 如上图配置，将调用修改对象数据中开发的修改对象记录服务编排，根据传入的对象变量RespiratorInfos对系统中的对象数据进行修改。 配置“赋值”图元Assignment0。 单击画布中的“赋值”图元Assignment0，在“基本信息”页面中配置图元标签为“设置错误信息”，名称为“setError1”。 如下图所示，单击，在“赋值”页面进行配置赋值语句，在资源不足的情况下设置相应的错误信息。 图16 配置赋值图元Assignment0 单击页面上方的，保存服务编排。 保存成功后，单击，运行服务编排。 进行测试。 当资源不足时，测试服务是否报错并返回相应错误信息。 设置输入参数，单击“运行”，人民第66医院需要申请5台呼吸机。 { "hospital": "人民第66医院", "num": 5} 检查输出页签的结果，是否符合预期。 返回如下信息，表示资源不足，申请失败。 图17 输出结果 当资源充足时，返回信息“资源充足，呼吸机申请成功！”，以及申请的呼吸机资源信息，并修改系统中对象数据。 打开创建对象数据中创建的服务编排“CreateRespirator”，单击页面上方的，运行服务编排。 设置输入参数，单击“运行”，创建5台某医院空闲的呼吸机。 其中，“CNAME”为命名空间名称，请替换为环境中实际配置的命名空间。 { "RespiratorInfos": [ { "name": "呼吸机1", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机2", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机3", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机4", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" }, { "name": "呼吸机5", "CNAME__hospital__CST": "第1人民医院", "CNAME__status__CST": "空闲" } ]} 打开本节开发的服务编排“RespiratorApply”，单击页面上方的，运行服务编排。 设置输入参数，单击“运行”，人民第66医院需要申请5台呼吸机。 { "hospital": "人民第66医院", "num": 5} 检查输出页签的结果，是否符合预期。 资源充足时，如下图所示返回信息“资源充足，呼吸机申请成功！”，以及申请的呼吸机资源信息。 图18 输出界面 单击页面上方的，启用服务编排。

操作步骤 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”。 在对应的高级页面中，单击，选择“设置”。 图1 进入设置页面 在“水印”页签，参考如何设置页面水印设置参数，单击“保存”。 图2 水印设置 图3 设置后效果 表1 参数说明 参数 参数说明 启用水印 是否给该页面启用水印。 重复渲染 当需要设置满页面水印时，开启该项。 水印内容 设置水印文本内容。 当前用户 当需要设置水印内容为当前用户名时，可开启该项。 开启后，“水印内容”中的文本不生效。 水印长度 水印矩形框的长度。 水印宽度 水印矩形框的宽度。 水平起始位置 当关闭“重复渲染”时，才可设置，表示单个水印在页面的水平起始位置。 垂直起始位置 当关闭“重复渲染”时，才可设置，表示单个水印在页面的垂直起始位置。 字体颜色 水印字体的颜色。 字体大小 水印字体的大小。 旋转角度 水印的旋转角度，取值范围-180~180，即逆时针或者顺时针旋转180度。 透明度 水印的透明度设置。

操作步骤 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”。 在高级页面中，单击对应的页面，进入高级页面开发界面。 在页面右上角，单击，定义全局状态。 定义全局状态使用JavaScript编程语言，不支持TypeScript。全局状态结构固定以MStore命名，每个页面仅包含一个全局状态实例，方便在组件调试的过程中，轻易的获取整个当前页面状态的快照。全局状态的结构定义由以下三部分组成： state：定义页面所有组件的初始状态数据，即页面中所有组件共享状态的初始数据源。 mutations：状态变更的唯一方法是提交mutation。mutation以声明的方式，将state变化映射到视图，每次state的变更都需要定义一个mutation。mutation使用对象风格的提交方式，整个对象都作为载荷（payload）传给mutation函数，mutation都是同步事务。 actions：通过actions执行状态数据变更，用于衔接state和mutation。Action可以包含任意异步操作，通常用于绑定状态和组件，可以调用服务。 在页面的组件js文件中，使用预置的“this.$mstore.dispatch（）”方法，修改状态数据。 系统还预置了onStateChanged(state) 方法，用于监听属性整个全局状态的变更。

响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计。 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用 CSS 3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： @media mediatype and|not|only (media feature) { CSS-Code;} 其中，参数说明如表1所示。 表1 @media语法参数说明 参数 值 说明 mediatype all 用于所有设备。 screen 用于电脑屏幕、平板电脑、智能手机等。 print 用于打印机和打印预览。 media feature aspect-ratio 定义输出设备中，页面可见区域宽度与高度的比率。 max-width 定义输出设备中，页面最大可见区域的宽度。 max-height 定义输出设备中，页面最大可见区域的高度。 min-width 定义输出设备中，页面最小可见区域的宽度。 min-height 定义输出设备中，页面最小可见区域的高度。 设置示例：对页面宽度不同的设备，设定不同背景颜色。 /*媒体查询*//*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/@media screen and (min-width: 1200px) { body { background-color:blue; }}/*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/@media screen and (min-width: 992px){ body { background-color:red; }} 避免固定尺寸。 使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。 表2 常用相对单位 单位 说明 em 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 rem 相对根元素的字体大小。 ch 相对于数字“0”的宽度。 ex 相对于字符“x”的高度。 lh 相对于元素line-height计算值。 最大和最小值。 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。 嵌套对象。 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。 图片的自适应。 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。 移动优先。 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

使用说明 低代码平台预置了很多默认样式，供您选择使用，同时也支持对标准页面的主题样式进行自定义修改。 自定义主题时，可以自定义修改标准页面的样式。设置完成并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。 图1 启用前效果图 图2 启用后效果图

通过自定义JS代码编排事件 通过手动编写JS代码，实现按钮的事件逻辑。系统支持在手动编写JS代码时，进行代码联想提示。同时，系统还封装了一些常用功能的接口，并将其中典型接口做成模板，可以从左侧拖动相关模板至右侧事件定义区域，直接使用。 在标准页面开发界面，选中按钮组件。 在右侧“事件”页签中，单击“点击”后的，进入“添加动作”页面。 选择“自定义动作”，在右侧事件定义区域，输入实现事件逻辑的JS代码，也可从左侧拖动相关模板至右侧事件定义区域，单击“创建”。 内置JS事件说明及使用方法，请参见如何通过JS代码，实现页面与后台接口间的交互。 图4 自定义JS代码 自定义JS代码示例如下： //获取当前组件var _component = context.$component.current;//获取当前表单var _form = context.$component.form;// 重置表单_form.resetFields(); 返回标准页面开发界面，单击页面上方的，保存页面。

定义页面数据模型 打开一个标准页面，在标准页面的左下方，单击“模型视图”。 图1 单击模型视图 在“模型视图”中，单击“新增模型”。 添加模型，定义模型名称与来源，单击“下一步”，如图2所示。 图2 定义模型 低代码平台支持四类模型（如图2），每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。 表1 模型来源说明 分类 模型说明 模型参数的定义 模型方法的定义 API调用方法 自定义 开发者自行定义的模型。 由开发者自定义，可以添加子节点。 开发者自定义方法。 $model.ref("modelName").actionName(); 对象 由Object对象表映射生成，关于对象模型的详细介绍，请参见什么是对象。 系统自动获取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); 在新建模型“设置”页面，执行如下操作。 若上一步来源选择“自定义”，需要添加子节点自定义参数及类型。 若上一步来源选择“对象”，需要配置模型关联的对象以及字段。 若上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。 若上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。 单击“下一步”，设置方法。 方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。 设置完成后，单击“确定”。