Práticas Comprovadas do IBM Business Analytics: Relatórios dinâmicos no Cognos usando jQuery

Produto(s): IBM Cognos Report Studio; Área de interesse: Relatórios

Este documento mostra como um autor pode aproveitar as bibliotecas jQuery para melhorar o design de relatório do IBM Cognos.

Sonal Bhatt, Software Engineer, IBM

Sonal Bhatt faz parte da equipe de Pacotes de Correções do IBM Cognos BI dos India Software Labs localizados em Pune, Índia. Ela é bacharel em engenharia de ciência da computação. Sonal trabalha em testes funcionais e de recursos de diferentes produtos Cognos BI e tem mais de quatro anos de experiência.



08/Jul/2013

Introdução

Propósito do documento

Este documento descreve uma abordagem que pode ser usada para implementar jQuery com o IBM Cognos Report Studio, de modo a fornecer relatórios mais dinâmicos e interativos para o usuário final. Ele também descreve como se pode aproveitar a eficiente biblioteca jQuery JavaScript de software livre para adicionar elementos de interface com o usuário dinâmica aos seus relatórios.

Aplicabilidade

Este documento foi testado com o IBM Cognos BI versões 10.1.1 e 10.2 em todas as plataformas suportadas e também pode se aplicar a versões posteriores.


Visão geral

Atualmente, é possível usar objetos de Item HTML no Report Studio para integrar código JavaScript aos relatórios. Para utilizar JavaScript em um relatório, os Autores de Relatórios precisam ter experiência no desenvolvimento em JavaScript ou pelo menos estar cientes dele. Com isso, o desenvolvimento de relatório talvez se torne complexo e caro, dificultando também a manutenção e a atualização dele. Usando o jQuery, algumas dessas questões podem ser reduzidas, tornando o desenvolvimento de relatório dinâmico mais fácil de usar e entender.


O que é jQuery?

O jQuery é uma biblioteca JavaScript rápida e concisa que simplifica a travessia de documentos HTML, a manipulação de eventos e a animação. Sua compatibilidade entre navegadores, recursos eficientes e facilidade de uso o tornaram uma estrutura JavaScript popular para a web. Há duas soluções ideais para integrar a biblioteca jQuery em uma página da web:

  • Usar a Content Delivery Network (CDN) hospedada pelo Google para incluir uma versão de jQuery.
  • Faça o download da sua própria versão do jQuery a partir de jQuery.com e hospede-o em seu próprio servidor ou sistema de arquivos local.

Os plug-ins do jQuery podem ser usados no IBM Cognos Viewer para que os Autores do Relatório não precisem mais ser desenvolvedores de JavaScript. O código pode ser ágil, fracamente acoplado a objetos do IBM Cognos Report Studio e facilmente modificado se os objetos do Report Studio mudarem.

Para obter mais informações sobre o jQuery, consulte http://jquery.com/.


Usando a funcionalidade do jQuery no IBM Cognos Report Studio

