查看源

该宏代码在V10.5版本上验证通过

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

1. 示例效果

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

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > 7AC696F1-A445-421D-B9CE-1982C560649D.GIF

2. 操作步骤

步骤一：新建一个空白的仪表盘。选择数据模型或业务主题，拖入所需组件。

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > image2022-3-7_16-7-30.png

步骤二：参考如下示例效果制作基础图表。

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > image2021-9-14_18-39-31.png

步骤三：选中文本组件，进入编辑界面，选择“源代码”，进入“源代码”编辑界面

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > yuandaima.jpg

步骤四：在文本属性中封装“class=“target-content”样式属性，并增加下划线样式属性代码，具体代码可见下方：

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > daima.png

  <p style="text-align:left;">
    <span style="text-decoration:underline;">
      <span class="target-content" style="font-family:Microsoft-YaHei;font-size:12px;">
        <span style="font-size: 16px;">
          打开内部资源
        </span>
      </span>
    </span>
  </p>

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

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > image2021-9-14_18-40-11.png

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

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > image2021-9-14_18-42-12.png

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

方法一：指定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'
            }
        }
		//如果get方式要传递参数，参考如下
		// let query:OpenLinkQuery = {
        //     targetInfo: {
        //         url: `../vision/openresource.jsp`,
        //         method: 'GET',
        //         params: [{name: 'resid', alias: 'resid', value: ['823c20d0f6eb956405b2d05f933d52c9'], displayValue: ['823c20d0f6eb956405b2d05f933d52c9']}]
        //     }
        // }
        // 调用打开接口，接口默认值为：新窗口打开'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)
    }
}

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&paramsInfoBase64=${paramsInfoBase64}`,
                method: 'POST',
                title: '用宏打开的页面'
            }
        }
        // 调用打开接口，接口默认为：新窗口打开'NEW_WIN'，设置为新TAB页打开
        page.openLinkByType(query, OpenType.NEW_TAB)
    }
}

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > image2021-9-14_18-51-0.png

方法二：指定资源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)
    }
}

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)
    }
}

Smartbi Insight V11帮助中心 > 【仪表盘】指定打开方式来打开目标报表页面 > image2021-9-14_19-5-55.png

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

3. 下载资源

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

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