Open UI - Free Address Auto complete powered by Google API

If you are looking for a free address auto complete for your Open UI users, here is the solution. I am sure, this will compete with other paid services like Experian (QAS), Informatics etc for Address verification and validation services.

Present scenario:
Users manually enter address info, leading to inconsistent/incorrect data on the system.

With Autocomplete API integrated:
Users just need to search for the address and select it. System will do the rest - it will copy the standard address info from Google and auto-populates the address fields on Siebel.

Demo first.


High level technical flow:

1) Add a custom PR at applet level and associate to address MVG: “Account Address Mvg Applet”
2) In ShowUI function on your applet PR do below,

Get the ActiveView - SiebelApp.S_App.GetActiveView();
Get the applet map - active_View.GetAppletMap();
Search for “Account Address Mvg Applet” as MVGNewRecordApplet
if the MVGNewRecordApplet Mode is “Edit” then,
            Add a new input field above all the current fields. This is what I did,
                       I got the Controls object from pm - pm.Get("GetControls").
                       Then got the control for the first field: “Street Address” - controls["Street Address"]
                       Then get the input name to select it using jquery - staddrctrl.GetInputName()
                      Once you get handle for 1st input, get the closest table and add a new <tr><td> for your input on which you are going to enable Google Auto Complete later.
Below is the code snippet for your reference which goes under ShowUI():

    var active_View = SiebelApp.S_App.GetActiveView();
    var applet_Map = active_View.GetAppletMap();
    var MVGNewRecordApplet = null;
    var appletName = "Account Address Mvg Applet";
    if (applet_Map.hasOwnProperty(appletName)) {
        MVGNewRecordApplet = applet_Map[appletName];
        if (MVGNewRecordApplet.GetMode() == "New") {
            pm = this.GetPM();
            bc = MVGNewRecordApplet.GetBusComp();
            var controls = pm.Get("GetControls");
            var staddrctrl = controls["Street Address"];
            var staddripname = staddrctrl.GetInputName();
            var staddrIPHolder = $("[name=" + staddripname + "]");
            var tableHolder = staddrIPHolder.closest("table");
            tableHolder.before('<tr><td colspan=2><input type="text" id="dynamic_addr_ip" style="height: 20px; width: 258px;" maxlength="200" tabindex="0" class="siebui-input-align-left" aria-readonly="false" placeholder="Enter your address here"></td></tr>');
        }
    }

2) Next is to load Google Map API using AJAX by calling preGoogleLoadAPI() function. Refer to my previous blog for details: 

Google map integration with Open UI – route planning based on sales reps calendar!

3) Now, call your custom function to enable autocomplete. Below is the code for my custom function:

initialize = function () {
                if (typeof (google.maps.places) !== "undefined") {
                    var input = $('#dynamic_addr_ip')[0]; // this is my custom field added above
                    $('#dynamic_addr_ip').focus();
                    autocomplete = new google.maps.places.Autocomplete(input);// this is how you enable Auto Complete using google places! So simple isn’t it?
                    google.maps.event.addListener(autocomplete, 'place_changed', function () {
                        fillInAddress(); //whenever user changes the address info on new input field, it will call my custom function to fill address.
                    }); 
                }
            };

 I will direct you to this google api doc to understand how autocomplete works: Google Map API - Place Autocomplete Address

 4) So, whenever user types an address and selects one on my new input field, google event listner will call my fillInAddress() function. I am getting all the formatted address details from Google API and populating my Siebel address fields. You will get the details for that in above google api link.

All I am doing is, doing bc.SetFieldValue() for each address field. (BC I got from MVG applet as shown above: bc = MVGNewRecordApplet.GetBusComp();

Let me know if any questions. Copy of my PR, attached below.

AddressAutoCompletePR.js



Cheers,
Shiv