APOSTILA BPM INTERMEDIATE - CONTEÚDO


BPM INTERMEDIATE

local_printshop

Capítulo 1 - PREPARANDO O AMBIENTE

Antes de iniciar o desenvolvimento de processos e formulários no fluig é fundamental preparar o ambiente em que você logo criará suas soluções em BPM.

# fluig Studio

Todo o desenvolvimento abordado será realizado dentro de uma IDE, ou seja, um ambiente de desenvolvimento integrado.

As seguintes IDEs são homologadas para o desenvolvimento no fluig:

imageVer Imagem

Realize a instalação de uma das IDEs homologadas, conforme vídeo.

# Plugin fluig Designer

Uma vez instalada a sua IDE, é hora de instalar o plugin do fluig que permite a criação e desenvolvimento de recursos sobre a IDE. Para instalá-lo siga os passo:

  1. No menu superior, acionar Ajuda.
  2. Acionar a opção Instalar Novo Software.
  3. Adicionar um novo repositório informando um nome e o endereço update.fluig.com.
  4. Selecione a opção fluig Designer.
  5. Prossiga com a instalação e reinicie a IDE.

Se preferir, pode conferir o passo a passo em vídeo.

// Criar Servidor

Os desenvolvimentos no fluig são feitos da seguinte forma: você desenvolve local e faz deploy no servidor. Então o próximo passo é cadastrar um servidor na sua IDE para poder fazer deploy no servidor, da seguinte forma:

  1. Na aba fluig Servers, clique com o botão direito e acione Fluig > Fluig Servers.
  2. Informe os dados de acesso ao seu servidor e pronto.

Saiba mais!

# Exercitando

Então chegamos ao termino do primeiro capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Qual o endereço do repositório para download do plugin fluig Designer, no fluig Studio?
    1. (    ) http://suporte.fluig.com
    2. (    ) http://update.fluig.com
    3. (    ) http://download.fluig.com
    4. (    ) http://designer.fluig.com
  2. Quais das seguintes IDEs são homologadas para o desenvolvimento de componentes para o fluig?
    1. (    ) TOTVS Developer Studio
    2. (    ) Visual Studio Code
    3. (    ) Eclipse Luna
    4. (    ) Eclipse Neon

Capítulo 2 - DESENVOLVIMENTO DE FORMULÁRIOS

# Criar Formulário

O desenvolvimento de formulários é feito através de linguagens web.

Para criar um formulário no fluig Studio, clique com o botão direito sobre o seu projeto fluig e acione Novo > Formulário.

Um diretório com o nome do seu formulário será criado em seu projeto fluig, sob a pasta forms, nela você terá o arquivo HTML correspondente à definição do seu formulário.

imageVer Imagem

Perceba que o formulário criado já possui referências:

  • CSS do Guia de Estilos do fluig.
  • Biblioteca do jQuery.
  • Biblioteca do jQuery UI.
  • Biblioteca do Mustache.
  • Biblioteca do Guia de Estilos do fluig.

Ou seja, você não precisa importar as bibliotecas do jQuery, por exemplo, pois o fluig já faz isso na criação do formulário.

Repare que uma div com a classe fluig-style-guide foi criada. Todos os elementos que estiverem dentro desta tag obedecerão o fluig Style Guide, de acordo com as classes que forem aplicadas.

Dentro desta div há uma tag form. São os elementos presentes dentro desta tag que definirão a estrutura do seu formulário.

Para mais detalhes, veja o capítulo fluig Style Guide.

# Criar Campos de Formulário

Um formulário é composto por campos. Imagine, por exemplo, um formulário de solicitação de férias. Alguns campos que podem compor este formulário são:

  • Nome do Solicitante
  • E-mail do Solicitante
  • Quantidade de Dias
  • Data de Início das Férias
  • Nome do Gestor
  • E-mail do Gestor

Para criar um campo, basta adicionar um campo input no seu formulário, como a seguir:

imageVer Imagem

Para que o campo fique intuitivo, adicione sempre a label referente ao campo.

O atributo name da tag input é o responsável por definir que aquele campo fará parte do formulário. O mesmo vale para outros elementos e tipos do campo input, como select, radio, list, checkbox e textarea. Como veremos adiante.

São os campos que definirão a estrutura do formulário. Elementos visuais podem ser incluídos para melhor usabilidade, mas não afetarão o comportamento da plataforma.

# Exportar Formulário

Desenvolvido o formulário, você precisa exportá-lo para o servidor para começar a usá-lo.

A exportação é bem simples:

  1. Clique com o botão direito sobre o diretório do seu formulário em seu projeto fluig.
  2. Acione a opção Exportar.
  3. Escolha a opção Exportar para servidor Fluig.
  4. Informe os dados do seu formulário, conforme imagem abaixo:
