calendario
Trabalhando com datas no Fluig.

Este é um guia com as dúvidas recorrentes sobre o uso de datas durante o desenvolvimento na plataforma fluig, por isso esta página será dedicada à duvidas para indicar como trabalhar com datas no fluig.

Aprender javascript é um processo fundamental para sua evolução na plataforma.

Confira sempre as versões mais atualizadas da plataforma e sua documentação e recomendações da totvs.

Caso haja dúvidas entre em contato.

Consultar processos iniciados em um intervalo de datas no fluig

Em análises eu pude perceber que na consulta do dataset o sistema retorna o valor da data no formato timestamp, entretanto para consultar no dataset a entrada de dados é no formato descrito abaixo.

Obs. realize o teste e veja o comportamento no seu sistema.

var dt_inicio = "01/02/2021 00:00:00";
var dt_fim    = new Date().toLocaleString().split(" ")[0] + " 23:59:59" ;
c1 = DatasetFactory.createConstraint('startDateProcess', dt_inicio, dt_fim, ConstraintType.MUST);
var x =	DatasetFactory.getDataset('workflowProcess', null, [ c1 ] ,null);

NOTEBOOK
Inicie processos no Fluig a partir do Google Forms.

Inicie processos no fluig à partir do google forms.

Criar formulários públicos pode ser um problema no Fluig, já que a plataforma não permite que o formulário e o processo seja publicado sem a autenticação na plataforma, portanto para usá-los é necessário utilizar um login e senha.

Apesar de existirem soluções que podem ser desenvolvidas no Fluig, para exibir o formulário utilizando páginas públicas, tenho um certo receio de expor algum dataset ou ponto de entrada publicamente (veja aqui o porquê), por este motivo irei demonstrar neste artigo um passo a passo de como integrar o Google Forms ao Fluig.

Criar uma solução para entrada de dados como um sistema ou interface também é uma solução, mas dependendo do projeto uma integração utilizando o Google Forms pode ser mais que o suficiente, já que não há preocupações com infraestrutura.

Aliás, esta combinação é perfeita, já que o custo é zero e a solução atende aos requisitos de segurança, pois os dados do formulário estão protegidos pela infraestrutura do Google.

Outro ponto importante a ser destacado é a velocidade do desenvolvimento, dada a facilidade de criar formulários no Google.

Como será o processo.

Neste exemplo será tratado um processo de seleção, contendo três campos: Nome, Telefone e Pretensão salarial.

Após o preenchimento do formulário por parte do usuário, o próprio Google Forms irá buscar estas informações digitadas e irá conectar ao Fluig, utilizando webservices da plataforma, para iniciar o processo desejado.

As integrações Fluig

Há duas formas de integração com a plataforma fluig, neste exemplo irei demonstrar a integração utilizando REST. Assumindo que você já tenha criado o seu processo e o seu formulário, siga os passos abaixo.

Acesse este link e confira a documentação “Cadastrar Aplicativo no Fluig“. Você vai precisar configurar um usuário para autenticação OAuth pelo Fluig, como resultado deverá obter os seguintes dados: CUSTOMER_KEY, CUSTOMER_SECRET, ACCESS_TOKEN e TOKEN_SECRET.

Após realizar o procedimento acima você deverá terá os dados necessários para autenticação no fluig.

Em caso de dúvidas entre em contato.

O formulário do Google Forms.

Neste artigo você deverá ser capaz de construir um formulário do Google Forms. Para isso, clique aqui e crie um formulário semelhante ao criado abaixo.

Após criar o formulário e publicar, vá até as propriedades ( ícone de três pontos, exibido no canto superior direito da tela ) .

Após clicar no ícone vá até a opção Editor de Script.

Acionador / Gatilho – Google Forms – Integrando com o Fluig

Editor de Script do Google Forms.

A primeira coisa a ser feita é clicar em Bibliotecas e adicionar uma biblioteca para autenticação por OAuth1 , já que o Fluig não permite a autenticação por Auth2.

Em bibliotecas clique no botão para incluir.

Google Forms API – Incluir Biblioteca.

Na janela que é aberta insira o código abaixo:

1CXDCY5sqT9ph64fFwSzVtXnbjpSfWdRymafDrtIZ7Z_hwysTY7IIhi7s

