Formulário Manual

O exemplo abaixo requer conhecimento em HTML, JavaScript e Parâmetros.

Construa um formulário manual com a tarefa Conteúdo que insere dados em tabelas e executa processos.

Aba - HTML

<!-- css ====> https://purecss.io/ -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css">

 <form id="meuFormulario" class="pure-form pure-form-stacked">
      <fieldset>
      <legend>Meu formulário</legend>
        <label>Nome</label>
        <input type="text" id="meu_nome" name="meu_nome" />
         <label>Email</label>
        <input type="text" id="meu_email" name="meu_email" />
           <label >Estado</label>
        <select id="meu_estado" name="meu_estado">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>
        
        <label class="pure-checkbox">
            <input type="checkbox" id="meu_aceite" name="meu_aceite" /> Aceito</label>
            
    </fieldset>
    <button type="submit" class="pure-button pure-button-primary">Submeter</button>
</form>

Aba - Java

// obrigatório: espera html carregar, para depois fazer referencia JS com html
document.addEventListener('DOMContentLoaded', function() { 
    
const meuFormulario = document.getElementById("meuFormulario");

const meu_nome = document.getElementById("meu_nome");
const meu_email = document.getElementById("meu_email");
const meu_estado = document.getElementById("meu_estado");
const meu_aceite = document.getElementById("meu_aceite");


// Fica escutando o botão SUBMIT - ENVIAR
meuFormulario.addEventListener("submit", function(evt) {
    evt.preventDefault(); // evita que o formulário redireciona da página
    enviarDados(); // envia os dados
});


// enviará para o gaio os valores dos parâmetros
function enviarDados() {
    
        // preparar tipo de EXECUÇÃO de PROCESSO
        // dispatchEvent é a PONTE desse código com o GAIO
        
        // 1. Preparar
        const rodarProcesso = { 
            formFlowId: 658, // numero do processo
            formType: 'loadFlow', // carrega processo em background,
            formReload: true, // recarrega a página atual
        }
    
        // 2. Definir parâmetros
        // 2.1 Um por linha
        rodarProcesso.params = [
            { paramName: 'meu_nome', paramValue: meu_nome.value || 'Nome Padrão' },
            { paramName: 'meu_email', paramValue: meu_email.value || '[e-mail]' },
            { paramName: 'meu_estado', paramValue: meu_estado.value || 'MG' },
            { paramName: 'meu_aceite', paramValue: meu_aceite.checked ? 'Aceito' : 'Desisto' },
        ];
    
        console.log(rodarProcesso);
        dispatchEvent(rodarProcesso);
    
}
    
}, false);