Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 3

Recently I was tasked with devising a way where our end users could click a button located on an entity form in Dynamics 365 that would launch our Enterprise Box.com file sharing site.  This button would be dynamic, driven via JavaScript, and would open the related Box.com folder location that would be dependent upon the entity record the button was initiated from.

In this post I’ll show you how to write the JavaScript code that’ll drive our Ribbon Workbench custom button.  Don’t worry about how to create the button as I’ll show you the steps for that in my final post of the series.

Series Links Parts 1-4:

• Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 1
• Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 2
• Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 4

Button Logic

The button logic is pretty straight forward.  We have a section that grabs the static sitecollectionid defined in the file and then logic to grab either the entity id from the current record (if on the account entity) or the defined lookup id field that points to the account record (if on a child related entity).  I’m assuming that you the reader already knows a little JavaScript along with creating async calls against Dynamics 365.  I opted to hard code my sitecollectionid in my JavaScript file as shown below since this value will never change.  You can find the sitecollectionid value by executing the FetchXml queries in the first article of the series in a tool such as XmlToolKit.

    var siteCollectionId="{YOURSITECOLLECTIONGUID}";
    var formContext=primaryControl.getFormContext(); // get formContext
    var lookupId=formContext.data.entity.getId();
    //alert("lookupFieldName: "+lookupFieldName+";");
    if(typeof (lookupFieldName)!="undefined"&&lookupFieldName!=null) {
      var lookupField=formContext.getAttribute(lookupFieldName);
      if(typeof (lookupField)!="undefined"&&lookupField!=null) {
        //alert("Name: "+lookupField.getValue()[0].name+"; Id: "+lookupField.getValue()[0].id);
        lookupId=lookupField.getValue()[0].id;
      }
    }

This next bit is your OData query where you’ll request the absoluteurl using the regardingobjectid and sitecollectionid values that you collected in the previous section of your filter criteria.

      var oDataURI=Xrm.Utility.getGlobalContext().getClientUrl()
        +"/api/data/v9.1/"
        +"sharepointdocumentlocations"
        +"?$select="
        +"sharepointdocumentlocationid,"
        +"name,"
        +"absoluteurl"
        +"&$filter=_regardingobjectid_value eq "+lookupId.slice(1,-1)
        +" and sitecollectionid eq "+siteCollectionId.slice(1,-1);

On a successful OData call you’ll receive a 200 where you’ll pull and analyze the JSON response. Here you’ll determine if the associated record in question has a folder, or if one does not exist, display the root directory of your 3rd party cloud storage solution so the end user will always receive some type of response.

            var results=JSON.parse(this.response);
            var bFound=false;
            for(var i=0; i<results.value.length; i++) { var name=results.value[i]["name"]; var absoluteUrl=results.value[i]["absoluteurl"]; if(typeof (absoluteUrl)!="undefined"&&absoluteUrl!=null) { bFound=true; window.open(absoluteUrl,'_blank','width=800,height=600,top=200'); } else {// Default Box Client Directiory [All Files>Client]
                bFound=true;
                window.open("https://[YOURSITEHERE].[CLOUD_DOMAIN].com/folder/[ROOTFOLDERHERE]",'_blank','width=800,height=600,top=200');
              }
            }
            if(bFound==false) {// Nothing found then open default location
              window.open("https://[YOURSITEHERE].[CLOUD_DOMAIN].com/folder/[ROOTFOLDERHERE]",'_blank','width=800,height=600,top=200');
            }

Complete JavaScript Code

Below is the entire script you’ll need to get your custom Ribbon Workbench button to function correctly.  You’ll need to take this file and upload to Dynamics 365 as a Web Resource.  Keep in mind that this was designed to handle Box.com data.  However, I’m sure with a little effort it can be modified to work with Dropbox or any other 3rd party online cloud storage solution.

• SiteCollectionId – Site collection defined in Dynamics 365
• Cloud Service Url – Your cloud service Url path
• Cloud Service Default Folder Value – For Box.com this is an integer value given to the folder when it was created; so essentially it’s the Box Id

//// -----------------------------------------------
if (typeof (DEV) == "undefined") {
  DEV = { __namespace: true };
}
//// ----------------------------------------------------------
if (typeof (DEV.Box) == "undefined") {
  DEV.Box = { __namespace: true };
}
//// --- ONCLICK ROUTINES---------------------------------------
DEV.Box.Link ={
  OnClick:function(primaryControl,lookupFieldName) {
    var siteCollectionId="{YOURSITECOLLECTIONGUID}";
    var formContext=primaryControl.getFormContext(); // get formContext
    var lookupId=formContext.data.entity.getId();
    //alert("lookupFieldName: "+lookupFieldName+";");
    if(typeof (lookupFieldName)!="undefined"&&lookupFieldName!=null) {
      var lookupField=formContext.getAttribute(lookupFieldName);
      if(typeof (lookupField)!="undefined"&&lookupField!=null) {
        //alert("Name: "+lookupField.getValue()[0].name+"; Id: "+lookupField.getValue()[0].id);
        lookupId=lookupField.getValue()[0].id;
      }
    }
    if(typeof (lookupId)!="undefined"&&lookupId!=null) {
      var oDataURI=Xrm.Utility.getGlobalContext().getClientUrl()
        +"/api/data/v9.1/"
        +"sharepointdocumentlocations"
        +"?$select="
        +"sharepointdocumentlocationid,"
        +"name,"
        +"absoluteurl"
        +"&$filter=_regardingobjectid_value eq "+lookupId.slice(1,-1)
        +" and sitecollectionid eq "+siteCollectionId.slice(1,-1);
      var req=new XMLHttpRequest(); /* Async Call */
      req.open("GET",encodeURI(oDataURI),true);
      req.setRequestHeader("Accept","application/json");
      req.setRequestHeader("Content-Type","application/json; charset=utf-8");
      req.setRequestHeader("OData-MaxVersion","4.0");
      req.setRequestHeader("OData-Version","4.0");
      req.setRequestHeader("Prefer","odata.include-annotations="*"");
      req.onreadystatechange=function() {
        if(this.readyState==4) {/* Complete */
          req.onreadystatechange=null; /* Avoids memory leaks */
          if(this.status==200) {
            var results=JSON.parse(this.response);
            var bFound=false;
            for(var i=0; i<results.value.length; i++) { var name=results.value[i]["name"]; var absoluteUrl=results.value[i]["absoluteurl"]; if(typeof (absoluteUrl)!="undefined"&&absoluteUrl!=null) { bFound=true; window.open(absoluteUrl,'_blank','width=800,height=600,top=200'); } else {// Default Box Client Directiory [All Files>Client]
                bFound=true;
                window.open("https://[YOURSITEHERE].[CLOUD_DOMAIN].com/folder/[ROOTFOLDERHERE]",'_blank','width=800,height=600,top=200');
              }
            }
            if(bFound==false) {// Nothing found then open default location
              window.open("https://[YOURSITEHERE].[CLOUD_DOMAIN].com/folder/[ROOTFOLDERHERE]",'_blank','width=800,height=600,top=200');
            }
          } else {
            var resultError=JSON.parse(this.response).error; // Use to throw an error
            var msg="DEV.Box.Link.OnClick() Error: Unable to return Box Drive, Error Message: "+resultError.message+"; Lookup Id: "+lookupId+".";
            var alertStrings={confirmButtonLabel:"OK",text:msg};
            var alertOptions={height:180,width:390};
            Xrm.Navigation.openAlertDialog(alertStrings,alertOptions).then(
              function success(result) {
                console.log("Error alert dialog closed");
              },
              function(resultError) {
                console.log(resultError.message);
              }
            );
          }
        }
      };
      req.send();
    }
  }
};

Uploading to Dynamics 365

Next we need to upload the JavaScript file to Dynamics 365 as a Web Resource.  Navigate to Dynamics 365 Customizations screen and click the Customize the System link or the Solutions screen if you have created a custom solution to organize and store your project elements in.  Then you’ll be able to select Web Resources and upload your JavaScript file.  You should also upload two custom icon files, one 16×16 and one 32×32 as shown below.  You’ll attach those two icons, along with your JavaScript file, to your custom Ribbon Workbench button that I’ll walk you through creating in my final post.

Create a new Web Resource and enter in the information about your JavaScript file as shown below.  Then click Save and Publish buttons to finalize everything.

Final Thoughts

In my final post I’ll walk you through how to bind your JavaScript file to a button that we’ll place on the Account entity.  I’ll be using the XrmToolKit application along with the Ribbon Workbench 2016 plugin to create this button.  Our button will have 2 parts, the button definition and the command criteria that binds the JavaScript logic to the button.

Series Links Parts 1-4:

• Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 1
• Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 2
• Dynamics 365: JavaScript Enabled Button For Box.com Using KingswaySoft And Ribbon Workbench – Part 4

Original Post https://therapyincode.wordpress.com/2020/01/22/dynamics-365-javascript-enabled-button-for-box-com-using-kingswaysoft-and-ribbon-workbench-part-3/