Histórico da Página
...
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 |
...
A partir deste ponto foi necessário apenas arrastar os componentes em tela.
Customizando o processo
Comentário sobre o assunto. Macro para passo a passo.
Para customizar o processo e o formulário é necessário ter instalado e configurado o fluig studio. Acompanhe os passos a seguir:Abaixo é utilizado o exemplo de interação passo a passo. Facilita o entendimento.
| Deck of Cards | |||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
|
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 |
Para criar um novo template simples de e-mail acompanhe os passos a seguir:
| Deck of Cards | |||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||
|
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 studio. Clicar com botão direito do mouse na pasta “workflow” > novo > Script fluig > Script Evento Workflow > beforeStateEntry e relacionar com o processo importado:
Segue abaixo como ficou nosso script de envio de e-mail após codificação:
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
function beforeStateEntry(sequenceId){
var parametros = new java.util.HashMap();
/*Esse valor poderia ser pego do fornecedor selecionado no formulário*/
var destinatarios = new java.util.ArrayList();
destinatarios.add("[email protected]");
/*Etapa de cotação*/
if (sequenceId == 2) {
parametros.put("MESSAGE","Nova cotação, acesse: https://wcm.fluig.com/portal/<CODE_EMPRESA>/<CODE_PAGINA_PUBLICA>/" +
"supplier-quotation?isFullScreen=true&WKNumProces=" + getValue("WKNumProces"));
notifier.notify(getValue("WKUser"), "cotacao_fornecedor", parametros, destinatarios, "text/html");
/*Etapa de Envio do pedido*/
} else if (sequenceId == 6) {
parametros.put("MESSAGE","Cotação Aprovada, aguardando o envio dos produtos. Ao enviar os produtos acesse " +
"https://wcm.fluig.com/portal/<CODE_EMPRESA>/<CODE_PAGINA_PUBLICA>/send-order?isFullScreen=true&WKNumProces="
+ getValue("WKNumProces"));
notifier.notify(getValue("WKUser"), "cotacao_fornecedor", parametros, destinatarios, "text/html");
}
} |
Onde:
parametros.put :
- O primeiro parâmetro é o nome da variável que definimos no template de e-mail
- O segundo parâmetro é texto que será atribuído a variável “MESSAGE”
notifier.notify:
- 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 fluig.
- 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 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 | ||||||
|---|---|---|---|---|---|---|
| ||||||
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>');
} |
Utilizamos o método “getValue()” para pegar informações do workflow e criar no html as variáveis:
- NUM_PROCESS: Número do processo
- CURRENT_USER: Usuário logado
- CURRENT_STATE: Etapa que se encontra o processo
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.
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
$(function() {
switch(CURRENT_STATE) {
case 0:
case 1:
solicitOrder();
break;
case 2:
toBudget();
break;
case 3:
approve();
break;
case 6:
sendOrder();
break;
case 16:
checkOrder();
break;
}
}); |
O “CURRENT_STATE” pode ser identificado nas propriedades da etapa do processo:
Figura 4: Propriedades do processo
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:
| Bloco de código | ||||||
|---|---|---|---|---|---|---|
| ||||||
$(function() { $(".price").maskMoney({prefix:'R$ ', allowNegative: false, thousands:'.', decimal:',', affixesStay: true}); |
| 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 |
Integração com aplicações externas
Para realizar chamadas nas APIs do fluig é necessário ter cadastrado um cliente Oauth. Para cadastrar acesse o passo a passo na documentação http://tdn.totvs.com/x/KAFlDw#FluigAPI-app.
Visão Geral
Import HTML Content
Conteúdo das Ferramentas
Tarefas