function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ShaikAShaikA 

Navigation to detail page in lightning

Hi All,

Please help me to write details page navigation, once contact recod is inserted.

Component:
<aura:component controller="contactRegistrationController">
    <aura:attribute name="contacts" type="Contact[]"/>
     
<aura:attribute name="newContact" type="Contact"
     default="{ 'sobjectType': 'Contact',
                      'FirstName': '',
                    'LastName': '',
                    'Email': '',
                    'Phone': '','MailingStreet':'','MailingCity':'','MailingState':'','Zip':'','MailingCountry':'',
                    'Password__c': '' }"/>
    
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Contact</p>
          <h1 class="slds-text-heading--medium">My Contact</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">

  <div aria-labelledby="newcontactform">

  <!-- BOXED AREA -->
  <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newexpenseform" class="slds-text-heading--small 
      slds-p-vertical--medium">
      Add Contact
    </legend>

    <!-- CREATE NEW EXPENSE FORM -->
    <form class="slds-form--stacked">
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="fstname" label="First Name"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.FirstName}"
                  required="true"/>
          </div></div>
      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="lstname" label="Last Name"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.LastName}"
                  required="true"/>
          </div>
     </div>
    
         <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="email" label="Email"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Email}"
                  required="true"/>
          </div>
     </div>
    <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="phone" label="Phone"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Phone}"
                  required=""/>
          </div></div>
    <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="maillingstr" label="Mailing Street"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingStreet}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingcity" label="Mailing City"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingCity}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingstate" label="Mailing State"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingState}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingzip" label="Mailing Zip"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Zip}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingcountry" label="Mailing Country"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingCountry}"
                  required=""/>
          </div>
   </div>
    <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="pwd" label="Password"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Password__c}"
                  required=""/>
          </div>
   </div>
      
      <div class="slds-form-element">
          <ui:button label="Submit"
              class="slds-button slds-button--brand"
              press="{!c.clickCreateContact}"/>
      </div>
    </form>
    <!-- / CREATE NEW EXPENSE FORM -->

  </fieldset>
  <!-- / BOXED AREA -->

</div>
<!-- / CREATE NEW EXPENSE -->

    </div>
    <!-- / NEW EXPENSE FORM -->
</aura:component>

