function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nethra RaghupathyNethra Raghupathy 

$A.createComponent() inside callback

Hi,

I need to render an existing component with attribute based on the output from an API call (callback).

FirstController.js  
init: function (component) { 
        
       component.set('v.oppId','25978371');
       component.set("v.userId", $A.get("$SObjectType.CurrentUser.Id"));
    
            var orgDetailsAction = component.get("c.getLocalAPI");
             
            orgDetailsAction.setCallback(this, function(data) {
                console.log(data.getReturnValue())
                data = JSON.parse(data.getReturnValue());
                
                if(!data.result){
                     
                   component.set('v.sidebar','disabled');
                   component.set("v.domainPopup", true);
                    console.log(component.get("v.domainPopup"))
               }
                else{
                    if(data.api1==null)
                       component.set('v.sidebar','disabled');
                    else
                    component.set('v.SFDCEndpoint',data.api1);
                }
                
                var action1 = component.get("c.getExternalAPI");
                
                
                action1.setCallback(this, function(data) {
                    var state = data.getState();
                    var role = JSON.parse(data.getReturnValue()).data;
                          component.set("v.userRole", role);
                            console.log(component.get('v.SFDCEndpoint'))
                             
                            $A.createComponent(component.get("v.sidebar")!='disabled' ?
                                               ((component.get("v.userRole")=='A1'||component.get("v.userRole")=='A2')
                                                ? "c:testOne":"c:testTwo")
                                               : "c:testThree",{
                                                   endpoint: component.get('v.SFDCEndpoint'),
                                               },
                                              function(newCmp,status, errorMessage){
                                                    
                                                   if(status === "SUCCESS"){
                                                       if (component.isValid()) {
                                                           component.set("v.currentContent", newCmp);
                                                       }}
                                                    
                                                       
                                               }
                                              );
                   
                });
                 
                $A.enqueueAction(action1); 
                 
            });
            $A.enqueueAction(orgDetailsAction);
                
         
    },

Based on action1 testOne.cmp gets created.

testOne.cmp
I have the endpoint attribute defined in component
  
<aura:handler name="init" value="{!this}" action="{!c.onLoad}"/> 
<aura:attribute name="endpoint" type="String"/>

testOneController.js: 
onLoad : function(component, event, helper) {
         
        console.log(component.get('v.endpoint'));
}

testOne component gets rendered in 'currentContent' but the endpoint attribute is not getting passed in $A.createComponent.

Is there a way to use $A.createComponent inside an API callback?
Raj VakatiRaj Vakati

I can suggest to use  the promises


..Refer this this link 

https://rajvakati.com/2018/05/29/using-promise-in-lightning-component/
  
var exeAction1 = component.get("c.executeMethod1");
        var exeAction2 = component.get("c.executeMethod2");
        
        exeAction1.setParams( {"message": 'Promise are cool way to handle callback executeMethod1'});
        exeAction2.setParams( {"message": 'Promise are cool way to handle callback executeMethod2'});
        let var1 =    helper.serverSideCall(component,exeAction1);
        let var2 =helper.serverSideCall(component,exeAction2);
        
        Promise.race([var1, var1]).then(
            function(res) {
                var exeAction3 = component.get("c.executeMethod3");
                exeAction3.setParams( {"message": 'Promise are cool way to handle callback'});
                return helper.serverSideCall(component,exeAction3) ;
            }
        )
        .catch(
            function(error) {
                component.set("v.status" ,error ) ; 
                console.log(error);
            }
        );