imageVer Imagem

Informe o Servidor para o qual o formulário será exportado e marque a opção Novo formulário, quando estiver exportando o formulário pela primeira vez. Se você alterar o formulário, nas próximas exportações o formulário já será reconhecido no momento da exportação.

Você pode informar o Nome Dataset para gerar um Dataset do tipo CardIndex. Mais sobre Datasets nos capítulos seguintes.

Como estamos falando de um documento que terá vários registros e será manipulado por várias pessoas, é essencial que este fique armazenado no ECM. Assim que a exportação acontecer, será gerado um diretório no ECM para armazenar os registros de formulário. A Pasta Destino será onde este diretório será gerado.

Assim que informar os dados, clique em Finish, seu formulário estará disponível no servidor fluig, na pasta destino informada.

Para cada alteração, você precisa exportar o formulário para que as mudanças sejam aplicadas no formulário em seu fluig.

Dica: Se você não alterar a estrutura do formulário, ou seja, adicionar campos, remover campo, alterar o tipo de campo, você pode usar a opção Manter a versão do seu formulário. Isso fará com que todos os formulários ativos adotem as mudanças aplicadas.

Um formulário com uma estrutura de subpastas e arquivos pode ser exportado para o fluig. Isto é muito útil quer complementar o seu formulário com scripts personalizados ou imagens, por exemplo. Os arquivos nas subpastas serão exportados para a pasta raiz do formulário.

# Exercitando

Então chegamos ao termino do segundo capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Quais das seguintes bibliotecas são referenciadas automaticamente em um formulário quando este é criado pelo fluig Studio?
    1. (    ) jQuery
    2. (    ) jQuery UI
    3. (    ) Mustache
    4. (    ) vcXMLRPC
  2. Qual o atributo dos campos é usado para definí-lo como campo do formulário?
    1. (    ) Atributo type
    2. (    ) Atributo id
    3. (    ) Atributo name
    4. (    ) Atributo form

Capítulo 3 - FLUIG STYLE GUIDE

Imagine você precisar desenvolver um formulário e precisar escrever todas as classes de estilo do zero. Um trabalho enorme. E se você precisar usar alguns elementos visuais para incrementar no formulário, vai ter que construir esses elementos na mão.

Para facilitar a vida do desenvolvedor e não fazer você ter esse trabalho todo, temos o fluig Style Guide, o nosso guia de estilos oficial.

Na tela de configuração, é importante ressaltar que todas as configurações permitidas no processo, estão localizadas na opção propriedades da nossa paleta elementos.

Notem que nossa área de propriedades separa as configurações do processo por guias, onde temos a seguinte estrutura:

Você pode acessá-lo em style.fluig.com

imageVer Imagem

O fluig Style Guide é o nosso framework para desenvolvimento sobre o fluig com componentes de interface e front-end em HTML, CSS e JavaScript. Ele é baseado em Bootstrap, um framework de desenvolvido na versão 3.

No fluig, usamos seus recursos para que os formulários, widgets e outros componentes desenvolvidos sobre a plataforma possuam um padrão visual.

No guia de estilos, para todos os recursos você terá uma breve descrição, o modo como eles ficam em sua execução e códigos-fonte de exemplos de implementação. Veja, por exemplo, o recurso de botão:

imageVer Imagem

Atualmente, o fluig Style Guide está disponível apenas em inglês.

# Grid System

O Guia de Estilo do fluig segue um sistema de grade fluido e responsivo que dimensiona os componentes na página em até 12 colunas de acordo com o tamanho do dispositivo em que está sendo visualizada.

Para isso, você faz uso das classes predefinidas para facilitar as definições de layout.

Veja uma imagem conceitual:

imageVer Imagem

O código deste exemplo:

imageVer Imagem

Use a classe row para criar uma linha, ou seja, um grupo horizontal de colunas. O conteúdo do seu formulário deve estar dentro das colunas.

As colunas são criadas especificando o número dentro das doze colunas disponíveis que você deseja abranger. No exemplo, na segunda linha temos uma div que ocupa oito colunas com a classe .col-md-4.

No exemplo, usamos apenas classes col-md-x, que é específica para dispositivos de tamanho médio. Você pode usar as seguintes opções de classes nas colunas:

imageVer Imagem

Dica: Em uma tela grande, o conteúdo pode parecer melhor organizado em três colunas, mas em uma tela pequena seria melhor se os elementos de conteúdo fossem empilhados, ocupando toda a largura da tela.

Você também pode combinar as classes definindo o visual para cada tamanho de dispositivo.

Lembre-se de que as colunas da grade devem adicionar até doze para uma linha. Mais do que isso, as colunas serão empilhadas, independentemente da janela de visualização.

Se as classes não forem definidas, por padrão os elementos abrigarão 12 colunas.

