TREINAMENTO MÓDULO PRIME

1

Treinamento Configurador

Módulo Prime 2

Caderno 2

TREINAMENTO MÓDULO PRIME

2

Conteúdo

1 Introdução ................................................................................................ 3

A quem se orienta ..................................................................................... 3

Tópicos Abordados ................................................................................... 3

2 Estruturação Básica de Código Javascript ................................................. 4

Etapas do processo ............................................................................... 4

Globais Auxiliares .................................................................................. 4

Carregamento da Página ....................................................................... 5

Função InitForm ................................................................................... 5

Função SetForm ................................................................................... 5

Função ValidarFormOnSubmit ................................................................ 6

3 Adaptação da Estrutura Base para Serviço Específico .............................. 6

4 Apresentação da API Nativa da Plataforma LecomBPM........................... 8

5 Apresentação do functions_v2.js.............................................................. 9

6 Alteração de Apresentação dos Campos ................................................ 10

Função alterarAcaoAnalise() ................................................................. 10

Função addAlteracaoAcaoAnalise() ........................................................ 12

Importando o Javascript na Plataforma e no Processo ............................. 13

Exercício ............................................................................................. 16

7 Apresentação de Mensagens de Erro ..................................................... 16

Função verificarTamanhoSolicitacao() .................................................... 16

Função addVerificacaoTamanhoSolicitacao() .......................................... 17

Exercício ............................................................................................. 17

TREINAMENTO MÓDULO PRIME

3

1 Introdução

A quem se orienta

A pessoas que fazem mapeamentos e gestão de processos organizacionais, que irão atuar na automatização dos mesmos no Lecom BPM. Este módulo especificamente tratará de tópicos avançados na automação de processos via LecomBPM e é destinado a alunos que já cursaram o Módulo Prime 1.

Tópicos Abordados

Neste caderno, será abordado Codificação Javascript com os seguintes tópicos:

• Estruturação básica de código JS;

• Adaptação de estrutura para o processo;

• Apresentação da API nativa da plataforma;

• Apresentação do functions_v2;

• Alteração de apresentação de campos;

• Tratamento de mensagens de erro;

TREINAMENTO MÓDULO PRIME

4

2 Estruturação Básica de Código Javascript

Neste caderno será abordada a primeira parte da codificação Javascript voltada para a ferramenta LecomBPM. Vale lembrar que o objetivo deste curso é capacitar o aluno a utilizar os conhecimentos de lógica de programação e Javascript para desenvolver funcionalidades na ferramenta LecomBPM. O código JS que é utilizado na plataforma possui uma estrutura básica, que pode ser obtida no arquivo base_js.zip:

base_js.zip

O arquivo Javascript base possui a seguinte estrutura:

Etapas do processo

Definimos em um objeto as etapas do processo. É importante para definirmos qual código será executado em cada uma das etapas.

Globais Auxiliares

Temos algumas variáveis globais que costumamos definir para auxiliar no

desenvolvimento. Definimos as variáveis codProcesso, codEtapa, codCiclo para nos

ajudar na identificação do processo.

O documentStore é uma variável que será utilizada para tratarmos as

validações do tipo de arquivo.

TREINAMENTO MÓDULO PRIME

5

Carregamento da Página

No momento que a página é carregada, executamos sequencialmente três funções, que serão detalhadas em seguida.

Função InitForm

A função initForm conterá as rotinas de inicialização do formulário, como mostrar e ocultar campos, definir obrigatoriedade, etc.

Função SetForm

A função setForm conterá as rotinas de modificação do formulário com base em ações do usuário durante a execução da etapa.

TREINAMENTO MÓDULO PRIME

6

Função ValidarFormOnSubmit

Na função ValidarFormOnSubmit serão definidas validações customizadas de campos de formulário, que serão executadas durante o envio das etapas (aprovação ou rejeição).

3 Adaptação da Estrutura Base para Serviço Específico

Para começar a utilizar o nosso arquivo Javascript, precisamos fazer algumas alterações no arquivo base.

1. Renomeie o arquivo para treinamento_INICIAIS.js, onde INICIAIS são as iniciais de seu nome.

2. Preencha as Etapas do seu serviço dentro do objeto Etapa da seguinte forma:

• RECEBER_APROVACAO: 1, PREENCHER_DADOS_SOLICITANTE: 2,

...

Importante: • Não use espaços ou caracteres especiais na identificação das etapas.

• Não é necessário preencher o nome completo das etapas, apenas um nome que

identifique corretamente a etapa.

• A ordem das etapas e o seu código identificador vai variar de aluno para aluno. Verifique sempre no seu processo o código das etapas.

TREINAMENTO MÓDULO PRIME

7

3. Preencha o interior dos blocos switch (codEtapa) nas funções initForm, setForm e

validarFormOnSubmit, adicionando um case para cada uma das etapas, conforme

indicado abaixo:

Após o switch da função initForm, adicione a seguinte linha, que será explicada

posteriormente:

Form.apply();

Com estas configurações feitas, estamos com o nosso arquivo base com as configurações iniciais para o nosso processo.

TREINAMENTO MÓDULO PRIME

8

4 Apresentação da API Nativa da Plataforma LecomBPM

Anexo a este documento está a documentação da API Javascript do LecomBPM. Esta documentação descreve as funcionalidades que temos à nossa disposição, detalhando suas chamadas, parâmetros, retornos, possibilidades, dentre outros.

TREINAMENTO MÓDULO PRIME

9

5 Apresentação do functions_v2.js

A API foi desenvolvida para que seja possível implementarmos funcionalidades nos formulários da plataforma através de código Javascript. Algumas funcionalidades, entretanto, são comuns a diversos processos, como validação de CPF/CNPJ válidos, validação de e-mail, adicionar mensagens de erro customizadas, dentre outras. De forma a facilitar o desenvolvimento e padronizar o código utilizado, estas funções comuns foram agrupadas em um arquivo chamado functions_v2.js.

functions_v2.zip

As funções inseridas no functions_v2 são documentadas, tendo indicados os parâmetros, retornos e funcionamento. Segue uma breve descrição de cada uma das funções contidas no arquivo em março de 2019:

o nulo: Função que retorna o valor de um campo, caso seja válido. Caso não seja, retorna

o valor passado no parâmetro. o setApresentação: Configura a apresentação dos campos: somente-leitura, visibilidade,

habilitação, etc.

o adicionaErro: Adiciona uma mensagem de erro a um campo do formulário. o removeErro: Remove mensagens de erro em um campo do formulário.

o validaCPF: Função para validação de CPF. o validaCNPJ: Função para validação de CNPJ.

o validaEmail: Função para validação de e-mail. o validaExtensaoTamanhoArquivo: Função auxiliar para validar extensões e tamanho

de arquivo em MB.

o adicionaValidacaoTamanhoExtensaoArquivo: Função para adicionar a validação de tamanho e extensões a um campo do formulário.

o validaDocumentoAssinado: Verifica se um documento foi assinado digitalmente pelo assinador digital LecomBPM.

o limpaCampos: Limpa valor(es) do(s) campo(s) ou grid(s) passados como parâmetros.

o adicionaCaixaAlta: adiciona caixa alta a campos do BPM.

TREINAMENTO MÓDULO PRIME

10

6 Alteração de Apresentação dos Campos

Para começarmos a prática com o Javascript, vamos, primeiramente, acessar o nosso processo e remover todas as regras de tela da etapa Analisar Solicitação. Acesse o ambiente de treinamento em https://mpdg-trn-orgaoa.lecom.com.br com as credenciais de administrador:

o Login: adm; o Senha: lecom;

Em seguida, acesse o módulo Studio e localize o seu processo desenvolvido durante o módulo 1 do treinamento Prime. Edite o modelo, acesse as etapas, localize a etapa de Analisar Solicitação, clique em Campos nesta etapa, e remova as regras de tela criadas. Após deletar as regras, iremos recriá-las via Javascript.

Função alterarAcaoAnalise()

As regras de tela da etapa de Analisar Solicitação eram, basicamente: o Se o campo ANALISE for igual a Indeferir ou Solicitar Ajustes, deve-se mostrar o

campo detalhamento e torna-lo obrigatório. o Senão, deve-se ocultá-lo e torna-lo opcional.

o Se o campo ANALISE for igual a Deferir ou Indeferir, deve-se mostrar o botão de aprovação, escondendo o de rejeição.

o Senão, deve-se mostrar o botão de rejeição, escondendo o de aprovação.

