自定义按钮API

执行自定义代码按钮在重新设计后，自定义代码脱离了原有的列表与表单代码编写框，定义了一个按钮的自定义代码入口，详细介绍如下。

适用范围

仅对按钮抽象之后在功能按钮页手动新增的运行自定义代码的按钮。

按钮类型	是否适用本文档
系统按钮	不适用
表单设计中拖入的按钮控件	不适用
自定义代码添加的按钮	不适用
功能按钮页面新增的自定义按钮	适用

代码编辑

在表单设置 > 功能按钮，新增或编辑运行自定义代码的按钮时，会出现该按钮的代码编辑框。每一个按钮有独立的逻辑代码编辑器。

API介绍

按钮重新设计后，同一个按钮既可以运行在表单，也可以运行在列表等视图，代码逻辑在统一的地方编写，同时运行的接口也与之前表单，列表的代码页面不同，定义了新的执行入口；

提示框，打开表单弹窗等接口也进行了重新定义，在按钮页自定义代码处需要使用新定义的接口，请参考以下接口列表编写逻辑。

⚠️ 注意：

• 自定义代码按钮只在查看表单详情页展示，这里没有提供修改页面控件值的接口，如果需要修改页面请使用代码添加按钮或使用表单设计中的按钮控件。

表单场景

调用后端代码

调用后端代码，返回promise，可以百度或AI Promise的使用方法。

参数postValue为 key-value格式；参考示例如下：

execute(postValue) {
  return super.execute(postValue); // 调用父类方法，调用后端代码，可以注释掉
  // 此处添加自定义逻辑
}

var customData = {};
customData["Name"] = "氚云";
customData["Code"] = "cy";
var promise = this.execute(customData); // 调用通用点击按钮执行方法，可以注释掉
// 此处可添加自定义逻辑
promise.then((data) => console.log("表单详情返回数据：", data.returnData.ReturnData.custom))
       .catch((err) => console.log("错误：", err.message));

表单场景下自定义代码入口

表单场景下自定义代码入口。

  // 表单场景执行传递表单上下文
  executeInForm(formContext) {
    console.log(formContext);
    // 参数formContext为表单上下文，提供以下接口：
    // close方法：关闭当前表单详情页，
    // currentRecord ：当前操作的数据，
    // meta：当前表单相关的元数据，可以读取SchemaCode，数据ID，
    // refresh：强制刷新当前表单详情页。
    var customData = {};
    customData["Name"] = "氚云";
    customData["Code"] = "cy";
    var promise = this.execute(customData); // 调用通用点击按钮执行方法，可以注释掉
    // 此处可添加自定义逻辑
    promise.then((data) => console.log("表单详情返回数据：", data.returnData.ReturnData.custom))
           .catch((err) => console.log("错误：", err.message));
  }

列表场景

调用后端代码

调用后端代码，返回promise，可以百度或AI Promise的使用方法。

参数postValue为 key-value格式；参考示例如下：

execute(postValue) {
  return super.execute(postValue); // 调用父类方法，调用后端代码，可以注释掉
  // 此处添加自定义逻辑
}
var customData = {};
customData["Name"] = "氚云";
customData["Code"] = "cy";
var promise = this.execute(customData); // 调用通用点击按钮执行方法，可以注释掉
// 此处可添加自定义逻辑
promise.then((data) => console.log("列表返回数据：", data.returnData.ReturnData.custom))
       .catch((err) => console.log("错误：", err.message));

列表（视图）场景下自定义代码入口

列表（视图）场景下自定义代码入口。

// 视图场景传递视图上下文
executeInView(viewContext) {
  console.log(viewContext);
  // 参数viewContext为视图上下文，提供以下接口：
  // clearSelect方法：清除选中的记录，
  // currentRecord ：当前操作的数据，目前为空，
  // getSelected: 获取当前选中的记录，返回对象数组，
  // getSelectedIds: 获取当前选中的记录Id，返回字符串数组，
  // meta：当前表单相关的元数据，可以读取SchemaCode，数据ID，
  // refresh：强制刷新当前视图页。
  var customData = {};
  customData["Name"] = "氚云";
  customData["Code"] = "cy";
  var promise = this.execute(customData); // 调用通用点击按钮执行方法，可以注释掉
  // 此处可添加自定义逻辑
  promise.then((data) => console.log("列表返回数据：", data.returnData.ReturnData.custom))
         .catch((err) => console.log("错误：", err.message));
}

其他公共接口

在新按钮代码编辑页面，原来的如$.Guid()，$.IConfirm，$.ShowSuccess，$.IShowForm等接口不再使用，使用新定义的接口，可以在列表和视图页面都可以使用。接口介绍请看下面的接口列表。

生成UUID

const guidString = H3.Common.Utils.guid();
console.log(guidString);

打开链接

//在新的浏览器页面打开特定的页面
H3.Common.Utils.openLink('https://wwww.baidu.com', H3.SmartAction.OpenLinkType.Blank);

//在当前页面侧滑处指定的页面
H3.Common.Utils.openLink('https://wwww.baidu.com', H3.SmartAction.OpenLinkType.Self);

打开表单弹窗

const that = this;
 H3.Common.Utils.openForm({
  schemaCode: "D00018smac7656a4b64d4c348fbb5cd2d3b11b7b", //需要打开的表单编码
  bizObjectId: '', //需要查看的具体数据Id,不传为新增数据页面
  params: { param1: 'param1Value', param2: 'param2Value' }, //自定义参数
  defaultValues: { F0000001: '新增时单行文本内容', F0000003 : '2025-10-29'}, //表单默认值
  modalConfig: { //打开的窗口设置
    title: '打开测试表单填写数据',
    width: 800,
    height: 500,
    fullscreen: true, //优先级高于width,height
  },
   //关闭模态窗口的回调函数
  closeCallback(actionCode, postValue){
    console.log(actionCode);
    console.log(postValue);
    //执行当前按钮的后端代码
    that.execute({'actionCode': 'close', 'value': '关闭后的值'});
  }
 });

Totast提示框

totast有success，error，warning，info等几种类型，通过type参数控制。

H3.Common.UI.toast({
      type: "success", // error | warning | info
      content: "成功totast框",
      onClose() {
        console.log("close.......");
      }
     });

数据加载框

H3.Common.UI.loading({ title: '数据加载中...' }); // 一直显示，不关闭
H3.Common.UI.loading({ title: '数据加载中...', duration: 3000 }); // 3s后关闭

确认提示框

确认提示框有 confirm，info，success，error，warning 五种样式，通过type参数控制，confirm类型提示框会有删除按钮，其他类型提示框没有删除按钮。

confirm确认框

H3.Common.UI.dialog({
    type: 'confirm', 
    title: '删除确认',
    content: '删除后将不可恢复，确定要删除', 
    okText: '删除',
    cancelText: '取消',
    onCancel() {
    },
    onOk() {
      // do delete
    }
  });

其他类型确认框

H3.Common.UI.dialog({
    type: 'info', // info | sucess | error | warning
    title: '删除确认',
    content: '删除后将不可恢复，确定要删除', 
    okText: '删除',
    cancelText: '取消', -- info时不会显示cancelText
    onCancel() {
    },
    onOk() {
      // do delete
    }
  });