0

I have actually 2 Lightning web components- 1.) lwcPropertyList 2.) lwcProperyDetail

USECASE -> When I update any of the field on the record-from(present on lwcPropertyDetail), it is required that the apex method(ApexWireMethodToProperty) must be called again. I'am using 'refreshApex()' but it is not working?

lwcPropertyList.js

import { LightningElement, wire } from 'lwc';
import { CurrentPageReference } from 'lightning/navigation';
import getPropertyList from '@salesforce/apex/MyPropertyController.getPropertyList'
import { registerListener, unregisterAllListeners, fireEvent } from 'c/pubsub';
import { refreshApex } from '@salesforce/apex';
const DELAY = 100;
export default class LwcPropertyList extends LightningElement {

    searchKey = '';
    maxPrice = 9999999;
    bedrooms = 0;
    bathrooms = 0;
    connectedCallback() {
        registerListener(
            'dreamhouse__filterChange',
            this.handleFilter,
            this
        );
        registerListener(
            'PropertyDetailUpdate',
            this.handleUpdate,
            this
        );
        console.log('connected callback called');
    }
    disconnectedCallback() {
        console.log('disconnected');
        unregisterAllListeners(this);
    }

    @wire(CurrentPageReference) pageRef;
    @wire(getPropertyList, {
        searchKey: '$searchKey',
        maxPrice: '$maxPrice',
        bedrooms: '$bedrooms',
        bathrooms: '$bathrooms'
    })
    properties;

    handleFilter(filters) {
        window.clearTimeout(this.delayTimeout);
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout = setTimeout(() => {

                this.searchKey = filters.searchKey,
                this.maxPrice = filters.maxPrice,
                this.bedrooms = filters.bedrooms,
                this.bathrooms = filters.bathrooms
        }, DELAY);
        console.log('handle filters' + filters);
    }
    **handleUpdate(payload) {
        refreshApex(this.properties);
        console.log('handleUpdate');
    }**
   handlePropertySelected(event) {
        console.log('application event is fired from here');
        fireEvent(this.pageRef, 'dreamhouse__propertySelected', event.detail);
        console.log('fired appli event' + event.detail);
    }
} 

lwcPropertyDetail.js

import { LightningElement, api, wire } from 'lwc';
import { registerListener, unregisterAllListeners,fireEvent } from 'c/pubsub';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { CurrentPageReference } from 'lightning/navigation';
import NAME_FIELD from '@salesforce/schema/Property__c.Name';
import BED_FIELD from '@salesforce/schema/Property__c.Beds__c';
import BATH_FIELD from '@salesforce/schema/Property__c.Baths__c';
import PRICE_FIELD from '@salesforce/schema/Property__c.Price__c';
import BROKER_FIELD from '@salesforce/schema/Property__c.Broker__c';
import PICTURE_FIELD from '@salesforce/schema/Property__c.Picture__c';

export default class LwcPropertyDetail extends LightningElement {
    propertyId;
    propertyFields = [BED_FIELD, BATH_FIELD, PRICE_FIELD, BROKER_FIELD];

    @wire(CurrentPageReference) pageRef;

    @wire(getRecord, {
        recordId: '$propertyId',
        fields: [NAME_FIELD, PICTURE_FIELD]
    })
    property;
    get propertyName() {
        return getFieldValue(this.property.data, NAME_FIELD);
    }

    get propertyPicture() {
        return getFieldValue(this.property.data, PICTURE_FIELD);
    }
    connectedCallback() {
        registerListener(
            'dreamhouse__propertySelected',
            this.handlePropertySelected,
            this
        );
    }
    disconnectedCallback() {
        unregisterAllListeners(this);
    }

    handlePropertySelected(propertyId)       
    {
        console.log('sibling handler' + propertyId);
        this.propertyId = propertyId;
    }
    handleSubmit(event)
    {
        event.preventDefault();
        this.template.querySelector('lightning-record-form').submit();
        fireEvent(this.pageRef,'PropertyDetailUpdate','');
        console.log('handle Submit');
    }
}

Record-form on lwcPropertyDetail

<lightning-record-form
object-api-name="Property__c" 
record-id={propertyId}
fields={propertyFields}
columns="2" 
onsubmit={handleSubmit}></lightning-record-form>

Your Answer

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

Browse other questions tagged or ask your own question.