| 注意 |
|---|
该宏代码在V10.5版本上验证通过 本文档的示例代码仅适用于本文档中的示例报表/场景。若实际报表/场景与示例代码无法完全适配（如使用功能不一致，或多个宏代码冲突等），需根据实际需求开发代码。 |
1. 示例效果
通过编写宏打开指定的目标报表页面，并传递参数给目标报表。下面演示了四种打开方式：
2. 操作步骤
- 步骤一：新建一个空白的自助仪表盘新建一个空白的仪表盘。选择数据模型或业务主题，拖入所需文本组件。
- 步骤二：拖入文本组件，选择数据模型或业务主题
拖拽所需字段并设置筛选器，效果如下：
- ：参考如下示例效果制作基础图表。
- 步骤三：选中文本组件，右键进入宏管理页步骤三：选中文本组件，进入编辑界面，选择“源代码”，进入“源代码”编辑界面
- 步骤四：在界面新建宏，弹出的新建模块对话框中输入名称，勾选对象为组件，事件为“onAfterRender(组件渲染后)”
- 步骤五：编写宏代码实现效果
方法一：指定URL链接及打开方式来打开页面
示例主要使用的是 IPage 对象下的openLinkByType方法（点击查看API详情），把下面宏代码复制到代码区域；
- 步骤四：在文本属性中封装“class=“target-content”样式属性，并增加下划线样式属性代码，具体代码可见下方：
| 代码块 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
function main(page: IPage, portlet: IStaticTextPortlet) { // 获取富文本编辑器的dom <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> |
- 步骤五：选中文本组件，右键进入宏管理页
- 步骤六：在界面新建宏，弹出的新建模块对话框中输入名称，勾选对象为组件，事件为“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 container: HTMLElementparamsInfoBase64 = portlet.getHtmlContent(SmartbiXMacro.utils.encodeBase64(JSON.stringify(params)) // 插入点击区域用于点击打开 paramsInfoBase64 = let box: any = container.querySelector('.target-content')encodeURIComponent(paramsInfoBase64) if (!box) return let query: OpenLinkQuery = { let filter:IFilterPortlet = page.getPortletsByTitle('ShipRegion')[0] box.onclick = (etargetInfo: MouseEvent){ => { let value = (filter && filter.getValue() || []).join(',') url: `../vision/openresource.jsp?debug=true&resid=823c20d0f6eb956405b2d05f933d52c9&debug=true¶msInfoBase64=${paramsInfoBase64}`, let params = [{ namemethod: 'ShipRegion', alias: 'ShipRegion', value: value, displayValue: value }]POST' } } let paramsInfoBase64 = SmartbiXMacroconsole.utils.encodeBase64(JSON.stringify(params)) warn(query) paramsInfoBase64 = encodeURIComponent(paramsInfoBase64)// 调用打开接口，接口默认为：新窗口打开'NEW_WIN' let query: OpenLinkQuery = {page.openLinkByType(query, OpenType.NEW_WIN) targetInfo:} } |
其他三种打开方式同理，依次在各自组件下编写宏代码
| 代码块 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
function main(page: IPage, portlet: IStaticTextPortlet) { // 获取富文本编辑器的dom let container:HTMLElement = portlet.getHtmlContent() url: `../vision/openresource.jsp?debug=true&resid=823c20d0f6eb956405b2d05f933d52c9&debug=true¶msInfoBase64=${paramsInfoBase64}`,/ 插入点击区域用于点击打开 let box: any = container.querySelector('.target-content') if (!box) return method: 'POST' box.onclick = (e: MouseEvent) => { } // 目标页面参数(参数或者筛选器的值) } let query:OpenLinkQuery console.warn(query)= { // 调用打开接口，接口默认为：新窗口打开'NEW_WIN' targetInfo: { page.openLinkByType(query, OpenType.NEW_WIN) } } |
其他三种打开方式同理，依次在各自组件下编写宏代码
| 代码块 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
function main(page: IPage, portleturl: IStaticTextPortlet) {`../smartbix/?integrated=true // 获取富文本编辑器的dom let container:HTMLElement = portlet.getHtmlContent() &showheader=false // 插入点击区域用于点击打开 let box: any = container.querySelector('.target-content') if (!box) return&l=zh_CN box.onclick = (e: MouseEvent) => { &nodeid=I8a8a9f3b017b4a234a237359017b4a3ef45200d2 // 目标页面参数(参数或者筛选器的值) let query:OpenLinkQuery &commandid= {2abccff5-1a82-1871-a9b4-5c735d2d8942 targetInfo: { #/page/823c20d0f6eb956405b2d05f933d52c9`, url: `../smartbix/?integrated=truemethod: 'GET' } &showheader=false } //如果get方式要传递参数，参考如下 // let query:OpenLinkQuery = { &l=zh_CN// targetInfo: { // &nodeid=I8a8a9f3b017b4a234a237359017b4a3ef45200d2 url: `../vision/openresource.jsp`, &commandid=2abccff5-1a82-1871-a9b4-5c735d2d8942// method: 'GET', # /page/823c20d0f6eb956405b2d05f933d52c9`, params: [{name: 'resid', alias: 'resid', value: method['823c20d0f6eb956405b2d05f933d52c9'], displayValue: ['GET823c20d0f6eb956405b2d05f933d52c9']}] // } // } // 调用打开接口，接口默认值为：新窗口打开'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¶msInfoBase64I8a8a9f3b017b4a234a237359017b4a6694800181&¶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)
}
} |
| 代码块 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
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)
}
} |
- 步骤六：点击 保存。重新访问报表，可看到效果已实现
