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
Prashant singh 16Prashant singh 16 

Create an event that passes phone information between two components

Hi All,

After attempting lighting component module.I am facing with the following problem.
https://developer.salesforce.com/trailhead/force_com_dev_intermediate/lightning_components/lightning_components_events_handle
1-PhoneNumberInput.cmp
<aura:component >
    <aura:registerEvent name="PhoneNumberEvent" type="c:PhoneNumberEvent"/>
    <ui:inputPhone aura:id="phone" label="phone" />
    <ui:button label="Show Phone" press="{!c.send}"/>
</aura:component>

2-PhoneNumberOutput.cmp
<aura:component >
    <aura:attribute name="phone" type="String" default="No Phone Number"/>
    <ui:outputText aura:id="phone" value="{!v.phone}"/>
    <aura:handler event="c:PhoneNumberEvent" action="{!c.answer}"/>
</aura:component>

3-PhoneNumberEvent.evt
<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="phone" type="String"/>
</aura:event>


4-PhoneNumberInputController.js

({
    setphone:function (component, event,helper){
        var phone=component.find("phone").get("v.value");
        $A.get("e.c:PhoneNumberEvent").set Params({
            phone:phone
        }).fire(),
    }
        
    })

5-PhoneNumber.app
<aura:application >
    <c:PhoneNumberInput />
    <c:PhoneNumberOutput />
</aura:application>

User-added image

Thanks 
Prashant 

Chandra Sekhar CH N VChandra Sekhar CH N V
Try the below code: 
<aura:component >
	<aura:attribute name="number" type="String" default="No Phone Number"/>    
<ui:outputText aura:id="phone" value="{!v.number}"/>
    <aura:handler event="c:PhoneNumberEvent" action="{!c.answer}"/>
</aura:component>

 
Prashant singh 16Prashant singh 16

Hi Chandra Sekhar CH N V

After using your code ,the error was same

Challenge not yet complete... here's what's wrong: 
The 'PhoneNumberOutput' client-side controller is not getting the phone param
Chandra Sekhar CH N VChandra Sekhar CH N V
This was the PhoneNumberOutput.cmp which I have posted,  did you try this on the same?
Prashant singh 16Prashant singh 16
Hi Chandra Sekhar CH N V
Thanks For the replay ..Ya i am using your code in PhoneNumberOutput.cmp but the error was same .
 
Chandra Sekhar CH N VChandra Sekhar CH N V
Don't see much of a difference in your code but I doubt you have written the code in a controller instead of a helper (
PhoneNumberInputHelper.js). I am pasting my code snippet which worked for me. 
  
1-PhoneNumberInput.cmp
<aura:component >
	<ui:inputPhone aura:id="phone" label="phone" />
    <aura:registerEvent name="phone" type="c:PhoneNumberEvent"/>
<ui:button label="Show Phone" />
</aura:component>

2-PhoneNumberOutput.cmp
<aura:component >
	<aura:attribute name="number" type="String" default="No Phone Number"/>    
<ui:outputText aura:id="phone" value="{!v.number}"/>
    <aura:handler event="c:PhoneNumberEvent" action="{!c.answer}"/>
</aura:component>

3-PhoneNumberEvent.evt
<aura:event type="APPLICATION" description="Event template">
<aura:attribute name="phone" type="String"/>    
</aura:event>


4-PhoneNumberInputHelper.js

({
	send : function(component, event, helper) {
		var phone = component.find("phone").get("v.value");
        console.log(phone);
        $A.get("e.c:PhoneNumberEvent").setParams({
            phone: phone
       }).fire();
	}
})

 
Abu HashimAbu Hashim
Hi Prashant,

Seems U r not capturing the phone param in PhoneNumberOutput Controller.

({
    answer : function(component, event, helper) {
        var text = event.getParam("phone");
        component.set("v.number", phone);
    }
})

Add this in ur PhoneNumberOutputController.js - This would capture the phone param. Thanks!!
SattibabuSattibabu
@Chandrasekhar -- Thanks for code snippet. I can able to pass the chanllenge as per your suggestion write input controller.js inside helper resource. However when i am trying to run the application i am getting below error. 

Uncaught error in $A.run() : Unable to find 'send' on 'compound://c.PhoneNumberInput'.

any help would be greatly appreciated. Thank you. 
 
Nirmallya_GhoshNirmallya_Ghosh
Output Controller :  
({
    getphone : function(component, event, helper) {
        var text = event.getParam("phone");
        component.set("v.number", text);
    }
})


Input Controller: 
({
    setphone : function(component, event, helper) {
        var text = component.find("phone").get("v.value");
        console.log(text);
        $A.get("e.c:PhoneNumberEvent").setParams({
            phone: text
       }).fire();
    }
})

Phone Number Output Component: 
<aura:component>
    <aura:attribute name="number" type="String" default="No Phone Number"/>
    <aura:handler name="PhoneNumberEvent" event="c:PhoneNumberEvent" action="{!c.getphone}"/>
    <c:PhoneNumberInput />
    <ui:outputText aura:id="phone" value="{!v.number}"/>
</aura:component>

Phone Number Input Component:
  
<aura:component>
    <aura:registerEvent name="PhoneNumberEvent" type="c:PhoneNumberEvent" />
    <ui:inputPhone aura:id="phone" label="phone" />
    <ui:button label="Show Phone" press="{!c.setphone}" />
</aura:component>

Phone Number Event :  
<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="phone" type="String"/>    
</aura:event>

Try this............

Thanks
Nirmallya Ghosh

 
Akhil MehraAkhil Mehra
hi Nirmallya_Ghosh it will not showing the value into outputbox as we have specify aura:handler name same as event name so i have the corrections for the code 
 
  1. Phone Number Output Component:​
<aura:component >
    <aura:attribute name="number" type="string" default="No Phone Number"/>
    <aura:handler  event="c:PhoneNumberEvent" action="{!c.getphone}"/>
    <c:PhoneNumberInput />
    <ui:outputText  aura:id="phone" value="{!v.number}"/>
</aura:component>​​​​

2. ​Output Controller : 

({
     getphone : function(component, event, helper) {
        var text = event.getParam("phone");
        //   alert(text);
        component.set("v.number", text);
       
    }
})


3 . Phone Number Input Component:​
     <aura:component>
     <aura:registerEvent name="PhoneNumberEvent" type="c:PhoneNumberEvent"/>

    <ui:inputPhone aura:id="phone" label="phone" />
    <ui:button label="Show Phone" press="{!c.setphone}" />
</aura:component>

4. Input Controller:​


({
    setphone : function(component, event, helper) {
        var text = component.find("phone").get("v.value");
        //alert(text);
        console.log(text);
        $A.get("e.c:PhoneNumberEvent").setParams({phone: text}).fire();
    }
})

5.  Phone Number Event :​

<aura:event type="APPLICATION">
    <aura:attribute name="phone" type="String"/>
</aura:event>