function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
JohnDuraiJohnDurai 

Lightning Model component refresh in UI

Hi All - I have a LWC modal notes component in record page, when i enter something in notes and click save button then it is getting saved which is expected behaviour and working fine but when user tries to open the notes component again and enter something but not saved the updated one rather he clicks either cancel or close icon, then opens the modal component again the user is able to see the drafted notes which should not happen in my case only when it is saved then it should show.

For example - in the below snap, only "Take a note" is saved and "drafted note" is not saved just user drafted and clicks either cancel or close but when again the modal component opens it shows the drafted one also. can someone help me how to resolve this issue?

User-added image

Here is my HTML and JS code:

HTML -

<template>
    <template if:true={accessible}>
    <lightning-button variant="neutral"
        label={buttonLabel} 
        title={buttonLabel} 
        icon-name={iconName}
        onclick={openNotesModal}></lightning-button>
    <!--Use template if:true to display/hide popup based on isModalOpen value--> 
    <template if:true={isNotesModalOpen}>
        <!-- Modal/Popup Box LWC starts here -->
        <section role="dialog" tabindex="-1" aria-labelledby="notes-modal-heading" aria-modal="true" aria-describedby="notes-modal-content" class="slds-modal slds-fade-in-open">
            <!--we need this relative tag so that the spinner shows up inside the modal-->
            <div class="slds-modal__container sjp-cfr">
            <div class="slds-is-relative">
                <!--Loading icon-->
                <template if:true={isLoading}>
                    <div>
                        <lightning-spinner alternative-text="Loading" size="large" variant="brand"></lightning-spinner>
                    </div>
                </template>
                
                    <!-- Modal/Popup Box LWC header here -->
                    <header class="slds-modal__header">
                        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeNotesModal}>
                            <lightning-icon icon-name="utility:close"
                                alternative-text="close"
                                variant="inverse"
                                size="small" ></lightning-icon>
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h2 id="notes-modal-heading" class="slds-text-heading_medium slds-hyphenate">{modalTitle}</h2>
                    </header>
                    <!-- Modal/Popup Box LWC body starts here -->
                    <div class="slds-modal__content slds-p-around_medium" id="notes-modal-content">
                        <!-- TODO: Replace with Custom Input Field -->
                           <template if:false={enableNotes}>
                             <lightning-textarea name="notesInput" 
                                maxlength={fieldlength}
                                label="Notes"
                                placeholder="Type here…"
                                value={fieldValue}
                                onchange={handleChange}
                                variant="label-hidden"
                                disabled ={disabled}> </lightning-textarea>
                            </template> 
                    </div>
                    <!-- Modal/Popup Box LWC footer starts here -->
                    <footer class="slds-modal__footer">
                        <lightning-button variant="neutral" 
                            label="Cancel" 
                            title="Cancel" 
                            class="slds-m-left_x-small"
                            onclick={closeNotesModal}></lightning-button>
                            <template if:true={updateable}>
                        <lightning-button variant="brand" 
                            label="Save" 
                            title="Save" 
                            class="slds-m-left_x-small"
                            onclick={saveNotes}></lightning-button>
                        </template>
                    </footer>
                </div>
            </div>
        </section>
        <div class="slds-backdrop slds-backdrop_open"></div>
    </template>
</template> 
</template>


JS code:

