So within Dynamics 365 I decided to use the new Xrm.App.sidePanes method to create a side pane that embeds a HTML web resource. Specifically I've embedded the Amazon connect stream softphone. It all works perfectly. When running the side pane, it appears with the Amazon connect softphone. I've test called and it dials through well and I can see all the events that I need including the phone number of the incoming call.
I've added ClientGlobalContext.js.aspx javascript library to the HTML so that I can access the globalContext. Basically what I'm trying to do is have it so that when someone dials through to the Amazon connect sidepane embedded in Dynamics it:
picks up the phone number from the Connect event.
I run a web API call to Dynamics to find contact with that number and return the contactid
Use that contactid to navigate the main pane (not the amazon connect embedded side pane) to that contact.
So far 1 and 2 seems to be working. I can run the web API call using the globalContext to return the base URL but I'm unable to find a method to navigate the main pane to the contact record. Any help would be greatly appreciated.
Under the amazon connect event listener for contact.onConnecting(). I added custom code in the handleContactAccepted function to retrieve the contactid via the web api and then use it to navigate to the contact record in the main pane. I am able to retrieve the contact ID using the phone number but can't navigate to the contact using the main pane in Dynamics 365.
Below is the module script I use to subscribe to the contact events generated by the stream.
/** * Extends the contact events.*/export default function (contact) { console.debug(/CDEBUG >> ContactEvents - New Contact contactId: / + contact.contactId); console.debug(/CDEBUG >> ContactEvents - New Contact InitialContactId(): / + contact.getInitialContactId()); // Route to the respective handler contact.onConnecting(handleContactConnecting); async function handleContactConnecting(contact) { console.debug('CDEBUG >> ContactEvents.handleContactConnecting() - Contact connecting to agent'); // Add your custom code here function getContactIdByNumber(searchNumber) { return new Promise((resolve, reject) => { var req = new XMLHttpRequest(); req.open( /GET/, Xrm.Utility.getGlobalContext().getClientUrl() + `/api/data/v9.2/contacts?$select=contactid,telephone1&$filter=contains(telephone1,'${searchNumber}')`, true ); req.setRequestHeader(/OData-MaxVersion/, /4.0/); req.setRequestHeader(/OData-Version/, /4.0/); req.setRequestHeader( /Content-Type/, /application/json; charset=utf-8/ ); req.setRequestHeader(/Accept/, /application/json/); req.setRequestHeader(/Prefer/, /odata.include-annotations=*/); req.onreadystatechange = function () { if (this.readyState === 4) { req.onreadystatechange = null; if (this.status === 200) { var results = JSON.parse(this.response); console.log(results); if (results.value.length > 0) { resolve(results.value[0].contactid); } else { resolve(null); } } else { console.log(this.responseText); reject(this.responseText); } } }; req.send(); }); } console.log(contact); var connections = contact.getConnections(); var c1 = connections[1]; var c1Number = c1.getAddress(); var recievingPhoneNumber = c1Number.phoneNumber; console.log(c1Number); console.log(recievingPhoneNumber); var formattedReceivingNumber = recievingPhoneNumber.replace(/+/,//); console.log(formattedReceivingNumber); var contactId = await getContactIdByNumber(formattedReceivingNumber); console.log(contactId); var pageInput = { pageType: /entityrecord/, entityName: /contact/, entityId: contactId //replace with actual ID }; var navigationOptions = { target: 1 }; Xrm.Navigation.navigateTo(pageInput, navigationOptions).then( function success() { // Run code on success }, function error() { // Handle errors } ); }}
