2

I will elaborate more than necessary on the issue i am facing, so that if i there is an entirely better approach to implement what i am doing, someone can suggest that.

I am building a lightning community page to show a user's cases. Page is divided into 3 columns. Leftmost column shows all the cases by the user (along with subject, status and casenumber), middle column shows comments on the case that is selected in leftmost column, rightmost column shows little more details of the case that is selected in leftmost column.

Please see the image below.

enter image description here

Crux of the issue is that when someone, clicks "Close case" button in rightmost column, it calls server to change status to "Closed". This works fine, but then i have to update the status being shown in leftmost column, and that where i am having issues.

These are the details of the implementation.

Each of the column is a component and all 3 of them are in a container component.

Code for the container component -

HTML of container component

<template>
   <div>
    <lightning-layout>
            <lightning-layout-item size="4">
                    <c-ma-my-cases-list-view oncaseselect={handlecaseselect} ></c-ma-my-cases-list-view>
            </lightning-layout-item>
            
            <lightning-layout-item size="4">
                    <c-ma-my-cases-comment selectedcaseid={selectedcaseid}></c-ma-my-cases-comment>
            </lightning-layout-item>

            <lightning-layout-item size="4">
                   <c-ma-my-cases-detail selectedcaseid={selectedcaseid}></c-ma-my-cases-detail>                  
            </lightning-layout-item>

    </lightning-layout>
  </div>
</template>

JS of container component

import { LightningElement, track } from 'lwc';

export default class MaMyCasesContainer extends LightningElement {
    selectedcaseid;

    handlecaseselect(event){
        const caseId = event.detail;
        this.selectedcaseid = caseId;
    }
}

Details of leftmost component - It retrieves cases from server in a custom data structure, loops over them and uses a child component to display individual elements

HTML of leftmost component maMyCasesListView

<template>
    <div class="container slds-p-around_large slds-scrollable_y slds-theme_shade">
        <div>
            <!-- Server call successful logic-->
            <template if:true={caseswrapper}>
                <lightning-layout class="slds-grid slds-grid_vertical" horizontal-align="left">
                    <template for:each={caseswrapper} for:item="currentcase">

                        <c-ma-case-list-item
                            data-id={currentcase.caseId}
                            key={currentcase.caseId}
                            macasewrapper={currentcase}
                            onselect={handleSelect}
                        ></c-ma-case-list-item>
                        
                    </template>
                </lightning-layout>
            </template>
        </div>      
    </div>
</template>

JS of leftmost component maMyCasesListView

import { LightningElement, wire, track, api } from 'lwc';
import getCaseList from '@salesforce/apex/MA_MyCasesController.getCaseWrapperList';

export default class MaMyCasesListView extends LightningElement {

    selectedcasewrapper;
    @track caseswrapper;
    @track error;
    @track isLoading;


    constructor(){
        super();
        this.isLoading = true;
        getCaseList()
            .then(result =>{
                this.caseswrapper = result;
                this.error = undefined;
                this.isLoading = false;
            })
            .catch(error => {
                this.error = error;
                this.caseswrapper = undefined
                this.isLoading = false;
                this.showErrorToast();
            })
    }

    handleSelect(event) {
        const caseId = event.detail;
        this.toggleListItems('selected', caseId);
        this.selectedcasewrapper = this.caseswrapper.find(
            (macase) => macase.caseId === caseId
        );
        const selectEvent = new CustomEvent('caseselect', {
            detail: caseId
        });
        // Fire the custom event
        this.dispatchEvent(selectEvent);
    }
}

As visible from html of above component, there is an inner component that shows individual list item.

HTML of component that shows individual case list item maCaseListItem

<template>
    <div onclick={handleClick}>
        <lightning-layout horizontal-align="left" class="slds-grid slds-grid_vertical slds-text-align--left">
            <lightning-layout-item horizontal-align="left" class="slds-text-align--left">
                <b>{macasewrapper.Subject}</b>
            </lightning-layout-item>
            <lightning-layout-item class="slds-text-align--left slds-m-top_small">
                <lightning-layout>
                    <lightning-layout-item  horizontal-align="left" size="4">{macasewrapper.Status}</lightning-layout-item>
                    <lightning-layout-item horizontal-align="right">{macasewrapper.CaseNumber}</lightning-layout-item>
                </lightning-layout>
            </lightning-layout-item>
        </lightning-layout>
    </div>   
</template>

JS of component that shows individual case list item maCaseListItem

