Menu de Navegação usando Dashboard Component

Introdução

Dashboard Component é um novo componente existente no CDE quando o mesmo está configurado como RequireJS.

Ele permite carregar um certo dashboard em um dado placeholder (DIV) do layout CDE, como podíamos fazer antigamente com o velho iframe.

O mesmo permite ainda fazer a ligação de parâmetros para a passagem de valores do dashboard pai para o dashboard filho.

Esse post irá mostrar como criar um menu de navegação usando o Dashboard Component disponível no CDE.

Esta abordagem permitirá, entre outros, a criação de um portal ou painel de administração onde os links de um menu, que apontam para diferentes dashboards, sejam carregados em uma área específica do dashboard principal.

Além de termos um dashboard principal que é carregado apenas uma única vez, essa abordagem nos permite também termos filtros, seletores, entre outros componentes CDE compartilhados entre todos dashboards filhos.

Temos ainda a capacidade de passarmos valores do dashboard pai para o dashboard filho e vice-versa.

Sample

Para baixar os arquivos do dashboard sample click aqui.

O sample é composto por 4 dashboards:

• main.wcdf
• dashboard principal
• carrega outros dashboards em uma div específica
• possui um seletor compartilhado pelos dashboards filhos

• overview.wcdf
• página de overview carregada por default pelo dashboard principal

• market.wcdf
• dashboard para 'análise do mercado'
• escuta o seletor do dashboard principal
• possui um link para voltar a tela inicial de overview
• o link para voltar implementado nesse dashboard é feito pelo o envio de dados do dashboard filho que é escutado pelo dashboard pai que então carrega novamente apenas o dashboard de overview

• customer.wcdf
• dashboard para 'análise de clientes'
• escuta o seletor do dashboard principal
• possui um link para voltar a tela inicial do overview
• o link para voltar implementado nesse dashboard recarrega por completo o dashboard principal

NOTA: Instale a última versão stable do CTOOLS para garantir que o sample irá funcionar como esperado em modo RequireJS.

Implementação

Os steps abaixo mostram as configurações e a forma mais básica de utilização do DashboardComponent. Para um exemplo mais completo, consulte o exemplo disponível no link acima.

1. Crie um novo dashboard CDE e salve o mesmo.

2. Altere sua configuração para o modo RequireJS.

3. Na aba de Layout, crie uma linha ou coluna que será utilizada pelo componente.

4. Adicione um novo Dashboard Component ao dashboard. O mesmo pode ser encontrado dentro do grupo Custom.

5. Configure-o.

Configurando o componente

Abaixo as principais configurações:

• Dashboard Path: é o caminho absoluto, em relação ao root do repositório (PUC -> Browser File), do dashboard (.wcdf) que será inserido pelo componente. 

• Datasource Mapping: permite sobrescrever o resultado de uma query do dashboard filho pelo resultado de uma query do dashboard pai. 

• Parameter Mapping: 
• cria um link entre um parâmetro do dashboard pai com um parâmetro do dashboard filho. 
• isso significa que alterações no parâmetro do dashboard pai serão também propagadas para o parâmetro correspondente do dashboard filho.
• alterações no parâmetro do dashboard filho não serão propagadas para o dashboard pai.
• no dashboard filho, o parâmetro deve ter a propriedade 'Public' configurada como 'true' para haver a propagação da alteração.
• 

Disparando alterações no dashboard pai

A configuração do 'Parameter Mapping' permite a passagem de valores em apenas uma única direção, ou seja, do dashboard pai para o dashboard filho.

Por vezes, é necessário que alterações no dashboard filho também possam ser escutadas no dashboard pai para disparar, por exemplo, alguma atualização.

Para conseguirmos essa característica, basta colocarmos o código abaixo no 'Post Execution' do DashboardComponent:

function() {

  var myself = this;
    
  // Listen to fireChange on the child dashboard
  myself.requiredDashboard.on("backParam:fireChange", function(e) {
        
    myself.dashboard.fireChange('dashParam', e.value );
    
  }); 
    
}

No dashboard filho, temos um parâmetro chamado 'backParam', e no dashboard pai temos um parâmetro chamado 'dashParam'.

O código basicamente registra um eventListener no dashboard filho e quando o respectivo evento acontece a função definida é executada recebendo como argumento o 'evento'. Dentro do 'e.value' temos então o valor do 'backParam', que foi alterado pelo dashboard filho, para fazermos o que quisermos com ele dentro do dashboard pai.

Dessa forma conseguimos ter uma comunicação nas duas direções entres os dashboards.

Existe um JIRA (http://jira.pentaho.com/browse/CDE-824) para que a comunicação exista nas duas direções de forma nativa. Vale a pena acompanhar.

Conclusão

O blog post mostrou o funcionamento básico do componente e como configurá-lo.

No exemplo disponível para download, temos dois botões, onde cada um dispara o render de um dashboard diferente. Esses botões poderiam serem substituídos por um menu mais elaborado, localizado no topo ou lateral, permitindo assim a implementação de um dashboard com uma função mais de portal ou painel de navegação.

Vídeo

Confira o dashboard sample no vídeo abaixo.