0

I have a flexipage where I have an LWC where I select a value (a client name) from a combobox. On the same flexipage I have a Tabs component where I have an LWC in each tab for the different objects that hold client data. Each tab needs to get the object's records for the selected client. This is working fine, but I need to click the Get Records button for each tab. What I would like is for it to run automatically when opening each tab, instead of having to manually click the button for each one.

Is there any way I can get this to work as I'd like it to?

enter image description here

In the top LWC this is the Get Records handler (this.selectedclient is the value selected in the dropdown):

getRecords() {
  console.log("in getRecords: " + this.selectedclient);
  fireEvent(this.pageRef, "pubsubfiltergetrecords", this.selectedclient);
}

In the pubsub component this is the fireEvent:

const fireEvent = (pageRef, eventName, payload) => {
  if (events[eventName]) {
    const listeners = events[eventName];
    listeners.forEach((listener) => {
      if (samePageRef(pageRef, listener.thisArg.pageRef)) {
        try {
          listener.callback.call(listener.thisArg, payload);
        } catch (error) {
          // fail silently
        }
      }
    });
  }
};

In each tab's LWC's connectedCallback it has this:

connectedCallback() {
  console.log("in connnectedCallback1");
  registerListener("pubsubfiltergetrecords", this.subscribeClient, this);
}

If I click on each tab before doing the Get Records then it works, as the listener has then been registered. How can I run the registerListener for each tab programmatically?

Then secondly, if I choose another value from the dropdown, I need to clear all the tabs and reload for the new client. Will the solution to my first problem solve the 2nd one?

3
  • are you saying components inside tab are not registering until you click the tab? Feb 19 at 3:17
  • Yes, they don't register until clicked.
    – Irene
    Feb 19 at 3:19
  • Tab content is lazy loaded. You can only query the content for the active and previously active tabs. Feb 19 at 3:28

1 Answer 1

2

Tabs are lazy and don't load their content until they are first shown. You could force each tab to show programmatically to force them to load their content.

#areTabsRendered = false;
async renderedCallback() {
  if(this.#areTabsRendered) {
    return;
  }
  const tabset = this.template.querySelector('lightning-tabset');
  tabset.classList.add('slds-hide'); // Don't show until we're done
  const tabs = [...this.template.querySelectorAll('lightning-tab')];
  for(const tab of tabs) {
    tabset.activeTabValue = tab.value;
    await Promise.resolve(); // allow the UI to render new tab
  }
  tabset.activeTabValue = tabs[0].value; // Move back to first tab
  tabset.classList.remove('slds-hide'); // Now show the compoent
}

You'll get a warning about using async in a loop, but it's just that: a warning. Sometimes there are legitimate use cases, and this is one of them.

Alternatively, you could build your own custom tabset/tab components, perhaps by finding an open source example, and work from there.

5
  • I was thinking to use event to ask the main component to fire again when user manually clicks on the tab using tab handler. but this looks more cleaner approach. Feb 19 at 3:46
  • 2
    @sanketkumar Using ontabactive would work, too. This approach would take slightly longer to load initially, but should reduce the first-time-use penalty that ontabactive would cost.
    – sfdcfox
    Feb 19 at 3:50
  • @sfdxfox I got an error on the 'tabset.classNames.add('slds-hide');' line so I played around a bit and found it needed 'tabset.classList.add...' Now it works :) Can you change your answer then I can mark it as solved?
    – Irene
    Feb 19 at 5:03
  • @Irene Of course. You can also make edits if you have the reputation. Does this look correct?
    – sfdcfox
    Feb 19 at 5:05
  • @sfdxfox You forgot to change the .add too. I didn't know I could edit your answer :)
    – Irene
    Feb 19 at 5:11

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .