使用教程

使用流程

1. 完成业务梳理：需明确触发JS脚本之后需要实现的效果，明确触发JS脚本的位置：字段值发生变化、页面加载完成时、按钮点击时或者提交成功之后等等后，在管理后台找到需要触发的位置并选择动作。

2. 明确代码逻辑：页面JS+自定义函数逻辑梳理，需针对业务场景输出代码的逻辑步骤 如在「将主表字段带入子表单中作为可用条件」场景中：

a. 根据业务判断需要用到的自定义脚本的触发方法为表单字段里的onChange方法。

b. 通过field找到对应的子表单字段，再把子表单该字段的值更改成value。

c. 使用this.context.form.getFormData()获取到当前主表各字段的值，使用await this.context.form.getFieldData()拿到子表单的值（该值为一个数组），但由于getFormData拿到数据是只读的，所以我们需要通过JSON.parse(JSON.stringify())对子表单进行深拷贝，再赋值给一个变量data。

d. 通过this.context.form.setFormData(）方法将主表的子表单的值改成data。

3. 页面JS脚本书写：根据代码逻辑，在指定位置进行脚本书写，针对逻辑，页面JS可从JS-API中获取对应函数进行调用。自定义函数可通过函数库进行快捷获取系统提供的函数，提升编码效率。

前端JS-API使用手册详情参考：JS-API

自定义函数使用手册详情参考：低代码函数库

4. JS脚本调试：目前JS脚本调试建议使用两种方式进行调试

a. 通过console.log输出内容

b. 通过debugger断点调试

/**
* 尊敬的用户，你好：页面 JS 脚本是高阶用法，一般不建议普通用户使用，如需使用，
* 请确定你具备研发背景，能够自我排查问题。我们可以用 JS 面板来开发一些定制度高的功能，
* 可在对应属性中配置事件动作
*/
export async function mounted() {
   console.log(ret)
  debugger
  }
}

5. 如何学习JS

入门案例

场景描述：用户通过七巧低代码发送新闻公告，需统计每篇文章的已阅未阅人数并支持导出和生成报表

1. 完成业务梳理：

业务：用户页面加载完成之后，将当前用户记录进入已阅字段（人员多选）中，并从未阅字段（人员多选）中删除

JS脚本位置：应用设计->表单设计->mounted页面加载完成时

2. 明确代码逻辑：

a. 页面JS通过this.context.form.getFormInfo()获取当前文档、当前用户和当前应用ID

b. 自定义函数将当前用户增加进入已阅字段，从未阅字段中删除 c.页面JS通过this.business.executeServiceAPI触发自定义函数

3. 页面JS脚本书写：

/**
* 尊敬的用户，你好：页面 JS 脚本是高阶用法，一般不建议普通用户使用，如需使用，
* 请确定你具备研发背景，能够自我排查问题。我们可以用 JS 面板来开发一些定制度高的功能，
* 可在对应属性中配置事件动作
*/

export async function mounted() {
  const formInfo = this.context.form.getFormInfo()
  if (formInfo.btnType !== 'addProcess') {
    console.log(formInfo.id)
    const appId = 'b8e1a747efe54564a910a35b57cd0937'
    let ret = await this.business.executeServiceAPI({
      applicationId: appId,
      customJsId: '6981082243008798721',
      params: [appId, formInfo.formDefinitionId, formInfo.id],
      methodName: 'hello'
    })
  }
}

/**
 * 自定义函数，可与页面JS脚本配合使用，借助平台已提供的后端接口函数，
 * 可实现复杂数据/逻辑处理场景，详见帮助文档。
 */


var API = {
    hello: function(applicationId, formModelId, id) {
    //获取文档对象
    var document = $.form.getFormInstanceDocument(formModelId, id, applicationId);
    //返回人员对象
    var olduserIds = method.getElementValue(document.getElementByName(("已阅对象")));
    var newuserIds = method.getElementValue(document.getElementByName(("未阅对象")));
    //获取当前用户ID
    var userId = $.context.getCurrentUserId();
    //定义一个临时已阅集合
    var oldList = new Packages.java.util.ArrayList();
    //定义一个临时未阅集合
    var newList = new Packages.java.util.ArrayList();
    
    if (olduserIds.size() != null) {
        for (var i = 0; i < olduserIds.size(); i++) {
            var olduserId = olduserIds.get(i);
            oldList.add(olduserId);
        }
        if(oldList.contains(userId)){
        }else{
        oldList.add(userId);

        }
    }
    document.addElement("已阅对象", oldList);
    //
    if (newuserIds.size() != null) {
        for (var i = 0; i < newuserIds.size(); i++) {
            var newuserId = newuserIds.get(i);
            if (newuserId != userId) {
                newList.add(newuserId);
            }
        }
    }
    document.addElement("未阅对象", newList);
    $.form.saveFormDocument(document, applicationId);
    }
}

var method = {
    getElementValue:function (element) {
    if (element == null) {
        return 0;
    }
    return element.getValue();
}
}

4. 脚本调试：通过运行端查看新闻公告数据进行调试