Auto address completion

  • 1
  • Question
  • Updated 2 weeks ago
  • Answered
Has anyone seen something like an auto address code, works with google, that would like the following?
https://form.jotform.com/Barkley/paypal-payment-test
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb

Posted 3 weeks ago

  • 1
Photo of Rajesh Kumar

Rajesh Kumar

  • 738 Points 500 badge 2x thumb
Hi Bill Fox,
 
I have shared some step for the Google Address code,
  1. Navigate to Configure > Data Sources > Authentication Providers.
  2. Create a Skuid page for auto populate Address And added Modal PlacesAPI & GeoCode Modal. Added Condition as per the below image.
  3. And Paste XML 
var $ = skuid.$;

SetupAddressSearch(
arguments[0] //Field
, arguments[1] //Value
, "PlacesAPI" //Lookup Service Model
, "GeocodeAPI" //Populate Service Model
//Edit below values to match the target fields on your Model
,{ "Street"    : "BillingStreet"
, "City"    : "BillingCity"
, "County"  : "BillingCounty"
, "State"   : "BillingStateCode"
, "Country" : "BillingCountryCode"
, "Zip"     : "BillingPostalCode"
}
);

function SetupAddressSearch(field, value, placesAPIModelName, geocodeAPIModelName, targetModelInfo) {
if(field.mode == 'read') {
//skuid.ui.fieldRenderers.STRING.read(field, value);
skuid.ui.getFieldRenderer('STRING').read(field, value);
}
else if(field.mode == 'edit') {
/* Create and grab DOM elements */
//skuid.ui.fieldRenderers.STRING.edit(field, value);
        skuid.ui.getFieldRenderer('STRING').edit(field, value);
var searchID = RandomID();
var searchResultsID = searchID + "Results";

var BoxHTML = "<div id='" + searchResultsID + "' class='GoogleAPIAddressPicker' style='position: absolute; max-width: 200%; max-height: 150px; top: 25; left: 0; background: white; margin: 0 0 10px 10px; border: 1px solid #ddd; z-index: 999;overflow-x: hidden; overflow-y: auto;'></div>";

if(!field.element) { console.error("Field did not contain a DOM element"); return; }
var $searchContainer = field.element;

$searchContainer.append(BoxHTML);

var $searchBox = $searchContainer.find('input');
if($searchBox.length < 1) { console.error("Error finding the input field in the field element"); return; }
var $searchResults = $searchContainer.find("#" + searchResultsID);
if($searchResults.length < 1) { console.error("Error creating the result picker"); return; }

/* Set up models and conditions */
var placesAPIModel = skuid.model.getModel(placesAPIModelName);
if(!placesAPIModel) { console.error("Could not find Google Places API model named " + placesAPIModelName); return; }
var placesAPICondition = placesAPIModel.getConditionByName("AddressQuery");
if(!placesAPICondition) { console.error("Could not find 'AddressQuery' condition in " + placesAPIModelName + " model"); return; }
var geocodeAPIModel = skuid.model.getModel(geocodeAPIModelName);
if(!geocodeAPIModel) { console.error("Could not find Google Geocode API model named " + geocodeAPIModelName); return; }
var geocodeAPICondition = geocodeAPIModel.getConditionByName("PlaceIDQuery");
if(!geocodeAPICondition) { console.error("Could not find 'PlaceIDQuery' condition in " + geocodeAPIModelName + " model"); return; }

var targetModel = field.model;
var targetModelFields = {};

/* Timer for the search to prevent API spamming */
var runningSearch = false;
        var addressTest = '';
/* Search Box Changes */
$searchBox.keypress(function(e) {
if(runningSearch) clearTimeout(runningSearch);
runningSearch = setTimeout(function() {
var searchValue = $searchBox.val();
if(searchValue.length > 2) {
if (e.which !== 0) {
/* Box has met all conditions to initiate API call */
placesAPIModel.setCondition(placesAPICondition, searchValue);
placesAPIModel.updateData(function() {
var options = ''
, currentList = []
;
$.each(placesAPIModel.data, function(i, row) {
    addressTest = row.formatted_address;
    //console.log('addressTest: '+addressTest);
options += "<a href='javascript:void(0);' id='" + searchResultsID + currentList.length + "' class='AddressPickerItem' style='padding: 3px;'>" + HTMLEscape(row.formatted_address) + '</a><br />';
currentList.push({ "id" : row.place_id, "address": row.formatted_address });
});
$searchResults.html(options);
$.each(currentList, function(i, row) {
$('#' + searchResultsID + i).click(function() {
$searchResults.html('').css({ display: 'none' });
geocodeAPIModel.setCondition(geocodeAPICondition, row.id);
geocodeAPIModel.updateData(function() {
if(geocodeAPIModel.data.length > 0) {
address = {
Street: null,
City: null,
County: null,
State: null,
Zip: null,
Country: null
};
$.each(geocodeAPIModel.data, function(i, row) {
    console.log('addressTest: '+addressTest);
    var allow1 = ["street_number", "route", "political"];
    var testadd = '';
      if(row){
       for (j = 0; j < row.types[0].length; j++) {
                                                            if (row.types[0] && row.types[0].length > 0 && allow1.indexOf(row.types[0]) === -1) {
                                                                addressTest = addressTest.replace(row.long_name + ",", "").replace(row.short_name + ",", "");
                                                                if (row.types[0] === "country") {
                                                                    addressTest = addressTest.replace(new RegExp(row.long_name + '$'), "");
                                                                    addressTest = addressTest.replace(new RegExp(countryShortNameList1(row.short_name) + '$'), "");
                                                                } 
                                                            }
                                                            if (j === row.types[0].length - 1) {
                                                                addressTest = addressTest.trim().replace(new RegExp("," + '$'), "");
                                                            }
                                                            if (row.types[0] === "administrative_area_level_1") {
                                                                addressTest = addressTest.replace(row.long_name, ""); 
                                                            } 
                                                            if (row.types[0] === "postal_code") {
                                                                addressTest = addressTest.replace(new RegExp(row.long_name + '$'), "");
                                                                testadd = addressTest;
                                                            } 
                                                            
                                                            
                                                            address.Street = testadd!=''?testadd:address.City;
                                                            
                                                            
                                                            if(row.types[0] == 'locality'){
                                                             address.City = row.long_name;
                                                            }
                                                            if(row.types[0] == 'administrative_area_level_2'){
                                                                address.County = row.long_name;
                                                            }
                                                            if(row.types[0] == 'administrative_area_level_1'){
                                                                address.State = row.short_name;
                                                            }
                                                            if(row.types[0] == 'country'){
                                                                address.Country = row.short_name;
                                                            }
                                                            if(row.types[0] == 'postal_code'){
                                                                address.Zip = row.long_name;
                                                            }
       } 
   }
  });
                                            
var output = {};

$.each(targetModelInfo, function(fieldName, resultName) {
output[resultName] = (address[fieldName] !== undefined) ? address[fieldName] : null;
});

targetModel.updateRow(targetModel.data[0], output);
}
});
});
});
});
}
}
}, 300);
}).focus(function() { $searchResults.css({ display: 'block' }); }).blur(function() { setTimeout(function() { $searchResults.css({ display: 'none' }); }, 100); });
}
}

