Adicionando imagens dinâmicas aos seus projetos

Este artigo descreve como integrar imagens dinâmicas em seus dashboards. Alterações de imagens dinâmicas são conduzidas pela seleção de novos valores de atributo.

Você também pode inserir imagens em objetos como tabelas de emissão de relatórios.

Conteúdo:

Dashboards do GoodData podem ser facilmente aumentados com imagens estáticas para reforçar o apelo visual total e transmitir informações contextuais adicionais. No entanto, essas imagens não mudam quando há alterações de contexto.

Por exemplo, suponha que você adicionou um filtro de dahsboard ao seu dashboard. Quando o novo valor do atributo é selecionado a partir do filtro, seria ainda mais útil atualizar a imagem do dashboard com uma nova versão.

Por padrão, o GoodData define o comprimento máximo dos rótulos de atributo para terem 128 caracteres, o que pode ser pouco ao se fazer referência a imagens por URL. Se você terá URLs mais longas, pode expandir o limite de caracteres para o rótulo de atributo no modelo de dados lógico do seu projeto por meio de páginas técnicas ou chamada de API. Caso contrário, você pode fazer as modificações necessárias, através do Portal GoodData, onde os padrões para o rótulo de atributo são inalterados.

Você deve ter privilégios de administrador do projeto para o qual está publicando essas alterações.

Preparação das imagens de origem

Seu conjunto de imagens de origem deve atender aos seguintes critérios:

  • Formato PNG ou JPG
  • Armazenadas no repositório acessível, que pode ser acessado via HTTPS pelos usuários finais
  • Nomes exclusivos para cada imagem

HTTPS é obrigatório. Caso contrário, alguns navegadores talvez não mostrem as imagens corretamente.

Preparação dos dados

Dependendo de como as imagens serão usadas no seu dashboard, sua tabela de dados deve ser montada em um dos formatos a seguir.

Você pode acessar outras fontes de dados para imagens, desde que sua URL inclua quaisquer credenciais de acesso obrigatório e que a imagem possa ser referenciada em uma URL totalmente qualificada.

Imagens dinâmicas controladas por um filtro

Se você pretende inserir imagens no seu dashboard, para que sua seleção seja controlada por um filtro de dashboard, seus seus dados devem ser montados no seguinte formato:

ID do funcionárioNome do funcionárioImagem do funcionário
1Pessoa 1source=web&url=https%3A%2F%2Fwww.example.org%2Fimage1.jpg
2Pessoa 2source=web&url=https%3A%2F%2Fwww.example.org%2Fimage2.png

Na configuração acima, o valor do campo de imagem é uma concatenação de sequência de source=web&url= e a URL-versão codificado da URL para o local da imagem.

Imagens referenciadas em um relatório de tabela

Se as imagens devem aparecer em um relatório de tabela, seus dados devem ser montados no seguinte formato:

ID do funcionárioNome do funcionárioImagem do funcionário
1Pessoa 1

source=web&url=https%3A%2F%2Fwww.example.org%2Fimage1.jpg

2Pessoa 2

source=web&url=https%3A%2F%2Fwww.example.org%2Fimage2.png

Na configuração acima, o valor do campo de imagem é uma concatenação de sequência de source=web&url= e a URL-versão codificado da URL para o local da imagem.