Antes de se partir para o desenvolvimento da função, é interessante estruturarmos a sua implementação. Estruturaremos a função da seguinte forma:

o Obter o valor do campo ANALISE

o Se o valor do campo for “Deferir”

o Escondemos a caixa de detalhamento o Mostramos o botão de aprovação (Informar Parecer)

o Escondemos o botão de rejeição (Solicitar Ajustes) o Se o valor do campo for “Indeferir”

o Mostramos a caixa de detalhamento

o Mostramos o botão de aprovação (Informar Parecer) o Escondemos o botão de rejeição (Solicitar Ajustes)

o Se o valor do campo for “Solicitar Ajustes” o Mostramos a caixa de detalhamento

o Escondemos o botão de aprovação (Informar Parecer) o Mostramos o botão de rejeição (Solicitar Ajustes)

o Se o valor do campo não estiver selecionado

o Escondemos a caixa de detalhamento o Escondemos o botão de aprovação (Informar Parecer)

o Escondemos o botão de rejeição (Solicitar Ajustes)

Com a estrutura pronta, partimos para o desenvolvimento da função. Inicie escrevendo a chamada da função ao final de seu arquivo js.

TREINAMENTO MÓDULO PRIME

11

Abaixo temos a implementação do código da função utilizando apenas a API da plataforma:

TREINAMENTO MÓDULO PRIME

12

A seguir, temos a implementação do código fazendo uso de algumas funções presentes no functions_v2.

Neste caso, a implementação fazendo uso da functions_v2 parece ser mais complexa. Entretanto, em situações onde temos que alterar o comportamento de múltiplos campos de uma vez, a sintaxe do setApresentacao facilita o uso e legibilidade, uma vez que permite que sejam passados diversos campos como parâmetros. Adicione uma chamada para a função alterarAcaoAnalise dentro do case da etapa Analisar Solicitação, na função initForm().

Função addAlteracaoAcaoAnalise()

Definimos acima a função que vai tratar os campos com base no valor do campo ANALISE. Entretanto, esta verificação só está executando no carregamento da etapa do formulário. É necessário então, que adicionemos uma verificação para que, cada vez que o usuário alterar o valor do campo ANÁLISE, a função alterarAcaoAnalise() seja executada. Para isso, criaremos uma nova função addAlteracaoAcaoAnalise(), ao final do arquivo.

TREINAMENTO MÓDULO PRIME

13

O código da função deve ser o seguinte:

Basicamente, este código faz o seguinte:

o Adiciona uma função para ser executada toda vez que o campo ANALISE tiver suas

propriedades definidas (SET_FIELD_PROPERTIES).

o Esta função recebe dois parâmetros: (itemId e response). o A função vai verificar primeiramente se o valor das propriedades da resposta está

definido. o Caso o valor esteja definido, vai chamar a função desenvolvida

anteriormente, a alterarAcaoAnalise().

o Depois, chama a função Form.apply().

Após finalizar a implementação desta função, adicione uma chamada para ela dentro do case da etapa Analisar Solicitação, na função setForm().

Importando o Javascript na Plataforma e no Processo

Para importar um código Javascript na plataforma, acesse os menus na seguinte ordem: BPM > Studio > Modelador > Serviços > Javascript > Novo Javascript. Em seguida, faça o upload/configuração do arquivo conforme indicado no Caderno 1. Terminada a configuração do arquivo, vamos configurar o arquivo para executar nas etapas do nosso serviço. Acesse o seu serviço e então a aba Campos do Formulário. Clique então no botão Scripts.

Função Form.apply(): • é a função que carrega na tela todas as alterações feitas via Javascript.

• é uma operação custosa, então deve-se chamar apenas quando necessário:

o no fim do carregamento dos dados da página; o quando todas as alterações de campo de determinado evento já tiverem

sido feitas.

TREINAMENTO MÓDULO PRIME

14

Na opção Adicionar Javascripts em todas as etapas, selecione o arquivo functions_v2.js e clique em Adicionar a todas as etapas. Em seguida, selecione o arquivo recém configurado, clicando em Adicionar a todas as etapas também.

Debug de Código JS

É comum que o código Javascript não se comporte da maneira esperada durante o seu desenvolvimento. Para nos ajudar a compreender melhor a causa do erro, podemos acessar o console do navegador através da tecla F12 do teclado, ou procurando por Ferramentas de Desenvolvedor em algum dos menus.

