14
Create a Lightning Application Part – 4
<!-- HTML File -->
<aura:component controller="c.contactContainer">
<aura:attribute name="contact" type="Contact" default="{'sObjectType':'Contact'}"/>
<aura:handler event="aura:locationChange" action="{!c.locationChange}"/>
<div class = "details">
<h1> {!v.contact.Name} </h1>
<h3> {!v.contact.Account.Name} </h3>
<p> {!v.contact.Phone} </p>
{!v.contact.MobilePhone}
</div>
</aura:component>
//JS File
({
locationChange : function(component, event, helper)
{
var token = event.getParam("token");
if(token!=null && token.indexOf('contact/')===0){
var contactId = token.substr(token.indexOf('/')+1);
var action = component.get("c.findById");
action.setParam({
"contactID":contactId
});
action.setCallback(this,function(a){
component.set("v.contact",
a.getReturnValue());
});
$A.enqueueAction(action);
}
}
})
Styling in Aura Components
.THIS p{
margin : 20px 0px 2px 0px;
}
.THIS h1{
margin : 0px 0px 10px 0px;
}
.THIS h3{
margin : 4px 0px;
}

Join our newsletter: Get daily update on Salesforce career insights & news!
Join Now!
Need more support?
Get a head start with our FREE study notes!
Learn more and get all the answers you need at zero cost. Improve your skills using our detailed notes prepared by industry experts to help you excel.