# Aplicando no Formulário

Para que seus campos de formulário sigam o Guia de Estilos, use a classe form-control neles. Também é importante agrupar o campo e sua label em um elemento com a classe form-group, como uma div. Veja um exemplo:

imageVer Imagem

Repare que os campos de texto, como o nome do solicitante, por exemplo, possuem o atributo type com o valor text. Já os campos de tipo e-mail possuem o atributo type com o valor mail. A seguir exemplos de campos de outros tipos.

# Exercitando

Então chegamos ao termino do terceiro capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Sobre o Grid System é correto afirmar:
    1. (    ) Dimensiona os componentes da página de forma responsiva.
    2. (    ) É obrigatório usar o Grid System para criar formulários.
    3. (    ) Dimensiona os componentes da página em 12 colunas.
    4. (    ) Possui classes para definir o tamanho dos elementos de acordo com o tamanho do dispositivo em que estão sendo exibidos.

Capítulo 4 - INCREMENTANDO O FORMULÁRIO

Em muitas situações precisamos informar valores numéricos em um formulário, como a quantidade de dias de férias, um campo number. Veja abaixo o exemplo para criação deste campo:

imageVer Imagem

Outro tipo de informação comum são campos de múltipla escolha, um campo do tipo checkbox. Veja um exemplo para quando o usuário informar seus assuntos de interesse:

imageVer Imagem

É possível que você precise de uma informação de única escolha, um campo do tipo radio. Você pode seguir o exemplo abaixo, ainda sobre assuntos de interesse:

imageVer Imagem

Os campos radio que correspondem a mesma escolha devem ter o atributo name igual.

Outro tipo de informação comum é a de escolha a partir de uma lista, um campo select. Abaixo um exemplo de escolha de filial:

imageVer Imagem

Saiba mais!

# Máscaras de Campos

Imagine o cenário em que o usuário precisa informar seu celular. Para impedir que o usuário informe dados diferentes de um número de celular válido, você pode usar uma máscara para o seu campo.

Basta adicionar o atributo mask com o modelo desejado, como o seguinte exemplo:

imageVer Imagem

Para definir as restrições dos caracteres você pode seguir esta tabela:

imageVer Imagem

# Técnica Pai Filho

Imagine o seguinte cenário: uma solicitação de compras em que o solicitante possa informar vários produtos. Para cada produto ele vai precisar informar qual é o produto, quantidade e fornecedor. Ou seja, o solicitante precisará informar múltiplos registros de um mesmo tipo de informação que é dinâmica, em uma solicitação podem ser requisitados cinco produtos, em outra apenas um.

Para solucionar estes cenários, você pode fazer uso da técnica pai x filho. Ela consiste na definição do modelo de registro através de uma tabela.

Para que sua tabela seja reconhecida como uma estrutura pai x filho você precisa informar o atributo tablename na tag table, com o valor sendo o nome da sua tabela.

A estrutura dos campos será definida dentro da tag tbody onde cada campo ficará dentro de uma tag td. A tag thead é usada para os títulos dos campos.

Veja o exemplo:

imageVer Imagem

A partir disso o fluig cria uma estrutura dinâmica onde o usuário interage na criação e remoção dos registros.

# Exercitando

Então chegamos ao termino do terceiro capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Qual o atributo responsável por definir que uma tabela terá a estrutura Pai x Filho?
    1. (    ) Atributo name
    2. (    ) Atributo tablename
    3. (    ) Atributo tableid
    4. (    ) Atributo table
  2. Qual das máscaras abaixo pode ser usada em um campo válido para número de telefone ou celular, com DDD?
    1. (    ) mask="(99) 99999-9999"
    2. (    ) mask="(00) 90000-0000
    3. (    ) mask="(99) 00000-0000
    4. (    ) mask="(00) 00000-0000

Capítulo 5 - EVENTOS DE FORMULÁRIO

Os eventos de formulários são um conjunto de scripts carregados pela API de Formulários, os quais são desenvolvidos utilizando Javascript e são chamados durante a execução de ação em formulários ou em momentos específicos de interação em formulários.

# Form Controller

Antes de conhecer os Eventos de Formulário do fluig é importante conhecer o formController, o objeto que realiza a comunicação entre o formulário e o desenvolvimento dos eventos. Esse objeto está disponível em cada um dos eventos de formulários através da variável form.

O formController permite manipular as informações e valores de um formulário, por exemplo: se o usuário está acessando o registro de formulário em modo de visualização ou modo de edição.

Veja a seguir alguns dos métodos disponíveis para a variável form:

imageVer Imagem

Saiba mais!

# Eventos de Formulário

Como dito, os eventos de formulários são um conjunto de scripts que permitem a manipulação dos formulários em momentos específicos usando a linguagem JavaScript.

