Botões Dinâmicos

Os botões dinâmicos servem para auxiliar o usuário a realizar ações utilizando botões para executar códigos em background para atingir determinada funcionalidade. O seu uso pode servir em diversas situações, por exemplo: alterar etapa do registro, aprovar um fluxo, reprovar um fluxo e etc..

🚧

Aviso

Certifique-se que sua versão da plataforma está atualizada para trabalhar com Botões Dinâmicos.

Criando a estrutura básica para o fluxo de aprovação:

No dev-studio, crie um código fonte do tipo Business Delegate:

Dentro do seu código fonte vamos criar uma função que será responsável por obter as ações do processo e retornar para o formulário; e outra função que será responsável por executar as ações de acordo com o botão que foi clicado:

module.exports = (function() {

  'use strict';
  var logger = logging.withLogger('jll.model.services.btnflows');

  function getActions(params) {
    var actions = [];

    return actions;
  }

  function invoke(params) {
    var action = params.action;
    var id = params.id;
    var data = params.data;
  }

  return {
    'actions': getActions,
    'invoke': invoke
  };

})();

Função getActions: Recebe como parâmetro o bind do formulário e as informações do registro e retorna uma lista de ações possíveis para o determinado registro.

Função invoke: Recebe como parâmetro o bind do formulário, as informações do registro e também a ação que foi solicitada pelo usuário ao clicar no botão.

Criando as ações para o fluxo de aprovação:

Anteriormente, criamos a estrutura básica que permite prosseguir com a criação das ações. Agora vamos aprofundar um pouco mais e adicionar os botões e suas funções.

Dentro do código fonte que criamos a estrutura vamo editar a função getActions para adicionar o botão Aprovar e o botão Reprovar:

function getActions(params) {
  var actions = [];

  actions.push({
    'action': 'process-transition-approve',
    'label': 'Approve',
    'icon': 'fa fa-fw fa-paper-plane-o',
    'class': 'btn-success'
  });

  actions.push({
    'action': 'process-transition-reprove',
    'label': 'Reprove',
    'icon': 'fa fa-fw fa-paper-plane-o',
    'class': 'btn-danger'
  });

  return actions;
}

Dessa maneira, serão exibidos 2 botões na tela: o botão Aprovar e o botão Reprovar. Você também pode adicionar condições para determinar se um botão irá aparecer apenas em um registro que já foi criado anteriormente, caso esteja na etapa de aprovação e outras infinitas possibilidades.

Agora que já temos o código dos botões, precisamos definir as ações que serão executadas no momento que o usuário clicar em cada botão. Para isso precisamos vamos trabalhar na função invoke:

function invoke(params) {
  var action = params.action;
  var id = params.id;
  var data = params.data;

  // Approve Button
  if (action == "process-transition-approve") {
    require('inpaas.core.entity.dao').getDao('DEMO_FLOW')
      .withAuthorizationOverride()
      .filter('id_demo_flow').equalsTo(id)
      .update({  'do_approved': 'Y' });

    data.$close = true;
  }

  // Reprove Button
  if (action == "process-transition-reprove") {
    require('inpaas.core.entity.dao').getDao('DEMO_FLOW')
      .withAuthorizationOverride()
      .filter('id_demo_flow').equalsTo(id)
      .update({  'do_approved': 'N' });

    data.$close = true;
  }
}

A função invoke irá receber todo clique o botão receber, assim, as nossas condições serão encarregadas de direcionar quais ações serão executadas. Por isso, utilizamos a variável action para comprar qual a ação que foi solicitada ao clicar no botão.

📘

Dica

Utilizar o data.$close = true, irá permitir que o formulário seja fechado após o usuário clicar no botão e ação ser totalmente executada.

Dessa forma nosso código fonte está pronto para ser utilizado e plugado ao formulário. Você poderá adicionar inúmeras ações e tornar o seu formulário o mais dinâmico possível usando esse recurso.

Adicionando o botão dinâmico em seu formulário

Abra o seu formulário em modo de edição. Na seção lateral clique em Botões dinâmicos.

Um Botão dinâmico será adicionado próximo aos botões de Salvar e Cancelar, clique no botão para editar:

Após clicar no botão irá aparecer as opções de edição no canto esquerdo da tela:

Título do botão: Corresponde ao título padrão, ele será sobrescrito conforme as instruções presentes em seu código fonte.

Bind: Alias do campo que será persistido entre o botão e o formulário.

Source Key: Chave para o seu código fonte.

Após realizar as devidas alterações, clique em Confirmar e salve o formulário em edição para que suas alterações sejam armazenadas.