Incorporar rastreamento online do sistema SSW

Tutoriais
, ,
1

Olá pessoal!

Neste tópico vou mostrar como incorporar a página de rastreamento online do sistema SSW dentro de um Formulário do LATROMI.

Neste link, você encontra a documentação oficial da SSW com instruções de como fazer o rastreamento online a partir de sua própria página.

Você pode conferir este exemplo em funcionamento neste link.

Formulário

A pesquisa na página do SSW é realizada através de uma requisição POST, onde são passados campos com nomes específicos:

  • NR - Notas fiscais
  • cnpj - CNPJ do remetente
  • chave - Senha (opcional)

A documentação nos instruí a criar um elemento form com action apontando para a página de rastreamento online da SSW, e dentro deste form, elementos input para cada um dos campos supracitados.

Para adaptar essa situação ao universo do LATROMI, é necessário criar o elemento form via Javascript no final da página (dentro da tag body), pois o Formulário do LATROMI já habita um elemento form, e não é permitido que existam elementos form aninhados.

A estrutura final da página ficará mais ou menos assim:

<html>
   <head></head>
   <body>
      <!-- elemento "form" do LATROMI -->
      <form></form>

      <!-- elemento "form" para fazer a pesquisa no SSW -->
      <form action="https://ssw.inf.br/2/ssw_resultSSW"></form>
   </body>
</html>

Campos

Crie os seguintes campos no Formulário:

  • txtF
    Campo do tipo TextBox configurado como Mulitilinha onde o usuário vai informar o número das Notas Fiscais, uma abaixo da outra.

  • txtCNPJRemetente
    Campo do tipo TextBox onde o usuário vai informar o CNPJ do remetente.

  • txtSenha (opcional)
    Campo do tipo TextBox com o “Tipo de Entrada de Dados” configurado como Password.

  • btnEnviar
    Campo do tipo Button, onde o usuário vai clicar para fazer a pesquisa.

    Este botão precisa ter um procedimento no evento **Click** contendo uma ação qualquer, apenas para que o sistema identifique que deve realizar o processamento deste evento. Neste caso, podemos informar apenas a instrução de controle "return", cuja única função é sair do procedimento.

Javascript

Na seção de Arquivos Javascript do Formulário, adicione um novo arquivo Javascript, e informe o código abaixo:

// Cria o Form oculto para pesquisa SSW ao carregar a janela
window.addEventListener('load', createSSWForm);

// Cria o Form SSW
function createSSWForm() {
   
    var sswForm = document.createElement('form');
    sswForm.action = 'https://ssw.inf.br/2/ssw_resultSSW';
    sswForm.method = 'post';
    sswForm.name = 'formSSW';
    sswForm.style.display = 'none';
    //sswForm.target = '_blank'; // opcional

    // Cria o campo que vai receber o número das notas fiscais
    var inputNF = document.createElement('input');
    inputNF.type = 'hidden';
    inputNF.name = 'NR';
    inputNF.id = "ssw-nf";
    sswForm.appendChild(inputNF);

    // Cria o campo que vai receber o CNPJ do remetente
    var inputCNPJ = document.createElement('input');
    inputCNPJ.type = 'hidden';
    inputCNPJ.name = 'cnpj';
    inputCNPJ.id = "ssw-cnpj";
    sswForm.appendChild(inputCNPJ);
    
    // (opcional) Cria o campo que configura a URL de retorno do link "voltar" 
    var inputOrigem = document.createElement('input');
    inputOrigem.type = 'hidden';
    inputOrigem.name = 'urlori';
    inputOrigem.value = window.location.href;
    sswForm.appendChild(inputOrigem);
    
    // (opcional) Cria o campo que recebe a senha
    var inputSenha = document.createElement('input');
    inputSenha.type = 'hidden';
    inputSenha.name = 'chave';
    inputSenha.id = 'ssw-senha';
    sswForm.appendChild(inputSenha);

    // Adiciona o Form SSW na tela
    document.body.appendChild(sswForm);
}

// Adiciona callback de disparo de evento do Formulário
latromi.formManager.setOnEventFiringCallback(function(context) {
    // Intercepta o evento "Click" do botão "btnEnviar" do Form do LATROMI
    if (context.eventKind === 'Field' && context.field.name === 'btnEnviar' && context.eventName === 'Click') {
        // Cancela o evento original, ou seja, 
        // dispensa o processamento do lado do servidor.
        context.cancel = true; 

        // Transfere o processamento para o Form SSW
        document.getElementById('ssw-nf').value = context.form.getFieldValue('txtNF');
        document.getElementById('ssw-cnpj').value = context.form.getFieldValue('txtCNPJRemetente');
        document.getElementById('ssw-senha').value = context.form.getFieldValue('txtSenha');
        document.formSSW.submit();
    }
});

O código Javascript acima faz o seguinte:

  • Quando a página for carregada, cria um elemento form no final da página com os campos especificados pela SSW (função “createSSWForm”).

  • Adiciona uma função anônima para escutar o disparo de eventos do Formulário do LATROMI. Essa função faz o seguinte:

    1. Intercepta o evento Click do botão “btnEnviar”.
    2. Cancela o processamento do evento no lado do servidor.
    3. Preenche os campos do form que será enviado para a página de rastreamento do SSW.
    4. Faz o submit do form contra a página de rastreamento do SSW.