Javascript Expand and Colapse - Agrupar e Desagrupar - Part 1

Esse post já está preparado tem um tempo, mas não ficou muito bom.

Outra funcionalidade muito solicitada é o famoso "Agrupar" do Excel, que facilita a visão diminuindo a poluição no relatório, pois ele agrupa varias linhas, e expande quando solicitado.

É como a estrutura de diretório do Windows, clique no "+"(mais) e a árvore abre.

Pois bem, existe um modo de se fazer isso no Cognos graças ao Mr. Javascript, abençoado seja o inventor.

A utilização é muito simples, e a lógica aplicada também, então vamos a explicação técnica.

No HTML o elemento TABLE possui os elementos TR, que são as linhas da tabela - table row.
Esses elementos TR por sua vez possuem um atributo chamado STYLE, o qual possui uma propriedade chamada DISPLAY.

table.tr.style.display, ok?

Essa propriedade define se um elemento estará visível ou não na tela, apesar de ter sido carregado.
Então DISPLAY = 'NONE' significa que o elemento estará oculto e DISPLAY = 'BLOCK'... visível.

A função consiste basicamente em ler todas as linhas da tabela e atribuir a propriedade não visível ou visivel, isso dependerá de uma variável do preenchimento definido na variavél INDENT_SIZE.

A função percorre todas as linhas abaixo da linha clicada verificando se existe uma imagem dentro da primeira célula, se tiver significa que é hora de para. Uma vez verificada a célula, a linha é trocada de status, se visível então invisível e a imagem muda de IMG_UP/DOWN para IMG_DOWN/UP.

Logo abaixo você vai encontrar os itens necessários para poder criar um relatório com Expand/Collapse.
No próximo post vou fazer uma demonostração de utilização.

------>>>> Código da função

//  These settings you can change to modify the report processing
var UOM="px";    // Set to unit of measure for padding
var INDENT_SIZE=20;  // Set to indent padding step size.  i.e setting to 20 means the padding steps are 20,40,60,80, etc
var UOM_SIZE = UOM.length;
var IMG_PATH = "../images/";
var IMG_NAME = "PropertyGroup_";
var IMG_UP_SUFIX = "plus";
var IMG_DOWN_SUFIX = "minus";
var IMG_EXTENSION = ".gif";
function stripTrailing(string,num) {
  if ( string == "") {return parseInt(0);} else {return parseInt(string.substring(0,string.length-num));}
}
function ExpandCollapse( el ) {
 // Grab the ROW that was clicked and the TABLE that contains it
 var tr;
 var tbl;

 // Set the variables depending on browser (Firefox or others)
 if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)){
  tr = el.parentNode.parentNode;
  tbl = tr.parentNode.parentNode;
 }
 else{
  tr = el.parentElement.parentElement;
  tbl = tr.parentElement.parentElement;
 }
 // Set the alternating display values for hiding/showing the row
 var sDisplay = ( el.src.indexOf( IMG_DOWN_SUFIX ) == -1 ) ? "" : "none";
 var sDisplayReverse = ( el.src.indexOf( IMG_DOWN_SUFIX ) == -1 ) ? "none" : "";
 //Switch the icon for the clicked row
 el.src = IMG_PATH + IMG_NAME + ( el.src.indexOf( IMG_DOWN_SUFIX ) == -1 ? IMG_DOWN_SUFIX  : IMG_UP_SUFIX ) + IMG_EXTENSION;
 // Starting with the row below the clicked row, start checking each row
 for ( var i = tr.rowIndex + 1; i < tbl.rows.length; i++ )
 {
  // Set the Current row indicator nad the left padding value
  var trCurrent = tbl.rows[i];
  var trCurrentLeft = trCurrent.cells[0].style.paddingLeft;
  // if the current row contains an IMG in it, it's a clickable level and we either have to stop processing,
  //     or reset the icons to a + as it's being collapsed
  if ( trCurrent.cells[0].firstChild && trCurrent.cells[0].getElementsByTagName("IMG").length )
  {

   // If the current row is at the same level or above in the tree, then stop processing,
   //    else reset all the signs below it, essentially collapsing all branches underneath the one that is beig collapsed.
   if (  stripTrailing(trCurrentLeft , UOM_SIZE) <= stripTrailing(tr.cells[0].style.paddingLeft , UOM_SIZE) )
   { break; }
   else
   {
    if (el.src.indexOf( IMG_DOWN_SUFIX ) == -1 )
    {
     trCurrent.cells[0].getElementsByTagName("IMG").item(0).src = IMG_PATH + IMG_NAME + IMG_UP_SUFIX + IMG_EXTENSION;
    }
   }
  }
  // Now, we determine if the row should be hidden or shown.
  if ( eval(stripTrailing(tr.cells[0].style.paddingLeft, UOM_SIZE) + INDENT_SIZE) < stripTrailing(trCurrentLeft, UOM_SIZE) && el.src.indexOf( IMG_DOWN_SUFIX ) >0 )
  {
   trCurrent.style.display = sDisplayReverse;
  } else
  {
   trCurrent.style.display = sDisplay;
  }
 }
}
function StartHidden(el){
 //var tbl=el.parentElement.parentElement.parentElement.parentElement;
 var tbl = document.getElementById(el).getElementsByTagName('table')[0];
 for (var i = 0; i < tbl.rows.length; i++)
 {
  var trCurrent = tbl.rows[i];
  if (trCurrent.cells[0].style.paddingLeft.indexOf(UOM) > -1){
   trCurrent.style.display = "none";
  }
  else{
   trCurrent.style.display = "block";
  }
 }
}
function StartHiddenSome(el, noHide){
 var nh = noHide.split(';');
 var nhn = new Array();
 for(var i = 0; i < nh.length; i++){
  nhn[i] = nh[i].split(',');
 }
 StartHidden(el);
 if(nhn.length > 0){
  var tbl = document.getElementById(el).getElementsByTagName('table')[0];
  for(var k = 0; k < nhn[0].length; k++){
   var stop = false;
   for (var i = 0; i < tbl.rows.length; i++){
    var trCurrent = tbl.rows[i];
    if(stripTrailing(trCurrent.cells[0].style.paddingLeft, UOM_SIZE) == INDENT_SIZE*k  || (trCurrent.cells[0].style.paddingLeft.indexOf(UOM) == -1 && k ==0)){
     for(var j = 0; j < trCurrent.cells[0].children.length; j++){
      if(trCurrent.cells[0].children[j] != null && trCurrent.cells[0].children[j] != undefined){
       for(var kk = 0; kk < nhn.length; kk++){    
        if(trCurrent.cells[0].children[j].innerHTML == nhn[kk][k] && nhn[kk][k] != ''){
         stop = true;
         var IMG = trCurrent.cells[0].firstChild;
         if(IMG.src != null && IMG.src != undefined)
          IMG.src = IMG_PATH + IMG_NAME + (IMG.src.indexOf( IMG_DOWN_SUFIX ) == -1 ? IMG_DOWN_SUFIX  : IMG_UP_SUFIX ) + IMG_EXTENSION
         break;
        }else{
         stop = false;
        }
       }
       if(stop) break;
      }
     }
    }
    if (stripTrailing(trCurrent.cells[0].style.paddingLeft, UOM_SIZE) == INDENT_SIZE*(k+1) && stop){
     trCurrent.style.display = "block";
    }
   }
  }
 }
}