Observação: O Google descontínuo o uso do OAuth1 em 2015, conforme pode ser conferido nesta documentação . Para utilizar o OAuth1 a google recomendou utilizar uma biblioteca opensource, que é biblioteca representada pelo script consultado na imagem acima e pode ser consultada neste repositório.

Na janela, vá na aba de codificação, conforme exibido na imagem abaixo, e renomeie o arquivo gerado para startProcess.gs.

Acionador / Gatilho – Google Forms – Integrando com o Fluig

Após criar o arquivo é necessário inserir o código Google Script.

Neste exemplo abaixo o código irá ler o último registro inserido e em seguida realiza a chamada do webservice do fluig responsável por iniciar a solicitação na plataforma.

/**
 * CONFIGURACOES DE INTEGRACAO FLUIG
 */
var FLUIG_BASE_URL = "http://minhaurl.com";
var PROCESS_NAME = 'selecionar_pessoa';


var CONSUMER_KEY = 'x';
var CONSUMER_SECRET = 'x';

var ACCESS_TOKEN = 'x';
var TOKEN_SECRET = 'x';




function startProcess() {

var form = FormApp.getActiveForm();
var formResponses = form.getResponses();
var formResponseslength = formResponses.length;

/**
 * Obter o último registro do formulário.
 */
var nome = formResponses[formResponseslength-1].getItemResponses()[0].getResponse();
var telefone = formResponses[formResponseslength-1].getItemResponses()[1].getResponse();
var salario = formResponses[formResponseslength-1].getItemResponses()[2].getResponse();


var service = getFluigService();
  var url = FLUIG_BASE_URL  + '/process-management/api/v2/processes/' + PROCESS_NAME + '/start';

/**
 * Conteúdo para inserir no formulário do processo.
 */
var data = {
  'targetAssignee': 'academy.aluno',
  'subProcessTargetState': "0",
  'comment': "",
  'formFields': {
     "nome" : nome,
     "telefone" : telefone,
     "salario": salario
  }

};



var options = {
  'method' : 'post',
  'contentType': 'application/json',
  'payload' : JSON.stringify(data)
};

  var response = service.fetch(url, options);
  var result = JSON.parse(response.getContentText());

  Logger.log(JSON.stringify(result, null, 2));



Logger.log(nome);Logger.log(telefone);Logger.log(salario)

MailApp.sendEmail("[email protected]","STATUS INTEGRACAO", "SATUS DA INTEGRACAO");

 
}



function getFluigService() {
  return OAuth1.createService('fluig')
      .setConsumerKey(CONSUMER_KEY)
      .setConsumerSecret(CONSUMER_SECRET)
      .setAccessToken(ACCESS_TOKEN, TOKEN_SECRET);
}

O resultado final deve se parecer com a imagem abaixo.

Acionadores ( Gatilhos ) do Google Forms.

Os acionadores do Google Forms nada mais são que gatilhos, que irá executar alguma ação em determinado momento.

Neste exemplo será demonstrado a execução do script logo após a inserção de uma nova resposta do formulário.

Google Forms – Acionadores

Na tela de acionadores clique em adicionar acionador – botão azul no canto inferior direito da tela.

Ao abrir a tela preencha o Acionador conforme imagem abaixo.

Acionador / Gatilho – Google Forms – Integrando com o Fluig

O resultado esperado é este.

Acionador / Gatilho – Google Forms – Integrando com o Fluig

Resultado

Após o preenchimento dos dados clique em salvar.

Google Forms

Abaixo o processo inicializado automaticamente pelo aplicativo do Google Forms.

Formulário – Fluig

Erros

O próprio Google Script disparou um erro assim que eu forcei uma conexão inexistente, entretanto será necessário realizar mais testes e controles.

Repositório

Acesse aqui o repositório que contém o processo e o formulário deste projeto.

Conclusão

Este é um modelo de integração entre o Google Forms e o Fluig, utilizando a autenticação OAuth1 do Fluig.

Uma sugestão de melhoria é construir alertas por e-mail para avisar de possíveis inconsistências.

Referências

https://stackoverflow.com/questions/50491535/how-to-call-web-service-on-google-app-script

https://developers.google.com/apps-script/reference/forms/form

https://github.com/googleworkspace/apps-script-oauth2

https://github.com/googleworkspace/apps-script-oauth1

https://github.com/googleworkspace/apps-script-oauth1/blob/master/samples/Yelp.gs

O guia completo sobre dataset do fluig.

Clique aqui e faça um treinamento, ou orçamento.

Deixe seus comentários no final da página.

