2

I am trying to use the "Autocomplete on Standard Addresses" feature in a custom lightning component by using the force:inputField component:

<force:inputField value="{!v.contact.MailingAddress}" aura:id="address" change="{!c.handleChange}"/>

The component is looking good, you can go on "Search Address", a new window opens where you can enter the address. After you have chosen an address the window closes and the component's fields are populated.

enter image description here

The problem is that I can not access the new values.

value="{!v.contact.MailingAddress}" remains unchanged

change="{!c.handleChange}" dose not fire, I guess because "value" will not change

With Lightning Inspector I found this event:

force:saveAddressLookup 
APP
Parameters
-{
    "country": "Germany",
    "postalCode": "50858",
    "countryCode": "DE",
    "latitude": 50.93117549999999,
    "longitude": 6.844957099999988,
    "street": "Kronstädter Straße 13",
    "city": "Köln",
    "cmpId": "8:2120;a"
}

Too bad I can't put a handler on it :(

Also I inspected the components and inside the force:inputField component there is a force:inputAddress component:

Attribute & Facet Value Provider
<force:inputAddress globalId="8:2120;a" dir="ltr" actionable="true" ariaDescribedBy="" value="{...}" visible="true" disableDoubleClicks="false" showErrors="true" errors="[]" errorComponent="[]" fieldHelpComponent="[]" isCompound="true" required="false" updateOn="change" updateOnDisabled="false" labelClass="" labelPosition="top" useSpanLabel="false" requiredIndicatorClass="" disabled="false" domId="8:2120;a" requiredIndicator="[1]" fieldApiNames="[]" fieldErrorList="[]" street="Kronstädter Straße 13" city="Köln" state="" stateComponent="[]" postalCode="50858" country="Germany" countryComponent="[]" priv_url="https://test-location.force.com/maps/JavascriptHandler?type=AddressAutocomplete&origRequestId=TID%3A1345870400008f6d6c&country=US&org=00D4E0000000lqX&lang=en×tamp=1511338590426&AuthSignature=gOcNY015i3AbVJkWQa-j-TtlKPs%3D&version=210.0">

value:{!v.contact.MailingAddress}
street:Münchener Str. 36
street_number:""
locality:Mering
country:Germany
postal_code:86415

As I can see, the "value" remains unchanged, and the new values are stored in the attributes city, postalCode, Country etc. to witch I do not have access.

Anyone managed to access this attributes?

LE: Not really sure if the "full code" will help, but here it is

    Component

<aura:component implements="force:hasRecordId" access="global" controller="contactController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <aura:attribute name="recordId" type="String" default="" access="GLOBAL"/>
    <aura:attribute name="contact" type="Contact" default="{'sobjectType':'Contact', 'Name': '', 'MailingAddress': ''}" />

    <force:inputField value="{!v.contact.MailingAddress}" aura:id="address" change="{!c.handleChange}"/>    

    <ui:button press="{!c.display}" label="Display"/>

</aura:component>

Controller

({
    doInit: function(component, event, helper){
        //getContactCtrl is just getting a contact associated with the opportunity
        var action = component.get("c.getContactCtrl");
        action.setParams({oppId : component.get("v.recordId")});

        action.setCallback(component, function(response) {
            if(action.error && action.error.length){
                console.log(JSON.stringify(response));
            }
            var state = response.getState();
            var contact = response.getReturnValue();

            if (state === "SUCCESS") {

                component.set("v.contact", contact);

            }
            else if (state === "INCOMPLETE") {
            }
            else if (state === "ERROR") {
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +
                                 errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }
        });
        $A.enqueueAction(action);

    },

    handleChange : function(cmp, event, helper){
        console.log('Address changed');
    },

    disaply : function(component, event, helper){
        console.log(JSON.stringify(component.get('v.contact').MailingAddress));
        console.log(component.find('address'));
        var add = component.find('address');
        console.log(JSON.stringify(add));
        console.log(JSON.stringify(add.get('v.value')));
        console.log(JSON.stringify(add.get('v.value').city));
        console.log(add.get('v.city'));
        console.log(add.get('city'));
        console.log(component.get('v.contact').MailingPostalCode);
    }
})
  • Hello @Eugen, It would be great if you can please share the code as well to figure out the solution. – Arpit Sethi Nov 22 '17 at 17:10
0

Unfortunately as of now there is no way to directly display compound field (i.e. mailing address) in lightning. All you can do is, instead of querying mailingAddress, query fields like city, zip, state address from contact and concatenate them in javascript controller to form Mailing Address.

  • I don't care about displaying the current address of the contact, I want to be able to change the address by receive predictions from Google. The component <force:inputField value="{!v.contact.MailingAddress}" aura:id="address" change="{!c.handleChange}"/> is doing the google prediction thing, but after I have chosen a predicted address, and the fields are populated as you can see in the screenshot, I can not access the new values. {!v.contact.MailingAddress} still has the old values (eg: postalCode for MaillingAddress is still 86415 but in the screenshot I have postalCode 50858) – Eugen S. Nov 23 '17 at 9:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.