Carregamento de Arquivos JS: o os arquivos são carregados na ordem informada. Portanto, se algum

arquivo JS possui uma função que é usada em outro arquivo, o arquivo que contém a função deve estar acima na listagem da etapa.

o Pode-se alterar a ordem de carregamento dos campos clicando nos

botões de seta, à direita de cada arquivo.

TREINAMENTO MÓDULO PRIME

15

O console exibe mensagens de erro na cor vermelha e exibe mensagens em geral relacionadas à página do navegador que se está executando.

No console do Chrome, temos algumas opções interessantes para localizarmos

melhor os erros:

• Quando é exibida uma mensagem de erro com a indicação VM999_999: (onde 999 são

números), podemos clicar neste valor para sermos direcionados ao código fonte na

linha onde o erro foi identificado.

• Quando temos um erro de lógica no nosso código, podemos acrescentar uma linha com

o comando debugger; para que a execução do Javascript seja pausada naquela linha e

seja possível navegar pelo código, verificando valores das variáveis e os caminhos

percorridos.

• Nos casos de erro de sintaxe, uma boa ideia é usar um validador (ou lint) de código JS.

Existem diversos validadores na internet, mas um bom é o https://jshint.com/. Cole o

seu código JS no editor de texto desta página que diversos erros do código serão

reportados, com indicação de linha e possível causa. Vale lembrar que, por usarmos a

API da plataforma e outros arquivos JS na sua implementação, o validador pode acusar

erros por existirem funções e dependências indefinidades.

TREINAMENTO MÓDULO PRIME

16

Exercício

Remova as regras de tela criadas para as etapas Preencher Dados do Solicitante e Preencher Dados da Solicitação, recriando-as através de Javascript. A regra de é a seguinte: Quando o valor do campo ANALISE for igual a “Solicitar Ajustes”, devem-se tornar visíveis os campos LBL_ANALISE, ANALISE e DETALHAMENTO, sendo que ANALISE e DETALHAMENTO devem ser somente-leitura.

7 Apresentação de Mensagens de Erro

Alguns serviços necessitam de algum tipo de validação especial de campos de formulário, além de obrigatório / opcional. Com Javascript, podemos fazer estas validações e ainda exibir mensagens de texto especiais caso as regras não sejam atendidas. Vamos começar adicionando uma nova regra de negócio ao nosso serviço: Solicitações do tipo B não podem ter tamanho maior que 20. Para validarmos esta regra, vamos criar uma nova função Javascript para verificar se a solicitação tipo B é maior que 20 e, em seguida, uma função para adicionar a validação sempre que o usuário terminar de digitar um valor no campo de tamanho, ou alterar o valor do tipo de solicitação.

Função verificarTamanhoSolicitacao()

A implementação da função de verificação de tamanho da solicitação deve ser a seguinte:

TREINAMENTO MÓDULO PRIME

17

Primeiramente, obtemos os valores dos campos TIPO_SOLICITACAO e

TAMANHO_SOLICITACAO. Em seguida, verificamos se o tipo da solicitação é B e se o tamanho é maior que 20. Se for este o caso, adicionamos uma mensagem de erro no campo de tamanho

e apagamos o valor informado. Se não for, removemos a mensagem de erro.

Função addVerificacaoTamanhoSolicitacao()

Após implementarmos a função de verificação, temos que definir quando esta validação

será executada: Quando o usuário alterar os campos TIPO_SOLICITACAO ou TAMANHO_SOLICITACAO. Para isso, criaremos uma nova função:

Esta função adiciona comandos para serem executados quando os campos de tamanho e de tipo de solicitação são alterados. O campo de tipo usa o evento SET_FIELD_PROPERTIES pois é um campo de lista. O campo de tamanho usa o evento BLUR pois é um campo de linha de texto. Não se esqueça de adicionar uma chamada para a addVerificacaoTamanhoSolicitacao no initForm, na etapa de Preencher Dados da Solicitação.

Exercício

Altere a função de verificação de tamanho para contemplar esta nova regra, além da que já está implementada: Solicitações do tipo A só podem ter tamanho maior que 100, enquanto solicitações do tipo C devem ter tamanho entre 30 e 55.