Cognos 10.1.1 - Released - Lançado

Post rapidinho pra começar o dia.

Então, eis que a IBM lança mais uma versão do Cognos, bom... muitos vão falar que não é uma versão, só um patch ou algo assim.
Gostaria que isso fosse verdade, antigamente eu diria que 10 era a versão, 1 a release e o outro 1 era  patch, mas esse lançamento tem coisas diferentes e não existe a possibilidade de atualização de uma versão existente, fora que eles já tinham lançado o FP1.

É necessário fazer uma nova instalação!!

Resumindo Cognos 10.1.0 + FP1 ≠ Cognos 10.1.1

A única coisa que me chamou a atenção, até agora, foi o lançamento do report service finalmente em 64-bits, porém ao que parece ele foi feito para ser utilizado junto ao DQM(Dynamic Query Mode) um treco que aprimora query e caches em alguns tipos de fontes de dados como TM1, Essbase e agora em DMR.

Então não se deve esperar que a velocidade ou capacidade dos relatórios diminua e aumente, respectivamente, só nos casos citados.

Fora isso, uma bela lista de correção de erros, e mesmo assim eu já achei um, incrível!

Agora é ir usando pra ver o mais da pra fazer.

Abs

Active Report - Relatório Ativo - Básico

Como prometido, vamos a uma breve porém explicativa... hum.... explicação.

Adendo: Esse post faz uma explicação para a versão 10.1.0 do Cognos, para a versão 10.1.1 as coisas mudam um pouco.

Fundamentos first:
O que você precisa saber antes de começar relatórios em AR?
1 - Controles
2 - Containers

3 - Variáveis

Então vamos vê-los, um de cada vez, começando pelo primeiro. (Não sou retardado apenas bobo).

