0

I'm fairly new to Aura and LWC altogether. I'm overriding a standard new button with an Aura Component and calling an LWC component from there. LWC component calls another LWC component from it. I'm facing a few issues here. The component renders as a modal. In the below Aura, LWC gets called, to overcome the white background I used a listview to avoid bad UI.

Aura CMP:

<aura:component implements="lightning:actionOverride,flexipage:availableForRecordHome,lightning:hasPageReference,force:hasRecordId,force:hasSObjectName" access="global">
    <aura:attribute name="listViewFilter" type="String"/>    

    <lightning:listView aura:id="listViewAccounts"
    objectApiName="BPU_Workflow_Case__c"
    listName="{!v.listViewFilter}"
    rows="200"
    showSearchBar="true"
    showActionBar="true"
    enableInlineEdit="true"
    showRowLevelActions="true"
    />
    <div><c:bpu_workflowcaseoverrideinitiate  aura:id="childLwc" recordId="{!v.recordId}" onclose="{!c.closeSearchModal}" onfiltervalue="{!c.setListViewFilter}">

    </c:bpu_workflowcaseoverrideinitiate></div>
    
</aura:component>
  1. The backdrop of the modal becomes white whenever the aura and subsequently lwc loads. I've tried to insert a listview in Aura and it is visible in the backdrop but I want the backdrop to show the original listview only as the listview seems to be loading in the backdrop. I'm unable to hide that white background.

I've also tried to use a change aura handler where it refreshes the view, it works when new button is clicked any number of time, But when the standard Save & New button is clicked then it doesn't work.

Also, I created one more Aura component and called my LWC from it and I dynamically created this new aura from my main aura and on close of LWC Modal, I dynamically destroyed the aura, the behavior was same, New button didn't render the New Aura or LWC 2nd time.

Parent CMP

<aura:component implements="lightning:actionOverride,flexipage:availableForRecordHome,lightning:hasPageReference,force:hasRecordId,force:hasSObjectName,lightning:isUrlAddressable" access="global">
    <aura:attribute name="listViewFilter" type="String"/>    
     <aura:handler name="destroyAura" event="c:bpu_compEvent" action="{!c.handleDestroy}"/>
    <lightning:listView aura:id="listViewAccounts"
    objectApiName="BPU_Workflow_Case__c"
    listName="{!v.listViewFilter}"
    rows="200"
    showSearchBar="true"
    showActionBar="true"
    enableInlineEdit="true"
    showRowLevelActions="true"
    />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    {!v.body}    
    
</aura:component>

Parent JS

({
    doInit : function(component) {
    const recordId = component.get('v.recordId');
    $A.createComponent(
        `c:bpu_tempComp`, { "aura:id": "childAura",recordId : recordId},
        function(lwcCmp, status, errorMessage) {
            if (status === "SUCCESS") {
                console.log('parent create');
                var body = component.get("v.body");
                body.push(lwcCmp);
                component.set("v.body", body);
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.");
            }
            else if (status === "ERROR") {
                console.error("Error: " + errorMessage);
            }
        }
      );
},
    closeSearchModal : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    },
    
    setListViewFilter : function(component, event, helper) {
        console.log('aura lv: '+event.getParam('listview'));
        component.set("v.listViewFilter",event.getParam('listview'));
    },
    handleComponentEvent: function(component, event, helper){
        
        console.log('parent destroy');
        component.find("childAura").destroy();
    },
    handleDestroy : function(component,event,helper){
        if(component.find("childAura")!=null || component.find("childAura")!='undefined'){
            console.log('parent destroy call');
            component.find("childAura").destroy();
        }else{
            alert(' Component is already Destroyed ');
        }
        
    },

})

Child Aura CMP

<aura:component >
    <aura:registerEvent name="destroyAura" type="c:bpu_compEvent"/>
    <div><c:bpu_workflowcaseoverrideinitiate  aura:id="childLwc" recordId="{!v.recordId}" onabc="{!c.destroyThis}">

    </c:bpu_workflowcaseoverrideinitiate></div>
</aura:component>

Child JS

({
    destroyThis : function(component, event, helper) {
        console.log('chilg aura>>>');
        var compEvent = component.getEvent("destroyAura");
         compEvent.setParams({"message" : "Destroy" });
         compEvent.fire();
    }
})

This is how it looks, instead of that white backdrop, list view should be visible

enter image description here

  1. When the LWC component is closed or the close button is clicked, it is redirected to the list view it was called from. When we click on the new button again then the Aura gets called and list view from above renders but the LWC component doesn't render on the screen. I suppose this has something to do with cache and rendering but can't figure out a way to render the lwc component again. Tried clearing the values of attributes in renderedcallback() but it broke the UI entirely due to multiple event firing. Is there any way I can remove the component after closing and clearing the cache.

  2. From LWC I'm opening a standard new creation page and when I do a 'Save & New', the LWC renders with the data from previous inputs retained. Also, after saving a record, when I navigate to tab and then click on new button, the component renders with previous values yet again. This is a cache issue but unable to resolve.

I tried the solution on this answer but they didn't work for me:

What my LWC's JS does is, according to the recordtype of user, it calls another LWC is user is assigned a certain recordtype, and the another LWC renders a Modal.

1
  • To clear the cache and make the 'New' button work, what I have done is to use aura:handler on init and change ro refresh the component everytime the new button is clicked. What another issue is happening with the 'Save & New' button. Ideally when this button is clicked, the backdrop should be the last saved record detail page, but in this case due to override, the backdrop changes to the hardcoded list view in the aura itself. This is causing issue with other applications that share the same object but with different record types. Jun 25, 2021 at 8:27

0

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.