Os Eventos de Formulário são grandes facilitadores para o desenvolvimento. Um cenário bem comum é o de validação de preenchimento de campos de formulário. Você não precisa criar um script para isso, você pode usar o evento validateForm, que é executado no servidor e garante maior segurança e performance.

Este evento é disparado assim que o formulário é salvo ou antes da solicitação ser salva, caso o formulário esteja aberto em um processo.

Veja abaixo o exemplo de uma implementação do validateForm:

imageVer Imagem

O validateForm recebe como argumento a variável form, o formController.

Logo em seguida usamos o método getValue para obter o valor do campo CNPJ e no caso do valor ser nulo mostrar uma mensagem informando o usuário, com o throw.

// Criando Evento de Formulário

Para criar um Evento de Formulário, siga os passos abaixo:

  1. Clique com o botão direito sobre o seu projeto fluig.
  2. Acione Novo > Script fluig
  3. Escolha o tipo Script Evento da Definição de Formulário
  4. Escolha o Evento e o formulário ao qual será vinculado.

Confira abaixo alguns eventos de formulário, as suas respectivas funcionalidades e o momento em que são executados:

imageVer Imagem

Veja todos os eventos de formulário disponíveis aqui.

// Log

No fluig é possível utilizar log de execução nos eventos de formulários e processos. Isto é muito útil para desenvolvedores e administradores quando precisam acompanhar a execução dos eventos e obter informações disso.

Você pode obter feedback da execução de cada evento através da variável global log.

Por exemplo, quando um novo registro de formulário for criado, você pode mostrar no log do servidor uma mensagem personalizada, da seguinte forma:

imageVer Imagem

Existem cinco tipos de log, sendo eles:

  • info: apresentação de mensagens
  • error: apresentação de erros
  • warn: informar possível problema de execução
  • debug: depurar a execução
  • dir: Imprime no log como info, todos atributos de um objeto

Saiba mais!

# Exercitando

Então chegamos ao termino do quinto capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Quais dos códigos abaixo obtém o valor do campo codFornecedor de um formulário dentro de um evento de formulário?
    1. (    ) getValue("Fornecedor")
    2. (    ) formController.getValue("codFornecedor")
    3. (    ) form.getValue("codFornecedor")
    4. (    ) form.getValue(codFornecedor)
  2. Quais dos códigos abaixo podem ocultar o campo codFornecedor de um formulário dentro de um evento de formulário?
    1. (    ) setVisibleById("codFornecedor", true)
    2. (    ) form.setVisibleById("codFornecedor", true)
    3. (    ) form.setVisibleById("codFornecedor", false)
    4. (    ) form.setVisible("codFornecedor")

Capítulo 6 - DATASETS

O fluig é uma plataforma que permite disponibilizar informações provenientes de várias fontes de dados.

É comum a necessidade de apresentar ou manipular informações da própria plataforma como usuários, papéis, comunidades, assim como apresentar ou manipular informações geradas por formulários, ou ainda dados de entidades de um ERP ou ainda valores fixos, como estados ou unidades de medida.

O Dataset é um componente do fluig que permite a padronização do acesso às informações, independente da origem dos dados. Ou seja, é possível acessar informações de aplicativos externos, bancos de dados ou dos próprios recursos do fluig usando um mesmo componente.

A imagem abaixo apresenta um modelo conceitual sobre os Datasets:

imageVer Imagem

Um Dataset disponibiliza operações que permitem visualizar o seu conteúdo. Por exemplo, no Dataset de colaboradores do fluig, você pode consultar os usuários ativos da plataforma, suas respectivas matrículas, se são usuários administradores ou não e muito mais.

Uma vez que o Dataset esteja no servidor fluig, ele poderá ser invocado de qualquer parte do sistema, de forma consistente.

# Tipos de Datasets

Atualmente existem três tipos de Datasets gerenciados pela plataforma:

  1. Built-in Datasets: São os Datasets internos do fluig. Através dele você pode consultar as entidades do próprio fluig, como usuários, grupos, ou tarefas, por exemplo.
  2. CardIndex Datasets: São os Datasets gerados pelos formulários. Com ele você pode consultar dados de cada registro de formulário, como os valores dos campos.
  3. Customized Dataset: Datasets customizados podem ser utilizados em uma grande gama de situações, como para definir uma lista de valores fixos, como unidades de medida, por exemplo, ou para consulta de dados de um serviço externo, como consultar clientes em um CRM, por exemplo.

A estrutura dos Built-In Datasets não pode ser alterada.

Para gerar o CardIndex Dataset é necessário preencher o campo Nome Dataset na exportação do formulário para gerar o Dataset.

Você pode conferir a lista completa de Datasets Internos aqui.

O uso do Dataset não leva em conta o seu tipo. Se ele foi pré-construído, baseado em definição de formulário ou customizado, a consulta ao Dataset se dará da mesma forma.

