Ir para o conteúdo principal

Imagem na grade de dados

** O recurso explicado abaixo foi disponibilizado na versão 17.6.0.611 do DOX Estúdio/Portal, certifique-se de ter a versão devidamente instalada e configurada em seu ambiente. 

image-1670504200219.gif

Pense neste exemplo de uso:

Você trabalha com um ERP que possui tabela de itens de variados tipos. Pensando em automatizar a consulta, é criado um BPM que traz em uma grade de dados o código do item, a imagem do item, a descrição e adicionais. 

Com este novo recurso criado, a imagem do item ficaria disponível como uma miniatura, conforme gif acima, permitindo a personalização de outros campos sem deixar a grade de tamanho irregular. Caso o usuário clique em cima da miniatura, o tamanho da imagem será mostrado em tela. 

**Atenção: Deve-se ter cuidado para não colocar imagens que excedem o limite do dispositivo.

Abaixo colocamos um exemplo de uso personalizado, com tabelas e consultas no computador local/banco/GED.

Como configurar puxando imagem de uma pasta local do computador?

Antes de configurar o procedimento e as atividades, crie as seguintes tabelas abaixo: 

1 - MODULOS_ERP

CREATE TABLE MODULOS_ERP (
IDMODULO INTEGER NOT NULL PRIMARY KEY,
DESCRICAO VARCHAR (100)); 

Insira alguns dados manualmente, conforme: 

image-1670529127633.png

2 - PRODUTOS_EMA

CREATE TABLE PRODUTOS_EMA (
IDPRODUTO INTEGER NOT NULL PRIMARY KEY,
DESCRICAO VARCHAR (100));

Insira alguns dados manualmente, conforme: 

image-1670529153538.png

Feito isso, vamos agora criar uma PASTA no computador local (servidor), onde as imagens que queremos colocar na grade estarão armazenadas. Aqui é importante frisarmos que, o nome do arquivo é essencial para que o recurso funcione, pois o SQL irá puxar sempre a DESCRIÇÃO/NOME do arquivo, sem exceções. Caso a descrição da imagem seja um número (como neste exemplo), deve ser buscado esse numero no SQL. 

  • Criamos a pasta "ema" dentro da pasta 'www' (C:\Ema Software\Contas ERP\www).
  • Dentro da pasta, as imagens foram colocadas de acordo com a ordem das tabelas criadas mais cedo (não é necessário a ordem, criamos assim para melhor entendimento).

image-1682361724982.png

Criado as tabelas e pastas locais, vamos iniciar o procedimento. Na primeira atividade, crie duas grades de dados: 

  • Módulos - /*MODULOS_ERP*/ (Tipo "Grade de dados")
  • Outros produtos - /*PRODUTOS_EMA*/ (Tipo "Grade de dados")

Na primeira grade MODULOS, crie as colunas de acordo com os campos da tabela modulos_erp:

  • IDMODULO - Imagem
  • DESCRICAO - Texto

image-1670506849809.png

Na subdivisão "Origem"

  • Diretório: Pasta/Local onde estão armazenadas as imagens. Importante ressaltar que as imagens só serão devidamente mostradas na grade se a pasta estiver dentro da pasta padrão 'www' (C:\Ema Software\Contas ERP\www). 
  • Extensão padrão: Aqui é importante dizer que, caso a descrição da imagem retornada não contenha extensão do arquivo, o sistema usará a extensão configurada neste campo por padrão. Neste exemplo que estamos apresentando, buscamos apenas pelo nome do arquivo que não possui a extensão. Como todas as imagens usadas são .png, deixamos essa como padrão.

image-1682358841588.png

    * O campo do tipo "Imagem" sempre será somente leitura. 

    Agora, faça o mesmo com a segunda grade PRODUTOS, criando as colunas de acordo com os campos da tabela produtos_ema: 

    • IDPRODUTO - Imagem
    • DESCRICAO - Texto

    image-1670507439504.png

    image-1682358781746.png

    Terminado de configurar ambos os formulários de grade, vamos para os eventos que vão buscar os nomes das imagens. Crie um conector para puxar os módulos da tabela modulos_erp, com o seguinte SQL:

    SELECT IDMODULO,
       DESCRICAO
  FROM MODULOS_ERP

    O evento é Estrutura de repetição - Carregar, pois estamos trazendo os dados para uma GRADE DE DADOS.

    image-1670508457102.png

    Crie um conector para puxar os produto da tabela produtos_ema, com o seguinte SQL:

    SELECT IDPRODUTO,
       DESCRICAO
  FROM PRODUTOS_EMA

    image-1670508629829.png

    Perceba que, em ambos os SQL's os campos que estão sendo selecionados contem a mesma descrição que o campo NOME na coluna da grade de dados. 

    Depois de configurado, salve o processo e teste no portal. 

    Inserir imagem via JEX/PEX 

    Para realizar a inserção de imagem via evento ao sair, a configuração da grade deve ser igual ao que explicamos acima: 

    • O campo "Caminho"/"Diretório" contendo um local de onde estão as imagens, seja no computador ou no GED. 
    • O campo "Extensão padrão" contendo a extensão que o sistema irá utilizar caso não seja informada extensão para a imagem pelo SQL ou pelo evento ao sair.

    Veja no JEX por exemplo: 

    valoresRegistroAtual.IMAGEM = 'DOX';

    Ou, caso no campo "Extensão padrão" tenha um valor que seja diferente da do arquivo "DOX": 

     valoresRegistroAtual.IMAGEM = 'DOX.png';

    Veja no PEX por exemplo: 

    loNovoRegistro.AddPair('IMAGEM', 'DOX');

    Novamente, colocando a extensão do arquivo junto:

    loNovoRegistro.AddPair('IMAGEM', 'DOX.png');

    ** As únicas extensões possíveis para imagem na grade são: jpg, jpeg, png, gif, webp, e svg.

    Voltar ao topo