[Web]详情页代码示例

February 3, 2020

Author: 郑颍丽、江炜

详情页

详情页扩展有头部按钮, 资料页表单, 商机推进组件, 相关列表页按钮 等 其中按钮icon地址:Breeze Icons 图标名字规则: name-theme, 其中主题theme可以为空,默认使用Outlined主题, 例如: comment_32-filled, comment_32.


const CUSTOMBTNID = "CUSTOMBTNID";

//获取详情页头部按钮组扩展点实例
const detailPageButtonGroup = new xsyrpa.ButtonGroupExtensionPoint("customEntity78__c.DetailPage#*#Header_ButtonGroup");
detailPageButtonGroup.on('detailButtonGroupLoaded', (data) => {
     //新增按钮到头部按钮组中
    detailPageButtonGroup.addButton({
        extId: CUSTOMBTNID,
        text: "新按钮"
    }).then((newBtn) => {
        //新增按钮成功
        newBtn.on("onClick", () => {
            //新按钮事件 
        });
    });

    //获取编辑按钮实例
    const editButton = new xsyrpa.ButtonExtensionPoint("customEntity78__c.DetailPage#*#_editCustomize_button");
    //隐藏编辑按钮
    editButton.setVisible(false);
});

相关列表按钮代码示例

const ext_AppPageLifeCycle = new xsyrpa.PageExtensionPoint("AppPageLifeCycle");

//页面加载时设置sessionStorage
ext_AppPageLifeCycle.on("setStorage", function(data, resolve) {
    window.sessionStorage.setItem('maskForHSBC',JSON.stringify(data));
});

//应用加载完毕
ext_AppPageLifeCycle.on("loaded", () => {

    //获取文档相关列表按钮组
    const ext_customEntity78__c_DetailPage__ReferList_1009_ButtonGroup = new xsyrpa.ButtonGroupExtensionPoint("customEntity78__c.DetailPage#*#_ReferList_1009_ButtonGroup");
    //新增按钮到文档相关列表
    ext_customEntity78__c_DetailPage__ReferList_1009_ButtonGroup.addButton({
        extId:"buttonid",
        icon:"comment_32",
        text:""
    });
    //隐藏相关列表详细数据操作按钮组(true隐藏,false显示)
    ext_customEntity78__c_DetailPage__ReferList_1009_ButtonGroup.invokeAsync('removeButton',true)

})




//获取资料页表单实例
const ext_form331606 = new xsyrpa.FormExtensionPoint("form331606");
ext_form331606.on("loaded",(formData)=>{
    //打印表单数据
    console.log(formData);
    //获取资料页字段"传真"
    const ext_entityInfo_account_fax = new xsyrpa.FormInlineItemExtensionPoint("entityInfo_account.fax");
    //设置必填
    ext_entityInfo_account_fax.setRequired(true);

    //设置可见
    ext_entityInfo_account_fax.setVisible(true);

    //设置只读
    ext_entityInfo_account_fax.setReadOnly(true);
});

详情页头部按钮组

详情页暂时还未有整体的生命周期扩展点。

如果想获取详情页的数据id， 可以从头部按钮组的扩展点上获取。

  • 头部按钮组示例
const ext_order_DetailPage_Header_ButtonGroup = new xsyrpa.ButtonGroupExtensionPoint("order.DetailPage#*#Header_ButtonGroup");
ext_order_DetailPage_Header_ButtonGroup.on('detailButtonGroupLoaded', (data) => {
    // 传出data为
    /*
      {
         entityId // 实体id
         recordId // 数据id
      }
    */
 
    //之后可以进行调用openApi或控制系统按钮的隐藏等（使用方法见已公开文档）
})
  • 报价单详情页根据审批状态隐藏打印按钮
const ext_quote_DetailPage_Header_ButtonGroup = new xsyrpa.ButtonGroupExtensionPoint("quote.DetailPage#*#Header_ButtonGroup"); //标价单详情页头部按钮组
const ext_quote_DetailPage__printCustomize_button = new xsyrpa.ButtonExtensionPoint("quote.DetailPage#*#_printCustomize_button"); //报价单详情页打印按钮
ext_quote_DetailPage_Header_ButtonGroup.on('detailButtonGroupLoaded', (data)=>{
    console.log(data);
    //data.recordId, data.entityId
    //调用OpenApi 获取审批状态
    //隐藏打印按钮
    ext_quote_DetailPage__printCustomize_button.setVisible(false);
})

详情页-资料组件-分割线隐藏（以商机报备为例）

资料页分割线

资料页分割线扩展点

资料分割线显示与隐藏


const ext_opportunity_register_DetailPage_opportunity_register_splitline = new xsyrpa.FormItemSectionExtensionPoint("opportunity_register.DetailPage#*#opportunity_register_splitline");
/**
 * @param  true 显示 false 隐藏
 * */
ext_opportunity_register_DetailPage_opportunity_register_splitline.setVisible(true) //显示分割线

web左侧菜单配置


const ext_AppLeftMenu = new xsyrpa.LeftMenuExtensionPoint("AppLeftMenu");
/**
     * 菜单项显示、隐藏、文本替换
     * itemKey:  菜单项的唯一标识(菜单项的menuId)
     * text: 替换的文案，不传不替换
     * visible：设置菜单项是否显示
     * 例如：[{itemKey: '40', text: "电话台", visible: true}]。
     * 这个规则意义：menuid为40的菜单项文案更改为配置显示。
*/
ext_AppLeftMenu.setMenuItemsConfig([{itemKey: '357719', text: '2222', visible: true}])
Recent Posts