0

I've posted a version of this question the other day but I've made some changes and I think I'm almost there. Originally, my component was not getting refreshed at all. I reworked it.

I have a component named, "GroupStructuresList" On that page is a button that navigates to a second component named, "GSCLone" From GSClone you can change field values and click save to save a list of records. You navigate back to the "GroupStructureList" component. The new records are passed from GSClone to GroupStructureList via an event and the records are then saved. After that, I fire a call to the server to re-query the records.

90% of the time, this works. 10% it does not. I have to assume that the save is not done when the refresh happens. I'm looking for advice on hot to ensure the save is done before I re query the records.

****Here is the function that gets called on GSClone to pass the new items and open the GroupStructuresList component:****

createClones : function(component, NewGroupStructures){
//1. Call the event to send the new records back to the GroupStructuresList where they are saved and page refreshed
        //set the CreateEvent variable with the event
          var createEvent = $A.get("e.c:CloneToGS");
        //send the event the new group structures
          createEvent.setParams({ "items": NewGroupStructures,
                        });
        //Fire the createEvent to update values using the application event
          createEvent.fire();

//2 navigate back to GroupStructuresList
    //variable to hold the account id for my naviagation back to original component
      var recordId = component.get("v.existinggroupstructure.Account__c")
    //set urlEvent Variable to navigate back to the original component
      var urlEvent = $A.get("e.force:navigateToURL");
    //set the urlEvent parameters
      urlEvent.setParams({
        "url" : "lightning/n/Group_Structures_List?//Aid=" + recordId + "&Tid=123456789"    
      });
    ///Fire the urlEvent to get back to the GroupStructureList component
      urlEvent.fire();
 }

Here is the function that is called from the event. So on the controller I have: CloneToGS function :

CloneToGS : function(component, event, helper) {
    console.log('### I have fired event on GroupStructuresListController');

    //set the variable with the new records that are passed to it via the event
    var items = event.getParam("items");

//call apex to save the newly created group structures
    var action = component.get("c.saveGroupStructure");
        //send the variable to the apex class
        action.setParams({gs: items
        });


    $A.enqueueAction(action);
 //call function to requery the records which will refresh the page
 helper.loadGroupStructures(component);

Here is the helper that queries the new records and sets the attributes

loadGroupStructures : function(cmp) {
     // Query the records
    var action = cmp.get("c.getgroupstructures");
    //send the account ID to apex
    action.setParams({
         accountId: cmp.get("v.Aid")
    });

    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            cmp.set("v.groupstructures", response.getReturnValue());
            cmp.set("v.groupstructureList", response.getReturnValue());
            this.updateTotal(cmp);

        }

        // Display toast message to indicate load status
        var toastEvent = $A.get("e.force:showToast");
        if (state === 'SUCCESS'){
            toastEvent.setParams({
                "title": "Success!",
                "message": " Your group structures have been loaded successfully."
            });
        }
        else {
            toastEvent.setParams({
                    "title": "Error!",
                    "message": " Something has gone wrong."
            });
        }
        toastEvent.fire();
    });
     $A.enqueueAction(action);

},

Thank you so much!!!!!

xxxxxxxxx Added 12/14/18 xxxxxxxxxxx

Here is the function that navigates from the GroupStructureList component to the GSCLone Component (the function is action in a child component of GropuStructureList called GroupStructures which is iterated in the GroupStructureList component.

 NavigatetoGSClone:function(component,event,helper){

    var evt = $A.get("e.force:navigateToComponent");
    var groupstructure = component.get("v.groupstructure");
    var CloneNumber = component.find("selectCloneNumber").get("v.value");
      evt.setParams({
        componentDef: "c:GSClone",
        componentAttributes :{ 
            existinggroupstructure:groupstructure,
            CloneNumber:CloneNumber
        }
           });
     evt.fire();
},

The purpose of this is to clone a record x number of times. I have a field that they user selects a number from 1 to 9 and then clicks the button to open GSClone.

7
  • You're right, there is definitely an async issue here. Is there a reason you can't do the save in the GSClone component? If you do the save there you could wait for the server action to complete and then fire the navigation event to go back to the GroupStructuresList component. That should give you consistency since the save event would always finish before the navigation event was fired. – John Towers Dec 14 '18 at 13:27
  • Thanks for responding John, I appreciate it!! The Save was originally in the GSClone and I was still using e.force:navigateToURL to navigate back. But the page would never refresh. However, that was before I figured out that I could not have a name in the registerEvent on GSClone. Do you have any direction or sample on how I would wait for the server action to complete before navigating back? I have struggled to find that. thanks again!!!! – Frank Dec 14 '18 at 13:43
  • How are you showing the GSCLone clone component? Is it URL addressable and you're navigating to it with the nav api? Showing it in a modal? Using something like <aura:if> to render it? Something else? – John Towers Dec 14 '18 at 14:30
  • Thanks again John!!! I updated my original post to include the function that navigates from GroupStructuresList to GSClone. Its a button click that is linked to the function. Let me know if you need anything else. I didn't originally post everything as I did not want to confuse the problem. thanks!!! – Frank Dec 14 '18 at 14:52
  • Thanks for the update. One more question (for now...) - are you using a console app? Or just a regular Lightning app? – John Towers Dec 14 '18 at 18:26
0

Given your updates, here's what I'd suggest:

Don't use e.force:navigateToComponent to navigate to the GSCLone clone component. It's not necessary given your requirements so doing so is adding unnecessary complexity (and it's deprecated so you should avoid using it anyway).

I'd suggest that you conditionally render the component to get started.

You can conditionally render the GSClone component when the clone button is clicked using or by dynamically creating it with $A.createComponent.

You should also handle the record save in the GSClone component. When the save is complete, fire an event that the GroupStructuresList handles. The handler could then retrieve the list from the server again.

As long as you make sure you only fire your event after the clone happens successfully you will have a consistent behavior and you won't have to worry about navigating to multiple components and handling the init event.

Once you get something like this working, the same pattern will apply to another method (such as using the overlayLibrary to show the GSClone component in a modal) if that suits your needs better.

1
  • Thanks John! I will give that approach a go! I appreciate your help!!! – Frank Dec 15 '18 at 0:07

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.