+ Start a Discussion
$hwet@$hwet@ 

VF page call component : $A.getCallback() : 'SetParams' undefined

VF page call component : $A.getCallback() : 'SetParams' undefined
I have two lightning components and the first component is like a login page and once the login is successful the other component should be called. My code is working fine if I add the component in the record page but if I try to call the component via visualforce page it throws me the below error:
This page has an error. You might just need to refresh it. Error in $A.getCallback() [Cannot read property 'setParams' of undefined] Callback failed: apex://Userempid/ACTION$getContacts Failing descriptor: {c:NewLoginPage}

where c:NewLoginPage - the login pagei.e First component
Userempid - apex controller for the first component.

can you please help me with this.

Please find the code below:

First Component (which after chick on login should call other component)
<aura:component  controller="Userempid"   implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
                <ltng:require styles="/resource/SLDS24/styles/salesforce-lightning-design-system.css"/>
    <aura:attribute name = "Empiduser" type = "string"/>
     <aura:attribute name = "Empidpwd" type = "string"/>
     <lightning:layout>
        <lightning:layoutItem padding="around-small" size="12" class="main">
                                                <div >
                                                <form class="slds-form--stacked">
                                                                <ui:inputtext aura:id="FormId" label=" User Name " class="" value="{!v.Empiduser}" maxlength="30" placeholder="Employee Id" required="true" size="20"/> <br/>
                                               <ui:inputSecret aura:id="FormId" label=" Password " class="" value="{!v.Empidpwd}" maxlength="10" placeholder="Password" required="true" size="20"/> <br/>
                               <div class="slds-float--left slds-button_brand">
                                              <div class="slds-grid buttons">
                                              <lightning:button variant="brand" label="Login" title="Login" iconPosition = "Left" onclick="{!c.handleLoginButtomClick}"/>
                                               </div>
                                                                </div>
                               </form>
                                                </div>
       </lightning:layoutItem>
   </lightning:layout>
</aura:component>
 