1 - Controles
Podemos dizer que os controle são a alma de um AR, eles são responsáveis por todo e qualquer dinamísmo, interatividade e muitas vezes lentidão nesse tipo de relatório.

Controles podem ser: prompts ou objetos de dados como listas, crosstabs ou guias. A grande sacada dos controles é que eles são os objetos que fazem as ações, ou seja, eles definem as variáveis, de alguma forma.

2 - Containers

Bom, qualquer objeto que consiga conter dados é naturalmente um container como decks, listas, crosstabs e até mesmo prompts

Containers são objetos que possuem dados capazes de serem filtrados, de alguma forma seja lá qual for.

Reparou que muitos objetos podem ser tanto controles quanto containers? Depende apenas do ponto de vista e da relação entre eles.

3 - Variáveis
Elas variam... hehe, e graças a essa variação as coisas acontecem!!!
Variáveis são definadas fora dos objetos, mas elas são as conexões entre os objetos.
É atravez de uma variável que um controle define o que vai aparecer em um container! Entendeu?

Não? Então vamos a um exemplo, veja que esse é um exemplo não muito básico, mas foi a primeira coisa em que pensei.

Vamos fazer com quer as colunas de uma lista sejam exibidas de acordo com o botão selecionado.

Selecione o botão "Exibir Coluna A" e voila, exibimos a coluna A.

Pretty simple ha?

Então arraste para a tela dois objetos: "Barra de botões" e uma "Lista".

Crie os campos na query da lista e arraste-os para a lista como ao lado <-.

Clique 2x em cada botão defina os nomes como ao lado também, delete o último.

Fez o que foi escrito? Ficou igual a imagem acima? Ótimo.

Então o que fizemos foi incluir um elemento Controle "Barra de botões" e um Container "Lista".

 Repare que ao lado dos objetos aparece um ícone com 2 bolinhas e 2 setinhas. Clique em qualquer um deles e uma janela como essa ao lado deve aparecer. Se não aparecer, você clicou no lugar errado, cancele e tente novamente.

Clique no link "Gerenciar as variáveis do relatório ativo..."

 Agora clique no ícone "Novo" e digite no nome da variável "Selecionar Coluna".

Pronto, criamos uma variável que vai servir de link entre os objetos Controle e Container.

Tudo certo de novo? Então clique em OK e na tela Comportamento interativo selecione o controle "Barra de botões".

 Observe a área "Definir valores de variáveis", é o primeiro quadro. Clique em "Editar".

Deve aparecer uma tela com as variáveis existentes, no campo valor selecione Rótulo.
Rótulo é o nome do objeto da "Barra de botões" que contém os botões (esse nome pode ser alterado), então quando clicar nos botões o "Rótulo" será igual ao nome do botão clicado.

E estamos dizendo que a variável "Selecionar Coluna" vai receber o valor de "Rótulo".

Clique em OK.

Se você, mais uma vez, fez tudo certo a tela ficará como essa, com uma bolinha verde ao lado da "Barra de botões".

Com isso definimos a parte do controle, agora vamos definir o que acontece quando o controle é alterado.

Selecione a coluna A da lista, procura nas propriedades a opção visibilidade da coluna, clique em editar.

Clique em visível com base na condição e depois em editar.

 Abaixo de valor, digite "Exibir Coluna A", o mesmo texto existente na "Barra de botões" e repare que a variável "Selecionar Coluna" está selecionada.
Pode imaginar o que isso significa né? Bom!

Se você seguiu a risca o passo a passo você deve ter chegado a seguinte imagem.

Faça os últimos passos para a outra coluna e rode o relatório para testar sua façanha!

Essa é uma explicação simples de como criar um Active Report.

Todo o processo deve durar 5 minutos.

Qualquer dúvida, comente!!

Cognos 10 Active Reports

Bom, já faz um tempo que não escrevo, esses últimos dias foram complicados.

Vamos falar finalmente sobre Active Reports ou Relatórios Ativos!! Eeee!! Viva, finalmente a IBM melhorou uma ferramenta!!.

Bem, é isso que parece, mas não pense que isso resolve todos os problemas do mundo, pelo menos é um começo.

Então, uma das possibilidades do Active Report é ser Offline, ou seja, você pode criar relatórios que são salvos e contém dados embutidos.
Com isso, uma das reclamações dos usuários acaba, e eles podem fazer apresentações ou consultas sem depender de estar na rede corporativa.

Outra coisa bem legal é a interatividade, é possível configurar várias conexões entre os objetos e praticamente tudo pode gerar uma reação.
Então você pode clicar numa linha de uma lista e o gráfico ao lado reflete as informações da linha selecionada.

No próximo post explicarei como criar um Active Report básico, aguarde!