Client side controller:
({
    clickCreateContact: function(component, event, helper) {
        console.log('inside click create contact');

        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
        var firstnameField = component.find("fstname");
        var frtname = firstnameField.get("v.value");
        
        if ($A.util.isEmpty(frtname)){
            validExpense = false;
            firstnameField.set("v.errors", [{message:"First name can't be blank."}]);
        }
        else {
            firstnameField.set("v.errors", null);
        }
        
        var lastnameField = component.find("lstname");
        var larname = lastnameField.get("v.value");
        if ($A.util.isEmpty(larname)){
            validExpense = false;
            lastnameField.set("v.errors", [{message:"Last Name can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            lastnameField.set("v.errors", null);
        }
        var emailField = component.find("email");
        var emailid = emailField.get("v.value");
        if ($A.util.isEmpty(emailid)){
            validExpense = false;
            emailField.set("v.errors", [{message:"Email can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            emailField.set("v.errors", null);
        }
        
        var phoneField = component.find("phone");
        var phone = phoneField.get("v.value");
        if ($A.util.isEmpty(phone)){
            validExpense = false;
            phoneField.set("v.errors", [{message:"Phone can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            phoneField.set("v.errors", null);
        }
        
        var pwdField = component.find("pwd");
        var password = pwdField.get("v.value");
        if ($A.util.isEmpty(password)){
            validExpense = false;
            pwdField.set("v.errors", [{message:"Password can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            pwdField.set("v.errors", null);
        }
        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
       if(validExpense){
            // Create the new expense
            var newContact = component.get("v.newContact");
            var newAccount = component.get("v.newAccount");
                //component.find("fstname").get("v.value");

            var newRecNamevar=component.find("fstname").get("v.value");
            console.log("Create Contact: " + JSON.stringify(newContact));

            helper.createContact(component, newContact);
            //alert('New record created successfully!!'+newRecNamevar);
             //alert('New Contact ' +newRecNamevar+ ' created successfully!!');
       }
    },
})

Helper:
({
    createContact: function(component, contact) {
        console.log('inside helper');
        
    var action = component.get("c.saveContact");
        console.log('after method called ');
    action.setParams({
        "Contact": contact
        //component.get("v.contacts")
         
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var contacts = component.get("v.contacts");
            contacts.push(response.getReturnValue());
            component.set("v.contacts", contacts);
            alert('wooow child contact with parent account insert successfully');
 
        }
    });
    $A.enqueueAction(action);
},
    
})

Controller:
public with sharing class contactRegistrationController {
     
    @AuraEnabled
    public static Contact saveContact(Contact Contact) {
        account acc=new account();
        acc.Name=contact.FirstName +' ' +contact.LastName;
        insert acc;
        system.debug('inside controller method');
        // Perform isUpdatable() checking first, then
        Contact.AccountId=acc.Id;
        upsert Contact;
        return Contact;
    }
}

Regards,
Shaik
sfdcMonkey.comsfdcMonkey.com
hi ShaikA
you dish is ready Try this code now when your component load first time all of your existing contat list show on page
when you create a new contact by form after insert new contact your new created contact add to the list :) (my changes in code in bold text )

Component -:
<aura:component controller="contactRegistrationController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
<aura:attribute name="contacts" type="Contact[]"/>   
<aura:attribute name="newContact" type="Contact"
     default="{ 'sobjectType': 'Contact',
                    'FirstName': '',
                    'LastName': '',
                    'Email': '',
                    'Phone': '',
                    'MailingStreet':'',
                    'MailingCity':'',
                    'MailingState':'',
                    'MailingPostalCode':'',
                    'MailingCountry':'',
                    'Password__c': ''
                }"/>
    
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Contact</p>
          <h1 class="slds-text-heading--medium">My Contact</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->

    <!-- NEW Contact FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">

  <div aria-labelledby="newcontactform">

  <!-- BOXED AREA -->
  <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newcontactform" class="slds-text-heading--small
      slds-p-vertical--medium">
      Add Contact
    </legend>

    <!-- CREATE NEW Contact FORM -->
    <form class="slds-form--stacked">
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="fstname" label="First Name"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.FirstName}"
                  required="true"/>
          </div></div>
      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="lstname" label="Last Name"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.LastName}"
                  required="true"/>
          </div>
     </div>
    
         <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="email" label="Email"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Email}"
                  required="true"/>
          </div>
     </div>
    <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="phone" label="Phone"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Phone}"
                  required=""/>
          </div></div>
    <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="maillingstr" label="Mailing Street"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingStreet}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingcity" label="Mailing City"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingCity}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingstate" label="Mailing State"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingState}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingzip" label="Mailing Zip"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingPostalCode}"
                  required=""/>
          </div>
   </div>
        <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="mailingcountry" label="Mailing Country"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.MailingCountry}"
                  required=""/>
          </div>
   </div>
    <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="pwd" label="Password"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newContact.Password__c}"
                  required=""/>
          </div>
   </div>
      
      <div class="slds-form-element">
          <ui:button label="Submit"
              class="slds-button slds-button--brand"
              press="{!c.clickCreateContact}"/>
      </div>
    </form>
    <!-- / CREATE NEW EXPENSE FORM -->
  </fieldset>
  <!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW EXPENSE -->
    </div>
    <!-- / NEW EXPENSE FORM -->
  <!--Detail page start-->
    <aura:iteration items="{!v.contacts}" var="singleCon">
       
 <article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media--center slds-has-flexi-truncate">
        <h2>
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">{!singleCon.FirstName} &nbsp;{!singleCon.LastName}</span>
          </a>
        </h2>
    </header>
  </div>
  <div class="slds-card__body">
      <p>Email: {!singleCon.Email}</p>
      <p>Phone: {!singleCon.Phone}</p>
      <p>MailingStreet: {!singleCon.MailingStreet}</p>
      <p>MailingCity: {!singleCon.MailingCity}</p>
      <p>MailingState: {!singleCon.MailingState}</p>
      <p>MailingPostalCode: {!singleCon.MailingPostalCode}</p>
      <p>MailingCountry: {!singleCon.MailingCountry}</p>
      <p>Password: {!singleCon.Password__c}</p>
      <p>Account Name: {!singleCon.Account.Name}</p>
  </div>
</article>
    
    </aura:iteration>
    
</aura:component>

--------------------------------------------------------------------------------------------------------------------------------------
js.controller-:
({
    clickCreateContact: function(component, event, helper) {
        console.log('inside click create contact');

        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
        var firstnameField = component.find("fstname");
        var frtname = firstnameField.get("v.value");
        
        if ($A.util.isEmpty(frtname)){
            validExpense = false;
            firstnameField.set("v.errors", [{message:"First name can't be blank."}]);
        }
        else {
            firstnameField.set("v.errors", null);
        }
        
        var lastnameField = component.find("lstname");
        var larname = lastnameField.get("v.value");
        if ($A.util.isEmpty(larname)){
            validExpense = false;
            lastnameField.set("v.errors", [{message:"Last Name can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            lastnameField.set("v.errors", null);
        }
        var emailField = component.find("email");
        var emailid = emailField.get("v.value");
        if ($A.util.isEmpty(emailid)){
            validExpense = false;
            emailField.set("v.errors", [{message:"Email can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            emailField.set("v.errors", null);
        }
        
        var phoneField = component.find("phone");
        var phone = phoneField.get("v.value");
        if ($A.util.isEmpty(phone)){
            validExpense = false;
            phoneField.set("v.errors", [{message:"Phone can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            phoneField.set("v.errors", null);
        }
        
        var pwdField = component.find("pwd");
        var password = pwdField.get("v.value");
        if ($A.util.isEmpty(password)){
            validExpense = false;
            pwdField.set("v.errors", [{message:"Password can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            pwdField.set("v.errors", null);
        }
        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
       if(validExpense){
            // Create the new expense
            var newContact = component.get("v.newContact");
            var newAccount = component.get("v.newAccount");
                //component.find("fstname").get("v.value");

            var newRecNamevar=component.find("fstname").get("v.value");
            console.log("Create Contact: " + JSON.stringify(newContact));

            helper.createContact(component, newContact);
            //alert('New record created successfully!!'+newRecNamevar);
             //alert('New Contact ' +newRecNamevar+ ' created successfully!!');
       }
    },
    
    doInit : function(component,event,helper){
        helper.loadContactList(component);
        
     },
    
})

---------------------------------------------------------------------------------------------------------------------------------------------------------
jshelper-:
({
    createContact: function(component, contact) {
        console.log('inside helper');
        
    var action = component.get("c.saveContact");
        console.log('after method called ');
    action.setParams({
        "Contact": contact
        //component.get("v.contacts")
         
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var contacts = component.get("v.contacts");
            contacts.push(response.getReturnValue());
            component.set("v.contacts", contacts);
            alert('wooow child contact with parent account insert successfully see this contact in below list');
 
        }
    });
    $A.enqueueAction(action);
    this.loadContactList(component); // refresh list after insert new contact   
},
    
    loadContactList: function(component){    
    var action = component.get("c.featchContact");
        action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var contactList = component.get("v.contacts");
            component.set("v.contacts", response.getReturnValue());
            alert('Contact list Load successfully scroll down to see list');
 
        }
    });
      $A.enqueueAction(action);
        
    },
    
})

---------------------------------------------------------------
Apex class
 public with sharing class contactRegistrationController {
     
    @AuraEnabled
    public static Contact saveContact(Contact Contact) {
        account acc=new account();
        acc.Name=contact.FirstName +' ' +contact.LastName;
        insert acc;
        system.debug('inside controller method');
        // Perform isUpdatable() checking first, then
        Contact.AccountId=acc.Id;
        upsert Contact;
        return Contact;
    }
    
    @AuraEnabled
    public static List<Contact> featchContact(){
       return [select
               id, FirstName,LastName,Account.Name,Email,Phone,MailingStreet,MailingCity,MailingState,MailingPostalCode,MailingCountry,Password__c ,accountId
               from
               contact
               where
               AccountId != null];
    }  
}

------------------------------------------------------------------------------------------
Thanks
Mark it best answer if it helps you or if you have any issue with it you can ask here:)






 
ShaikAShaikA
Hi Piyush,

Thanks for your replay, actually my scenario is landing to different page(detail page) once contact record is insert.
Same functionality we can achieve with pageReference in VF page as below, but here in lightning I don’t have any idea how we can achieve same scenario.
 
Public pagerefrence newcotact(){
Insert contact;
pageReference page=new pageReference(‘/apex/detailspage?id=’+contact.id);
return page;
}
 
Please help me on it, thanks in advance.
Shaik
ShaikAShaikA
Yes Piyush, i need land another lightning component page as details page for that newly created record.
 
Priyanka S 27Priyanka S 27
Hi ShalkA,

The lightning application behaves like the Single Page Application. you need to create a component to display the details of the contact record detail page.
Create one attribute in the newly created component to hold the contact Id. (i.e) contactId

You can use the following code to achieve this,
//Use the below function after you inserted the contact. So that you would obtain the Id of the contact in the action callback.
displayContactDetail : function(component,event){
$A.createComponent(
"c:ContactDetailPageComponet" , //custom component that you need to create to display the details of contact
{"contactId" : pass the inserted contact Id},
function(newCmp){
var cmp = component.find("Div Id of your component where you inserted contact "); // Under this division this component will be loaded
cmp.set("v.body",newCmp);
});
}

Let me know if you have any questions.
Thanks,
Priyanka S
ShaikAShaikA
Hi Priyanka,

Thanks for your valuable suggestion, i have done the changes as you mention above.

Still facing issues on displaying record details on detailscomponent.

Event: contactDetailNavgiation:
<aura:event type="APPLICATION">
<aura:attribute name="Contactlist" type="contact[]"/>
</aura:event>

Main component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="c:contactDetailNavgiation" action="{!c.NavigateComponent}"/>
    <div aura:id="div1">
          {!v.body}
   </div>
</aura:component>

Main component controller.js
({
doInit : function(component, event, helper) {
$A.createComponent(
"c:LoginScreen",
{
},
function(newCmp){
if (component.isValid()) {
component.set("v.body", newCmp);
}
}
);
},
NavigateComponent : function(component,event,helper) {
    alert('details 1');
$A.createComponent(
"c:detailContact",
{
"contacts" : event.getParam("v.Contactlist")

},          
function(newCmp){
        alert('details 2');

if (component.isValid()) {
    //var cmp = component.find("div1");
component.set("v.body", newCmp);
}
}
);
}
})

Login component:
<aura:component controller="loginController">
        <aura:attribute name="Contactlist" type="Contact[]"/>
    <aura:registerEvent name="navigate" type="c:contactDetailNavgiation"/>

  <div class="slds-col slds-col--padded slds-p-top--large">
  <div aria-labelledby="newcontactform">

  <fieldset class="slds-box slds-theme--default slds-container--small">
     <form class="slds-form--stacked">
      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="email" label="Email"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value=""
                  required="true"/>
          </div>
     </div>

     <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="pwd" label="Password"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value=""
                  required="true"/>
          </div>
      </div>
           <div class="slds-form-element">
          <ui:button label="Submit"
              class="slds-button slds-button--brand"
              press="{!c.clicktoLogin}"/>
      </div>
    </form>
      </fieldset>
</div>
</div>
</aura:component>

login controller.js:
({
    clicktoLogin: function(component, event, helper) {
   alert('in client-Side-process');
        // Simplistic error checking
        var validExpense = true;

        // Name must not be blank
       var emailField = component.find("email");
        var emailid = emailField.get("v.value");
        if ($A.util.isEmpty(emailid)){
            validExpense = false;
            emailField.set("v.errors", [{message:"Email can't be blank."}]);
        }
        else {
            // If the amount looks good, unset any errors...
            emailField.set("v.errors", null);
        }
          var pwdField = component.find("pwd");
        var password = pwdField.get("v.value");
        if ($A.util.isEmpty(password)){
            validExpense = false;
            pwdField.set("v.errors", [{message:"Password can't be blank."}]);
        }
        else {
            pwdField.set("v.errors", null);
        }

        // ... hint: more error checking here ...

        // If we pass error checking, do some real work
        if(validExpense){
            var newContact = component.get("v.Contactlist");
           console.log("login : " + JSON.stringify(newContact));
            helper.loginHelper(component);
        }
    },
})

Login Helper.js
({
    loginHelper: function(component,Callback) {
           alert('in client-Side-Helper');
    var action = component.get("c.login");
        console.log('after method called123');
        action.setParams({ strEmail : component.find("email").get("v.value") , strpwd : component.find("pwd").get("v.value")});       

action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var contacts = component.get("v.Contactlist");
            console.log("helper Contact: " + JSON.stringify(contacts));
            contacts.push(response.getReturnValue());
            component.set("v.Contactlist", contacts);
             var evt = $A.get("e.c:contactDetailNavgiation");
            evt.fire();
        }
    }); 
    $A.enqueueAction(action);
},      
})

Details Component:
<aura:component controller="loginController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global">
    <!--aura:handler name="init" value="{!this}" action="{!c.doInit}"/-->    
        <aura:attribute name="contacts" type="contact[]"/> 
my details:{!v.contacts}
     <aura:iteration items="{!v.contacts}" var="singleCon">
       
 <article class="slds-card">
  <div class="slds-card__header slds-grid">
    <header class="slds-media slds-media--center slds-has-flexi-truncate">
        <h2>Detail contact:
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">{!singleCon.FirstName} &nbsp;{!singleCon.LastName}</span>
          </a>
        </h2>
    </header>
  </div>
  <div class="slds-card__body">
      <p>Email: {!singleCon.Email}</p>
      <p>Phone: {!singleCon.Phone}</p>
      <p>MailingStreet: {!singleCon.MailingStreet}</p>
      <p>MailingCity: {!singleCon.MailingCity}</p>
      <p>MailingState: {!singleCon.MailingState}</p>
      <p>MailingPostalCode: {!singleCon.MailingPostalCode}</p>
      <p>MailingCountry: {!singleCon.MailingCountry}</p>
      <p>Password: {!singleCon.Password__c}</p>
      <p>Account Name: {!singleCon.Account.Name}</p>
  </div>
</article>
    
    </aura:iteration>
</aura:component>

Server side controller:
public class loginController {

    @AuraEnabled
    public static Contact login(string strEmail, string strpwd)
    {
        return [SELECT FirstName,LastName,Account.Name,Email,Phone,MailingStreet,MailingCity,MailingState,MailingPostalCode,MailingCountry,Password__c ,accountId FROM contact where  Email=:strEmail AND Password__c=:strpwd limit 1];
     }
      
}

Please help me to know what i am missing here and also help me how to show error message on login page if user entered email or password is invalid.

Regards,
Shaik
 
Priyanka S 27Priyanka S 27
Hi Shaik,

Assign the variable validexpense to true in the else part of error handling under login page component.
Don't go with event to pass the contact to dynamic rendering of component. Instead of that, on the action callback you are returning contact after it gets upserted. 

Store the returned contact to an attribute. Pass that attribute to the detail component. Use the chrome extension ' Lightning Inspector' for debugging.

Let me know if you have any questions.

Thanks,
Priyanka S
 




 
ShaikAShaikA
Thanks for your replay Priyanka.