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>



Thanks 
Prashant 

Create a simple Lightning component with a styled headline. The headline must use an H1 tag with a CSS class that enforces a 24px font-size. Make the component available in the Navigation Menu of Salesforce1.The component must be named 'MyLightningComponent'.
The component must include an H1 tag with a CSS class named 'headline'. The 'headline' CSS class must set a font-size of 24px.
The Lightning Component tab that is added to Salesforce1 must be called 'MyLightning'

<aura:component implements="force:appHostable"> 
    <h1 class="headline">My Lightning Component</h1> 
</aura:component>

<aura:application >
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />
</aura:application>

.THIS .headline {
    font-size:24px;
}

Challenge not yet complete... here's what's wrong: 
The component is not using the correct CSS for the 'headline' class

Thankx 
Prashant

<aura:component controller="DisplayCaseController" implements="force:appHostable">
    <aura:attribute name="record" type="Case[]"/>
    <ui:inputNumber label="Case ID" aura:id="CaseID"/><br/><br/>
    <ui:button label="Get Case" press="{ !c.getCaseFromId }"/><br/><br/>
    <aura:iteration var="c" items="{!v.record}">
         <p>{!c.Subject} : {!c.Description} : {!c.Status}</p>
    </aura:iteration>
</aura:component>

client-side controller:-

({
    getCaseFromId : function(component) {
        var caseID = component.find("CaseID").get("v.value");
        var action = component.get("c.getCaseFromId");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.record", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

public class DisplayCaseController {
@AuraEnabled
public static Case getCaseFromId(Id caseID) {
if(caseID == null) {
return [SELECT ID, Subject, Description, STATUS from Case LIMIT 1];
}
List<Case> cases = [ SELECT Id, Subject, Description, Status from CASE where ID = :caseID ];
if(cases.size() == 0) {
return [SELECT ID, Subject, Description, STATUS from Case LIMIT 1];
} else {
return cases[0];
}
}
}

Challenge not yet complete... here's what's wrong: 
The client side controller does not refer to the 'getCaseFromId' method of the Apex controller class

Thnaks In Advance

Prashant

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>



Thanks 
Prashant 

Create a simple Lightning component with a styled headline. The headline must use an H1 tag with a CSS class that enforces a 24px font-size. Make the component available in the Navigation Menu of Salesforce1.The component must be named 'MyLightningComponent'.
The component must include an H1 tag with a CSS class named 'headline'. The 'headline' CSS class must set a font-size of 24px.
The Lightning Component tab that is added to Salesforce1 must be called 'MyLightning'

<aura:component implements="force:appHostable"> 
    <h1 class="headline">My Lightning Component</h1> 
</aura:component>

<aura:application >
    <h1>Hello Lightning App!</h1>
    <c:MyLightningComponent />
</aura:application>

.THIS .headline {
    font-size:24px;
}

Challenge not yet complete... here's what's wrong: 
The component is not using the correct CSS for the 'headline' class

Thankx 
Prashant

<aura:application attribute="phone">
    <c:PhoneNumberInput />
    <c:PhoneNumberOutput />
</aura:application>