Base de conhecimento
Encontre respostas para suas dúvidas em quatro fontes de conhecimento diferentes ao mesmo tempo, simplificando o processo de pesquisa.
  1. Central de Atendimento TOTVS
  2. Cross Segmentos
  3. TOTVS Backoffice (Linha Datasul)
  4. Materiais
  5. Aprovação Processo Logístico (MLA)
Central do Cliente

Cross Segmentos - Linha Datasul - MLA - Como criar documentos para o Portal do MLA em HTML ou customizar documentos existentes

time.png Tempo aproximado para leitura: 00:14:49 min

Dúvida
Como criar documentos para o Portal do MLA - Módulo Logístico de Aprovação em HTML ou customizar documentos existentes?

Ambiente
Cross Segmentos - TOTVS Backoffice (Linha Datasul) - Aprovação de Processo Logístico (MLA) - Versão 12

Solução
Todas as telas do Portal do MLA são customizáveis através dos pontos de customização que estão nos arquivos HTML - atributo: totvs-custom-element. O valor deste atributo é o nome da função que será chamada do arquivo de customização ao iniciar a tela.

As customizações feitas funcionam tanto nas telas do Portal MLA - http://<servidor>:<porta>/portal/menu/#/dts/mla/approval/ quanto pelas telas do MLA no menu - http://<servidor>:<porta>/menu-html/#/dts/mla/approval/. Para isso, os arquivos de customização devem estar salvos na pasta correta: <jboss>/server/<instancia>/deploy/custom.war/mla/ respeitando as regras de nomenclatura descritas abaixo.

Nomenclatura do arquivo de customização
Cada subdiretório deve ter o seu arquivo Javascript de customização, por exemplo:
Url da tela padrão: http://<servidor>:<porta>/menu-html/#/dts/mla/approval/
Arquivo padrão: <jboss>/server/<instancia>/deploy/datasul-byyou-<versão>.ear/html-mla-<versão>.war/html/approval/approval.html
Arquivo de customização: <jboss>/server/<instancia>/deploy/custom.war/mla/approval.js

Exemplo de Customização

  • Exemplo de função de customização - approval.js
customApproval:function(params, element){

     ... 

}
  • Ponto de customização - approval.html
<totvs-page type="list" totvs-custom-element="customApproval">

    <totvs-page-navbar>

        <totvs-page-breadcrumb>

No exemplo acima, ao executar a tela HTML, será chamada a função customApproval, do arquivo de customização. Por padrão, todas as funções de customização recebem dois parâmetros:

  • params: recebe o controller da tela;

  • element: recebe o elemento HTML que possui o ponto de customização, no exemplo acima: elemento <totvs-page>.

A função customApproval seria chamada quando a tela fosse executada:

  • Exemplo de arquivo de customização - approval.js
define(['index', 'totvs-custom'], function(index, custom) {

    approvalCustomService.$inject = ['customization.generic.Factory', '$timeout'];  

    function approvalCustomService(customService, $timeout){      

        service = {          

            customApproval:function(params, element){              

                var title = element.find("#pageTitle");              

                title.append('<div style="background-color: #aaa; font-style: italic; font-size: 24px; color: yellow;">Esta tela &eacute; customiz&aacute;vel</div>');              

                var html = '<div style="background-color: #ccc; font-size: 24px; color: green;">Total de {{controller.approvalDocuments.length}} documentos</div>';              

                var compiledHTML = customService.compileHTML(params, html);              

                title.append(compiledHTML);

            }

        };       

        angular.extend(service, customService);      

        return service;

    }  

    index.register.factory('custom.dts.mla.approval',

    approvalCustomService);

});



Resultado da customização:

mceclip0.png

Padrão sem customização:

mceclip1.png

A customização é feita a partir do element, criando, editando ou removendo suas tags e atributo. Para encontrar o elemento a ser customizado, usa-se as regras de seletores CSS: CSS Selector Reference.
Exemplo: var title = element.find('div[title]:first');

Quando tem-se a necessidade de utilizar variáveis na customização é necessário que seja feita uma compilação do elemento customizado contra o controller passado para a função através do params. Esta compilação é feita para que o AngularJS consiga substituir as variáveis da tela ({{variavel}}) pelo valor da variável no controller.

Exemplo:

  • Exemplo de compilação em arquivos customizados:
customApproval_listApprovaldoc:function(params, element){

    var title = element.find('div[title]:first');              

    var html = '<span style="background-color: yellow">cod=[{{approvaldoc["cod-tip-doc"]}}]</span>';

    var compiledHTML = customService.compileHTML(params, html);              

    title.append(compiledHTML);          

}

No exemplo acima, está sendo criado um novo elemento <span> com o código do tipo de documento e adicionado no primeiro elemento <div> que tiver o atributo title.

  • Resultado do código HTML gerado após a customização:
<div title="Cotação de Materiais" link="#/dts/mla/approval/list/5" class="col-xs-7 col-sm-6 col-md-7 col-lg-7 ng-scope ng-isolate-scope">

    <a class="title link ng-binding" href="#/dts/mla/approval/list/5" ng-if="Cotação de Materiais">Cotação de Materiais</a>

    <span class="title" ng-transclude=""></span>

    <span style="background-color: yellow" class="ng-binding ng-scope">cod=[5]</span>

</div>

  • Resultado da tela de listagem após a customização:

mceclip0.png

Quando há um ponto de customização em uma lista <totvs-list-item> o controller passado como parâmetro é apenas o item corrente do ng-repeat, e não o controller da tela toda.

Customização de Documentos Padrões - Progress

Para customização dos documentos padrões, existem pontos de EPC que podem ser utilizados nas APIs Progress que retornam as informações para a interface. Para mais detalhes, consultar a documentação técnica destas APIs no módulo do MLA. As APIs tem o nome de mlahtml + <número do documento> + p.p. Exemplo: Para o documento 1 – Solicitação de compra por item é a mlahtml001p.p.

Pontos de Customização de Documentos Padrões - HTML

Aprovação de Documentos:

  1. Totalizadores: http://<servidor>:<porta>/menu-html/#/dts/mla/approval/
    • customApproval: customização da tela de totalizadores dos documentos.
    • customApproval_listApprovaldoc: customização da listagem dos totalizadores dos documentos.
  2. Listagem: http://<servidor>:<porta>/menu-html/#/dts/mla/approval/list/<cod_documento>
    • customApprovalList: customização da tela de listagem.
    • customList<cod_documento>: customização da listagem do documento.
  3. Detalhes: http://<servidor>:<porta>/menu-html/#/dts/mla/approval/detail/<cod_documento>/<cod_transacao>
    • customApprovalDetail: customização da tela de detalhe.
    • customDetail<cod_documento>:  customização do detalhe do documento.
    • customApprovalDetail_historic: customização da lista do histórico de aprovação.

Caso o documento possua lista <totvs-list-item>, deve-se abrir o arquivo de template: <jboss>/server/<instancia>/deploy/datasul-byyou-<versão>.ear/html-mla-<versão>.war/html/template/detail/doc-<cod_documento>.html e ver o nome da função indicada no totvs-custom-element.

Exemplo:

<totvs-list-item id="item{{item['seq']}}" 

            ng-class="tab-1" 

            ng-repeat="item in controller.request['tt-it-requisicao']" 

            totvs-custom-element="customDetail1_listItem">

Histórico de Aprovação dos Documentos:

  1. Totalizadores: http://<servidor>:<porta>/menu-html/#/dts/mla/historic/
    • customHistoric: customização da tela de totalizadores dos documentos.
    • customHistoric_listHistoricdoc: customização da listagem dos totalizadores dos documentos.
  2. Listagem: http://<servidor>:<porta>/menu-html/#/dts/mla/historic/list/<cod_documento>
    • customHistoricList: customização da tela de listagem.
    • customList<cod_documento>: customização da listagem do documento.
  3. Detalhe: http://<servidor>:<porta>/menu-html/#/dts/mla/historic/detail/<cod_documento>/<cod_transacao>
    • customHistoricDetail: customização da tela de detalhe.
    • customDetail<cod_documento>: customização do detalhe do documento.

Se algum documento for customizado para a aprovação de documentos, a lógica não é replicada automaticamente para o histórico de aprovação de documentos. Desta maneira é possível ter customizações diferentes entre estas duas telas. Porém, caso a customização seja a mesma, ao invés de duplicar o código é possível injetar a customização da aprovação da seguinte forma:

  • Exemplo de injeção do arquivo de customização da aprovação - approval.js