function HTMLEscape(text) { return $('<div/>').text(text).html(); }

function RandomID() {
var S4 = function() {
return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
};
return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}





var countryShortNameList1 = function (str) {
    if (str === "AF") return "AFG";
    if (str === "AL") return "ALB";
    if (str === "DZ") return "DZA";
    if (str === "AD") return "AND";
    if (str === "AO") return "AGO";
    if (str === "AG") return "ATG";
    if (str === "AR") return "ARG";
    if (str === "AM") return "ARM";
    if (str === "AU") return "AUS";
    if (str === "AT") return "AUT";
    if (str === "AZ") return "AZE";
    if (str === "BS") return "BHS";
    if (str === "BH") return "BHR";
    if (str === "BD") return "BGD";
    if (str === "BB") return "BRB";
    if (str === "BY") return "BLR";
    if (str === "BE") return "BEL";
    if (str === "BZ") return "BLZ";
    if (str === "BJ") return "BEN";
    if (str === "BT") return "BTN";
    if (str === "BO") return "BOL";
    if (str === "BA") return "BIH";
    if (str === "BW") return "BWA";
    if (str === "BR") return "BRA";
    if (str === "BN") return "BRN";
    if (str === "BG") return "BGR";
    if (str === "BF") return "BFA";
    if (str === "BI") return "BDI";
    if (str === "CV") return "CPV";
    if (str === "KH") return "KHM";
    if (str === "CM") return "CMR";
    if (str === "CA") return "CAN";
    if (str === "CF") return "CAF";
    if (str === "TD") return "TCD";
    if (str === "CL") return "CHL";
    if (str === "CN") return "CHN";
    if (str === "CO") return "COL";
    if (str === "KM") return "COM";
    if (str === "CG") return "COG";
    if (str === "CK") return "COK";
    if (str === "CR") return "CRI";
    if (str === "HR") return "HRV";
    if (str === "CU") return "CUB";
    if (str === "CY") return "CYP";
    if (str === "CZ") return "CZE";
    if (str === "CI") return "CIV";
    if (str === "KP") return "PRK";
    if (str === "CD") return "COD";
    if (str === "DK") return "DNK";
    if (str === "DJ") return "DJI";
    if (str === "DM") return "DMA";
    if (str === "DO") return "DOM";
    if (str === "EC") return "ECU";
    if (str === "EG") return "EGY";
    if (str === "SV") return "SLV";
    if (str === "GQ") return "GNQ";
    if (str === "ER") return "ERI";
    if (str === "EE") return "EST";
    if (str === "ET") return "ETH";
    if (str === "FO") return "FRO";
    if (str === "FJ") return "FJI";
    if (str === "FI") return "FIN";
    if (str === "FR") return "FRA";
    if (str === "GA") return "GAB";
    if (str === "GM") return "GMB";
    if (str === "GE") return "GEO";
    if (str === "DE") return "DEU";
    if (str === "GH") return "GHA";
    if (str === "GR") return "GRC";
    if (str === "GD") return "GRD";
    if (str === "GT") return "GTM";
    if (str === "GN") return "GIN";
    if (str === "GW") return "GNB";
    if (str === "GY") return "GUY";
    if (str === "HT") return "HTI";
    if (str === "HN") return "HND";
    if (str === "HU") return "HUN";
    if (str === "IS") return "ISL";
    if (str === "IN") return "IND";
    if (str === "ID") return "IDN";
    if (str === "IR") return "IRN";
    if (str === "IQ") return "IRQ";
    if (str === "IE") return "IRL";
    if (str === "IL") return "ISR";
    if (str === "IT") return "ITA";
    if (str === "JM") return "JAM";
    if (str === "JP") return "JPN";
    if (str === "JO") return "JOR";
    if (str === "KZ") return "KAZ";
    if (str === "KE") return "KEN";
    if (str === "KI") return "KIR";
    if (str === "KW") return "KWT";
    if (str === "KG") return "KGZ";
    if (str === "LA") return "LAO";
    if (str === "LV") return "LVA";
    if (str === "LB") return "LBN";
    if (str === "LS") return "LSO";
    if (str === "LR") return "LBR";
    if (str === "LY") return "LBY";
    if (str === "LT") return "LTU";
    if (str === "LU") return "LUX";
    if (str === "MG") return "MDG";
    if (str === "MW") return "MWI";
    if (str === "MY") return "MYS";
    if (str === "MV") return "MDV";
    if (str === "ML") return "MLI";
    if (str === "MT") return "MLT";
    if (str === "MH") return "MHL";
    if (str === "MR") return "MRT";
    if (str === "MU") return "MUS";
    if (str === "MX") return "MEX";
    if (str === "FM") return "FSM";
    if (str === "MC") return "MCO";
    if (str === "MN") return "MNG";
    if (str === "ME") return "MNE";
    if (str === "MA") return "MAR";
    if (str === "MZ") return "MOZ";
    if (str === "MM") return "MMR";
    if (str === "NA") return "NAM";
    if (str === "NR") return "NRU";
    if (str === "NP") return "NPL";
    if (str === "NL") return "NLD";
    if (str === "NZ") return "NZL";
    if (str === "NI") return "NIC";
    if (str === "NE") return "NER";
    if (str === "NG") return "NGA";
    if (str === "NU") return "NIU";
    if (str === "NO") return "NOR";
    if (str === "OM") return "OMN";
    if (str === "PK") return "PAK";
    if (str === "PW") return "PLW";
    if (str === "PA") return "PAN";
    if (str === "PG") return "PNG";
    if (str === "PY") return "PRY";
    if (str === "PE") return "PER";
    if (str === "PH") return "PHL";
    if (str === "PL") return "POL";
    if (str === "PT") return "PRT";
    if (str === "QA") return "QAT";
    if (str === "KR") return "KOR";
    if (str === "MD") return "MDA";
    if (str === "RO") return "ROU";
    if (str === "RU") return "RUS";
    if (str === "RW") return "RWA";
    if (str === "KN") return "KNA";
    if (str === "LC") return "LCA";
    if (str === "VC") return "VCT";
    if (str === "WS") return "WSM";
    if (str === "SM") return "SMR";
    if (str === "ST") return "STP";
    if (str === "SA") return "SAU";
    if (str === "SN") return "SEN";
    if (str === "RS") return "SRB";
    if (str === "SC") return "SYC";
    if (str === "SL") return "SLE";
    if (str === "SG") return "SGP";
    if (str === "SK") return "SVK";
    if (str === "SI") return "SVN";
    if (str === "SB") return "SLB";
    if (str === "SO") return "SOM";
    if (str === "ZA") return "ZAF";
    if (str === "SS") return "SSD";
    if (str === "ES") return "ESP";
    if (str === "LK") return "LKA";
    if (str === "SD") return "SDN";
    if (str === "SR") return "SUR";
    if (str === "SZ") return "SWZ";
    if (str === "SE") return "SWE";
    if (str === "CH") return "CHE";
    if (str === "SY") return "SYR";
    if (str === "TJ") return "TJK";
    if (str === "TH") return "THA";
    if (str === "MK") return "MKD";
    if (str === "TL") return "TLS";
    if (str === "TG") return "TGO";
    if (str === "TK") return "TKL";
    if (str === "TO") return "TON";
    if (str === "TT") return "TTO";
    if (str === "TN") return "TUN";
    if (str === "TR") return "TUR";
    if (str === "TM") return "TKM";
    if (str === "TV") return "TUV";
    if (str === "UG") return "UGA";
    if (str === "UA") return "UKR";
    if (str === "AE") return "ARE";
    if (str === "GB") return "GBR";
    if (str === "TZ") return "TZA";
    if (str === "US") return "USA";
    if (str === "UY") return "URY";
    if (str === "UZ") return "UZB";
    if (str === "VU") return "VUT";
    if (str === "VE") return "VEN";
    if (str === "VN") return "VNM";
    if (str === "YE") return "YEM";
    if (str === "ZM") return "ZMB";
    if (str === "ZW") return "ZWE";
    else return str;
    }


Result :




I think, you should able to intergrete with google and let me know if you any concern on this topic.



Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Bill and Rajesh,

I just wanted to make sure you were aware that this year, Google changed its pricing structure as follows:
  • All Google Maps Platform API requests must include an API key; we no longer support keyless access.
  • You must enable billing on each of your projects.
Full documentation can be found here:
https://developers.google.com/places/web-service/usage-and-billing

So I think what you're asking about should be possible, but I wanted to make sure you knew about this recent change on the Google side. 
Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb
Thanks guys.  I do have an account.

Photo of Bill Fox

Bill Fox

  • 7,954 Points 5k badge 2x thumb

Rajesh,

You may be the person who can do this or maybe you have already done it.  I currently use a product, jotfrom, to create forms that need a payment with Paypal.  I would like to use Skuid.  Here is how I build it in jotform.
https://drive.google.com/file/d/1aOOymKvlmfrRmpBgMNOy87KQ0YRlGfye/view

Here is what the finished product looks like
https://form.jotform.com/81755030975259

Thanks,
Bill