How to refresh the specific Lightning component not the lightning page

  • I have two lightning component placed on one page lightning app. First Component have refresh icon and I set onclick action to refresh Component $A.get('e.force:refreshView').fire(); but this event refresh the whole page instead of First component. how can refresh only one component on page not all the page ?

  • If you are refreshing the component from the context of a parent, you don't need to use an event - you can expose a method to the parent and get it to call that.

    If you are refreshing the component from within the child itself, you could either use an event or re-run your init routine.

    So for a parent calling a public method:

     <aura:method name="reInit" action="{!c.doInit}" description="Runs the init method again ">
    

    The parent could get a reference to the child component and call childComponent.reInit()

    For a parent totally refreshing the child, the parent could dynamically recreate the component:

        //clear body of host component just in case
    var hostComponent = component.find("enclosingComponent");
    hostComponent.set("v.body", []);
    
    $A.createComponent(
      'c:YourChildComponent', {
              "someParam":"someValue"
      },
      function(newComponent, status, errorMessage) {
        //Add the new button to the body array
        if (status === "SUCCESS") {
          var body = hostComponent.get("v.body");
          body.push(newComponent);
          hostComponent.set("v.body", body);
        } else if (status === "INCOMPLETE") {
          console.log("No response from server or client is offline.");
        } else if (status === "ERROR") {
          console.log("Error: " + errorMessage);
        }
      }
    );
    

    From the child component If you are doing this from within the component, you can despatch an event to the parent if you want a total refresh, or run the reInit method yourself.

    You can define a new COMPONENT event fire it to tell the parent that you want to be refreshed.

    <aura:event type="COMPONENT" description="Event used to tell the parent to refresh" >
      <aura:attribute name="componentName" type="string"/>
    </aura:event>
    

    In the child component:

    <!--markup-->
    <aura:registerEvent name="refreshChildComponent" type="c:RefreshChild"/>
    
    //handler
    var e = component.getEvent("refreshChildComponent");
    e.setParams({ "componentName": "child1"});
    e.fire();
    

    In the parent component:

    <aura:handler name="refreshChildComponent" event="c:RefreshChild" action="{!c.refreshChild}" />
    

    In the parent helper, the same code as above could be called - in the parent calling a public method section

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM