Cross Segmentos - Linha Datasul - MLA - Criação de workflows no Fluig para aprovação de documentos padrões ou específicos

getTemplates()
function getTemplates(){   
    /* Templates padrões */
    /*Tradução dos valores lógicos Sim/Não*/
    i18n_sim = $("#i18n_sim").html();
    i18n_nao = $("#i18n_nao").html();

    templateNaoHa = null;
    setTemplate("template_nao_ha","templateNaoHa");
    templateDetalhePendencia = null;
    setTemplate("template_detalhe_pendencia","templateDetalhePendencia");
    templateHistorico = null;
    setTemplate("template_historico","templateHistorico");
    templateChaveDoc = null;
    setTemplate("template_chave_doc","templateChaveDoc");

    /* Informe aqui os templates específicos ou customizados */
    templateCabecalho = null;  
    setTemplate("template_cabecalho","templateCabecalho");
    templateItens = null;
    setTemplate("template_itens","templateItens");
}

• setTemplate(id_template_html, nome_variavel) - Não deve ser alterado.
  1. id_template_html: id da div html que armazena o template no arquivo html.
  2. nome_variavel: nome da variável que irá armazenar o conteúdo do template.
     Esta função busca o template no arquivo HTML e salva em uma variável para depois fazer a renderização dos dados nas marcações feitas no template - ver função layout().

setTemplate(nomeTemplate,variavel)
function setTemplate(nomeTemplate,variavel){
    template = document.getElementById(nomeTemplate).innerHTML;
    template = template.replace(/(\r\n|\n|\r)/gm,""); //remove os 'enter'
    template = template.replace(new RegExp("'", 'g'), "\\'"); //escapa as aspas simples '
    eval(variavel + " = '" + template + "';");
}

• montarTela() - Altere de acordo com a sua estrutura de dados em tela: exibição simples, repetição, etc...
  Esta função é responsável pelas chamadas da função layout(), que mostra as informações na tela. É nesta função que devem ser incluídas as informações específicas ou customizadas. Abaixo estão listados os três tipos de exibição de dados disponíveis para utilização:
  1. Exibição simples, sem repetição e sem restrição:
     Executa apenas uma vez a função layout. Usa-se este método quando há um array com apenas um registro, por exemplo um cabeçalho de pedido de compra.
     Ex: layout(templateCabecalho,"tt_pedido","cabecalho");

template

<div id="template_cabecalho">
    <div id="cabecalho">
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-order")</div>
            <div class="col-xs-12 col-sm-9 col-md-10 valueField">{{tt_pedido.num_pedido}}</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-site")</div>
            <div class="col-xs-12 col-sm-9 col-md-10 valueField">{{tt_pedido.cod_estabel}} - {{tt_pedido.desc_cod_estabel}}</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-vendor")</div>
            <div class="col-xs-12 col-sm-9 col-md-10 valueField">{{tt_pedido.cod_emitente}} - {{tt_pedido.desc_cod_emitente}}</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-company-name")</div>
            <div class="col-xs-12 col-sm-9 col-md-10 valueField">{{tt_pedido.razao_social}}</div>
        </div>               
    </div>
</div>

Função layout

templateCabecalho        = null;
setTemplate("template_cabecalho","templateCabecalho");
layout(templateCabecalho,"tt_pedido","cabecalho");

• Resultado em tela:

• Exibição repetitiva, sem restrição:
  Executa a função layout para cada index do array - cada registro da temp-table, sem filtro. Usa-se quando é necessário mostrar todos os registros da temp-table, por exemplo exibir todas as ordens de compra.
  Ex: layout(templateOrdens,"tt_ordem_compra","ordens");

Template Entregas

<div id="template_entregas">
    <div class="col-xs-12 col-sm-12 col-md-12 item">
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-part-short")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.parcela}}</div>
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-delivery-date")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.data_entrega}}</div>
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-um")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.un}}</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-quantity")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.quantidade}}</div>
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-quantity-balance-short")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.quant_saldo}}</div>
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-quantity-receipt-short")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.quant_receb}}</div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-2 col-md-2 labelField">i18n.translate("l-return-quantity-short")</div>
            <div class="col-xs-12 col-sm-2 col-md-2 valueField">{{tt_prazo_compra.quant_rejeit}}</div>
        </div>
    </div>
</div>

Função layout

for(var i = 0;i<tt_ordem_compra.length;i++){
    camposChave = ['numero_ordem'];
    valoresChave = [tt_ordem_compra[i].numero_ordem];  
    layout(templateEntregas,"tt_prazo_compra","entregas"+i, camposChave,valoresChave);
}

Resultado em tela:

• layout(template, nomeTT, divDestino, camposChave, valoresChave) - Não deve ser alterado.
  • template: template HTML.
  • nomeTT: nome da temp-table (array) que possui os dados que serão mostrados no template.
  • divDestino: ID da div que receberá o template renderizado com os dados da temp-table nas marcações.
  • camposChave: array com os nomes dos campos usados no filtro.
  • valoresChave: array com os valores dos campos usados no filtro.
    Esta função tem como objetivo substituir as marcações do template pelos dados da temp-table.

• detalheDocumento() - Pode ser alterado.
  Esta função consome os dados do método dts_detalheDocumento() do displayFields.js que faz a busca dos dados do documento no Sistema. Neste ponto é executada a procedure detalheDocumento da mlaapi014. O programa Progress chamado deve ter a nomenclatura de acordo com as regras do MLA. Para mais informações sobre a criação dos programas Progress para documentos customizados, verificar artigo Cross Segmentos - Linha Datasul - MLA - Como criar documentos para o Portal do MLA em HTML ou customizar documentos existentes.

• detalhePendencia() - Pode ser alterado
  Esta função consome os dados do método dts_detalhePendencia() do displayFields.js que faz a busca dos dados da pendência no Sistema. Neste ponto é executada a procedure detalhePendencia da mlaapi014 que busca as informações da tabela mla-docto-pend-aprovac-det. Serão retornadas as informações do detalhe da pendência e da chave do documento.

• historicoDocumento() - Pode ser alterado
  Esta função consome os dados do método dts_historicoDocumento() do displayFields.js que faz a busca dos dados do histórico do documento no Sistema. Neste ponto é executada a procedure historicoDocumento da mlaapi014 que retorna as informações do histórico de aprovações do documento.

• getCodRejeita() - Pode ser alterado
  Esta função consome os dados do método dts_getCodRejeita() do displayFields.js que faz a busca dos dados dos motivos de rejeição no Sistema. Neste ponto é executada a procedure getCodRejeita da mlaapi014 que retorna as informações dos motivos de rejeição do documento. 

• ttDados - Não deve ser alterado
  Essa é a variável que armazena os dados trafegados entre o Sistema Datasul e o Fluig. Ela armazena todas as informações das temp-tables do Progress.
  Assim que o retorno é recebido, é executada a função transformTT, onde é feita a lógica de criação das variáveis. As temp-tables transformam-se em arrays, com uma diferença: troca-se o - por _ .
  Por exemplo: tt-it-requisicao - Progress / tt_it_requisicao - HTML.
  Isto serve tanto para o nome quanto para os campos das temp-tables.
  Pelo javascript você consegue acessar os dados vindos do Progress da seguinte forma:

Acesso aos dados das temp-tables via javascript
for(var i = 0;i<tt_it_requisicao.length;i++){
    console.info("Item: ", tt_it_requisicao[i].it_codigo);
    console.info("Requisição: ", tt_it_requisicao[i].nr_requisicao);
    console.info("Seq: ", tt_it_requisicao[i].sequencia);
    console.info("Dt Entrega: ", tt_it_requisicao[i].dt_entrega);
    console.info("Qtd Requisitada: ", tt_it_requisicao[i].qt_requisitada);
}

• Tradução - Altere para contemplar as literais específicas ou customizadas
  Existem três arquivos referentes a tradução das literais dos formulários, sendo um para cada idioma: PT, EN e ES.
  O nome dos arquivos deve estar de acordo com o exemplo abaixo:
  
  1. WFMLA999_en_US.properties
  2. WFMLA999_es.properties
  3. WFMLA999_pt_BR.properties
     O 999 deve ser substituído pelo número do documento: WFMLA001, WFMLA003, WFMLA500, etc.
     
     A estrutura dos arquivos de tradução seguem a seguinte regra:
     • l-nome-literal=Valor da literal
       Exemplos:
       l-accounts-plan=Plano Contas
       l-advanced-search=Pesquisa Avançada
       l-all=Todas
  
  
• Alteração de programas Progress - Somente para desenvolvimento interno da TOTVS *
  Para desenvolvimento dos documentos padrões do MLA, é preciso alterar a boin784.m01 para que a opção Integração Fluig fique habilitada no MLA0101 - Tipos de documento e seja considerada na exportação do MLA0000 - Parâmetros da aprovação.
  
  *Para desenvolvimento de documentos específicos os parâmetros de integração com o Fluig virão habilitados para serem informados, sendo assim, não precisará ser feita a alteração acima.
  
  
• Campos Descritores
  Os campos descritores são os campos que aparecem nos filtros customizados na central de tarefas, como mostra a imagem abaixo.

Para que estes campos estejam disponíveis no Fluig é necessária a seguinte alteração no programa progress mlaapi014.i

• Progress
  • Para desenvolvimento interno: Incluir uma nova cláusula na função case incluindo os campos necessários.

  • Para desenvolvimento de documentos customizados: Existe um ponto EPC para o evento CamposDescritores onde é passado como parâmetro o rowid da tabela mla-doc-pend-aprov. O retorno esperado é uma string contendo o nome do campo no HTML, ver tópico abaixo, e o valor a ser armazenado, no formato mostrado abaixo:

Campos Descritores
<item>
    <item>nome_do_campo_do_formulario_html</item>
    <item>valor_do_campo</item>
</item>

• HTML
  Lembre-se, para que o campo fique disponível nos filtros da central de tarefas, além de alterar o programa progress é necessário incluí-lo no HTML. Dentro do arquivo WFMLA000.html há um tag <form>, que possui uma tag <div class="hidden">. Dentro desta div estão os campos input. Deve-se incluir o campo novo no final desta div, como o campo ct_nr_requisicao, na linha 18 do exemplo abaixo:

Campos Descritores - HTML

<form enctype="" name="customForm" action="" class="formee" method="post" style="border:1px solid #ddd;">
                        <div class="hidden">
                            <br><input type="text" id="nr_transacao" name="nr_transacao" readonly="readonly">
                            <br><input type="text" id="usuario" name="usuario" readonly="readonly">
                            <br><input type="text" id="chave_doc" name="chave_doc" readonly="readonly">
                            <br><input type="text" id="cod_empresa" name="cod_empresa" readonly="readonly">
                            <br><input type="text" id="cod_estabel" name="cod_estabel" readonly="readonly">
                            <br><input type="text" id="valor_doc" name="valor_doc" readonly="readonly">
                            <br><input type="text" id="validar" name="validar" readonly="readonly">
                            <br><input type="text" id="validarCampos" name="validarCampos" readonly="readonly">
                            <br><input type="text" id="isProgress" name="isProgress" readonly="readonly">
                            <br><input type="text" id="prazo" name="prazo" readonly="readonly">
                            <br><input type="text" id="validarNarrativa" name="validarNarrativa" readonly="readonly">
                            <br><input type="text" id="rejeicao" name="rejeicao" id="rejeicao" readonly="readonly">
                            <br><input type="text" id="rejeicaoPadrao" name="rejeicaoPadrao" readonly="readonly">
                            <br><input type="text" id="usuario_logado" name="usuario_logado" readonly="readonly">
 
                            <!-- [ Editável ] Inclua aqui os campos que poderão ser usados na central de tarefas. Recomenda-se usar ct_ como prefixo do campo para indicar que é usado na central de tarefas. -->
                            <input type="text" id="ct_nr_requisicao" name="ct_nr_requisicao" readonly="readonly">                        
                        </div>

• Por último, é necessário selecionar os campos e preencher suas respectivas descrições na aba Formulário nas propriedades do diagrama no TDS, como mostra a imagem abaixo:

Para mais informações sobre a seleção dos campos descritores, consultar documentação de implantação de workflow.

Formulário Mobile

Para que o formulário esteja disponível no aplicativo do Fluig, conforme link: Mobile, é preciso criar um arquivo chamado <Nome_workflow>_ecmmobile.html. Exemplo: wfmla001_ecmmobile.html

Este arquivo é responsável pela exibição dos dados do formulário nos dispositivos móveis. Deve ser desenvolvido levando em consideração o tamanho da tela e a quantidade de informação que será exibida. Uma particularidade deste fonte é que ele não permite o uso de arquivos externos, por isso é preciso que o conteúdo de alguns arquivos sejam copiados para dentro do HTML.

São eles: <nome_workflow>.js, datasul-11.5.X-SNAPSHOT.js, ttDados.js e <nome_workflow>.css.
Sendo que os arquivos do tipo Javascript devem ficar dentro da tag: <script type="text/javascript"> [...] </script> e os arquivos CSS dentro da tag: <style type="text/css"></style>

Caso o formulário desktop tenha sido desenvolvido usando técnicas de responsividade (col-xs-*, col-sm-*, col-md-* e col-lg-*), basta copiar o conteúdo do HTML do arquivo <nome_workflow>.html e colar no <nome_workflow>_ecmmobile.html. Caso contrário é preciso codificar o arquivo mobile de acordo com a necessidade para que ele funcione corretamente.

Os dados que serão retornados do Sistema quando o acesso for via dispositivos móveis são os mesmos dados do formulário desktop. Cabe ao desenvolvedor avaliar quais informações são relevantes e então deve-se implementá-las no código HTML para que sejam exibidas em tela.

Sempre que houver alguma alteração nos arquivos Javascript e/ou CSS, a alteração deve ser avaliada e repassada para o arquivo HTML mobile se for necessária.

Há um arquivo de exemplo que pode ser consultado em: ems2/fluig/process/wfmla000.zip - após descompactar: WFMLA000/forms/WFMLA000/WFMLA000_ecmmobile..html.