Controller.js
({
                handleLoginButtomClick : function(component, event, helper) {
                                  var testid = component.get("v.Empiduser");
          var testpw = component.get("v.Empidpwd");
          alert('******'+testid+testpw);
                 var action = component.get("c.getContacts");
                  action.setParams({
            "EmpidId": component.get("v.Empiduser"),
            "Emppwd": component.get("v.Empidpwd")
                                });
        alert('******'+testid+testpw);
    
    var self = this;
       action.setCallback(this, function(actionResult) {
               var rtnValue =actionResult.getReturnValue();
           alert('Value :'+rtnValue);
         if(rtnValue = "Correct User Name and Password" && rtnValue!="Wrong Username or Password"){
           var evt = $A.get("e.force:navigateToComponent");
                                evt.setParams({
                               componentDef : "c:ListofAvailableTest",
                               componentAttributes: {
                               AgentId : testid
                                                               }
                                                });
                                                                evt.fire();
 
                                                }
                });
         $A.enqueueAction(action);
       
   }
})
Apex Controller
public class Userempid {
                @AuraEnabled
                public static string getContacts(string EmpidId,string Emppwd) {
        List<custom_object__c> getContactsdebug = [Select Id, Password__c, EmpId__c From custom_object__c Where EmpId__c = :EmpidId and Password__c =:Emppwd];
        system.debug('getContactsdebug'+getContactsdebug);
       // return getContactsdebug;
                                //return [Select Id, Password__c, EmpId__c From custom_object__c Where EmpId__c = :EmpidId and Password__c =:Emppwd Limit 1];
        if(getContactsdebug.size() ==0 || getContactsdebug.isEmpty()){
          Return 'Wrong Username or Password';
        }
        else if(getContactsdebug.size() >0 && !(getContactsdebug.isEmpty()) && getContactsdebug.size() ==1 ){
           Return 'Correct User Name and Password';
        }
        else{
            Return 'Wrong Username or Password';
        }
    }
}
Second Component
<aura:component controller = "ListofAvailableTest" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
                <div class="slds-grid" style="background-color:lightGrey;padding:20px">
               <div class="slds-col" style=" font-size: 18px;font-weight: bold">
               Training Portal
        </div>
       
         <div class="slds-float--right" style=" font-size: 18px;font-weight: bold">
               Signed in as
        </div>
    </div>
   
     <aura:attribute name="AgentsAllowed" type="List" />
     <aura:attribute name="TestHistory" type="List" />
    <aura:attribute name="AgentId" type = "string" />
    <aura:attribute name="Password" type ="String"/>
    <aura:attribute name="recordId" type="String" />
     <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     <lightning:layout class="slds-page-header slds-page-header--object-home" title ="Available Test">
        <lightning:layoutItem Title="Available Test">
            <div class="Tableheading" style="padding:10px">
               Available Test
            </div>
                                <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
              <thead>
                <tr class="slds-text-heading_label">
                  <th scope="col"><div class="slds-truncate" title="ID" style="font-weight:bold">ID</div></th>
                  <th scope="col"><div class="slds-truncate" title="Name" style="font-weight:bold">Name</div></th>
                  <th scope="col"><div class="slds-truncate" title="Test Name" style="font-weight:bold">Test Name</div></th>
                  <th scope="col"><div class="slds-truncate" title="Percentage" style="font-weight:bold">Percentage</div></th>
                </tr>
              </thead>
              <tbody>
                <aura:iteration items="{!v.AgentsAllowed}" var="AgentsAllowedlist">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!AgentsAllowedlist.Id}">{!AgentsAllowedlist.Id}</div></th>
                        <td><div class="slds-truncate" title="{!AgentsAllowedlist.Name}">{!AgentsAllowedlist.Name}</div></td>
                        <td><div class="slds-truncate" title="{!AgentsAllowedlist.Test_Name__r.name}">{!AgentsAllowedlist.Test_Name__r.name}</div></td>
                        <td><div class="slds-truncate" title="{!AgentsAllowedlist.Percentage__c}">{!AgentsAllowedlist.Percentage__c}</div></td>
                    </tr>
                    </aura:iteration>
              </tbody>
               </table>
         </lightning:layoutItem>
    </lightning:layout>
    <lightning:layout class="slds-page-header slds-page-header--object-home" title ="Available Test">
        <lightning:layoutItem Title="Available Test">
            <div class="Tableheading" style="padding:10px;">
               Test History
            </div>
                                <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
              <thead >
                <tr class="slds-text-heading_label">
                  <th scope="col"><div class="slds-truncate" title="Practice Link" style="font-weight:bold">Practice Link</div></th>
                  <th scope="col"><div class="slds-truncate" title="Reset Test" style="font-weight:bold">Reset Test</div></th>
                   <th scope="col"><div class="slds-truncate" title="Mobile - Offline Support" style="font-weight:bold">Mobile - Offline Support</div></th>
                  <th scope="col"><div class="slds-truncate" title="Test Name" style="font-weight:bold">Test Name</div></th>
                  <th scope="col"><div class="slds-truncate" title="Score" style="font-weight:bold">Score</div></th>
                  <th scope="col"><div class="slds-truncate" title="Total Questions" style="font-weight:bold">Total Questions</div></th>
                  <th scope="col"><div class="slds-truncate" title="Flag" style="font-weight:bold">Flag</div></th>
                </tr>
              </thead>
              <tbody>
                <aura:iteration items="{!v.TestHistory}" var="TestHistorylist">
                    <tr>
                        <th scope="row"><div class="slds-truncate" title="{!TestHistorylist.Id}">Practice Link</div></th>
                        <td><div class="slds-truncate" title="{!TestHistorylist.id}"><a href= "{!recordId }" >Reset </a></div></td>
                        <td><div class="slds-truncate" title="{!TestHistorylist.Name}">{TestHistorylist.Name}</div></td>
                        <td><div class="slds-truncate" title="{!TestHistorylist.Test_Name__c}">{!TestHistorylist.Test_Name__c}</div></td>
                        <td><div class="slds-truncate" title="{!TestHistorylist.Percentage__c}">{!TestHistorylist.Percentage__c}</div></td>
                        <td><div class="slds-truncate" title="{!TestHistorylist.Total_Questions__c}">{!TestHistorylist.Total_Questions__c}</div></td>
                        <td><div class="slds-truncate" title="{!TestHistorylist.Test_Completed__c}">{!TestHistorylist.Test_Completed__c}</div></td>
                       
                    </tr>
                    </aura:iteration>
              </tbody>
               </table>
         </lightning:layoutItem>
    </lightning:layout>