Saiba mais!

# Visualização de Datasets

Pelo fluig Studio, através da visão Visualização de Dataset, você pode consultar os Datasets disponíveis no seu servidor fluig e o seu conteúdo. Este é um recurso muito útil para agilizar na consulta de informações e fazer testes de Datasets customizados.

Para consultar um Dataset:

  1. Acione a opção Consultar dataset na visão Visualização de Dataset.
  2. Informe o servidor e o Dataset que deseja consultar e clique em Finish.
imageVer Imagem imageVer Imagem

Você pode definir a quantidade de registros que deseja retornar na busca.

O retorno da consulta mostrará os registros e colunas que compõem este Dataset.

imageVer Imagem

Para que um usuário que não é administrador da empresa possa criar, importar, editar e remover datasets é necessário que ele possua a permissão "Configurar Datasets". Esta permissão pode ser concedida em "Permissões" no Painel de Controle do fluig.

// Filtros

Você pode usar filtros para limitar a consulta ao Dataset e buscar apenas as informações que são relevantes para você em determinado momento.

Você pode definir as colunas que serão exibidas e filtrar os registros. Para isso, acione a opção Configurar filtro.

imageVer Imagem

Você pode filtrar as colunas que serão exibidas no Dataset. Basta selecionar as colunas e acionar o botão >>.

imageVer Imagem

Você pode fazer filtros específicos sobre os registros do Dataset de acordo com um valor buscado em uma coluna. Da seguinte forma:

  1. Informe a coluna que deseja filtrar.
  2. Informe as condições do filtro.
  3. Adicione o filtro.
imageVer Imagem

Você pode usar as condições de valor inicial e valor final para filtrar entre datas, por exemplo. Se estiver buscando por algum valor exato, informe o mesmo valor nos dois campos, conforme imagem.

Os tipos de filtro são:

  • MUST: Retorna os registros que atendem a condição estabelecida.
  • MUST_NOT: Retorna os registros que não atendem a condição estabelecida.
  • SHOULD: Retorna os registros atendem uma das condições estabelecidas.

O filtro buscará os registros cujos valores sejam iguais aos das condições do filtro. Para retornar os registros que contém os valores definidos, mas não sendo o valor exato, você pode usar a opção LIKE.

O filtro “sqlLimit-100-100-MUST” apresentado refere-se a quantidade de registros definida para consulta anteriormente.

Você também pode configurar os filtros na opção Consultar Dataset. Em vez de acionar a opção Finish, acione Next e você terá as mesmas opções de filtros que abordamos acima.

As opções de filtro são válidas apenas para Built-In Datasets.

# Criando Datasets

Um Dataset é construído a partir de um código JavaScript. Uma vez que o próprio Dataset é criado a partir de um código JavaScript, é possível fazer chamadas a outros Datasets, chamadas à serviços externos ou apenas criar o Dataset a partir de valores codificados.

Para criar um Dataset, em seu fluig Studio:

  1. Clique com o botão direito sobre o seu projeto.
  2. Acione Novo > Dataset Customizado fluig.
  3. Informe Nome e Descrição do Dataset.

Será criado um arquivo .js correspondente ao seu Dataset com as seguintes funções padrão:

    createDataset: Responsável pela criação do Dataset e população dos registros.
    defineStructure: Define a estrutura do Dataset para as sincronizações.
    onSync: Responsável pela população incremental dos registros nas sincronizações.
    onMobileSync: Responsável pela população dos registros nas sincronizações durante a atualização de um dataset offline já existente.

Neste momento vamos nos ater ao createDataset. Os métodos usados nas sincronizações serão abordados no treinamento BPM Advanced.

Para criar um novo Dataset, use o método DatasetBuilder.newDataset(). A partir do Dataset criado você poderá definir as colunas que deseja no seu Dataset, usando o método addColumn do objeto criado, para então adicionar os registros, usando o método addRow.

Veja o exemplo com o Estados do Brasil:

imageVer Imagem

É muito importante retornar o objeto do Dataset no final de sua execução.

// Exportar Dataset

Uma vez implementado, basta exportar o Dataset para o servidor para começar a usá-lo, da seguinte forma:

    Clique com o botão direito sobre o arquivo do seu Dataset.
    Acione Exportar.
    Escolar Exportar para o servidor Fluig.
    Informe o servidor para o qual deseja exportar.
    Marque a opção Novo Dataset.
    Informe Nome e Descrição.
imageVer Imagem

O Dataset já estará disponível para uso.

# Datasets em Pontos de Customização

Os Datasets do fluig podem ser acessados de vários pontos da plataforma: em eventos de formulário, eventos de processo, até mesmo em outros Datasets. Isto é feito através de chamadas JavaScript que são executadas no lado do servidor.

