I have two parent components which use the same child components but with different attributes for the child component. I have created a lightning tab to open each lightning component. Now when I switch from one tab to another, the new component still gets some of the styling and attributes of the other parent component. i.e. some elements like outputtexts and event data in the child components do not refresh, It is only when I refresh the page manually, the parent and child components work as expected including page styling. How do I clear the existing data or cache or refresh the page while switching tabs.

EDIT: Since the components are big and extensive, adding the code will b difficult, but I will try to explain the flow. There are two Parent Components Component A and Component B having their own lightning tabs. Both of these components reuse the same child components Component C and Component D(Data table) having different default values for their attributes(for eg object name). Component A and B dont have a custom init handler or rendering , but the child components have their own afterscriptsloaded handler which acts as their inits and hence load their own. The parent components just pass corresponding default value of the attributes and handle some events differently. The child components have some styling and outputtexts which are updated dynamically in the js controllers of the child components according to the data and values of the attributes. Now this is not getting updated while switching tabs until I refresh the page(F5) and as dhanajay's case causing the browser to crash at times. Most of the functionality is working as expected while switching tabs and the data in the data table is populated correctly but some of the functionality isn't and the crashing is intermittent.

EDIT 2: The problem with $A.get('e.force:refreshView').fire(); is that it refreshes all the siblings and parent causing a sort of an infinite loop. Is there a way to just refresh the specific child component without adding refresh handlers in every other component?

  • Please add your component code as well. – Himanshu Oct 16 '17 at 6:31
  • I am also facing the similar issue..Not sure if it is the existing problem in lightning.. salesforce.stackexchange.com/questions/195539/… – Dhananjay Patil Oct 16 '17 at 6:33
  • yes... It is similar issue. The crashing started recently. In winter 18 as far as I can tell but not sure. – the_buffered_reader Oct 16 '17 at 6:48
  • May be try doing something with the render behaviour of the lightning component to control its behaviour during intial rendering and closing – Andy Oct 16 '17 at 9:32
   <c:childComponent name="child1" desc="I am first born" />
   <c:childComponent name="child2" features="i am awesome"/>

You must reset the attributes in their(children's) controller in init(or afterScriptsLoaded).

On navigating into the child2 tab the attributes that are passed in the child1 component must be reset, otherwise the attributes in child2 would posses the attribute values passed to child1.

<c:childComponent name="child1" desc="I am first born" />

Attributes Value passed : name="child1" desc="I am first born"

   <c:childComponent name="child2" features="i am awesome"/>

Attributes Value passed : name="child1" desc="I am first born" features="i am awesome"

The value of attribute "desc" should be set to blank(or must be overwritten) in the init method of controller.

  • The two tabs are for the two parents components : <c:Parent A> <c:Child A attribute1="value1"/> <c:Child B attribute2="someothervalue1"/> </c: Parent A> and <c:Parent B> <c:Child A attribute1="value2"/> <c:Child B attribute2="someothervalue2"/> </c: Parent B> – the_buffered_reader Oct 16 '17 at 11:38
  • the two parents have the same children with different attributes – the_buffered_reader Oct 16 '17 at 11:39

If you are using Lightning Console Application, I assume you are already using <lightning:workspaceAPI />

There is an App Event called lightning:tabFocused, which will fire when you select that tab, you can clear the attributes or call the inits in that event handler.

May be refreshTab method of workspaceAPI works too (in some cases).

<aura:handler event="lightning:tabFocused" action="{! c.onTabFocused }"/>

Link: https://developer.salesforce.com/docs/component-library/bundle/lightning:tabFocused/documentation

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.