项目中经常遇到用户的个性化需求:你们这个日历好难看,换一个;报表一打开就显示最近一周的数据;我们报表有十来个字段想自由组合钻取和过滤....
Cognos报表开发中,恰当的使用的js,jq组件,不仅能满足用户个性化需求,也能使原本看似Cognos不可能完成事情变得可能。本文将介绍js,jq解决cognos报表开发中最常见的两种需求:给组件赋初始值和自定义组件。
实例中没有congos的日历而是用的My97DatePicker这个日历组件,初始日期设置为月初到今天,效果如下:
js,jq和cognos交互的原理:
引入的组件通过js设置Cognos自带组件的值,Cognos自带组件和报表的过滤参数绑定,从而实现引入的组件控制报表上的数据。下面通过实例说明。希望大家很快能举一反三运用其他jq框架融入报表开发。
附件中提供了各种组件设置和获取值的方法,My97DatePicker包及资料。演示的报表如下:
----------------------------------------------设置初始值为特定时间段---------------------------------------
经常遇到要求一打开报表就显示最近一周或者一个月或者其他时间段的需求。本例演示设置日期为月初到当前日期。大家可以灵活的修改js实现不同需求,网上有很多现成的js可以参考使用。
拖入两个html 项目和两个文本提示框。文本提示框对应页面上的开始日期和结束日期参数。注意设置两个组件名称
逻辑说明: 文本提示框绑定开始和结束日期参数,js设置文本提示框的值为要求的日期段。从而达到了报表一打开就展示指定日期段。
隐藏页面组件的内容(有点常识都看得懂):
<div style="display:none">
设置参数初始值的内容(红色表示组件名称具体参考附件):
</div>
<script>
function init(){
//获取cognos页面上的对象
var form=getFormWarpRequest();
var startDate=form._textEditBoxStartDate;
var endDate=form._textEditBoxEndDate;
//获取日期对象
var date=new Date();
var y=date.getFullYear();
var m=date.getMonth() + 1;
//根据报表中日期格式调整
if(m<=9){
m='0'+m;
}
var d=date.getDate();
if(d<=9){
d='0'+d;
}
startDate.value=y+'-'+m+'-'+'01';
endDate.value=y+'-'+m+'-'+d;
//自动提交
promptButtonFinish();
}
</script>
<body onload=init()>
如果不想用其他日历控件,那么设置默认时间段已经完成, 再在报表页面用cognos的日历控件接收上面的参数就行。 要用其他第三方控件的往下看:
----------------------------------------------自定义组件---------------------------------------
拷贝 My97DatePicker到服务器(架构不同拷贝的路径也不同,我用的自带的tomcat)
为什么选择My97DatePicker,因为它功能十分强大:提供各种格式日期,年月,星期等的展示(参考附件资料),并且兼容性在项目上也得到了验证。 当然你也可以根据自己喜好引入其他jq组件,比如easyui。
逻辑说明: 文本提示框绑定开始和结束日期参数, My97DatePicker 日历控制文本提示框的值,从而达到控制报表过滤参数。
隐藏工具栏(方法很多,我就喜好这种):
<style>
.topRow{
display:none;
}
</style>
隐藏文本提示框:
<div style="display:none">
注意两个文本提示框的参数和名称
赋值的js:
</div>
<script type="text/javascript" src="../My97DatePicker/WdatePicker.js"></script>
<script>
//获取cognos页面上的对象
var form=getFormWarpRequest();
var startDate=form._textEditBoxTxtStart;
var endDate=form._textEditBoxTxtEnd;
//用文本框的值给日历组件赋值
document.getElementById("d5221A").value=startDate.value;
document.getElementById("d5222A").value=endDate.value;
//日历组件选择的值给文本框赋值
function changeIt(flag){
if(flag==1){
startDate.value=document.getElementById("d5221A").value;
}else{
endDate.value=document.getElementById("d5222A").value;
}
}
//cognos中提交表单查询数据
function submitData(){
promptButtonFinish();
}
</script>
两个My97DatePicker日历:
<input id="d5221A" class="Wdate" type="text" onFocus="var d5222=$dp.$('d5222A');WdatePicker({onpicked:function(){d5222A.focus();changeIt(1)},maxDate:'#F{$dp.$D(\'d5222A\')}'})" />
至
<input id="d5222A" class="Wdate" type="text" onFocus="WdatePicker({onpicked:function(){changeIt(0)},minDate:'#F{$dp.$D(\'d5221A\')}'})"/>
查询按钮:
<input type="button" onclick="submitData()" value="查询数据">
至此,开发完成!
-----------------------------------------------总结--------------------------------------------
大家可以看得出cognos结合js其实很简单,而且报表开发结合js/jq,其他开源插件比如echart,easyui,百度地图API等将产生令人期待的展示效果和方式。Cognos,BI技术交流群 347488829。最后贴上一句老话: