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;
}

Next Topic