define(['totvs-custom', '/dts/custom/mla/approval.js'], function(custom) {  

    historicCustomService.$inject = ['customization.generic.Factory', 'custom.dts.mla.approval'];

    function historicCustomService(customService, customApproval){

        ...

    }

}

Com o serviço injetado, é possível acessar as funções do mesmo através da variável que recebeu o serviço, no exemplo abaixo a customApproval.

  • Exemplo de customização do histórico de aprovação - historic.js
define(['index', 'totvs-custom', '/dts/custom/mla/approval.js'], function(index, custom) {  

    historicCustomService.$inject = ['customization.generic.Factory', 'custom.dts.mla.approval'];  

    function historicCustomService(customService, customApproval) {

        service = {

            customList1:function(params,element){

                customApproval.customList1(params,element);

            },          

            customDetail1:function(params,element){

                customApproval.customDetail1(params,element);

            },          

            customDetail1_listItem:function(params,element){

                customApproval.customDetail1_listItem(params,element);

            }

        };

        angular.extend(service, customService);

        return service;  

    }  

    index.register.factory('custom.dts.mla.historic',

    historicCustomService);

});

Customização das telas dos Usuários Alternativos:

Caminho do arquivo: <jboss>\server\<instancia>\deploy\custom.war\mla\alternativeuser.js
Assim como nas telas de aprovação de documentos e nas telas de histórico de aprovação de documentos, as telas dos usuários alternativos também são customizáveis.

Pontos de customização:

  1. Lista: http://<servidor>:<porta>/menu-html/#/dts/mla/alternativeuser/
    • customAlternativeuser_list: Customização da tela de listagem.
    • customAlternativeuser_listUser: Customização da lista de usuários alternativos.
  2. Detalhe: http://<servidor>:<porta>/menu-html/#/dts/mla/alternativeuser/detail/<cod_usuario_alternativo>
    • customAlternativeuser_detail: Customização da tela de detalhe.
  3. Edição: http://<servidor>:<porta>/menu-html/#/dts/mla/alternativeuser/edit/<cod_usuario_alternativo>
    • customAlternativeuser_edit: Customização da tela de edição.

Criação de Documentos Novos:

Passo 1: Construir um programa progress que irá retornar os dados para a interface HTML, tanto para a listagem de documentos, quanto para o detalhamento:
Para a construção desse programa utilizar os programas laphtml/mlahtml000p.p e laphtml/mlahtml000p.i como exemplo, que estão expedidos com fonte aberto. Eles contêm orientações e exemplos para construção deste programa.

É importante manter e preencher os campos conforme orientado no exemplo, para o correto funcionamento do documento em todas as funcionalidades do portal.
Os programas progress criados deverão ter o nome conforme o número do documento.
Exemplo: Para o documento número 501 seria o laphtml/mlahtml501p.p.

É importante lembrar que para que o arquivo esteja disponível para ser acessado através do HTML, é necessário fazer o upload do mesmo, para geração do arquivo .json de comunicação. O upload é feito no seguinte endereço: http://<servidor>:<porta>/dts/datasul-rest/resources/api/application.wadl/add
Informar o arquivo compilado do programa, e o diretório laphtml.

Esta etapa só deverá ser feita em ambientes na versão 12.1.20 ou anteriores. A partir da versão 12.1.21 não é mais necessário fazer o upload do arquivo. A geração do arquivo json é feita automaticamente.

mceclip1.png

O arquivo será gerado no diretório configurado na propriedade datasul.rest.dir do arquivo datasul_framework.properties dentro do laphtml.

Passo 2: Construir o template de listagem dos documentos:
Utilizar como base o exemplo doc-0.html, que pode ser encontrado no <jboss>/.../datasul-byyou-<versao>.ear/totvs-portal-jboss<versao>.war/mla/html/template/list. O arquivo deverá ter seu nome conforme o número do documento que está sendo desenvolvido. Exemplo: Para o documento número 501 seria o doc-501.html.

Este arquivo deverá ser salvo no diretório list encontrado no: <jboss>/server/<instancia>/deploy/custom.war/mla/template/list. Neste arquivo devem ser inseridos os campos a serem apresentados na listagem, conforme os campos retornados na temp-table tt-lista para o documento em questão.

  • Para acessar os campos utilizar {{request[ 'nome-do-campo' ]}};
  • Conforme orientações dentro do exemplo, manter o campo de situação, pois ele é importante para apresentação do documento no histórico.

Passo 3: Construir o template de detalhamento de documentos:
Para construir o template de detalhe de documentos, criar um arquivo no diretório detail encontrado no: <jboss>/server/<instancia>/deploy/custom.war/mla/template/detail, com o mesmo nome do template de listagem.

Neste arquivo devem ser apresentados os campos que se deseja para visualizar detalhes do documento na aprovação. Podem se acessar quantas temp-tables forem retornadas pelo método de detalhamento do programa progress, basta acessar pelo nome da temp-table e campos.

Exemplo acesso a temp-table:

<totvs-list-item-info class="col-xs-12 col-sm-6 col-md-6 col-lg-6"

            title="{{ 'item' | i18n}}"

            value="{{ord['it-codigo']}}">

</totvs-list-item-info>

Passo 4: Construir o template do título do documento:
Para construir o template de título de documento, criar um arquivo no diretório title encontrado no: <jboss>/server/<instancia>/deploy/custom.war/mla/template/title, com o mesmo nome do template de listagem.

Neste arquivo devem ser apresentados os campos que deverão aparecer no título do documento.
O título do documento é um link que direciona para o detalhe do documento.

Exemplo de template de título do documento:

<totvs-list-item-title class="col-sm-6">

        <a href="#/dts/mla/{{controller.pageLink}}/detail/{{controller.documentId}}/{{request['nr-trans']}}" title="{{request['chave-doc-formatada']}}">{{ 'key' | i18n}}: {{request['chave-doc-formatada']}}</a>

</totvs-list-item-title>

No exemplo acima deve ser alterado apenas o atributo title e o conteúdo da tag <a>. O primeiro refere-se ao texto de ajuda que aparece quando o mouse é colocado em cima do título do documento. O segundo é o conteúdo que será apresentado no título.

O template de título é opcional, caso não for criado será usado o título padrão - chave do documento, conforme imagem abaixo.

mceclip2.png

Criar os HTMLs que funcionem de forma responsiva, para que possam ser executados em dispositivos móveis também.

Para mais informações sobre responsividade consulte: CSS - Bootstrap

Caso a arquitetura utilizada no ambiente seja TOMCAT, deve-se realizar as migrações de customizações ou criações de novas considerando os caminhos/passos indicados do documento de referência: Migração de Customizações THF.

Importante
Caso tenha sido utilizado o processo anterior da versão 12.1.20, onde se gerava o arquivo JSON no diretório em questão através da URL, é necessário a eliminação dos arquivos antigos do JSON nesse diretório, pois com a nova forma de geração automática do JSON, caso exista algum JSON obsoleto no diretório o Sistema não consegue gerar os novos arquivos, causando dessa forma inconsistências, para mais informações verifique o link: Desenvolvimento de APIs para o produto Datasul.

Saiba mais
Para configurações e acesso do Portal do MLA, consulte: 
Cross Segmentos - Linha Datasul - MLA - Configuração e acesso ao Portal do MLA em HTML
Para funcionalidades e utilização do Portal do MLA, consulte: 
Cross Segmentos - Linha Datasul - MLA - Funcionalidades e utilização do Portal do MLA em HTML

Esse artigo foi útil?
Usuários que acharam isso útil: 0 de 0

0 Comentários

Por favor, entre para comentar.
Como podemos ajudar?
Entre em contato e fale conosco!
X Fechar

Olá ,

Há pendência referente a um de seus produtos contratados para a empresa ().

Entre em contato com o Centro de Serviços TOTVS para tratativa.

Ligue! 4003-0015 opção 4 e 9 ou registre uma solicitação para CST – Cobrança – Verificação de pendências financeiras . clique aqui.

TOTVS

X Fechar

Olá ,

Seu contato não está cadastrado no Portal do Cliente como um perfil autorizado a solicitar consultoria telefônica.

Por gentileza, acione o administrador do Portal de sua empresa para: (1)configurar o seu acesso ou (2)buscar um perfil autorizado para registro desse atendimento.

Em caso de dúvidas sobre a identificação do contato administrador do Portal, ligue (11) 4003-0015, opção 7 e, em seguida, opção 4 para buscar o suporte com o time de Assessoria ao Portal do Cliente. . clique aqui.

TOTVS

X Fechar

Olá ,

Para o atendimento de "Consultoria Telefônica" você deverá estar de acordo com o Faturamento.

TOTVS

X Fechar

Olá,

Algo inesperado ocorreu, e o usuario nao foi reconhecido ou você nao se encontra logado

Por favor realize um novo login

Em caso de dúvidas, entre em contato com o administrador do Portal de Clientes de sua empresa para verificação do seu usuário, ou Centro de Serviços TOTVS.

Ligue! 4003-0015 opção 4 e 9 ou registre uma solicitação para CST – Cadastros . clique aqui.

TOTVS

Chat _

Preencha os campos abaixo para iniciar o atendimento:

Chat _

NC#o encontrou o que procura?