*Artigo ainda incompleto. =)

Introdução

O dataset é como se fosse uma ‘camada’ de acesso a dados no fluig. Neste artigo vou explicar como assimilar o uso dos datasets e as consultas SQL.

Este recurso abstrai as conexões a serviços ou bases de dados – uma vez que os dados estão disponíveis – sendo necessário que o desenvolvedor apenas saiba realizar a chamada deste dataset.

Um exemplo disso é que você pode chamar os usuários do fluig sem conhecer sua implementação, até mesmo construir e publicar um formulário e a própria plataforma vai criar e gerenciar o dataset para você.

É possível acessar dados do próprio fluig, através de webservices da plataforma, ou datasets que a própria plataforma disponibiliza.

Observação: nem sempre é necessário criar um dataset para acessar webservices.

Como criar um dataset.

Um dataset pode se criado da forma simples, ou complexa. Ambos podem ser feitos diretamente pela plataforma do Fluig, através do menu Painel de controle > Desenvolvimento > Datasets.

Dataset Simples

O dataset simples é criado em uma tela que facilita a criação de datasets.

Após acessar a tela de dataset clique em novo dataset > simples.

Após a abertura da tela será necessário preencher os campos:

Código: é o código do dataset.
Descrição: o nome do dataset
Serviço: Selecione o serviço que deseja se conectar, que podem ser Soap, Rest e JDBC.
Operação: Cada serviço irá solicitar (ou não) uma operação específica. A operação nada mais é que parâmetros que o serviço possa solicitar.

Veja mais detalhes aqui sobre serviços.

Dataset Complexo

A TOTVS diz em sua documentação que a criação de dataset’s completos é feito em javascript, essa afirmação é contraditória. Apesar da sintaxe ser semelhante ao javascript é possível executar códigos java dentro de datasets, como o uso da das classes java String, Base64 do java e outras.

O desenvolvimento do dataset complexo no fluig pode ser feito de duas formas, a primeira dela é por codificação em uma IDE de desenvolvimento (como o eclipse) em seguida exportando para o servidor. A segunda forma é utilizar o editor de datasets dentro da própria plataforma do fluig.

Para criar um dataset avançado é preciso acessar a tela de dataset , clicar em novo dataset > avançado.

Abaixo um exemplo de código de dataset, com os devidos comentários.

function createDataset(fields, constraints, sortFields) {
    var ds = DatasetBuilder.newDataset();
    
    //Colunas
    ds.addColumn("Usuário");
    ds.addColumn("E-Mail");
      
    //Linhas
    ds.addRow(new Array("Willian", "[email protected]"));
 
     
    return ds;
}

Ao criar um novo dataset, por uma IDE ou pelo próprio fluig é gerado uma função createDataset. O código dentro desta função é o que será chamado durante o uso do dataset.

Esta função espera um retorno do tipo dataset, por isso é realizado uma chamada do método newDataset.

Este construtor de dataset (DatasetBuilder)

Consulta intervalos de valores em datasets no Fluig

A consulta de intervalos de valores no SQL pode ser também pesquisada como “Consultar BETWEEN em datasets no Fluig”.

No código abaixo o colleague representa o dataset que lista todos os usuários do Fluig e estamos passando como parâmetro a variável c1, que representa a constraint.

var c1 = DatasetFactory.createConstraint("colleagueName", "a", "d", ConstraintType.SHOULD);
usuarios_fluig = DatasetFactory.getDataset("colleague", null, [c1])

Na variável C1 criamos uma constraint colleagueName com intervalo entre os valores A e D, que são os valores de início e fim desta consulta no dataset. O fluig – internamente – vai executar uma consulta semelhante a esta abaixo:

SELECT * FROM tabela_usuario WHERE nome>='a' and nome<='d'

problemas comuns fluig
Problemas comuns em desenvolvimento Fluig.

Neste guia irei abordar o que denominei: problemas comuns em desenvolvimentos na plataforma fluig, que nada mais são que problemas que eu experimentei durante o desenvolvimento de alguns projetos na plataforma.

O uso desses componentes faz com que, ao ser renderizados em tela, as características do seu desenvolvimento sofram algumas alterações e você poderá passar por alguns problemas.

Vamos aos problemas, em caso de dúvida deixe nos comentários.

Se você deseja uma consultoria acesse este link.

1 – Como esconder campos do tipo ZOOM no Fluig?

