Address Autocomplete Control

The main task of this control is making address entering routine easier and dicrease the number of misstypes.

Basic Usage Instructions

1. To use this control you have to download and install the latest version of AB Controls Toolkit on your CDS instance that is available in Releases.
2. Open the form where you want to use the control (as of now, 02/25/2021, Maker Experience doesn't support 3-rd Party Custom Controls so it's required to use Old Customization experience).
3. Add the field that will be used as a placeholder for the autocomplete control to the form and click "Change Properties".
4. Chose "Controls" tab, click "Add Control", select the "Address Autocomplete Control" control from the list of available controls and click "Add":
5. Choose types of "Application Clients" that will use this control, bind fields to required control properties - Street, City, County (optional), Zip/Postal Code, State/Province and Country. During the address lookup, coordinates of address are provided as well so it's possible optionally bind Longitude and Latitude:
6. Configure map provider settings.
7. It is required for the proper work of the control all of the fields bound to be present on the form (it doesn't matter if field is visible or not).
8. When all changes are done and published open the record form and start entering the address. If everything was configured the right way you should see the popup with list of the addresses and when address is chosen from the list correspond field have to be populated:

Extended Configuration

In order to enable extended configuration of the control create the JavaScript webresource with the function that returns the object of the following type:

{
    ParseAddress: Function
}

Here is an example that demonstrates following scenario - BingMaps Api returns the full name of the state (New York, South Carolina e.t.c.) and customer requirements is to use 2 letters abbreviation instead (NY, SC, e.t.c.). The following code extends the handling of the OOB behavior for the address:

function getConfiguration(){
    var stateMap = {
            Alabama: "AL",
            Alaska: "AK",
            Arizona: "AZ",
            Arkansas: "AR",
            California: "CA",
            Colorado: "CO",
            Connecticut: "CT",
            Delaware: "DE",
            Florida: "FL",
            Georgia: "GA",
            Hawaii: "HI",
            Idaho: "ID",
            Illinois: "IL",
            Indiana: "IN",
            Iowa: "IA",
            Kansas: "KS",
            Kentucky: "KY",
            Louisiana: "LA",
            Maine: "ME",
            Maryland: "MD",
            Massachusetts: "MA",
            Michigan: "MI",
            Minnesota: "MN",
            Mississippi: "MS",
            Missouri: "MO",
            Montana: "MT",
            Nebraska: "NE",
            Nevada: "NV",
            "New Hampshire": "NH",
            "New Jersey": "NJ",
            "New Mexico": "NM",
            "New York": "NY",
            "North Carolina": "NC",
            "North Dakota":	"ND",
            Ohio: "OH",
            Oklahoma: "OK",
            Oregon: "OR",
            Pennsylvania: "PA",
            "Rhode Island": "RI",
            "South Carolina": "SC",
            "South Dakota": "SD",
            Tennessee: "TN",
            Texas: "TX",
            Utah: "UT",
            Vermont: "VT",
            Virginia: "VA",
            Washington: "WA",
            "West Virginia": "WV",
            Wisconsin: "WI",
            Wyoming: "WY"
    };

    function parseAddress(address) {
        return new Promise(function(resolve, reject){
            if (address.country !== 'United States') {
                resolve(address);
                return;
            }

            var state = stateMap[address.state];

            if (state) {
                address.state = state;
            }

            resolve(address);
        });
    }

    return {
        ParseAddress: parseAddress
    };
}

Add the webresource to your system (in my example I used ab_/AddressAutocomplete.js webresource) and configure 'Configuration WebResource' and 'Configuration WebResource Method' parameters to use Name and Configuration Method Name as it shown on the following screenshot: