TOTVS Fluig

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 3

changes.mady.by.user Jeferson Francisco

Gravado em

comparado com

Nova versão Atual

changes.mady.by.user Samara Buettgen

Gravado em

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Índice

Índice
maxLevel4
outlinetrue
exclude.*ndice
stylenone

Objetivo

O objetivo deste guia é exemplificar a criação de um workflow para ser integrado com um aplicativo externo.

Caso de uso

A empresa x necessita de um processo de solicitação de compra. A solicitação será iniciada por um usuário “comum” onde será incluído os dados da compra como categoria, justificativa de compra, fornecedor e a lista de produtos. Ao iniciar o processo um email deverá ser disparado para o fornecedor com a URL de acesso para uma página pública contendo os dados dos produtos para cotação. Após informar os valores dos produtos e submeter, o processo deverá ficar pendente com o gestor da área de compra para aprovação. Após aprovado um novo email é enviado para o fornecedor confirmando a solicitação de compra. O processo ficará pendente com o fornecedor até que ele submeta o envio dos produtos. Nesse momento o processo ficará pendente com a equipe de recebimento que fará a conferência dos produtos e finaliza o processo.

...

                                                                                        Figura 1 - Workflow solicitação de compra.


Criação do Workflow (BPM)


Informações

Acesse a documentação completa em http://tdn.totvs.com/x/dPwlE

O workflow base e seu formulário foram criados pelo próprio desenhador de processos do BPM, após isso foi importado no fluig Fluig dev studio e realizado as customizações necessárias. Para criar um novo processo acesse: Processos > Configurar Processos > Adicionar

...

A partir deste ponto foi necessário apenas arrastar os componentes em tela.

Customizando o processo


Para customizar o processo e o formulário é necessário ter instalado e configurado o fluig Fluig studio. Acompanhe os passos a seguir:

...

Deck of Cards
effectDuration0.5
historyfalse
idfluig_studio
effectTypefade
Card
id21
labelPasso 21



Card
id32
labelPasso 32



Card
id43
labelPasso 43



Card
id4
labelPasso 54



Card
id5
labelPasso 65


  • Importar o processo criado na sessão "Criação do Workflow (BPM)"


Envio de e-mail

Template de e-mail


Nota

Toda documentação referente a customização de templates de e-mail está disponível em  http://tdn.totvs.com/x/BJLCC

...

Deck of Cards
idTemplate email
Card
idTemplate email
labelPasso 1



Bloco de código
languagexml
firstline1
titleTemplate de e-mail
linenumberstrue
<html>
<head>
    <title>Fluig</title>
</head>
<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">
   
    <br />
    <div align="left">
        <table cellspacing="0" cellpadding="0" border="0">
            <tbody>
                <tr>
                    <td>                    	
						<p class="url">${MESSAGE}</p>
					</td>
                </tr>                               
            </tbody>
        </table>
    </div>
    <br />
</body>
</html>


Na linha 13 adicionamos uma variável ${MESSAGE}, o valor dessa variável será enviado no script responsável pelo envio de email.

Card
idTemplate email
labelPasso 2


  • Após criar o arquivo html é necessário importa-lo na plataforma.  Acesse o fluig Fluig > Painel de controle > Templates de email > Adicionar . Informar Código do formulário, descrição e selecionar o arquivo html criado no passo 1 para realizar o upload.


                                                                                                                                Figura 3 - Adicionar formulário



Script de envio de e-mail


Nota

Acesse a documentação de envio de e-mail http://tdn.totvs.com/x/m4HzCg.

O script mencionado a seguir está disponível em nosso github. Clique aqui para acessar.

Para criar um script de envio de e-mail acesso o fluig Fluig studio. Clicar com botão direito do mouse na pasta “workflow” > novo > Script fluig Fluig > Script Evento Workflow > beforeStateEntry e relacionar com o processo importado:

...

  • O primeiro parâmetro que a função notify recebe é o código/matrícula do usuário que irá enviar o e-mail (remetente).
  • O segundo parâmetro é o código do template que foi cadastrado no fluigFluig.
  • O terceiro parâmetro é um mapa de dados (java.util.HashMap) que contém os parâmetros que serão utilizados para preencher as variáveis do template.
    Por padrão, os parâmetros WDK_VirtualDir (diretório virtual) e WDK_AdviceUser (Nome do colaborador remetente) são adicionados ao mapa de parâmetros automaticamente e podem ser utilizados no template, sem que os valores sejam adicionados pela personalização.
  • O quarto parâmetro representa a lista de usuários que irão receber o e-mail (java.util.ArrayList). Esta lista de usuários consiste em uma lista de códigos de usuários cadastrados no fluig Fluig e/ou e-mails diretos para caso seja necessário enviar o e-mail a endereços externos de destinatários não cadastrados na plataforma.
  • O quinto e último parâmetro especifica qual será o formato do e-mail enviado. Os valores aceitos são "text/html" e "text/plain".

Customizando o formulário

Para o nosso formulário precisamos da informação do usuário solicitante para exibição, número do processo, e a etapa que o processo se encontra para podermos realizar as tratativas de exibir/ocultar ou bloquear os campos, dependendo da etapa do processo. Para isso vamos inserir o seguinte trecho de código no arquivo displayFields.js.


Bloco de código
languagejs
firstline1
linenumberstrue
function displayFields(form,customHTML){ 
	
	var CURRENT_STATE = getValue("WKNumState") ? getValue("WKNumState") : 0;	
	var CURRENT_USER  = getValue("WKUser");

	customHTML.append('<script>' +
	' var NUM_PROCES = ' + getValue("WKNumProces") + '; ' +
	' var CURRENT_USER = \''  + CURRENT_USER + '\'; ' +
	' var CURRENT_STATE = ' + CURRENT_STATE + '; ' +
	'</script>');
}

...

Cada evento possui acesso ao handle da API de workflow pela variável global hAPI, com ela é possível pegar diversas informações. Saiba mais em http://tdn.totvs.com/x/8uAlE. Com as informações do processo sendo acessadas diretamente no HTML conseguimos manipular nosso formulário para exibir/ocultar e bloquear campos dependendo da etapa que o processo se encontra. No HTML do nosso formulário vamos adicionar um script chamado custom.js para realizar as alterações necessárias.

...

Para deixar nosso campo de “valor” dos produtos no formato monetário vamos utilizar uma biblioteca open source disponivel em https://github.com/plentz/jquery-maskmoney. Fazer o download e adicionar o script no HTML da mesma forma que adicionamos o custom.js. Devemos alterar nosso custom.js para que a primeira instrução seja a formatação do campo de valor:

...

Nota

Para iniciar o processo é necessário selecionar um fornecedor em uma lista. Esta lista de fornecedores está sendo carregada a partir de um dataset. saiba mais sobre datasets em http://tdn.totvs.com/x/eitbB

...

Para realizar chamadas nas APIs do fluig Fluig é necessário ter cadastrado um cliente Oauthaplicativo no Fluig. Para cadastrar realizar esse cadastro acesse o passo a passo na documentação http://tdn.totvs.com/x/KAFlDw#FluigAPI-app.  O aplicativo web utilizando THF para o estudo de caso encontra-se disponível em nosso repositório no github. Todos os detalhes de deploy de um aplicativo THF no Fluig encontram-se no README do projeto.

Após gerar as chaves de autenticação foi necessário configurar o aplicativo no arquivo environment.prod.ts.


Informações

Para movimentar processos do BPM é necessário que o token seja do usuário responsável pela tarefa. Para gerar token de usuário utilize a API disponível em nosso portal.