camForm on submit problems

Hi!

I want to generate automatically an ID based on the number of existing tasks in the BD, so I thought about using camForm.on('submit') event to manage it. This is what I do:

camForm.on('submit', async function(evt) {
    try {
        // getHistoryTaskCount makes an API call to GET history/task/count to return the number of tasks created in the system
        var response = await $scope.getHistoryTaskCount();
        
        var numTasks = response.data.count + 1;
        
        // To have 0001, 0002, 0003, and so forth
        var lastTaskId = ("0000"+numTasks.toString()).substr(-4);
        
        // This is the ID we want to store in the variable 'id' of the form
        var newTaskId = 'C-'+new Date().getFullYear().toString()+'-'+lastTaskId;
        
        // Set the form variable value
        camForm.variableManager.variableValue('id', newTaskId);
        
        // This prints ID: C-2019-0032, C-2019-0033, etc... (CORRECT VALUE)
        console.log("ID: ", camForm.variableManager.variableValue('id'));
    } catch(e) {
        // Error in API call
        alert("Couldn't assign an automatic ID");
        
        evt.submitPrevented = true;
    }
    
    // etc...
});

The problems I’m having:

  1. The new task is always created with empty id, although the console.log in the code above prints the right id values
  2. The form is always submitted, even if I set evt.submitPrevented = true; (I realized about this in my tests, when I didn’t want to finish the submission, only print some test messages)

Any idea on what’s going on? Thanks!

Hey @felipRR,

the event listeners expect synchronous JavaScript code, therefore the form is submitted before all your code ran.

What you can do instead is prevent the first submit in a synchronous function, execute your async code and fire the submit action again after it has finished.

KR
Martin

Hi Martin,

Thanks for your suggestion but, how can I call an async function from within the synchronous event handler?

For example, this code won’t work:

[ ... ]
$scope.doAsyncStuffAndResubmitForm = async function() {
    // Calculate the new task ID from the DB
    
    // Re-submit the form
    $scope.complete();
});
[ ... ]

camForm.on('submit', function(evt) {
    evt.submitPrevented = true;
    
    $scope.doAsyncStuffAndResubmitForm();
});

How would you achieve this? Thanks in advance!

Hey @felipRR,

what exactly is the problem you are facing? I tested it with the following code and it works for me

<form role="form">
  <script cam-script type="text/form-script">
    var firstSubmit = true;
    $scope.doAsyncStuffAndResubmitForm = async function() {
      // Calculate the new task ID from the DB
      console.log('doing stuff async');

      await new Promise(function(resolve, reject) {
        setTimeout(function() {
          resolve();
        }, 300);
      });

      // Re-submit the form
      $scope.complete();
    };

    camForm.on('submit', function(evt) {
        evt.submitPrevented = firstSubmit;
        firstSubmit && $scope.doAsyncStuffAndResubmitForm();
        firstSubmit = false;
    });
  </script>
</form>

Hi!

Sorry about the late answer, I had to advance other projects and I left this one for a while. I tried your suggestion and I got these errors:

Anyway, I have to do some changes in the code, I’ll post an update when I finish it and I’ll let you know the result.

Thanks!