[H5]表单页代码示例

October 29, 2020

Author: 王松松、傅腾

//表单扩展点
const form = new xsyrpa.FormExtensionPoint("xsy.breeze.app.customEntity11__c.defaultBusiType.masterEntityCreation.defaultPageLayout#*#");

//表单加载完成
form.on("loaded", (data) => {
    //表单字段扩展点
    const formItem = new xsyrpa.FormTextInputExtensionPoint("xsy.breeze.app.customEntity11__c.defaultBusiType.masterEntityCreation.defaultPageLayout#*#customItem1__c");

    //设置值
    formItem.setValue("My Value");
    
    //获取值
    formItem.getValue().then((val) => {
        console.log(val);
    })

    //设置只读
    formItem.setReadOnly(true);
    
    //设置必填，只读字段不会显示必填的"*"号
    formItem.setRequired(true);

    //设置可见
    formItem.setVisible(true);
    
    //设置字段错误提醒，只是前端的显示，保存时不会校验
    formItem.setError("My Error");

    //设置表单的placeholder
    formItem.setPlaceholder("My Placeholder");

    //设置样式
    formItem.setInlineStyle({
      //selector是css选择器
      //了解css选择器: https://developer.mozilla.org/zh-CN/docs/Glossary/CSS_Selector
      selector: ".am-list-item",
      style: { "background": "red" },
    });

    //字段数据发生变化时，调用回调方法
    formItem.on("onChange", (data) => {
        console.log(data);
        debugger;
    });

    //关联关系替换picker事件
    const formRelatedField = new xsyrpa.FormRelatedFieldExtensionPoint("xsy.breeze.app.account.defaultBusiType.masterEntityCreation.defaultCreateLayout#*#parentAccountId");
    formRelatedField.on("pickerHookTrigger", (data, resolve, reject) => {
        resolve({
            accountName: "相关列表新建",
            id: 1387683565960837
        });
    })

});

//表单保存前触发事件
form.on("beforeSave", (data, resolve, reject) => {
    //继续保存流程
    resolve();

    //取消保存，返回表单编辑页
    //reject();
});

//表单子实体数据更新触发事件
form.on("refreshed", (data)=>{
   //data包括主实体数据和子实体整体数据
   const {master, subnode} = data;

   //根据数据更新主实体字段的值
   const formItem = new xsyrpa.FormTextInputExtensionPoint("xsy.breeze.app.customEntity11__c.defaultBusiType.masterEntityCreation.defaultPageLayout#*#customItem1__c"");
   formItem.setValue(`${subnode.customEntity11__c.defaultBusiType.records.items.length}`);
   resolve();
})
Recent Posts