0

I created a lwc component which will use phone number of the contact page. This form is placed in the contact detailed page. If the number is edited in the contact standard form, the value in the custom lwc form is not changed. Only after the manual refresh the value is changed in the lwc form. Is it there anyway to automatically refresh the lwc form if the values in the database changed.

import { LightningElement, api, track, wire } from 'lwc';
import getBillAddress from '@salesforce/apex/accountController.getBillingAddress';

export default class BillingAddressAccountMap extends LightningElement {
    @api recordId;
    @track billAddress;
    @track mapMarkers = [];

    zoomLevel = 15;

    connectedCallback(){
        this.getAddress();
    }

    getAddress(){
        getBillAddress({ id: this.recordId}).then(data => {
            if (data !== "" && data !== undefined) {
                this.error = undefined;
                this.billAddress=JSON.stringify(data);
                var address=JSON.parse(this.billAddress);

                this.mapMarkers = [
                    {
                        location: {
                            Street: address["BillingAddress"]["street"],
                            City: address["BillingAddress"]["city"],
                            State: address["BillingAddress"]["state"],
                            Country: address["BillingAddress"]["country"],
                            PostalCode: address["BillingAddress"]["postalCode"],
                        },
                        title: address["Name"],

                    },
                ];
            }
        }).catch(error => {
            this.error = error;
            this.setDefaultImage();
        });
    }

}

This is my code. I created a map to display the billing address. If the address is edited it won't affect in the map component.

0

Finally I found an answer to this.

I used the 'lightning/uiRecordApi' for this. Its like a wired adapter to get invoked for each time whenever there is changes in the record. There are so many standard methods defined. Please refer this link.

I used getRecord method in my form.

Here is my sample code which worked for me.

import { LightningElement, api, track, wire } from 'lwc';

import getBillAddress from '@salesforce/apex/accountController.getBillingAddress'; import { getRecord } from 'lightning/uiRecordApi';

export default class BillingAddressAccountMap extends LightningElement { @api recordId; @track billAddress; @track mapMarkers = []; @track noAddress=false; @track message='';

zoomLevel = 15;

@wire(getRecord,{ recordId: '$recordId',fields: ['Account.Name'] })
getAccountAddress({data,error}){
    if(data){
        this.getAddress();
    }
    else{
        console.log(JSON.stringify(error));  
    }  
}

connectedCallback(){
    this.getAddress();
}

getAddress(){
    getBillAddress({ id: this.recordId}).then(data => {
        if (data !="" && data != 'null' && data!='undefined') {
            this.mapMarkers=[];
            this.billAddress=JSON.stringify(data);
            var address=JSON.parse(this.billAddress);
            var adCheck=address["BillingAddress"]; //check if the billing address is null or not

            if(typeof adCheck == 'undefined'){
                this.message='No billing address has been provided';
                this.noAddress=true;
            }
            else{
                var country=address["BillingAddress"]["country"];
                var state=address["BillingAddress"]["state"];
                var city=address["BillingAddress"]["city"];
                var postalcode=address["BillingAddress"]["postalCode"];
                var street=address["BillingAddress"]["street"];

                if(typeof country == 'undefined' && typeof city == 'undefined' && typeof state == 'undefined' && typeof postalcode == 'undefined'){
                    this.noAddress=true;
                    this.message='More Billing Address details are needed in order to show the users location on the map';
                }
                else{
                    this.noAddress=false;
                    this.mapMarkers = [
                        {
                            location: {
                                Street: street,
                                City: city,
                                State: state,
                                Country: country,
                                PostalCode: postalcode,
                            },
                            title: address["Name"],                      
                        },
                    ];   
                }  
            }               
        }
    }).catch(error => {
        console.log(error.message);
    });
}

}

| improve this answer | |
0

You can add following condition in lwc component:

<template if:true={reloadMap} >
   <c:mapComponent></c:mapComponent>
</template>

Make the reloadMap attribute to false and make it true then it will rendered the mapComponent.

| improve this answer | |

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.