</aura:component>
 
Controller.js
({
      doInit: function(component, event, helper) {
               helper.getAgentsAllowedHelper(component);
      }
  
})
Helper
({
      // Fetch the accounts from the Apex controller
      getAgentsAllowedHelper: function(component) {
        var action = component.get('c.getAgentsAllowed');
        action.setParams({"AgentId":component.get("v.AgentId")});
         
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
         component.set('v.AgentsAllowed', actionResult.getReturnValue());
        self.getTestHistoryHelper(component);
        });
        $A.enqueueAction(action);
      },
    getTestHistoryHelper: function(component) {
        var action = component.get('c.getTestHistory');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
         component.set('v.TestHistory', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
      }
    })
Apex Controller : 2nd component
public class ListofAvailableTest {
      @AuraEnabled
     public static List<Agents_Allowed__c> getAgentsAllowed(string AgentId) { 
        List<Agents_Allowed__c> listToReturn = [SELECT Id, name,Agent_Name__c,Emp_ID__c,Full_Name__c,Test_Name__c,Percentage__c,Agent_Name__r.EmpId__c  FROM Agents_Allowed__c WHERE Agent_Name__r.EmpId__c =: AgentId];
                system.debug('listToReturn'+listToReturn);
         return listToReturn;
      
     }
    @AuraEnabled
    public static List <Agents_Test_Result__c> getTestHistory() {
        return [SELECT Id, name,Agent_Name__c,Agent_Full_Name__c,Test_Name__c,Test_Name__r.name,Percentage__c,Total_Questions__c,Test_Completed__c FROM Agents_Test_Result__c where Test_Completed__c = true];
      }
    }
Visualforce Page:
<apex:page showHeader="false" standardStylesheets="false">
     <apex:includeLightning />
 <div id="loginpageId" />
<script>
        $Lightning.use("c:LoginPageApp",
            function(){
                $Lightning.createComponent(
                "c:NewLoginPage",
                    {},
                    "loginpageId",
                    function(cmp){
                    console.log('done');
                     window.alert('i am in');
                    }
                );
            }
        );
    </script>
         
</apex:page>
 
Best Answer chosen by $hwet@
Khan AnasKhan Anas (Salesforce Developers) 
Hi Shweta,

Greetings to you!

According to Salesforce doc: https://developer.salesforce.com/docs/component-library/bundle/force:navigateToComponent/documentation

force:navigateToComponent event is handled by the one.app container. It’s supported in Lightning Experience and the Salesforce app.

This means the event is handled only in one.app. Now, when you open a lightning tab, it opens in one.app container hence the successful run. Visualforce doesn't run on one.app hence the unavailability of the event.

Please refer to the below link which might help you further with the above requirement.

https://joebuschmann.com/salesforce-lightning-navigation-events-in-a-visualforce-page/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Shweta,

Greetings to you!

According to Salesforce doc: https://developer.salesforce.com/docs/component-library/bundle/force:navigateToComponent/documentation

force:navigateToComponent event is handled by the one.app container. It’s supported in Lightning Experience and the Salesforce app.

This means the event is handled only in one.app. Now, when you open a lightning tab, it opens in one.app container hence the successful run. Visualforce doesn't run on one.app hence the unavailability of the event.

Please refer to the below link which might help you further with the above requirement.

https://joebuschmann.com/salesforce-lightning-navigation-events-in-a-visualforce-page/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
$hwet@$hwet@
Hi @Khan Anas,

Thanks for the reply. Do you know any other way of doing the same. I want to call the component via VF page only because the VF page is called via site.
Is there any other workaround?