import { LightningElement, api } from 'lwc';

export default class MaCaseListItem extends LightningElement {
    @api macasewrapper;
    
    handleClick(event) {

        const selectEvent = new CustomEvent('select', {
            detail: this.macasewrapper.caseId
        });
        // Fire the custom event
        this.dispatchEvent(selectEvent);
    }
}

So leftmost component shows list of cases. When a user clicks on one of them, an event "caseselect" is fired by component maCaseListItem with case ID as the event detail. The container component catches it in function handlecaseselect and stores it in attribute selectedcaseid.

Now the container component passes this Id to second and third component, so they can retrieve more information from server and show relevant data. I will skip the second component, as it shows casecomments. Let's move to third component, which has Close case button. I am only focussing on close case button and removing other code for sake of brevity

HTML of third column component maMyCasesDetail

<template>
    <div if:true={localSelectedCaseId} >
    <div class="container slds-p-around_large slds-scrollable_y">
    <lightning-card>
        <!-- code to show status, created date etc -->
    </lightning-card>
    <lightning-card>
        <!-- code about showing attachments -->
    </lightning-card>
    <div class="slds-box slds-align_absolute-center slds-theme_default">
       <lightning-button variant="brand-outline" label="Close Case" title="Close the case" onclick={handleCloseClick}></lightning-button>
    </div>    
    </div> 
</div>
</template>

JS of third column component maMyCasesDetail

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import closeCase from '@salesforce/apex/MA_MyCasesController.closeCase';

export default class MaMyCasesDetail extends LightningElement {


    @track localSelectedCaseId;

    @api
    get selectedcaseid() {
        return this.localSelectedCaseId;
    }
    set selectedcaseid(value) {
        this.localSelectedCaseId = value;
    }


    @wire(getRecord, { recordId: '$localSelectedCaseId', fields: [CASENUMBER_FIELD, CASESUBJECT_FIELD, STATUS_FIELD, DESCRIPTION_FIELD, 'Case.Owner.Name', 'Case.CreatedDate'] })
    wiredRecord({ error, data }) {
        //code that gets case details from server based on localSelectedCaseId
    }


    handleCloseClick(event) {
        if (this.localSelectedCaseId && this.status != this.label.CaseClosedStatus) {
            this.isLoaded = !this.isLoaded;
            closeCase({ caseId: this.localSelectedCaseId })
                .then(result => {
                    this.caseStatus = result.Status;
                    this.handleSuccess();
                    this.status = result.Status;
                    this.sendCloseCaseDetails();
                })
                .catch(error => {
                    var errorMsg = 'Unknown error';
                    if (error.body) {
                        errorMsg = error.body.message;
                        console.log(errorMsg);
                    }
                })
        } 
    }

    sendCloseCaseDetails() {
        var caseClosedDetails = {status:this.status, id:this.localSelectedCaseId};
        const closeEvent = new CustomEvent('close', {
            detail: caseClosedDetails
        });
        this.dispatchEvent(closeEvent);
    }

}

So when user clicks on "Close Case" button, server side method updates status to "Closed", and returns the updated case. This component fires an event containing id of the case and the updated status. Parent component can catch it, but after that i cant seem to get things to work. Parent can pass them as parameters to leftmost component.

@AuraEnabled
public static Case closeCase(String caseId) {
    Case c = [Select Id, Status from Case where Id=:caseId];
    c.Status = "Closed";
    update c;
    return c;   
}

server side code that gets initial list of cases (for the leftmost component) is -

@AuraEnabled
public static List<CaseCommentWrapper> getCaseCommentWrapperList(String caseId){
    User currentUser= [select Id,timezonesidkey from user where Id =:UserInfo.getUserId()];
    List<CaseComment> allCaseComments = [Select Id, ParentId, IsPublished, CommentBody, CreatedById, CreatedBy.Name, CreatedDate, SystemModstamp, LastModifiedDate, LastModifiedById, IsDeleted From CaseComment where ParentId=:caseId ORDER BY CreatedDate ASC];
    List<CaseCommentWrapper> allCaseCommentWrapper = new List<CaseCommentWrapper>();
    for(CaseComment c : allCaseComments){
        String createdDateStringFormat = getDateInStringFormat(c.CreatedDate,currentUser.timezonesidkey);
        Boolean isCurrentUserAuthor = (currentUser.Id == c.CreatedById)?True:False;
        String caseCommentId = String.ValueOf(c.Id);
        allCaseCommentWrapper.add(new CaseCommentWrapper(caseCommentId,c.CommentBody, c.CreatedBy.Name, createdDateStringFormat,isCurrentUserAuthor));
    }
    return allCaseCommentWrapper;
}

