Kleber Address Validation

Kleber Predictive Address Capture is a service provided by DataTools.  In this article, I will walk you through, how to create a custom web resource to integrate with Kleber and also provide the predictive address search user experience on a Dynamics 365 (CRM) form.

The predictive address search is a two step process.

  1. Search for a set of addresses based on the partially entered text.
  2. Read the full address details of the selected address

Below diagram details the complete process.

Kleber Address Validation Process Flow

Resources

You would need to download the below JavaScript and CSS files.

jQuery – https://code.jquery.com/jquery-1.9.1.js

jQuery UI (the version I used is jQuery UI Core 1.10.2) – http://jqueryui.com/download/

All the source files I used can be found in below GitHub repository.

https://github.com/dyn365apps/kleberdyn365

Source Code

HTML and CSS

We need to create a HTML web resource which includes an input element to collect partial address text, JavaScript to call the Kleber Services, and CSS to update the UI to match Dynamics 365 (CRM) UI.

HTML

CSS

GetRequestKey

Every subscribed user has a unique RequestKey.  You need to login to your Kleber account, and you can get your RequestKey.  This function simply returns the RequestKey when called.

LoadAddressOnForm

LoadAddressOnForm is called inside $(document).ready.  This will read the values in Dynamics 365 (CRM) address fields, concatenate the fields, and add to addline input element.

DataTools.Capture.Address.Predictive.AuPaf.SearchAddress

When the user starts typing the address, DataTools.Capture.Address.Predictive.AuPaf.SearchAddress Method is called to get a list of matching addresses.  You can limit the numbers addresses returned by changing the ResultLimit parameter.

DataTools.Capture.Address.Predictive.AuPaf.RetrieveAddress

When you click on one of the returned addresses, DataTools.Capture.Address.Predictive.AuPaf.RetrieveAddress Method is called to get full address details.  Once, the full address details are retrieved, the Dynamics 365 (CRM) form’s address fields are populated with the retrieve addresses components.  User then saves the record.

Issue

There was an issue, when users type a partial address and hit enter key.  The web resource showed 404 error.  To resolve this below fix was implemented.

Add Web Resource to Dynamics 365 (CRM) Form

Create a HTML web resource record in Dynamics 365 (CRM) and include the complete code as shown below.

Add the web resource to the form.

Save and Publish.

Conclusion

Once published, you can open the form (in my example, I used the Lead form) and start typing inside the input element.  The result should look like this.

Predictive Address Search

Complete source code

Thank you for visiting Dyn365Apps.com.

Follow me on Twitter to get the latest news, tips and tricks and more …

Until next time.

[Integration] Predictive Address Capture in Dynamics 365 using Kleber by DataTools
Tagged on:             

Leave a Reply