imageVer Imagem

No exemplo acima, o código JavaScript acessa o Dataset group, um Dataset interno da plataforma, e retorna Dataset.

O objeto DatasetFactory é a porta de entrada para qualquer Dataset. Além de permitir o carregamento de um Dataset, ele também permite navegar entre todos os Datasets disponíveis na plataforma.

O acesso a um Dataset é feito através do método getDataset do objeto DatasetFactory, onde seus parâmetros são:

  • Nome do Dataset: Nome do Dataset a ser buscado.
  • Colunas: Array com as colunas do Dataset que serão exibidas.
  • Constraints: Array com os condições de busca do Dataset, ou seja, os filtros.
  • Ordem: Array com os campos para ordenação dos registros do Dataset.

Apenas o nome do Dataset é um parâmetro obrigatório.

Você pode informar null em colunas para retornar todos as colunas do Dataset, assim como você pode informar null em constraints para retornar todos os registros do Dataset, sem filtrar, e null em ordem para retornar com a ordenação padrão, conforme exemplo acima.

# Constraints

As constraints são as condições de busca nos Datasets, ou seja, são os filtros definidos para limitar os resultados obtidos na consulta.

Para criar uma constraint você vai usar o método createConstraint do objeto DatasetFactory. Os parâmetros deste método são equivalentes aos usados na configuração de filtro na visualização de um Dataset, como vimos antes:

  • Coluna: Nome da coluna que será filtrada.
  • Valor Inicial: Valor inicial da condição.
  • Valor Final: Valor final da condição
  • Tipo: Tipo da condição (MUST, MUST_NOT, SHOULD)

Veja o exemplo de implementação de criação de constraints abaixo:

imageVer Imagem

Foi criado uma constraint para filtrar os registros cuja versão esteja ativa. Em seguida esta constraint foi informada como um elemento de uma Array que em seguida foi usada como parâmetro na chamada ao método getDataset.

// Evoluindo nas Constraints

Após criar a constraint, você pode informar que ela será usada na consulta em formato de LIKE, retornando qualquer registro com uma sequência de letras no lugar do símbolo %, através do método setLikeSearch(true).

No exemplo abaixo, a constraint busca todos os registros que não possuam a palavra “teste” na descrição do documento.

imageVer Imagem

Para ordenar os registros retornados você pode criar uma Array informando a coluna de ordenação.

Por exemplo, você pode buscar os documentos ordenando pela matrícula do publicador:

imageVer Imagem

# Dataset via JS

Você pode acessar os Datasets via JavaScript no HTML do formulário. Para isto você precisa incluir a biblioteca vcXMLRPC.js no seu formulário, conforme abaixo.

imageVer Imagem

Este modelo de acesso transporta o Dataset para o cliente, ou seja, o navegador do usuário. Portanto é muito importante se atentar a quantidade de informações que será trafegada, caso contrário pode ocorrer problemas de consumo excessivo de banda ou performance.

A invocação do Dataset é feita do mesmo que nos pontos de customização, ou seja, através do DatasetFactory:

imageVer Imagem

A criação de Constraints em Datasets via JavaScript é igual aos exemplos mostrados anteriormente.

Com o Dataset carregado em seu JavaScript você pode manipular os seus registros e suas colunas através dos atributos values e columns, respectivamente, conforme exemplo:

imageVer Imagem

No exemplo acima, consultamos o Dataset de colaboradores e criamos uma tabela no HTML correspondente ao Dataset, com as colunas e registros retornados na consulta.

// Gerar Código

Outro facilitador de desenvolvimento é o gerador de código de consulta ao Dataset.

Este recurso funciona da seguinte forma: Após consultar um Dataset pela visão Visualização de dataset, ao acionar a opção Gerar código na seta ao lado de Configurar filtro.

imageVer Imagem

# Dataset em Campo Select

É comum o uso de Datasets para listar dados em um campo select, como por exemplo, listar centros de custo, filiais, responsáveis, entre outros. O fluig possui um facilitador para estes cenários. Para isso, basta adicionar três propriedades à tag do campo.

  • dataset: Dataset a ser consultado.
  • datasetkey: Coluna do Dataset usada como valor do campo.
  • datasetvalue: Coluna do Dataset usada para visualização no campo

Para efeito comparativo, o datasetvalue corresponde ao texto informado em uma option e o datasetkey corresponde ao valor do atributo value.

A busca ao Dataset retornará todos os registros, sem opção de filtro.

imageVer Imagem

# Campo Zoom

Outra forma de listar dados a partir de um Dataset em um formulário é através do campo Zoom.

Em comparação, este é um campo com uma possibilidade a mais em relação ao campo select, isso porque com o Zoom o usuário pode visualizar mais de uma coluna do Dataset e também permite a seleção de mais de uma opção.

