【自助仪表盘】指定打开方式来打开目标报表页面

本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。

1. 示例效果

通过编写宏打开指定的目标报表页面，并传递参数给目标报表。下面演示了四种打开方式：

2. 操作步骤

步骤一：新建一个空白的自助仪表盘

步骤二：拖入文本组件，选择数据模型或业务主题

拖拽所需字段并设置筛选器，效果如下：

步骤三：选中文本组件，右键进入宏管理页

步骤四：在界面新建宏，弹出的新建模块对话框中输入名称，勾选对象为组件，事件为“onAfterRender(组件渲染后)”

步骤五：编写宏代码实现效果

方法一：指定URL链接及打开方式来打开页面

示例主要使用的是 IPage 对象下的openLinkByType方法（点击查看API详情），把下面宏代码复制到代码区域；

新窗口打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container: HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter:IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => {
        let value = (filter && filter.getValue() || []).join(',')
        let params = [{ name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value }]
        let paramsInfoBase64 = SmartbiXMacro.utils.encodeBase64(JSON.stringify(params))
        paramsInfoBase64 = encodeURIComponent(paramsInfoBase64)
        let query: OpenLinkQuery = {
            targetInfo: {
                url: `../vision/openresource.jsp?debug=true&resid=823c20d0f6eb956405b2d05f933d52c9&debug=true¶msInfoBase64=${paramsInfoBase64}`,
                method: 'POST'
            }
        }
        console.warn(query)
        // 调用打开接口，接口默认为：新窗口打开'NEW_WIN'
        page.openLinkByType(query, OpenType.NEW_WIN)
    }
}

其他三种打开方式同理，依次在各自组件下编写宏代码

浮动框打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    box.onclick = (e: MouseEvent) => { 
        // 目标页面参数(参数或者筛选器的值)
        let query:OpenLinkQuery = {
            targetInfo: {
                url: `../smartbix/?integrated=true
                &showheader=false
                &l=zh_CN
                &nodeid=I8a8a9f3b017b4a234a237359017b4a3ef45200d2
                &commandid=2abccff5-1a82-1871-a9b4-5c735d2d8942
                #/page/823c20d0f6eb956405b2d05f933d52c9`,
                method: 'GET'
            }
        }
        // 调用打开接口，接口默认值为：新窗口打开'NEW_WIN'，设置为浮动框打开
        page.openLinkByType(query, OpenType.DIALOG)
    }
}

替换源页面打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter: IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => { 
        // 目标页面参数(参数或者筛选器的值)
        let value = (filter && filter.getValue() || [])
        let params = [{ name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value }]
        let query:OpenLinkQuery = {
            targetInfo: {
                url: `../smartbix/?integrated=true
                &showheader=false
                &l=zh_CN
                &nodeid=I8a8a9f3b017b4a234a237359017b4a3ef45200d2
                &commandid=2abccff5-1a82-1871-a9b4-5c735d2d8942
                #/page/823c20d0f6eb956405b2d05f933d52c9`,
                method: 'GET',
                params: params
            }
        }
        // 调用打开接口，接口默认为：新窗口打开'NEW_WIN'，设置为替换源页面打开
        page.openLinkByType(query, OpenType.COVER_SELF)
    }
}

新TAB页打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter:IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => { 
        // 目标页面参数(参数或者筛选器的值)
        let value = (filter && filter.getValue() || []).join(',')
        let params = [{ name: "ShipRegion", alias: "ShipRegion", value: value, displayValue: value }, { name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value }]
        let paramsInfoBase64 = SmartbiXMacro.utils.encodeBase64(JSON.stringify(params))
        paramsInfoBase64 = encodeURIComponent(paramsInfoBase64)
        let query:OpenLinkQuery = {
            targetInfo: {
                url: `../vision/openresource.jsp?resid=I8a8a9f3b017b4a234a237359017b4a6694800181¶msInfoBase64=${paramsInfoBase64}`,
                method: 'POST',
                title: '用宏打开的页面'
            }
        }
        // 调用打开接口，接口默认为：新窗口打开'NEW_WIN'，设置为新TAB页打开
        page.openLinkByType(query, OpenType.NEW_TAB)
    }
}

方法二：指定资源id和打开方式来打开页面

示例主要使用的是 IPage 对象下的openResourceByType方法（点击查看API详情），把下面宏代码复制到代码区域；

新窗口打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter: IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => { 
        // 目标资源id
        let id: string = '823c20d0f6eb956405b2d05f933d52c9'
        let value = filter.getValue() || []
        // 目标资源参数(参数或者筛选器的值)
        let query: OpenResourceQuery = {
            paramInfo: [{name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value}]
        }
        // 调用打开资源接口，默认为：新窗口打开'NEW_WIN'
        page.openResourceByType(id, query, OpenType.NEW_WIN)
    }
}

其他三种打开方式同理，依次在各自组件下编写宏代码

浮动框打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter: IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => { 
        // 目标资源id
        let id: string = 'I8a8a9f3b017b4a234a237359017b4a6694800181'
        let value = filter.getValue()
        // 目标资源参数(参数或者筛选器的值)
        let query: OpenResourceQuery = {
            paramInfo: [{name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value}]
        }

        // 调用打开资源接口
        page.openResourceByType(id, query , OpenType.DIALOG)
    }
}

替换源页面打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter: IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => { 
        // 目标资源id
        let id: string = '823c20d0f6eb956405b2d05f933d52c9'
        let value = filter.getValue()
        // 目标资源参数(参数或者筛选器的值)
        let query: OpenResourceQuery = {
            paramInfo: [{name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value}]
        }
        // 调用打开资源接口
        page.openResourceByType(id, query, OpenType.COVER_SELF)
    }
}

新TAB页打开

function main(page: IPage, portlet: IStaticTextPortlet) {
    // 获取富文本编辑器的dom
    let container:HTMLElement = portlet.getHtmlContent()
    // 插入点击区域用于点击打开
    let box: any = container.querySelector('.target-content')
    if (!box) return
    let filter:IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0]
    box.onclick = (e: MouseEvent) => { 
        // 目标资源id
        let id: string = '823c20d0f6eb956405b2d05f933d52c9'
        let value = filter.getValue()
        // 目标资源参数(参数或者筛选器的值)
        let query: OpenResourceQuery = {
            paramInfo: [{name: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value}]
        }
        // 调用打开资源接口
        page.openResourceByType(id, query, OpenType.NEW_TAB)
    }
}

步骤六：点击 保存。重新访问报表，可看到效果已实现

3. 下载资源

openLinkByType-四种打开方式资源.xml

openResourceByType-四种打开方式资源.xml

关注我们

服务支持

页面树结构

【自助仪表盘】指定打开方式来打开目标报表页面

1. 示例效果

2. 操作步骤

3. 下载资源