Run async calls sequentially in D365 JS

With the introduction of "Xrm.WebApi.online", calls to CRM api becomes asynchronous always. Due to this, most of the times, we need to use ".then()" function and write the logic which needs to be executed next, or we are going with "XMLHttpRequest" for making synchronous calls. 

Now, using 'async and await' keywords, we can make the code to run in a synchronous way with "Xrm.WebApi.online" as well.

Example:

Consider the following requirement.

In Contact home page, show or hide the 'Summary' ribbon button based on the view selected. the view name is stored in the custom entity 'Configuration Settings' which has two fields: Name and Value.

There is already a method implemented to retrieve the Configuration Settings Value based on the Name passed using Xrm.WebApi.online.retrieveMultipleRecords.

 function GetConfigSettings(viewName) {  
   try {  
     var result = Xrm.WebApi.online.retrieveMultipleRecords("new_configsetting", "?$select=new_value&$filter=new_name eq '" + viewName + "'").then(  
       function success(results) {  
         if (results.entities.length > 0) {  
           return results.entities[0]["new_value"];  
         }  
       },  
       function (error) {  
         return error.message;  
       }  
     );  
     return result;  
   }  
   catch (e) {  
     return e.message;  
   }  
 };  

So, we need to consume this method and get the view name synchronously to show or hide the summary button.

Below is the custom js called from Summary button enable rule.

 function showhideSummary(selectedControl) {  
   var enable = false;  
   try {  
     if (selectedControl.getEntityName() === "contact"  
       && selectedControl.getViewSelector().getCurrentView() !== null) {  
       var viewName = GetConfigSettings("Active Contacts");  
       if (selectedControl.getViewSelector().getCurrentView().name === viewName) {  
         enable = true;  
       }  
       else {  
         enable = false;  
       }  
     }  
     else {  
       enable = false;  
     }  
   }  
   catch (e) {  
     Xrm.Navigation.openAlertDialog(e.message);  
   }  
   return enable;  
 };  

Since Xrm.WebApi.online.retrieveMultipleRecords returns the result asynchronously, we will always get 'undefined' in the viewName variable in showhideSummary function and the Summary button will always be hidden. 

So, to make this call synchronous, 

• async keyword should be used before the function which returns the result asynchronously or calls the asynchronous function 
• await keyword should be used when making the call to asynchronous functions.

The functions should be implemented as below.

 async function GetConfigSettings(viewName) {  
   try {  
     var result = await Xrm.WebApi.online.retrieveMultipleRecords("new_configsetting", "?$select=new_value&$filter=new_name eq '" + viewName + "'").then(  
       function success(results) {  
         if (results.entities.length > 0) {  
           return results.entities[0]["new_value"];  
         }  
       },  
       function (error) {  
         return error.message;  
       }  
     );  
     return result;  
   }  
   catch (e) {  
     return e.message;  
   }  
 };  
   
 async function showhideSummary(selectedControl) {  
   var enable = false;  
   try {  
     if (selectedControl.getEntityName() === "contact"  
       && selectedControl.getViewSelector().getCurrentView() !== null) {  
       var viewName = await GetConfigSettings("Active Contacts");  
       if (selectedControl.getViewSelector().getCurrentView().name === viewName) {  
         enable = true;  
       }  
       else {  
         enable = false;  
       }  
     }  
     else {  
       enable = false;  
     }  
   }  
   catch (e) {  
     Xrm.Navigation.openAlertDialog(e.message);  
   }  
   return enable;  
 };