Manual Form

The example below requires knowledge of HTML, JavaScript and Parameters .

Build a manual form with the Content task that inserts data into tables and runs processes.

Tab - HTML

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

<link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/pure-min.css" >
​
    <form id ="myForm" class ="pure-form pure-form-stacked" >
        <fieldset>
        <legend> My form </legend>
            <label> Name </label>
            <input type ="text" id ="my_name" name ="my_name" />
             <label> Email </label>
            <input type ="text" id ="my_email" name ="my_email" />
              <label > Status </ label >
            <select id =" my_state " name =" my_state " >
                <option> AL </option>
                <option> CA </option>
                <option> IL </option>
            </select>
            
            <label class ="pure-checkbox" >
                <input type =" checkbox " id =" my_accept " name =" my_accept " /> I accept </ label >

        </fieldset>
    <button type ="submit" class ="pure-button pure-button-primary" > Submit </button>
</form >

Tab - Java

// mandatory: wait for html to load, then reference JS with html
document. addEventListener ( ' DOMContentLoaded ' , function () {
const myForm = document. getElementById ( " myForm " );
​
const my name = document. getElementById ( " my_name " );
const my email = document. getElementById ( " my_email " );
const my state = document. getElementById ( " my_status " );
const my_accept = document. getElementById ( " my_accept " );
​
​
// Listen for the SUBMIT - SEND button
myForm. addEventListener ( "submit" , function (evt) {
    evt. preventDefault (); // prevent the form from redirecting from the page
    sendData (); // send the data
});
​
​
// send the parameter values ​​to Gaio
function sendData () {
        // prepare PROCESS EXECUTION type
        // dispatchEvent is the BRIDGE of this code with GAIO
        // 1. Prepare
        const runProcess = {
          formFlowId : 658 , // process number
          formType : ' loadFlow ' , // loads process in background,
          formReload : true , // reload the current page
        }
        
        // 2. Set parameters
        // 2.1 One per line
        rotateProcess.params = [
          { paramName : ' my_name ' , paramValue : my_name.value || 'Default Name' },
          { paramName : ' my_email ' , paramValue : my_email.value || '[e-mail]' },
          { paramName : ' my_state ' , paramValue : my_state.value || 'MG' },
          { paramName : ' my_accept ' , paramValue : my_aceite.checked ? 'Accepted' : 'I give up' },
        ];
    
        console. log ( runProcess );
        dispatchEvent ( runProcess );

}

}, false );