If you are unable to create a new account, please email support@bspsoftware.com

 

News:

MetaManager - Administrative Tools for IBM Cognos
Pricing starting at $2,100
Download Now    Learn More

Main Menu

[Script] Some javascripts in actions

Started by sir_jeroen, 05 Oct 2005 05:06:12 AM

Previous topic - Next topic

sir_jeroen

#25
Tnx this will be very usefull!!
Maybe you could rewrite it to vbscript so most of the people can run and try it without having to compile it in Delphi?

But either way... Still very usefull... can't test it although  :'(

jolly

#26
And here are the report specification for the highlited rows in a report. Be sure that you have the package GO Sales and Retailers in your CRN. You will find the javascript behind the "HTML Item".

Have fun

jolly

#27
Okay, here is another one of my reports. In this report the user can change the row and the collumn. Also he can change the Measure. In the Prompt Page is a little Javascript which changes the first entry to a text of your choice. In the Report Page is another small Javascript which hide or show the Values/Params.

The attached File included four PNG where you can see the Report


sir_jeroen

That really looks nice.. Now i'll have to try and top you :D
It's starting to look like a competition... :D
Maybe i've got time tonight to build a new one :D

COGNOiSe administrator

Nice work, jolly. Very nice.

Great topic RA!

sir_jeroen


sir_jeroen

Jolly I accepted your challenge and I raise you a:

Listitem with rowhighlighting and dynamic selection

jolly

Okay, I take a look at the new Tutorial. Thereafter now I am probably again to bild a new Report.  ;D

sir_jeroen

I always like competition.... :D Hopefully I can beat you..

jolly

#34
Sorry for the delay to bild a new report. Look at the attached file. On the left side there is a simple List with Javascript inside.Ã,  On the right side is an Iframe which contains a Power Play Cube.

sir_jeroen

Ok... I take this bet and I raise it this week... I'm still developing :D

jo0001

#36
Hi,

I've just come across your site (COGNOiSe). Thanks a lot for all these cool tipps&tricks.

Therefore, I really would like to contribute some of mine.

Here is one of it. I called it TabView. Hope it is of anybody's interest:

<report xml:lang="de" xmlns="http://developer.cognos.com/schemas/report/1/"><!--RS:1.1-->
<modelConnection name="/content/package[@name='GO Sales and Retailers']/model[@name='model']"/>
<querySet xml:lang="de">
<BIQuery name="Abfrage1">
<cube><factList><item refItem="Retailer name" aggregate="none"/><item refItem="Order year" aggregate="none"/></factList></cube>
<tabularModel><dataItem name="Retailer name" aggregate="none"><expression>[gosales_goretailers].[Orders].[Retailer name]</expression></dataItem><dataItem name="Order year" aggregate="none"><expression>[gosales_goretailers].[Orders].[Order year]</expression></dataItem></tabularModel></BIQuery>
<BIQuery name="Abfrage2"><cube><factList><item refItem="Order year" aggregate="none"/></factList></cube><tabularModel><dataItem name="Order year" aggregate="none"><expression>[gosales_goretailers].[Orders].[Order year]</expression></dataItem></tabularModel></BIQuery><BIQuery name="Abfrage3"><cube><factList><item refItem="Quantity" aggregate="none"/></factList></cube><tabularModel><dataItem name="Quantity" aggregate="total"><expression>[gosales_goretailers].[Orders].[Quantity]</expression></dataItem></tabularModel></BIQuery></querySet>
<layoutList>
<layout>

<pageSet>

<page name="Seite1">
<pageBody>

<HTMLItem>
<HTML>&lt;table&gt;
     &lt;tr&gt;
          &lt;td class='mytab' onclick="swapTabs( 'tab1')"&gt;Tab 1&lt;/td&gt;
          &lt;td class='mytab' onclick="swapTabs( 'tab2')"&gt;Tab 2&lt;/td&gt;
          &lt;td class='mytab' onclick="swapTabs( 'tab3')"&gt;Tab 3&lt;/td&gt;
     &lt;/tr&gt;
&lt;/table&gt;
&lt;br&gt;
</HTML></HTMLItem>
<HTMLItem>
<HTML>&lt;span id='tab1' CLASS="DIV_DETAILS"&gt;</HTML></HTMLItem><block>
<list maxRows="1000" refQuery="Abfrage1" cellHeightBehavior="stretch">
<listColumnTitles><listColumnTitle><textItem><queryItemRef content="label" refItem="Retailer name"/></textItem></listColumnTitle><listColumnTitle><textItem><queryItemRef content="label" refItem="Order year"/></textItem></listColumnTitle></listColumnTitles>
<listColumns><listColumn><textItem><queryItemRef refItem="Retailer name"/></textItem></listColumn><listColumn><textItem><queryItemRef refItem="Order year"/></textItem></listColumn></listColumns>
<style>
<CSS value="border-collapse:collapse"/>
</style>
<XMLAttribute name="RS_ListGroupInfo" value=""/></list>
</block>
<HTMLItem>
<HTML>&lt;/span&gt;</HTML></HTMLItem><HTMLItem>
<HTML>&lt;span id='tab2'&gt;
</HTML></HTMLItem><block>
<list refQuery="Abfrage2">
<listColumnTitles><listColumnTitle><textItem><queryItemRef content="label" refItem="Order year"/></textItem></listColumnTitle></listColumnTitles>
<listColumns><listColumn><textItem><queryItemRef refItem="Order year"/></textItem></listColumn></listColumns>
<style>
<CSS value="border-collapse:collapse"/>
</style>
<XMLAttribute name="RS_ListGroupInfo" value=""/></list>

</block>
<HTMLItem>
<HTML>&lt;/span&gt;</HTML></HTMLItem><HTMLItem>
<HTML>&lt;span id='tab3'&gt;
</HTML></HTMLItem><block>
<list refQuery="Abfrage3">
<listColumnTitles><listColumnTitle><textItem><queryItemRef content="label" refItem="Quantity"/></textItem></listColumnTitle></listColumnTitles>
<listColumns><listColumn><textItem><queryItemRef refItem="Quantity"/></textItem><style><CSS value="text-align:right"/></style></listColumn></listColumns>
<style>
<CSS value="border-collapse:collapse"/>
</style>
<XMLAttribute name="RS_ListGroupInfo" value=""/></list>

</block>
<HTMLItem>
<HTML>&lt;/span&gt;
&lt;img src="../pat/images/blank.gif" onload="swapTabs( 'tab1')"/&gt;</HTML></HTMLItem></pageBody>
<pageHeader>

<HTMLItem>
<HTML>&lt;style&gt;
.mytab{
     font-size:12px;
     font-weight:bold;
     color:black;
     border:1px solid black;
     cursor: hand;
}

&lt;/style&gt;

&lt;script&gt;

function swapTabs( tabId){

//alert(tabId);

var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var tab3 = document.getElementById("tab3");

      if (tabId=="tab1"){
     
tab1.style.display = "block";
tab2.style.display = "none";
tab3.style.display = "none";
}
else if(tabId=="tab2"){
     
      tab1.style.display = "none";
tab2.style.display = "block";
tab3.style.display = "none";
}
else if(tabId=="tab3"){

tab1.style.display = "none";
tab2.style.display = "none";
tab3.style.display = "block";
}
   
}

&lt;/script&gt;
</HTML></HTMLItem><block class="reportTitle">
<textItem class="reportTitleText">
<text/>
</textItem>
</block>
<style>
<CSS value="padding-bottom:10px"/>
</style>
</pageHeader>
<pageFooter>
<table>
<tableRow>
<tableCell>
<textItem>
<expression>AsOfDate()</expression>
</textItem>
<style>
<CSS value="vertical-align:top;text-align:left;width:25%"/>
</style>
</tableCell>
<tableCell>
<textItem>
<text>- </text>
</textItem>
<textItem>
<expression>PageNumber()</expression>
</textItem>
<textItem>
<text> -</text>
</textItem>
<style>
<CSS value="vertical-align:top;text-align:center;width:50%"/>
</style>
</tableCell>
<tableCell>
<textItem>
<expression>AsOfTime()</expression>
</textItem>
<style>
<CSS value="vertical-align:top;text-align:right;width:25%"/>
</style>
</tableCell>
</tableRow>
<style>
<CSS value="border-collapse:collapse;width:100%"/>
</style>
</table>
<style>
<CSS value="padding-top:10px"/>
</style>
</pageFooter>
</page></pageSet></layout>
</layoutList>
</report>

Cheers, Jochen

sir_jeroen

#37
Looks great... Are you in for some competition ? :D


2 little remarks:
Next time if possible add a screen dump and could you use the code-tag this because in some cases your code could get unescaped...(e.g. > becomes &gt; )


But still.. looks great!!

jolly


jolly

#39
Here is a small Video about another possibility to sort Columns with Javascript.

CoginAustin

I cant play the file because of a "Unknown Codec" :(

sir_jeroen


jolly

#42
Okay, CoginAustin try this one. Sorry for the poor Quality.

CoginAustin


COGNOiSe administrator

I had to restore the forum from backups earlier this week following the corruption of some forum software files and as such as attachments after 21st September will need to be uploaded again.

Apologies! I will try to do these backups more frequently (or if anyone knows how to run a CRON job to backup and save the database please drop me a line).

Cheers

jolly

It is already a time ago, which I built a report. In the attached File is a Video which shows an Template whith different Javascript Items inside. One of the Javascript Function is from ReportNet Addict. Btw. If you canÃ,´t play the file because of an "Unknown Codec", please go to the Techsmith Website and download the Codec. The Link http://www.techsmith.com/download/codecsdefault.asp.

Have fun

Cu Jolly

JoeBass

That looks great Jolly. 

I've looked into your list sorting example and would like to be able to use your approach of clicking columns titles to sort. 

I don't expect you to reveal the code in your html item (your movie has a masterful tease that had me thinking you might show the innards) that does the work but, could you describe the method?  Thanks.

JoeBass

#47
Here's a simple list report based on Go Sales.Ã,  It is sortable by clicking column headers.Ã,  I pinched the amazing JavaScript table sorting code from Stuart Langridge at http://www.kryogenix.org/code/browser/sorttable/.Ã, 

--------------------------------------------------------------------------------------------
11/22 - Reworked the sort date function to work with short date formats.

<report xml:lang="en-us" xmlns="http://developer.cognos.com/schemas/report/1/"><!--RS:1.1-->
<layoutList>
<layout>

<pageSet>

<page name="Page1">
<pageBody><list id="List_ID" class="list" refQuery="Query1">
<listColumnTitles><listColumnTitle><textItem><queryItemRef content="label" refItem="Order number"/></textItem></listColumnTitle><listColumnTitle><textItem><queryItemRef content="label" refItem="Order method"/></textItem></listColumnTitle><listColumnTitle><textItem><queryItemRef content="label" refItem="Retailer name"/></textItem></listColumnTitle><listColumnTitle><textItem><queryItemRef content="label" refItem="Product name"/></textItem></listColumnTitle><listColumnTitle><textItem><queryItemRef content="label" refItem="Unit cost"/></textItem></listColumnTitle></listColumnTitles>
<listColumns><listColumn><textItem><queryItemRef refItem="Order number"/></textItem></listColumn><listColumn><textItem><queryItemRef refItem="Order method"/></textItem></listColumn><listColumn><textItem><queryItemRef refItem="Retailer name"/></textItem></listColumn><listColumn><textItem><queryItemRef refItem="Product name"/></textItem></listColumn><listColumn><textItem><queryItemRef refItem="Unit cost"/></textItem><style><CSS value="text-align:right"/></style></listColumn></listColumns>
<style>
<CSS value="border-collapse:collapse"/>
</style>
</list>
<HTMLItem>
<HTML>&lt;script&gt;
// Thank you Stuart Langridge!
// Javascript table sorting code from http://www.kryogenix.org/code/browser/sorttable/

addEvent(window, "load", sortables_init);

var SORT_COLUMN_INDEX;

function sortables_init() {
Ã,  Ã,  // Find all tables with class sortable and make them sortable
Ã,  Ã,  if (!document.getElementsByTagName) return;
Ã,  Ã,  tbls = document.getElementsByTagName("table");
Ã,  Ã,  for (ti=0;ti&lt;tbls.length;ti++) {
Ã,  Ã,  Ã,  Ã,  thisTbl = tbls[ti];
if (thisTbl.className == "list") {
Ã,  Ã,  Ã,  Ã,  Ã,  Ã,  ts_makeSortable(thisTbl);
Ã,  Ã,  Ã,  Ã,  }
Ã,  Ã,  }
}

function ts_makeSortable(table) {
Ã,  Ã,  if (table.rows &amp;&amp; table.rows.length &gt; 0) {
Ã,  Ã,  Ã,  Ã,  var firstRow = table.rows[0];
Ã,  Ã,  }
Ã,  Ã,  if (!firstRow) return;
Ã,  Ã, 
Ã,  Ã,  // We have a first row: assume it's the header, and make its contents clickable links
Ã,  Ã,  for (var i=0;i&lt;firstRow.cells.length;i++) {
Ã,  Ã,  Ã,  Ã,  var cell = firstRow.cells[i];
Ã,  Ã,  Ã,  Ã,  var txt = ts_getInnerText(cell);
Ã,  Ã,  Ã,  Ã,  cell.innerHTML = '&lt;a href="#" class="sortheader" onclick="ts_resortTable(this);return false;"&gt;'+txt+'&lt;span class="sortarrow"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/a&gt;';
Ã,  Ã,  }
}

function ts_getInnerText(el) {
if (typeof el == "string") return el;
if (typeof el == "undefined") { return el };
if (el.innerText) return el.innerText; //Not needed but it is faster
var str = "";

var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i &lt; l; i++) {
switch (cs[i].nodeType) {
case 1: //ELEMENT_NODE
str += ts_getInnerText(cs[i]);
break;
case 3: //TEXT_NODE
str += cs[i].nodeValue;
break;
}
}
return str;
}

function ts_resortTable(lnk) {
Ã,  Ã,  // get the span
Ã,  Ã,  var span;
Ã,  Ã,  for (var ci=0;ci&lt;lnk.childNodes.length;ci++) {
Ã,  Ã,  Ã,  Ã,  if (lnk.childNodes[ci].tagName &amp;&amp; lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
Ã,  Ã,  }
Ã,  Ã,  var spantext = ts_getInnerText(span);
Ã,  Ã,  var td = lnk.parentNode;
Ã,  Ã,  var column = td.cellIndex;
Ã,  Ã,  var table = getParent(td,'TABLE');
Ã,  Ã, 
Ã,  Ã,  // Work out a type for the column
Ã,  Ã,  if (table.rows.length &lt;= 1) return;
Ã,  Ã,  var itm = ts_getInnerText(table.rows[1].cells[column]);
Ã,  Ã,  sortfn = ts_sort_caseinsensitive;
Ã,  Ã,  if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
Ã,  Ã,  if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
Ã,  Ã,  if (itm.match(/^[Ã,£$]/)) sortfn = ts_sort_currency;
Ã,  Ã,  if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
Ã,  Ã,  SORT_COLUMN_INDEX = column;
Ã,  Ã,  var firstRow = new Array();
Ã,  Ã,  var newRows = new Array();
Ã,  Ã,  for (i=0;i&lt;table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
Ã,  Ã,  for (j=1;j&lt;table.rows.length;j++) { newRows[j-1] = table.rows[j]; }

Ã,  Ã,  newRows.sort(sortfn);

Ã,  Ã,  if (span.getAttribute("sortdir") == 'down') {
Ã,  Ã,  Ã,  Ã,  ARROW = '&amp;nbsp;&amp;nbsp;&amp;uarr;';
Ã,  Ã,  Ã,  Ã,  newRows.reverse();
Ã,  Ã,  Ã,  Ã,  span.setAttribute('sortdir','up');
Ã,  Ã,  } else {
Ã,  Ã,  Ã,  Ã,  ARROW = '&amp;nbsp;&amp;nbsp;&amp;darr;';
Ã,  Ã,  Ã,  Ã,  span.setAttribute('sortdir','down');
Ã,  Ã,  }
Ã,  Ã, 
Ã,  Ã,  // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
Ã,  Ã,  // don't do sortbottom rows
Ã,  Ã,  for (i=0;i&lt;newRows.length;i++) { if (!newRows[i].className || (newRows[i].className &amp;&amp; (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
Ã,  Ã,  // do sortbottom rows only
Ã,  Ã,  for (i=0;i&lt;newRows.length;i++) { if (newRows[i].className &amp;&amp; (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
Ã,  Ã, 
Ã,  Ã,  // Delete any other arrows there may be showing
Ã,  Ã,  var allspans = document.getElementsByTagName("span");
Ã,  Ã,  for (var ci=0;ci&lt;allspans.length;ci++) {
Ã,  Ã,  Ã,  Ã,  if (allspans[ci].className == 'sortarrow') {
Ã,  Ã,  Ã,  Ã,  Ã,  Ã,  if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
Ã,  Ã,  Ã,  Ã,  Ã,  Ã,  Ã,  Ã,  allspans[ci].innerHTML = '&amp;nbsp;&amp;nbsp;&amp;nbsp;';
Ã,  Ã,  Ã,  Ã,  Ã,  Ã,  }
Ã,  Ã,  Ã,  Ã,  }
Ã,  Ã,  }
Ã,  Ã,  Ã,  Ã, 
Ã,  Ã,  span.innerHTML = ARROW;
}

function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 &amp;&amp; el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {

Ã,  Ã,  // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
Ã,  Ã,  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
Ã,  Ã,  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);

Ã,  Ã,  aaDateArray = aa.split("/");
Ã,  Ã,  bbDateArray = bb.split("/");

Ã,  Ã,  if (parseInt(aaDateArray[2]) < 50) { yr = '20'+ aaDateArray[2]; } else { yr = '19'+ aaDateArray[2]; }
Ã,  Ã,  if (parseInt(aaDateArray[0]) < 10) { TheMonth = '0' + aaDateArray[0]; } else { TheMonth = aaDateArray[0]; }
Ã,  Ã,  if (parseInt(aaDateArray[1]) < 10) { TheDay = '0' + aaDateArray[1]; } else { TheDay = aaDateArray[1]; }
Ã,  Ã,  dt1 = yr + TheMonth + TheDay;

Ã,  Ã,  if (parseInt(bbDateArray[2]) < 50) { yr = '20'+ bbDateArray[2]; } else { yr = '19'+ bbDateArray[2]; }
Ã,  Ã,  if (parseInt(bbDateArray[0]) < 10) { TheMonth = '0' + bbDateArray[0]; } else { TheMonth = bbDateArray[0]; }
Ã,  Ã,  if (parseInt(bbDateArray[1]) < 10) { TheDay = '0' + bbDateArray[1]; } else { TheDay = bbDateArray[1]; }
Ã,  Ã,  dt2 = yr + TheMonth + TheDay;

Ã,  Ã,  if (dt1==dt2) return 0;
Ã,  Ã,  if (dt1<dt2) return -1;
Ã,  Ã,  return 1;
}

function ts_sort_currency(a,b) {
Ã,  Ã,  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
Ã,  Ã,  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
Ã,  Ã,  return parseFloat(aa) - parseFloat(bb);
}

function ts_sort_numeric(a,b) {
Ã,  Ã,  aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
Ã,  Ã,  if (isNaN(aa)) aa = 0;
Ã,  Ã,  bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX]));
Ã,  Ã,  if (isNaN(bb)) bb = 0;
Ã,  Ã,  return aa-bb;
}

function ts_sort_caseinsensitive(a,b) {
Ã,  Ã,  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
Ã,  Ã,  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
Ã,  Ã,  if (aa==bb) return 0;
Ã,  Ã,  if (aa&lt;bb) return -1;
Ã,  Ã,  return 1;
}

function ts_sort_default(a,b) {
Ã,  Ã,  aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
Ã,  Ã,  bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
Ã,  Ã,  if (aa==bb) return 0;
Ã,  Ã,  if (aa&lt;bb) return -1;
Ã,  Ã,  return 1;
}


function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,Ã,  NS6 and Mozilla
// By Scott Andrew
{
Ã,  if (elm.addEventListener){
Ã,  Ã,  elm.addEventListener(evType, fn, useCapture);
Ã,  Ã,  return true;
Ã,  } else if (elm.attachEvent){
Ã,  Ã,  var r = elm.attachEvent("on"+evType, fn);
Ã,  Ã,  return r;
Ã,  } else {
Ã,  Ã,  alert("Handler could not be removed");
Ã,  }
}
&lt;/script&gt;</HTML></HTMLItem></pageBody>
</page></pageSet></layout>
</layoutList>
<modelConnection name="/content/package[@name='GO Sales and Retailers']/model[@name='model']"/><querySet xml:lang="en-us"><BIQuery name="Query1"><cube><factList><item refItem="Order number" aggregate="none"/><item refItem="Retailer name" aggregate="none"/><item refItem="Order date" aggregate="none"/><item refItem="Order method" aggregate="none"/><item refItem="Product name" aggregate="none"/><item refItem="Unit cost" aggregate="none"/></factList></cube><tabularModel><dataItem name="Order number" aggregate="none"><expression>[gosales_goretailers].[Orders].[Order number]</expression></dataItem><dataItem name="Retailer name" aggregate="none"><expression>[gosales_goretailers].[Orders].[Retailer name]</expression></dataItem><dataItem name="Order date" aggregate="none"><expression>[gosales_goretailers].[Orders].[Order date]</expression></dataItem><dataItem name="Order method" aggregate="none"><expression>[gosales_goretailers].[Orders].[Order method]</expression></dataItem><dataItem name="Product name" aggregate="none"><expression>[gosales_goretailers].[Orders].[Product name]</expression></dataItem><dataItem name="Unit cost" aggregate="average"><expression>[gosales_goretailers].[Orders].[Unit cost]</expression></dataItem></tabularModel></BIQuery></querySet></report>
Ã, 

sir_jeroen

Nice... very nice code :D Always usefull...

jolly

Hi JoeBass,

here you got the Report specification about the sorting for Simple List Reports with Javascript.

Cu