页面树结构
转至元数据结尾
转至元数据起始

示例说明
在浏览中,根据公共参数切换改变页面资源内容。

  • 当参数为"报表1"时,下面显示灵活分析报表。

  • 当参数为"报表2"时,下面打开复杂报表。

示例环境:

以上示例基于V5.0版本,IE11浏览器,页面上的资源测试;供参考。


设置方法

  1. 在公共设置中,创建一个参数,该参数控制页面显示资源的内容;
  2. 在资源定制中,进行数据集定义,对需要通过参数切换而显示的资源对应的查询进行改造;
  3. 在资源定制中,建一个页面,拖动其中一个资源,并把参数都设置为公共参数;
  4. 选中页面,右键选择 编辑宏 进入报表宏界面。
  5. 在报表宏界面新建客户端模块。在弹出的新建模块对话框中选择对象为 page;事件为 onParamValueChanged;并把下面宏代码复制到代码区域; 

 

宏类型

类型

对象

事件

ClientSide

page

onParamValueChanged


宏代码

function main(page, pageContext, param) {
    //I2c94eaaa2a82e9d6012a885f1681367c
    var param = page.getParamValueByName('切换参数');
    var pv = param.value + '';
    //映射参数值与对应的报表资源
    var reports = {
        '1': {
            id: 'I402881903744c86c01543bd8cfc221d0',
            type: 'SIMPLE_REPORT' //报表类型灵活分析
        },
        '2': {
            id: 'I402881903744c86c01543be71d262281',
            type: 'Dashboard' //报表类型为仪表分析
        },
        '3': {
            id: 'I402881903744c86c01543be863602294',
            type: 'SPREADSHEET_REPORT' //报表类型为电子表格
        }
    };
    var reportId = reports[pv] && reports[pv].id;
    if (!reportId) {
        alert('找不到参数值(' + pv + ')对应的报表信息!');
        return;
    }
    var reportType = reports[pv].type;
    var dashlet = page.findDashletBySlotId(0, 0); // 根据位置找到对应的dashlet对象
    var needMergeParams = false;
    if (!dashlet) { // dashlet不存在,新建一个
        return;
    } else if (dashlet.currentPortletId != reportId) { // 如果dashlet中的报表不是需要的,替换dashlet的内容
        dashlet.openOtherPortlet(reportId, reportType);
        needMergeParams = true;
    }
    var portlet = dashlet.currentPortlet;
    if (!portlet) return;
    if (needMergeParams) { // 合并参数到公共参数,必须是已经存在的公共参数。
        if (reportType == 'FREE_REPORT') {
            window.setTimeout(checkLoadComplete, 200);
        } else {
            var paramNames = ['产品类别-有默认值', '区域_有默认值', '切换参数'];
            for (var i = 0; i < paramNames.length; i++) {
                page.mergeParamToPublic(paramNames[i], reportId, portlet, "groupById");
            }
            var params = page.getPublicParams();
            for (var i = 0; i < params.length; i++) {
                var pobj = params[i];
                //portlet.getPortletObject().setParamValue(pobj.id, pobj.value,pobj.displayValue);// 设置或收集参数值
                portlet.fillParamValue(pobj.name, pobj.value, pobj.displayValue); // 设置或收集参数值
            }
            portlet.commitParamValue(); // 设置参数值到报表对象
        }
    }
    portlet.refreshData(); // 刷新报表
     for (var j = 0; j < page.dashletList.length; j++) {
        page.dashletList[j].elemDashletTitle.innerHTML = '';
    } //隐藏所有页面的标题
}
function checkLoadComplete() {
    var dashlet = page.findDashletBySlotId(0, 0);
    var portlet = dashlet.currentPortlet;
    if (!portlet.isLoadComplete()) {
        window.setTimeout(checkLoadComplete, 200);
        return;
    }
    var paramNames = ['产品类别-有默认值', '区域_有默认值', '切换参数'];
    for (var i = 0; i < paramNames.length; i++) {
        page.mergeParamToPublic(paramNames[i], dashlet.currentPortletId, portlet, "groupById");
    }
    var params = page.getPublicParams();
    for (var i = 0; i < params.length; i++) {
        var pobj = params[i];
        portlet.setParamValueByName(pobj.name, pobj.value, pobj.displayValue); // 设置或收集参数值
    }
    portlet.commitParamValue(); // 设置参数值到报表对象
    portlet.refreshData();
}


关键对象总结

  • 根据位置找到对应的dashlet对象:page.findDashletBySlotId(0, 0)
  • 设置或收集参数值:portlet.setParamValueByName(pobj.name, pobj.value, pobj.displayValue)
  • 设置或收集参数值:portlet.fillParamValue(pobj.name, pobj.value, pobj.displayValue);
  • 设置参数值到报表对象:portlet.commitParamValue()
  • 刷新报表:portlet.refreshData()