app.create.submit.success event is called before XMLHttpRequest.onload is called.

1

Hello,

I have a problem with the “app.record.create.submit” event.

Please have a look here.

kintone.events.on('app.record.create.submit', function(event) {
      var url = "https:/./.....";
      loadData(url);
});

kintone.events.on('app.record.create.submit.success', async function(event) {
       console.log("This is submit.success event");
});

 function loadData(url) {
        return new kintone.Promise(function(resolve, reject) {
            console.log("AAAAAAAAAAAAAAAAAAA");
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.setRequestHeader('X-Cybozu-API-Token','INSERT_API_TOKEN');
            xhr.responseType = 'blob';
            xhr.onload = function() {
                console.log("CDDCDCDCDCDCDCDCDC");
                if (xhr.status === 200) {
                    console.log("BBBBBBBBBBBBBBBBBBBBB");
                    resolve(xhr.response);
                } 
                else { console.log(xhr.responseText);}
            };
            xhr.onerror = function () {
                reject(Error('error fetching data'));
            };
            console.log("CCCCCCCCCCCCCCCCCCC");
            xhr.send();
            console.log('DDDDDDDDDDDDDDDDDDD');

        }).then(function(resp) {
            var blob = new Blob([resp]);
            console.log("HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH");
            uploadDocxAndAddtoField(blob);
        },function(error) {
            console.log(error);
        });
    }

Expected Result:

AAAAAAAAAAAAAAAAA
CCCCCCCCCCCCCCCCCC
CDCDCDCDCDCDCDCD
BBBBBBBBBBBBBBBBBBB
HHHHHHHHHHHHHHH

Actual Result:

AAAAAAAAAAAAAAAAA
CCCCCCCCCCCCCCCCCC
DDDDDDDDDDDDDDD
This is submit.success event      <- {this is "app.record.create.submit.success" event}
BBBBBBBBBBBBBBBBBB
{Then, it is redirected to record.show}

Please Help me.

2

Hi @unudeveloper,

In the code you shared, after the 'app.record.edit.submit' event completes, the process does not wait for the loadData function to complete, then the 'app.record.edit.submit.success' event is triggered, after which the callback function of the loadData function is running.

The reason is that you are not returning a kintone.Promise object in the 'app.record.edit.submit' event.

Since there was a description of async, I assume you would like to use the async/await notation.

The desired behavior can be achieved by modifying the processing in the 'app.record.edit.submit' event as follows.

Before:

kintone.events.on('app.record.edit.submit', function(event) {
  var url = "https:/./.....";
  loadData(url);
});

After:

kintone.events.on('app.record.edit.submit', async function(event) {
  var url = "https:/./.....";
  await loadData(url);
});

(The 'app.record.edit.submit' event will wait until the loadData function has completed processing.)

Async/await - JavaScript:
https://javascript.info/async-await

Please also note that since the API token was included in the code, it is better to delete the API token and issue a new one, just in case, for security reasons.

I hope this helps.

3

Hi @Sean_Tcbn ,

Thanks for you kind help.

Yes.

The bug’s cause was that I was not returning a kintone.Promise object in the app.record.create.submit event.

Thanks