Quando implementado o Zoom tem um resultado como o seguinte:

imageVer Imagem

Veja o código correspondente à figura acima:

imageVer Imagem

Para que o seu campo seja reconhecido como Zoom informe o atributo type como zoom.

O parâmetro data-zoom define como será o campo zoom a partir de uma estrutura JSON, onde:

  • datasetId: Código do Dataset para consulta.
  • displayKey: Coluna do Dataset para filtro e exibição nos campos selecionados
  • maximumSelectionLength: Limite de registro selecionáveis.
  • fields: Estrutura do filtro.

A estrutura fields define os campos que serão exibidos para seleção, ele recebe os seguintes atributos:

  • field: Coluna do Dataset.
  • label: Nome para exibição da coluna.
  • standard: Define que a coluna será usada como ordenação padrão e valor do registro selecionado.

Customized Datasets não permitem o uso de filtros no campo zoom. Neste cenário recomenda-se o uso de constraints na implementação do Dataset.

Saiba mais!

# Exercitando

Então chegamos ao termino do sexto capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Quais os tipos de condições de Constraints?
    1. (    ) MUST
    2. (    ) SHOULD
    3. (    ) MUST_NOT
    4. (    ) SHOULD_NOT
  2. Quais os métodos usados para definição das colunas e dos registros de um Dataset, respectivamente?
    1. (    ) datasetAddColumn e datasetAddRow
    2. (    ) createColumn e createLine
    3. (    ) column e row
    4. (    ) addColumn e addRow

Capítulo 7 - INTERNACIONALIZAÇÃO

Com este recurso você pode usar o mesmo formulário em todos os idiomas suportados pela plataforma.

Deste modo, uma vez desenvolvido o formulário seguindo as práticas de internacionalização, caso um usuário esteja usando o fluig no idioma espanhol, por exemplo, todo o texto presente no formulário será traduzido para espanhol. O principal uso deste recurso é traduzir as labels dos campos.

# Tradução de Formulários

Para traduzir um texto presente no formulário é preciso usar a função standardi18n.translate(“literal_da_traducao”) nos pontos do arquivo HTML que devem ser traduzidos.

O acrônimo i18n origina-se do inglês internacionalization, onde 18 é o número de letras entre o “i” e o “n”.

As literais e seus respectivos valores são informados em arquivos de propriedades, para gerá-los clique com o botão direito sobre o formulário e acione a opção Externalizar Strings. Será criado um para cada idioma suportado:

  • Espanhol: nome_do_formulario_es.properties;
  • Inglês: nome_do_formulario_en_US.properties;
  • Português: nome_do_formulario_pt_BR.properties;

Isto feito, basta informar os valores correspondentes às literais para o idioma de cada arquivo, conforme abaixo:

imageVer Imagem

Os arquivos de literais são exportados para o fluig como anexos do formulário.

# Tradução de Eventos de Formulários

Da mesma forma que é possível traduzir o texto exibido no formulário é possível traduzir as mensagens retornadas nos eventos de formulário.

Basta usar a função i18n.translate() dentro dos eventos passando como argumento uma propriedade que esteja pré-definida nos arquivos de literais.

Saiba mais!

# Exercitando

Então chegamos ao termino do sétimo capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Quais os idiomas suportados para internacionalização no fluig?
    1. (    ) Português
    2. (    ) Espanhol
    3. (    ) Italiano
    4. (    ) Inglês
  2. Quais dos códigos abaixo deve ser interpretado para tradução?
    1. (    ) i18n.translate("texto")
    2. (    ) inter.national("text")
    3. (    ) i18n.translate(texto)
    4. (    ) i18n.(texto)

Capítulo 8 - DESENVOLVIMENTO DE PROCESSOS

# Criar Processos

Para criar um novo processo pelo fluig Studio, siga os passos:

  1. Clicar com o botão direito sobre seu projeto fluig.
  2. Acionar Novo > Diagrama Fluig
  3. Informe o Nome do seu processo e o Servidor ao qual ele será relacionado.

Um arquivo com o nome que você informou com a extensão .process será gerado sob a pasta workflow do seu projeto fluig.

imageVer Imagem

Será aberto o editor de processos com a paleta de componentes ao lado.

O funcionamento deste editor é semelhante ao do editor web. Basta selecionar o elemento que deseja e arrastá-lo para adicioná-lo ao seu processo.

Todos os elementos disponíveis no editor web também estão disponíveis nesta paleta.

A configuração do processo, assim como a configuração dos elementos, também é semelhante ao do editor web. As opções de configuração no fluig Studio são as mesmas do editor web.

Para mostrar as opções de configuração de um elemento, basta selecioná-lo e acionar a visão Propriedades, conforme imagem abaixo:

imageVer Imagem