import { LightningElement, api, wire, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import getFieldInfo from '@salesforce/apex/CFRNotesController.getFieldInfo';
import saveNotesInfo from '@salesforce/apex/CFRNotesController.saveNotesInfo';
import cfrCustomStyles from '@salesforce/resourceUrl/cfrCustomStyles';
import { showToast } from 'c/commonUtils';
const EMPTY_NOTE_ICON = 'action:new';
const FILLED_NOTE_ICON = 'action:new_note';
export default class CfrNotes extends LightningElement {
    
    @api recordId;
    @api fieldName;
    @api modalTitle;
    @api buttonLabel = 'Notes';
    @track isNotesModalOpen = false;
    @track fieldValue = '';
    @track iconName = EMPTY_NOTE_ICON;
    @track isLoading = false;
    @track accessible = false;
    @track updateable = false;
    @track disabled = false;
    @track fieldlength=0;
    /* -----------------------------------------
        ON LOAD 
       ----------------------------------------- */
    renderedCallback() {
        Promise.all([
            loadStyle(this, cfrCustomStyles)
        ]);
    }
    /* -----------------------------------------
        WIRE METHODS 
       ----------------------------------------- */
    @wire(getFieldInfo, { recordId: '$recordId', fieldName: '$fieldName' })
    wiredFieldInfo({error, data}){
        if(error){
            this.processError(error);
        } else if(data){
            var fieldData = JSON.parse(JSON.stringify(data));
            if(data.fieldDescribe){
                fieldData.fieldDescribe = JSON.parse(data.fieldDescribe);
                if(!this.modalTitle){
                    this.modalTitle = fieldData.fieldDescribe.label;
                }
                  this.accessible = data.fieldAccess;
                  this.updateable= fieldData.fieldDescribe.updateable;
                  this.disabled = !(this.updateable);
                  this.fieldlength = fieldData.fieldDescribe.length;
            }
            if(data.fieldValue){
                this.fieldValue = data.fieldValue;
                this.iconName = FILLED_NOTE_ICON;
            }
        }
    };
    /* -----------------------------------------
        HANDLER METHODS 
       ----------------------------------------- */
    openNotesModal(){
        this.isNotesModalOpen = true;
    }
    handleChange(event){
        this.fieldValue = event.target.value;
    }
    closeNotesModal(){
        this.isNotesModalOpen = false;
    }
    saveNotes(){
        var context = this;
        this.isLoading = true;
        saveNotesInfo({recordId: this.recordId, fieldName: this.fieldName, fieldValue: this.fieldValue})
            .then((result) => {
                context.showSuccessToast('Success', context.modalTitle + ' successfully saved');
            })
            .catch((error) => {
                context.processError(error);
            })
            .finally(() => {
                context.isNotesModalOpen = false;
                this.isLoading = false;
                if (this.fieldValue === '') {
                    this.iconName = EMPTY_NOTE_ICON;
                    
                } else {
                    this.iconName=FILLED_NOTE_ICON;
                    
                }
            });
    }
    /* -----------------------------------------
        PRIVATE METHODS 
       ----------------------------------------- */
    processError(error){
        console.error(error);
        let message = 'Unknown error';
        try{
            if (typeof error === 'string') {
                message = error;
            } else if (Array.isArray(error.body)) {
                message = error.body.map(e => e.message).join(', ');
            } else if (typeof error.body.message === 'string') {
                message = error.body.message;
            }
        } catch (e){
        }
        this.showErrorToast('Error', message);
    }
    showErrorToast(title, message){
        showToast(this, title, message, 'error');
    }
    showSuccessToast(title, message){
        showToast(this, title, message, 'success');
    }
}

Best Answer chosen by JohnDurai
ANUTEJANUTEJ (Salesforce Developers) 
>> https://salesforce.stackexchange.com/questions/251299/force-refresh-view-in-lwc

>> https://salesforce.stackexchange.com/questions/251118/refreshview-for-lightning-web-component

>> https://www.youtube.com/watch?v=OgkE8zNJxr0

I was able to find the above links that mention on how to refresh the lightning web component without refreshing the whole page, you can try checking them.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.

All Answers

ANUTEJANUTEJ (Salesforce Developers) 
Hi John,

As you are clicking the cancel button can you check what is the notes value that is being held, also can you check if the value is being changed to the original value if you are refreshing the page i.e., if the drafted note is being removed on refresh?

Looking forward to your response.

Thanks.
JohnDuraiJohnDurai
Hi Anutej - yes, you are correct when we refresh the page that drafted note will dissappear but need to do that at component level itself without refreshing the whole page
ANUTEJANUTEJ (Salesforce Developers) 
>> https://salesforce.stackexchange.com/questions/251299/force-refresh-view-in-lwc

>> https://salesforce.stackexchange.com/questions/251118/refreshview-for-lightning-web-component

>> https://www.youtube.com/watch?v=OgkE8zNJxr0

I was able to find the above links that mention on how to refresh the lightning web component without refreshing the whole page, you can try checking them.

Let me know if it helps you and close your query by marking it as solved so that it can help others in the future.  

Thanks.
This was selected as the best answer