Beat the Heat with Cool Discounts

Grab Up to 20% Off on Self-Paced Courses!

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

LWC Training
Next Topic

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.

Book Free15-Minutes Career Counselling