2

App screenshot

I can't seem to figure out what I am missing.

I have a component that is supposed to display data after it receives an id of the exact record hence I am using an imperative call. I can see in the log that the data is received but my component is not reloading with the data.

<template>
    <lightning-card  title="Advisor Details">
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <template if:true={advisor}>
            <lightning-layout vertical-align="center">
                <lightning-layout-item padding="around-small">
                   <p>{advisor.Name}</p> 
                </lightning-layout-item>
                  <lightning-layout-item padding="around-small">                    
                    <p>{advisor.Company}</p>                    
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <p>{advisor.Title}</p>
                </lightning-layout-item>
                <lightning-layout-item padding="around-small">
                    <p>{advisor.Engagement}</p>
                </lightning-layout-item>
            </lightning-layout>
            
        </template>
        <template if:false={advisor}><p>No advisor data available.</p></template>   
          
        <p slot="footer">Card Footer</p>
    </lightning-card>
</template>

the js.

import { LightningElement, wire, track } from 'lwc';
import {subscribe, MessageContext} from 'lightning/messageService';
import getCompleteAdvDetails from '@salesforce/apex/GetAdvisorRecords.getCompleteAdvDetails';
import RECORD_SELECTED_CHANNEL from  '@salesforce/messageChannel/Record_Selected__c';

export default class PartnerDetailComponent extends LightningElement {
    recordId;
    details;
    @track advisor;
    @wire(MessageContext)
    messageContext;


    subscribeToMessageChannel(){
        this.subscription = subscribe(
            this.messageContext,
            RECORD_SELECTED_CHANNEL,
            (message) => this.handleMessage(message)
        );
    
    }
    handleMessage(message){
        if(message){
        this.recordId = message.recordId;        
        console.log('Received message ' + this.recordId);
--------------------------[![enter image description here][1]][1]
        //I have hardcoded the values here but the advisor property doesn't //cause the component to rerender
        let pAdv = {};
        pAdv.Name = 'Bossman';
        pAdv.Company = 'RBL';
        pAdv.Title = 'Senior Counsel';
        pAdv.Engagement = 'Advisor';
        
        this.advisor = pAdv;
-------------------

        getCompleteAdvDetails( { mentId: this.recordId})
        .then((result) => {
            this.details = result;
            if (this.details) {
                console.log('Successful details retrieval!'+ JSON.stringify(this.details));
                 this.advisor = this.details;
                        
               
                    let pAdvisor = {};
                    let fName = this.advisor.First_Name__c;
                    let lName = this.advisor.Last_Name__c;
                    pAdvisor.Name = fName + ' ' + lName;
                    pAdvisor.Id = this.advisor.Id;
                    pAdvisor.Title =this.advisor.Title__c;             
                    pAdvisor.Company = this.advisor.Company__c;
                    pAdvisor.Engagement = 'Type of Engagement '+ this.advisor.Type_of_Engagement__c;
                    // pAdvisor.Mentees = 'Number of Mentees '+element.Number_of_Mentees__c;
                    // pAdvisor.Email = 'Email '+element.Email__c;
                    // pAdvisor.Phone = 'Phone' + element.Phone__c;
                    // pAdvisor.Expertise = 'Aread of Expertise '+element.Area_ofS_Expertise__c;
                    console.log('PAdvisor ' + JSON.stringify(pAdvisor));                 
              
                this.advisor = pAdvisor ;
                console.log('Updated advisor. '+ JSON.stringify(this.advisor));

      
            }
        }) 
        .catch((error) => {
            this.error = error;
            console.log('Error '+ this.error);
        });
    }
        
    }
    connectedCallback() {
        this.subscribeToMessageChannel();
    }
}

I have also tried getRecordNotifyChange([{recordId: this.recordId}]) and it was not successful. I am not sure I did it correctly though since I assumed that the advisor property used in template will be updated when I update the recordId.

Any pointers?

Thanks!

Console output

8
  • Is advisor property marked as track? – Raul Apr 15 at 12:50
  • Could You provide more details - full js class code. advisor should be decoreated with @track. – gpoluch Apr 15 at 12:53
  • Yes it is @Raul. I have updated the js part. – Pauline Apr 15 at 12:59
  • Wondering if it helps to also pass the scope to the subscribe method. On another note, you should also unsubscribe the event as a best practice. – Raul Apr 15 at 13:20
  • Thanks Raul. Could you explain what you mean by passing the scope? The subscribe method is working ok since it is fetching the Id as expected. I have taken note on the best practice. Will do that. – Pauline Apr 15 at 13:23
1

You dont need the @track annotation since you are reassigning the entire variable. Can you try these 2 things? Deep clone the object (just as an attempt) and before assignin the value, assign it to undefined like:

this.advisor = undefined;
this.advisor = JSON.parse(JSON.strinify(pAdv));
1
  • That didn't work either. I have decided to change the design of the app. Thanks anyway. – Pauline Apr 18 at 5:22
1

I think the problem is that you are reassigning the variable, and overwritting the actual tracked object.

You can both:

this.advisor.Name = 'Bossman'; //As fas as it is @tracked

Or:

this.advisor = {...pAdv};

Or:

this.advisor = Object.assign({},pAdv);

For not tracked variable or reassignations you need to use {} syntax or Object.assign. If you don't the change will not be noticed by the framework.

Hope it helps

2
  • I will try this. Thanks for your help. – Pauline Apr 19 at 17:02
  • Let me know, but it should work in any of that ways. – Javier Ponce Apr 19 at 17:54
-1

Javier, thanks for your pointers.

I finally got it to work in another context.

the reassignment worked like this..

this.displayResults = [...this.displayResults, this.searchResult];

The component gets rerendered and captures the new elements.

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.