O formato de dados anterior que incluía referências de URL direta às imagens (como https://www.example.org/image1.jpg) foi reprovado. Não use-o.

Preparação dos metadados

Prepare os metadados para o seu projeto para que o projeto possa exibir as imagens de origem que você definiu.

Definindo o rótulo de atributo

Por meio do CloudConnect Designer, localize um atributo que identifica exclusivamente o conteúdo da imagem. Na tabela de dados acima, esse atributo corresponde à coluna de ID de funcionário. Adicione um rótulo, que corresponde à coluna de imagem para este atributo.

Um rótulo é uma referência ao atributo de uma forma diferente.

O CloudConnect Designer é um aplicativo separado para download que você instala na sua área de trabalho local. Ele é usado para a construção de modelos de dados lógicos e gráficos ETL para usar em seus projetos do GoodData. Antes de começar, você deve baixar e instalar o CloudConnect Designer. Para obter mais informações, consulte a página de downloads em https://secure.gooddata.com/downloads.html. Se você for um cliente personalizado (white-labeled), acesse sua conta na página de Downloads do seu domínio personalizado: https://my.domain.com/downloads.html.

Passos:

  1. Em sua área de trabalho, abra o CloudConnect Designer.
  2. Na guia Project Explorer, selecione o projeto que deseja alterar.
  3. Na pasta modelo , você deve encontrar os arquivos *.LDM para o seu projeto. Clique duas vezes no arquivo de modelo de dados lógico que deseja editar.
  4. Para o conjunto de dados apropriado, adicione ou modifique o rótulo de atributo.
    1. Clique duas vezes no conjunto de dados. A caixa de diálogo Atributos e Fatos é aberta.
    2. Suponha que seu conjunto de dados de funcionários se parece com o seguinte na janela de atributos e fatos:
    3. Para fins informativos, clique na caixa de seleção Mostrar identificador.
      Para o conjunto de dados acima, você deve adicionar o rótulo. Para adicionar um rótulo, clique no ícone Mais. Selecione Adicionar rótulo para > ID do funcionário.

      Se você pretende que a imagem seja clicável, adicione a coluna como um hiperlink.

    4. Para o título da nova entrada, digite imagem do funcionário. Verifique se o tipo foi especificado como um rótulo.
    5. Clique na caixa de seleção Mostrar tipos de dados. Na coluna de tipos de dados, clique na entrada para o novo nome. Clique no botão Procurar....
    6. Na janela Selecionar tipo de dados, verifique se o botão de seleção de texto foi selecionado. Na caixa de texto, digite 255.

      O limite absoluto no comprimento do atributo é de 255 caracteres.

    7. Quando tiver terminado, a definição do conjunto de dados deve ser semelhante à seguinte:

      Conjunto de dados de exemplo com rótulo adicionado
    8. Anote o identificador interno para o atributo e cada rótulo. Você precisará disso mais tarde.
    9. Para salvar as alterações do conjunto de dados, clique em OK.
    10. Verifique se o modelo de dados lógico está associado ao projeto adequado. Na guia Project Explorer, clique no projeto desejado e selecione Projeto de trabalho para....
    11. Antes de publicar, você deve validar. Clique com o botão direito do mouse no Editor de modelos e selecione Validar... .
    12. Se a validação passa, salve o arquivo *.LDM.
    13. Clique em Publicar modelo no servidor na barra lateral Detalhes.

O projeto foi atualizado para adicionar o rótulo a um identificador exclusivo para cada imagem.

Atualização do gráfico ETL

Agora, você deve atualizar seu gráfico ETL para adicionar os valores para o novo nome de atributo. Você deve:

  • Atualize um gráfico existente de ETL para incluir uma nova coluna. Talvez seja necessário republicar todos os dados no gráfico ETL.
  • Crie um novo gráfico ETL que preenche este rótulo de atributo.

Para obter mais informações sobre como criar gráficos ETL no CloudConnect Designer, consulte Desconectando um conjunto de dados diretamente.

Atualização de definição de projeto

Em seu projeto do GoodData, você deve atualizar a definição do projeto para que reflita a forma de exibição do rótulo como uma imagem.

Anteriormente, essa etapa exigia que você modificasse o LDM através da API do GoodData. Agora, o processo a seguir permite que você conclua esta atualização através do Portal GoodData.

Passos:

  1. Faça login no portal GoodData.
  2. No menu suspenso Projetos, selecione o projeto para o qual você publicou o modelo de dados lógico.
  3. Na barra de ferramentas, selecione Gerenciar. Na guia Dados, clique em atributos. Selecione o atributo ao qual você adicionou o rótulo (por exemplo, ID do funcionário).
  4. As informações de objeto são exibidas para o atributo e seus rótulos.
  5. Na coluna Controles na seção de rótulos, clique no link Editar.
  6. Na lista suspensa Tipo, selecione Imagem.
  7. Sua definição de atributo deve ser semelhante à seguinte:
  8. Clique em Salvar.
    A definição do projeto foi atualizada.

Definição de relatórios e dashboards

Agora que o modelo de dados lógico e gráfico ETL do projeto foram atualizados para utilizar o novo rótulo de atributo, você deve criar os objetos de projeto para acessar e exibir essas imagens.

Nos passos abaixo, você pode ver como essas imagens podem ser disponibilizadas em relatórios e dashboards.

Exemplo - Adicionar imagens a um relatório

Neste exemplo, você pode adicionar o rótulo a um relatório tabular como uma coluna mostrando os valores de atributo que fazem referência às imagens armazenadas.

Passos:

  1. Faça login no portal GoodData.
  2. No menu suspenso Projetos, selecione o projeto para o qual você publicou as alterações do modelo de dados lógico e gráfico ETL.
  3. No menu Portal, selecione Relatórios.
  4. Na página Relatórios, abrir ou criar um novo relatório.
  5. Clique no passo Como.
  6. Na lista de atributos disponíveis, navegue até a ID do funcionário e selecione-a.
  7. Na coluna de valores de filtro, selecione Imagem do funcionário na lista suspensa.
  8. Para adicionar o rótulo do atributo, clique em Concluído.
    O relatório é atualizado com a nova coluna.

Exemplo - Adicionar imagens a um dashboard

Adicionar um filtro de dashboard a uma imagem

Neste ponto, você precisa adicionar um filtro de dashboard ao filtro nos valores para o atributo de ID de funcionário. Quando o filtro de dashboard é configurado, seleções feitas no filtro automaticamente filtram todo o conteúdo na guia do dashboard para exibir apenas o atributo selecionado, o que significa que essa filtragem também é aplicada ao objeto de imagem dinâmico que você especificar abaixo.

Ao configurar o filtro de dashboard, você deve especificar que os usuários podem selecionar apenas um valor na guia Seleção.

Para obter mais informações sobre como adicionar filtros de dashbaord, consulte Filtros de dashboard.

Adicionar o conjunto de imagens ao dashboard

Agora, você pode adicionar a imagem ao seu dashboard usando as seguintes etapas.

Passos:

  1. Faça login no portal GoodData.
  2. Selecione o projeto na lista suspensa de Projeto.
  3. No menu dashboards, selecione o dashboard para o qual você deseja adicionar a imagem.
  4. Clique na guia do dashboard ao qual deseja adicionar a imagem.
  5. Clique no ícone Editar.
  6. Na barra de ferramentas Editar, clique em Conteúdo Webo.
  7. Insira a seguinte URL:
    https://secure.gooddata.com/gdc/app/projects/%CURRENT_PROJECT_HASH%/images?displayFormIdentifier=[label_id]&attributeElementUri=%FILTER_VALUE([attribute_id])% 
    1. [label_id] = o identificador interno para o rótulo que contém os dados de imagem.
    2. [attribute_id] = o identificador interno para o atributo primário
    3. Para um exemplo específico, consulte "Exemplo - exibindo a imagem do jogador por número da camisa" abaixo.
  8. Clique em Salvar.
  9. Redimensione e reposicione a imagem conforme necessário.

Neste ponto, você deve ser capaz de usar o filtro de dashboard para selecionar valores para o nome do funcionário, que atualiza automaticamente a imagem exibida.

Exemplo - Exibindo a imagem do jogador pelo número da camisa

Suponha que você está construindo um projeto para controlar as estatísticas para uma equipe de esportes e deseja filtrar um dashboard baseado no número da camisa do indivíduo. Além de criar um filtro de dashboard baseado no número de jersey, você deseja exibir uma imagem do jogador com base no número de jersey do indivíduo.

Neste caso, você deverá concluir todas as etapas acima com as seguintes alterações.

  1. Adquira uma imagem de cada jogador.
  2. Adquira o identificador de projeto para o projeto conter as imagens através do Portal GoodData. Neste exemplo, usaremos o seguinte: MyProjectHash.
  3. No modelo de dados lógico, localize o atributo que é usado para identificar o indivíduo. Crie um rótulo para este atributo para o número da camisa. O nome de exibição deste rótulo deve ser numcamisa.
  4. Anote o identificador interno para o atributo e rótulo. Para fins deste exemplo, usaremos label.support_gooddata_test.jersyno para o rótulo e attr.support_gooddata_test.jersyno para o atributo.
  5. Faça as mudanças necessárias para o modelo de dados lógico e gráfico ETL e publique para o projeto.
  6. No Portal GoodData, crie o relatório para conter a imagem e o filtro de dashboard a ser usado para filtrar com base no número da camisa.
  7. No dashboard que deve conter a imagem do jogador, insira a seguinte URL como conteúdo da web:
    https://secure.gooddata.com/gdc/app/projects/MyProjectHash/images?displayFormIdentifier=label.support_gooddata_test.jersyno.imageurl&attributeElementUri=%FILTER_VALUE(attr.support_gooddata_test.jersyno)%

Acima está representado o conjunto básico de etapas de configuração. Não se esqueça de testar os resultados.

Teste dos resultados

Antes de liberar esses relatórios para os usuários finais, revise os resultados de cada um deles usando os recursos de imagem e realize testes de amostragem significativos para verificar se os relatórios estão sendo preenchidos com as imagens apropriadas.