Se em algum momento você precisar esconder campos ZOOM no fluig você poderá ter problemas.

Ao inserir no código <input type=’zoom’ /> o fluig irá interpretar aquele campo e aplicará algumas modificações, que irão formar a solução ZOOM, por este motivo você não conseguirá ocultar este campo diretamente.

Até este momento eu não consegui achar uma solução para o ZOOM, por este motivo a minha sugestão é criar um campo do tipo select – mas só funcionará para seleções de dados pré-definidos e com pouca quantidade.

Caso você tenha esta resposta, por favor deixe nos comentários.

2 – Como esconder campos no Fluig.

2.1 – Show / Hide

Para esconder campos do tipo SELECT no fluig, basta utilizar o evento de formulário displayFields, entretanto você poderá utilizar como alternativas também o jQuery, para tratar situações dinâmicas no próprio formulário.

$('#sel_campo').hide();
$('#sel_campo').show();

Se optar por utilizar jQuery / Javascript no formulário, você poderá ter algumas dificuldades, que listo abaixo.

2.2 – Formulários Fluig: Os comportamentos da visão e edição.

Ao movimentar o processo você poderá perceber que os comandos SHOW / HIDE não irão funcionar, pois existem duas diferenças no comportamento do fluig, o primeiro deles é o formulário de edição, enquanto que o segundo é o formulário que lista os dados.

Saber dessa diferenciação é importante, mas o que é mais importante é entender o comportamento do software ao armazenar os dados, por este motivo sugiro que seja estudado as principais tabelas de bancos de dados do fluig, disponíveis neste link, para acompanhar e entender o comportamento do software.

Durante a tela de exibição você não conseguirá acessar as propriedades dos campos do tipo INPUT, pois eles são alterados.

2.3.1 – Tela de Edição.

Exibir campos na tabela de edição é a forma mais simples, pois o comportamento do software é aquele que esperamos durante o desenvolvimento. O Formulário real é renderizados em tela e o acessamos de forma direta.

simples assim.
$('#meucampo').hide();

2.3.2 – Tela de Exibição.

Os problemas começam aqui, durante a exibição em tela o formulário é renderizados de outra forma, onde o sistema omite os campos do tipo INPUT e substituem por tags SPAN e/ou DIV.

Uma forma de verificar em qual tela está é utilizar os eventos de formulários para descobrir modo do formulário, se é Edição ou Exibição, e em seguida enviar esta informação para o formulário.

// logo será acrescentado algum exemplo.

Apesar da plataforma sugerir utilizar eventos de formulários como displayFields e enableFields esta solução pode não ser a suficiente para alguns casos.

Partindo do pressuposto que o desenvolvedor passe por uma situação que o formulário precise ser dinâmico – ou seja – enquanto o usuário manipula as informações o formulário em tela precisa ser reestruturado, irei abordar a manipulação dos elementos html utilizando javascript.

O exemplo abaixo é de um código que analisa os elementos HTML do formulário, acessando suas propriedades através do seu ID, desta forma é possível assumir a forma do elemento e manipular este elemento de acordo com sua forma.

arquivo.js

var meucampo = $('#meucampo');
var no = $(meucampo)[0].nodeName ;
	
if(no=="SELECT" && meucampo.val()=='VALOR_ESPERADO')   {
	
console.log('Ao verificar que o nó é do tipo SELECT, já é possível assumir que estamos na tela de edição. ');

}else if(regime[0].innerText=="VALOR_ESPERADO" && no=="SPAN") ){
   console.log("Foi verificado que a tag do HTML utilizada para renderizar a tela é do tipo SPAN, logo posso assumir que esta é a tela de exibição.') ; 
	  
	  }

3 – Como utilizar o readonly em INPUT SELECT no Fluig

Por alguma forma o campo do tipo SELECT no fluig, quando alimentado por dados de dataset, perde a manipulação dos elementos readonly.

Uma forma alternativa de contornar este problema é desabilitar os eventos de mouse do campo, aplicando a propriedade style=’pointer-events:none‘.

Infelizmente, aplicar este recurso diretamente ao SELECT não surtirá nenhum efeito, por isso a abordagem é inserir o seu campo SELECT dentro de uma DIV e em seguida manipular as propriedades desta DIV.

Obs: este recurso só irá permitir desabilitar o mouse, o teclado permanece inalterado.

	$('#div_sel_meucampo' + linha).prop('style', 'pointer-events:none');