Nesta seção, criaremos um relatório no IBM Cognos Report Studio que usará objetos jQuery para aprimorar o relatório padrão do IBM Cognos. Para esse exemplo, serão usados o pacote GO Sales (query) e a versão do jQuery hospedada pelo Google.

  1. Crie um relatório em branco.
  2. Arraste um objeto de relatório Block da caixa de ferramentas para a área da página do relatório.
  3. Arraste uma Table da caixa de ferramentas para o bloco com 2 colunas e 1 linha.
  4. Posicione um objeto de relatório Block nas células de tabela.
  5. Arraste um objeto List para o bloco na coluna 1 e um objeto Column Chart no bloco da coluna 2. Seu relatório deve ser semelhante ao encontrado na Figura 1.
    Figura 1: Relatório com List e Chart antes de os itens de dados serem incluídos
    Figura 1: Relatório com List e Chart antes de os itens de dados serem incluídos
  6. Na guia Source , expanda o namespace Sales (query) e, no assunto de consulta Products , arraste Product line e Product type para a lista.
  7. Expanda o assunto de consulta Sales e arraste Quantity para a lista à direita do tipo Product .
  8. Selecione o gráfico e mude a propriedade Query para usar Query1. Na guia Data Items , arraste Product line para o gráfico Categories e Quantity para as áreas de lançamento Default measure . Seu relatório deve ser agora semelhante ao encontrado na Figura 2.
    Figura 2: Relatório com itens de dados incluídos em List e Chart
    Figura 2: Relatório com itens de dados incluídos em List e Chart
    Para que o jQuery atue no nosso objeto List, é preciso implementar algumas classes para que ele possa ser referenciado no código jQuery. A fim de fornecer classes nos itens usados, é preciso colocar um Item HTML antes e depois dos objetos List e Chart.
  9. A partir da caixa de ferramentas, arraste um Item HTML antes do objeto List e outro Item HTML após esse objeto, como mostrado na Figura 3 abaixo. Talvez seja mais fácil executar essa etapa usando a visualização Page Structure.
    Figura 3: Relatório com os Itens HTML antes e depois do objeto List
    Figura 3: Relatório com os Itens HTML antes e depois do objeto List
  10. Inclua as seguintes linhas de código no Item HTML antes do objeto List.
    <div class="ShowHideClicker">Click here to show/hide the List Report</div>
    <div class="ShowHideList">
  11. No segundo Item HTML no fim de List, inclua o seguinte código para fechar a identificação <div> iniciada no primeiro Item HTML.
    </div>
  12. Repita as etapas 9 – 11 para o objeto Chart, alternando as classes <div> de 'ShowHideClicker' para 'ShowHideClick' e 'ShowHideList' para 'ShowHideChart'. O relatório deverá ser parecido com aquele na Figura 4 abaixo.
    <div class="ShowHideClick">Click here to show/hide the Chart Report</div>
    <div class="ShowHideChart">
    Figura 4: Relatório com os Itens HTML antes e depois de List e de Chart
    Figura 4: Relatório com os Itens HTML antes e depois de List e de Chart
    Agora precisamos inserir dois Itens HTML no início do relatório geral e incluir código jQuery para ocultar e mostrar os objetos List e Chart quando o relatório for executado. Isso é útil para quando há vários objetos de relatório contidos em um único relatório e o usuário deseja observar somente os objetos de relatório que são de interesse.
  13. Da caixa de ferramentas, arraste dois objetos de Item HTML para o início do relatório.
  14. Inclua o seguinte código jQuery ao primeiro desses Itens HTML. Este código mostrará e ocultará o relatório List.
    <script type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></script>
    <script type="text/javascript">
    var j = jQuery.noConflict();
    j(document).ready(function()
    {
      j('.ShowHideList').hide();
      j('.ShowHideClicker').click(function()
      {
        j(this).next().toggle();
      });
    });
    </script>
  15. Clique no segundo Item HTML e inclua as seguintes linhas de código jQuery para mostrar e ocultar o relatório Chart.
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery-ui.min.js"></script>
    <script type="text/javascript">
    var j = jQuery.noConflict();
    j(document).ready(function()
    {
      j('.ShowHideChart').hide();
      j('.ShowHideClick').click(function()
      {
        j(this).next().toggle();
      });
    });
    </script>

    Seu relatório agora deve ser similar ao mostrado na Figura 5.
    Figura 5: Relatório concluído com os objetos List e Chart e todos os Itens HTML no lugar
    Figura 5: Relatório concluído com os objetos List e Chart e todos os Itens HTML no lugar
  16. Execute o relatório. O resultado é visto abaixo na Figura 6. Os relatórios List e Chart não são inicialmente visíveis até que o usuário clique nos itens de texto Click here to show/hide List Report ou Click here to show/hide the Chart Report na parte superior do relatório.
    Figura 6: Saída de relatório inicial dos objetos de relatório List e Chart ocultos
    Figura 6: Saída de relatório inicial dos objetos de relatório List e Chart ocultos
  17. Clique no item de texto Click here to see the List Report e note que o relatório List agora está visível (Figura 7).
    Figura 7: Saída de relatório com o objeto List exposto
    Figura 7: Saída de relatório com o objeto List exposto
  18. Clique no item de texto Click here to see the Chart Report para expor o relatório Chart (Figura 8).
    Figura 8: Saída de relatório com o objeto Chart exposto
    Figura 8: Saída de relatório com o objeto Chart exposto

Usando a função animate() do jQuery

Também é possível incluir efeitos de animação em um relatório. A função animate() de jQuery é uma API muito eficiente para manipular elementos HTML e incluir funcionalidade de animação. O uso da função animate() é muito simples, como mostrado a seguir:

.animate( properties, [ duration ], [ easing ], [ callback ] )
  • properties: mapa das propriedades de CSS para as quais a animação se moverá.
  • duration: cadeia de caractere ou número que determina por quanto tempo a animação será executada.
  • easing: cadeia de caractere que indica que função easing usar para a transição.
  • callback: a função a chamar depois que a animação estiver concluída

Para incluir animação básica no nosso relatório de amostra:

  1. Inclua um cabeçalho da página ao relatório acessando a barra de menus, selecionando Structure > Headers & Footers > Page Header and Footer... e confirmando se a caixa de seleção ao lado de Header está ativada, como mostrado na Figura 9. Clique em OK.
    Figura 9: Propriedades de cabeçalho e rodapé da página com o objeto Header selecionado&
    Figura 9: Propriedades de cabeçalho e rodapé da página com o objeto Header selecionado&
  2. Da caixa de ferramentas, arraste o objeto Text Item para Header. Na caixa de diálogo, digite o texto Cognos Report e clique em OK.
  3. Inclua três Itens HTML na área Header. Um dos Itens HTML precisa estar antes do item de texto no cabeçalho e os outros dois Itens HTML, depois do item de texto. Isso é ilustrado na Figura 10.
    Figura 10: Relatório com os Itens HTML antes e depois do item de texto de cabeçalho
    Figura 10: Relatório com os Itens HTML antes e depois do item de texto de cabeçalho
  4. Insira o seguinte código no Item HTML antes do item de texto.
    <div class="FirstHeader">
  5. No primeiro Item HTML depois do item de texto, inclua o seguinte código para fechar a identificação <div> aberta em um Item HTML anterior.
    </div>
  6. No segundo Item HTML que segue o item de texto, inclua depois do código jQuery da função animate(). O código animará o texto Cognos Report colocado no cabeçalho aumentando a fonte à medida que o texto se move para fora da margem.
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function()
    {
      jQuery('.FirstHeader').animate(
      {
        opacity:0.4,
        marginLeft:'50px',
        fontSize:'50px'
      },1500);
    });
    </script>
  7. Execute o relatório. Como mostrado na Figura 11, o texto Cognos Report deverá ser animado e crescer a partir da margem esquerda.
    Figura 11: Imagem da saída de relatório com o título de relatório modificado
    Figura 11: Imagem da saída de relatório com o título de relatório modificado

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Information Management
ArticleID=936264
ArticleTitle=Práticas Comprovadas do IBM Business Analytics: Relatórios dinâmicos no Cognos usando jQuery
publish-date=07082013