Adicionando imagens dinâmicas ao seu espaço de trabalho

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.

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ê prevê URLs mais longas, expanda o limite de caracteres do rótulo do atributo no modelo de dados lógicos dos seus espaços de trabalho utilizando as páginas cinzas ou a 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ê precisa ter privilégios de administrador no espaço de trabalho no qual está publicando as 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

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.

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.

Preparação dos metadados

Prepare os metadados do espaço de trabalho de forma que ele 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.

Passos:

  1. Em sua área de trabalho, abra o CloudConnect Designer.
  2. Na aba Project Explorer (Explorador de Projetos), selecione o espaço de trabalho que deseja alterar.
  3. Na pasta model, você encontrará um ou mais arquivos *.LDM do seu espaço de trabalho. 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.

    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.

    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ógicos está associado ao espaço de trabalho correto. Na aba Project Explorer (Explorador de Projetos), clique no espaço de trabalho 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 rótulo foi adicionado ao identificador exclusivo de cada imagem e o espaço de trabalho foi atualizado.

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.

Atualizar a definição do espaço de trabalho

No seu espaço de trabalho do GoodData, atualize a definição do espaço de trabalho para informar que a forma de exibição do rótulo é uma imagem.

Passos:

  1. Faça login no portal GoodData.
  2. No menu suspenso de espaços de trabalho, selecione aquele no qual publicou o modelo de dados lógicos.
  3. Na barra de ferramentas, selecione Gerenciar. Na aba 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 espaço de trabalho foi atualizada.

Definição de relatórios e dashboards

Agora que o modelo de dados lógicos e o gráfico ETL do espaço de trabalho estão atualizados para usar o novo rótulo de atributo, crie os objetos do espaço de trabalho 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 de espaços de trabalho, selecione aquele no qual publicou as alterações do modelo de dados lógicos e do 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 aba 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 aba 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 espaço de trabalho no menu suspenso.

  3. No menu dashboards, selecione o dashboard para o qual você deseja adicionar a imagem.

  4. Clique na aba 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

Suponhamos que você esteja criando um espaço de trabalho para acompanhar estatísticas de um time esportivo e queira filtrar um dashboard conforme o número da camisa de cada jogador. 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. No Portal GoodData, obtenha o identificador do espaço de trabalho para conter as imagens. 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 alterações necessárias no modelo de dados lógicos e no gráfico ETL e publique no espaço de trabalho.
  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.