Learn from industry experts! Admin batch starts from 19 Feb.
Hurry up!
Book your slot 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 A 15-Minutes Free Career Counselling Today!