(Reactive) Lendo Excel avançados com JS Outsystems ⭕️

Oi seus lindos , nesse artigo quero compartilhar uma experiência boa que tive com um dos nossos clientes aqui na OMNUS. Nesse desafio tivemos que ler uma planilha excel customizada, que a principio parecia bem desafiadora, pois tinhamos que importar esses dados de modelos com diferente formatações, sem falar que esses modelos continham o coração da operação que por sua vez era preenchido manualmente e de forma diferente, o que dificultava muito o controle disso tudo. Mas por sorte, eles tinham o Outsystems com o Neo para ajudar nesse jornada.

Excel the Perfect User System

Antes de começar nossa jornada, deixe me apresentar para vocês o nosso desafio em formato de linhas e colunas, construído pela SkyNet chamado Excel custom :

Esse era nosso challenge e a principio pareceu que o futuro não tinha mas esperança, porém graça ao JS Conor fomos capaz de muda-lo.

Lendo Excel customizados usando JS e Outsystems

Primeiro, consideramos alguns components na forge antes de começar nossa jornada através do tempo. Contudo nenhum pareceu promissor, devido a forma de leitura ser por tabulação algo que a Outsystems já entrega por default e outros eram extension que raramente sofrem atualizações, o que não é legal.

Então porque não uma solução usando JS ? Claro, faz total sentido, pois teríamos um comunidade muito ativa que atualizaria de forma constante essa solução, além de nos fornecer uma maneira mais legal e simplista de ler um excel.

Depois de algumas pesquisa no pai google, optamos por Sheetjs : https://sheetjs.com/ , que atendia os requisitos de atualizações constantes, fácil implementação e biblioteca standalone, caso optemos por congelar aquele código dentro do Outsystems.

Importando o SheetJs para Outsystems

Existe duas maneira de fazer isso na minha visão, uma via Require ou via Resource, então vamos lá :

1 — Require :

Crie um bloco, e dentro dele configure o evento OnReady.

Dentro do Action de OnReady, chame a action chamada RequireScript e atribua o link para o CDN do SheetJS que está disponível do site da biblioteca JS.

2 — Resource :

Baixe o JS do SheetJs do CDN e importe para o Outsystems na opção de Scripts.

Com o arquivo JS importado como Resource, crie um bloco, e dentro dele configure a opção Required Scripts nos atributos do bloco, com o Script que importamos.

Criando o UI para leitura

Para esse artigo eu criei uma interface simples com um component upload e um botão para importar o arquivo carregado, além do bloco construído com SheetJS que tanto pode ser via Resource como via Require.

Contudo na nosso solução original usamos o carregamento via drag em drop de varíos excels o que viabilizou a leitura de mais dados simultaneamente. Dito isso a imagem abaixo ilustra a estrutura que criei no widget tree.

Layout no Canvas do Outsystems da estrutura acima :

Para suportar a alguns elementos da estrutura visual, foram criados três variáveis locais e um action.

1- BinaryData : será associado ao bloco do upload
2- FileName : será associado ao bloco do upload
3- isLoading : será associado ao IF do loading
4- ImporOnClick: será associado ao bloco OnClick do botão

Criando a Lógica para leitura

Na Action de importOnClick criamos o seguinte Flow :

ReadingExcelFile : irá ler o excel avançado e retornar um json formatado que possa ser tratado e usado de forma lógica.

Existe varias funções por dois motivos um, porque estou viciado em desenvolver usando TDD, para deixar meu código mais limpo e claro de entender e para encapsular o escopo das variáveis e do processo.

ShowExcelRead : irá exibir o arquivo JSON que foi lido dentro de um TextArea de forma dinâmica.

Testando nossa solução

Agora depois que configuramos tudo, hora da mágica :

Conclusão

Caso você necessite de ler uum excel avançado, eis uma solução simples, que não vai te gerar dependência com extension e é super rápida. Pois no cliente a qual aplicamos isso, era possível ler mais de um excel por vez e transporar esses dados para dentro da plataforma, fazendo que o cliente mantivesse seu layout de planilha customizada.

Dica: você pode simplicar mais ainda seu código tratando o JSON dentro do próprio JS e retornando os dados tratados que batam com sua solução.

Eiiiii me ajuda ai vai !? deixa uma palminhaaaa 👋🏻 e clica em seguir para mais conteúdos legais.