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
anthony thomas 9anthony thomas 9 

Handling of events with Client side controller Challenge

This is what I have based on the directions for this challenge:
The conference application your company is creating must display a phone number in one component for display that's based on the input of another component. Create an application that contains an inputPhone component and an outputText component. The components themselves can be found here and here. You must add the application event and client-side controllers to make it work.
The PhoneNumberInput and PhoneNumberOutput components can be found here and here. Copy and paste those two components into your Developer Edition using the Developer Console.
The application event must be named 'PhoneNumberEvent' and must have an attribute named 'phone' (of type String).
The components must have the correct registerEvent and handler components.
The client side controllers must get and set the 'phone' attribute correctly.
Input is this:
<aura:application >   
    <aura:event type="APPLICATION" /> 
    <aura:attribute name="phone" type="String" />
</aura:event>   
</aura:application>
And I keep getting an error of this:
The 'PhoneNumberEvent' event does not have an attribute component
Best Answer chosen by anthony thomas 9
Chandra Sekhar CH N VChandra Sekhar CH N V
Try the belo code 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();
	}
})

 

All Answers

Chandra Sekhar CH N VChandra Sekhar CH N V
Try the belo code 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();
	}
})

 
This was selected as the best answer
anthony thomas 9anthony thomas 9
@Chandra Sekhar CH N V you are the REAL MVP! Thank you!
Thabile SibisiThabile Sibisi
@Chandra Sekhar CH N V

Thanks for the code but when I check challenge I get this error message
"Challenge not yet complete... here's what's wrong: 
The 'PhoneNumberInput' client-side controller is not setting the phone param"
 
Dmytro KryvyiDmytro Kryvyi
Challenge Not yet complete... here's what's wrong: 
The 'PhoneNumberInput' client-side controller is not setting the phone param....
 
Stephen Johnson 13Stephen Johnson 13
Noticed that the code doesn't quite work, as it still gives errors.

Below is the final code that I used to complete this module.  (FYI - I renamed things to make it more apparent what was what):

PhoneNumber.app (Optional) 
<aura:application >
    <c:PhoneNumberOutput />
</aura:application>
PhoneNumberEvent.evt 
<!-- PhoneNumberEvent.evt -->
<aura:event type="APPLICATION">
    <aura:attribute name="phone" type="String"/>
</aura:event>
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.savephone}" />
</aura:component>
PhoneNumberInputController.js 
({
	savephone : function(component, event, helper) {
		var text = component.find("phone").get("v.value");
        console.log(text);
        $A.get("e.c:PhoneNumberEvent").setParams({
            phone: text
       }).fire();
	}
})
PhoneNumberOutput.cmd 
<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>
PhoneNumberOutputController.js 
({
    getphone : function(component, event, helper) {
        var text = event.getParam("phone");
        component.set("v.number", text);
    }
})

Hope that helps clear things up.