The Visual Builder Cloud Service Blog

Are you done with your call? Managing callbacks with a Promise in Visual Builder custom code

JT Thomas
Director of Product Management

In a previous blog, we talked about how to create custom code within Visual Builder. In this blog, we'll discuss how to work with callbacks within that custom code.

If you are familiar with Javascript callbacks, read on, but if you need an introduction to callbacks and asynchronous operations and why this takes special care, here is a good primer. In short, we need to manage this specifically because the return result of a custom function may not be available yet when it gets assigned within a callback. Since the callback gets scheduled to run later (asynchronously), your result can be returned undefined because the callback which populates that return value had not completed yet. 

Let's look at a specific example, getting a GPS location using the HTLM5 navigator.geolocation API.

Screenshot from: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

As shown above, the function takes three parameters called success, error, and options. Success and error are both callbacks and are used in this API because retrieving a location could take several seconds. If the function were to wait for the result, your app would be stuck waiting too. So, callbacks are you used to be "called back" when that information is available rather than blocking your code execution.  But then, how do you deal with the situation described above where our success callback may not be called yet? Use a Promise, as discussed in primer I linked to at the beginning of the article.  

Let's implement this within Visual Builder custom code using a module function. 

PageModule.prototype.getGeolocation = function()
     return new Promise(function(resolve, reject) {
        var geolocation = navigator.geolocation;
        geolocation.getCurrentPosition(function(position) {
               var latitude = position.coords.latitude;
               var longitude = position.coords.longitude;
               var latlong = JSON.stringify({ lat: latitude, lng: longitude});
           }, function(error) {
               reject("The error is: " + error);


Within our custom function getGeolocation, we are returning a Promise. This Promise wraps our call to navigator.geolocation and the two callbacks functions it expects as anonymous methods. This ensures our action chain custom function call will wait for the Promise to return (itself an asynchronous call) but will release the custom function from blocking execution at the same time.  A successful retrieval of a geolocation calls our anonymous function for success and returns our assigned variable in the Promise resolve function, ensuring it is not undefined. Non-success calls the error function as an anonymous function and then calls the Promise reject function. 

Using the above pattern within Visual Builder custom module functions will ensure:

  1. Visual Builder can reference your custom code within an action chain
  2. Your callbacks will complete before a result is returned, ensuring a  return result is not undefined
  3. Allow you to also deal with error conditions within the same function







Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.