Quando nenhum elemento está selecionado a visão Propriedades mostra as configurações do processo.

# Exportar Processos

Desenvolvido o processo, você precisa exportá-lo para o servidor para começar a usá-lo.

A exportação é bem simples:

  1. Clique com o botão direito sobre o diretório do seu processo em seu projeto fluig.
  2. Acione a opção Exportar.
  3. Escolha a opção Exportar para servidor Fluig.
  4. Informe os dados do seu formulário, conforme imagem abaixo:
imageVer Imagem

Informe o Servidor para o qual o processo será exportado e marque a opção Novo processo, quando estiver exportando o formulário pela primeira vez. Se você alterar o processo, nas próximas exportações ele já será reconhecido no momento da exportação.

Com a opção Liberar Versão marcada, esta versão de processo já fica disponível para seus usuários.

Você pode exportar o formulário do seu processo junto se marcar a opção Exportar formulário. Porém formulário e processo foram desenvolvidos separados. Para vinculá-los veja o próximo tópico.

# Vinculando Formulário e Processo

Para vincular um formulário a um processo pelo fluig Studio siga os passos:

  1. Na visão Propriedades do seu processo acione a aba Formulário.
  2. Escolha o formulário a partir do Servidor selecionado.
imageVer Imagem

# Exercitando

Então chegamos ao termino do oitavo capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Qual a extensão dos arquivos de diagramas workflow gerados pelo fluig Studio?
    1. (    ) .xml
    2. (    ) .process
    3. (    ) .html
    4. (    ) .wf

Capítulo 9 - MECANISMOS DE ATRIBUIÇÃO CUSTOMIZADOS

Em algumas situações é preciso usar lógicas mais complexas e específicas sobre quem será o responsável pela execução da atividade na solicitação de processos workflow, para isto, existe o Mecanismo de Atribuição Personalizado.

Para criar um novo mecanismo de atribuição, siga os passos:

  1. Clicar com o botão direito sobre seu projeto fluig.
  2. Acessar o menu Arquivo > Novo > Outros…
  3. Selecionar a opção Mecanismo Customizado fluig.
  4. Informar Código e Descrição.

Com isto, será criada uma função simples para ser implementada:

imageVer Imagem

A função deve retornar uma listagem do tipo ArrayList com as matrículas dos usuários. A matrícula corresponde ao valor existente no campo de mesmo nome no cadastro de usuários e à coluna colleaguePK.colleagueId do Dataset colleague.

Saiba mais!

# Exercitando

Então chegamos ao termino do nono capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. O mecanismo de atribuição customizado recebe uma lista para definir os responsáveis pela atividade. Qual dado dos usuários deve ser informado nesta lista?
    1. (    ) Nome
    2. (    ) Código da Empresa
    3. (    ) Matrícula
    4. (    ) Login

Capítulo 10 - EVENTOS DE PROCESSOS

Os eventos de processos são um conjunto de scripts chamados ao longo da execução do processo em momentos predeterminados que permitem o desenvolvimento em JavaScript para implementação de novas regras e validações.

A implementação destes eventos é feita por processo.

# Criando Evento de Processo

Para criar um Evento de Processo, siga os passos abaixo:

  1. Clique com o botão direito sobre o seu projeto fluig.
  2. Acione Novo > Script fluig
  3. Escolha o tipo Script Evento Workflow
  4. Escolha o Evento e o diagrama workflow ao qual será vinculado.

Abaixo alguns eventos e o momento em que são executados durante o processo:

imageVer Imagem

A ordem de execução dos eventos de processo depende do momento em que a solicitação se encontra no processo.

Você pode conferir todos os eventos de processo disponíveis aqui.

# hAPI

Em todos os eventos de processo é possível obter informações do processo através do handle da hAPI.

Exemplo: Você precisa obter o valor de um campo do formulário do processo. A seguinte função da hAPI retorna este valor:

imageVer Imagem

Abaixo algumas funções e suas utilidades:

imageVer Imagem

Veja todas as funções disponíveis aqui.

# Parâmetros

Existem alguns parâmetros que contêm informações referentes à solicitação que podem ser utilizados no desenvolvimento dos eventos de processo.

Exemplo: Você precisa obter o código do registro de formulário do processo. O parâmetro WKCardId retorna esta informação.

Abaixo alguns parâmetros e suas utilidades:

imageVer Imagem

Veja todas os parâmetros disponíveis aqui.

# Exercitando

Então chegamos ao termino do décimo capítulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Em um evento de processo, como podemos saber se o usuário completou a tarefa?
    1. (    ) Através do parâmetro WKIsTransfer.
    2. (    ) Através do parâmetro WKCompletTask.
    3. (    ) Através do parâmetro WKTask.
    4. (    ) Através do parâmetro WKIsTransfer.