Skip to main content
Salesforce

Return to Answer

Mod Moved Comments To Chat
deleted 676 characters in body
Source Link
Rohit
Rohit
  • 2.2k
  • 2
  • 13
  • 21

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:Editing this answer as per discussion in the comments section.

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabsIt is not directly possible to your Parentrefresh LWC liketab. It can be achieved by wrapping LWC inside aura component as below :

1 Create a aura component which renders the desired LWC using <aura:if> and use it as the tab.

<lightning-tabset variant="vertical"<aura:component active-tab-value={activeTab}>
<lightning-tabimplements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome">
  <aura:attribute name="isLwcVisible" label="Tabtype="Boolean" 1"
default="true"/>    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
   <aura:if onactive=isTrue="{handleOnActive!v.isLwcVisible}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
">    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
<c:myLwc />   icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>aura:if> 
<lightning-tabset></aura:component>

3.Expose a @api method in2 For detecting navigation away from the tab , handle childaura:locationChange LWCevent as below :

@api<aura:handler refreshListView()event="aura:locationChange" action="{
          //logic to refresh list view
       !handleLocationChange} "/>

4.Inhere , handleOnActivehandleLocationChange handler ofwill just toggle the property in Parentaura:if.This method which will be called whenever any tab is clicked. Checkcause the tab name and call a methodLWC to refresh data in child component :rerender.

handleOnActive(event) {
    event.preventDefault();
   handleLocationChange: event.stopPropagationfunction();
    this.activeTab =component, event.target.value;
  if (this.activeTab ===, 'tab-2'helper) {
     const listViewComponent = this.template.querySelector("c-child");
  var isLwcVisible = listViewComponentcomponent.refreshListViewget("v. isLwcVisible");
     
     if this[NavigationMixin.Navigate](
 isLwcVisible) {
     this.getUpdatedPageReference({
      c__activeTab: thiscomponent.activeTab
  set("v. isLwcVisible", }false),;
    true /* replace parameter is set to true so} thatelse browser{
        navigates to new page without pushing it into pagecomponent.set("v. historyisLwcVisible",
        so user does nottrue);
 have click browser's back button multiple times. */}
  );
  },
})

The only issue with Platform events is that it won't scale dueSpecial credits to limits@mackmama for this.

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
<lightning-tabset>

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActive handler of Parent.This method will be called whenever any tab is clicked. Check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
    this.activeTab = event.target.value;
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
     
      this[NavigationMixin.Navigate](
       this.getUpdatedPageReference({
      c__activeTab: this.activeTab
    }),
    true /* replace parameter is set to true so that browser
        navigates to new page without pushing it into page history,
        so user does not have click browser's back button multiple times. */
  );
  }
}

The only issue with Platform events is that it won't scale due to limits.

Editing this answer as per discussion in the comments section.

It is not directly possible to refresh LWC tab. It can be achieved by wrapping LWC inside aura component as below :

1 Create a aura component which renders the desired LWC using <aura:if> and use it as the tab.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome">
<aura:attribute name="isLwcVisible" type="Boolean" default="true"/>            
<aura:if isTrue="{!v.isLwcVisible}">         
   <c:myLwc />         
</aura:if> 
</aura:component>

2 For detecting navigation away from the tab , handle aura:locationChange event as below :

<aura:handler event="aura:locationChange" action="{!handleLocationChange}"/>

here , handleLocationChange will just toggle the property in aura:if which will cause the LWC to rerender.

({
    handleLocationChange: function(component, event, helper) {
        var isLwcVisible = component.get("v. isLwcVisible");
        if (isLwcVisible) {
            component.set("v. isLwcVisible", false);
        } else {
            component.set("v. isLwcVisible", true);
        }
    },
})

Special credits to @mackmama for this.

added 425 characters in body
Source Link
Rohit
Rohit
  • 2.2k
  • 2
  • 13
  • 21

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
<lightning-tabset>

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActive handler of Parent.This method will be called whenever any tab is clicked. Check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
    this.activeTab = event.target.value;
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
     
     this[NavigationMixin.Navigate](
      this.getUpdatedPageReference({
      c__activeTab: this.activeTab
    }),
    true /* replace parameter is set to true so that browser
        navigates to new page without pushing it into page history,
        so user does not have click browser's back button multiple times. */
  );
  }
}

The only issue with Platform events is that it won't scale due to limits.

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
<lightning-tabset>

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActive handler of Parent.This method will be called whenever any tab is clicked. Check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
  }
}

The only issue with Platform events is that it won't scale due to limits.

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
<lightning-tabset>

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActive handler of Parent.This method will be called whenever any tab is clicked. Check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
    this.activeTab = event.target.value;
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
     
     this[NavigationMixin.Navigate](
      this.getUpdatedPageReference({
      c__activeTab: this.activeTab
    }),
    true /* replace parameter is set to true so that browser
        navigates to new page without pushing it into page history,
        so user does not have click browser's back button multiple times. */
  );
  }
}

The only issue with Platform events is that it won't scale due to limits.

added 5 characters in body
Source Link
Rohit
Rohit
  • 2.2k
  • 2
  • 13
  • 21

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
<lightning-tabset>
  

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActivehandleOnActive handler of Parent, check.This method will be called whenever any tab is clicked. Check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
  }
}

The only issue with Platform events is that it won't scale due to limits.

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
 

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActive handler of Parent, check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
  }
}

The only issue with Platform events is that it won't scale due to limits.

Please find below approach which can help you , since you mentioned you had multiple tabs and one of it is custom list view:

  1. Create a parent component. Lets call it Parent
  2. Let's assume your list view resides in Child component.

Add tabs to your Parent LWC like below :

<lightning-tabset variant="vertical" active-tab-value={activeTab}>
<lightning-tab
    label="Tab 1"
    value="tab-1"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-another-cmp></c-another-cmp>
</lightning-tab>
<lightning-tab
    label="Tab 2"
    value="tab-2"
    class="slds-theme_default"
    icon-name="utility:list"
    onactive={handleOnActive}
>
  <c-child></c-child>
</lightning-tab>
<lightning-tabset>
 

3.Expose a @api method in child LWC as below :

@api refreshListView() {
          //logic to refresh list view
       }

4.In handleOnActive handler of Parent.This method will be called whenever any tab is clicked. Check the tab name and call a method to refresh data in child component :

handleOnActive(event) {
    event.preventDefault();
    event.stopPropagation();
  if (this.activeTab === 'tab-2') {
     const listViewComponent = this.template.querySelector("c-child");
     listViewComponent.refreshListView();
  }
}

The only issue with Platform events is that it won't scale due to limits.

Source Link
Rohit
Rohit
  • 2.2k
  • 2
  • 13
  • 21