public class CaseWrapper{
    @AuraEnabled
    public Id caseId;
    @AuraEnabled
    public String CaseNumber;
    @AuraEnabled
    public String Status;
    @AuraEnabled
    public String Subject;

    public CaseWrapper(Id caseId,String CaseNumber, String Status, String Subject){
        this.caseId = caseId;
        this.CaseNumber = CaseNumber;
        this.Status = Status;
        this.Subject = Subject;
    }
}

So the third (rightmost column) fires an event that has id of the case for which status was updated, and the updated status as event details.

What's the good way to update that particular case's status on the HTML of the leftmost component? I have tried where parent component handles the event, set 2 attributes on maMyCasesListView component (leftmost column) - one attribute that depicts case Id (localcasestatuschangeid), another attribute that depicts updated status (localcasestatuschangeupdatedstatus). I tried iterating through each list item inside maMyCasesListView to see which one's case Id matches and update the status. But it doesnt show up on HTML.

this.template.querySelectorAll('c-ma-case-list-item').forEach(item => {
    console.log('iterating through list');
    if (item.macasewrapper.caseId === this.localcasestatuschangeid) {
        console.log('case found');
        item.macasewrapper.Status = this.localcasestatuschangeupdatedstatus;
    }
});

But as i said, it doesnt show up on HTML. I even find the idea of having 2 attributes - localcasestatuschangeid and localcasestatuschangeupdatedstatus - on maMyCasesListView component not very bright. Event handled by parent is an object, where event.detail had bunch of parameters. Is there a way i can just pass event.detail from container component to maMyCasesListView, and then have maMyCasesListView extract id and status from in there?

0

There are two ways you can do this, but before that, you need to make one change, you need to change the getCaseList method to wired apex method instead of calling it imperatively in the constructor.

caseListWired; // define new property

@wire(getCaseList)
getCaseListWired(value) {
    this.caseListWired = value;
    let { error, data } = value;
    if (error) {
        this.error = error;
        this.caseswrapper = undefined
        this.isLoading = false;
        this.showErrorToast();
    } else if (data) {
        this.caseswrapper = result;
        this.error = undefined;
        this.isLoading = false;
    }
}

Also, you need to import refreshApex.

import { refreshApex } from '@salesforce/apex';

With the wired method, you have two advantages, one is reduced server calls, and the other is you can refresh the cache whenever required using refreshApex.

Approach 1

Step 1

Write one public method in the leftmost component i.e. maMyCasesListView.

@api refreshCaseList(){
    refreshApex(this.caseListWired); // this is the same attribute assigned in wired method.
}

Step 2

Dispatch an event from the rightmost component maMyCasesDetail, when the case is closed, which you have already done in the handleCloseClick method.

const closeEvent = new CustomEvent('close');
this.dispatchEvent(closeEvent);

Note that, now you don't need to send any data.

Step 3

You need to handle that event in the container component and call the public method which we defined in step 1.

 <c-ma-my-cases-detail selectedcaseid={selectedcaseid} onclose={handleCloseCase}></c-ma-my-cases-detail>

JS

handleCloseCase(){
    this.template.querySelector('c-ma-my-cases-list-view').refreshCaseList();
}

Approach 2

You can use the pub-sub events i.e Lightning Messaging Service to call the refreshApex method.

Suggestions

As you are just updating the status of the case, you use the updateRecord from uiRecordApi to update the status instead of the custom apex method.

If you don't have any specific need you can eliminate the wrapper and return the case list in the getCaseList method.

2
  • I dont think making a trip to server is good idea. When the leftmost component refreshes, user loses the case selection (the case that he originally clicked on). I am hoping it can be done at UI level. With the approach written towards the end of my question, i am able to set status of the wrapper object correctly. But HTML of maCaseListViewItem component doesnt react to it. So macasewrapper's inner attribute are not trackable. I am trying to find a way to get around it. – user2957592 Aug 20 '20 at 14:16
  • Users won't lose the case as it will be stored in the selectedcaseid attribute. If you want to skip the server trip then you need to call the getCaselIst in the container component. Update that on case closure using event. Pass the same attribute to the leftmost component using API attribute. @user2957592 – rahul gawale Aug 20 '20 at 15:14

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.