How to edit the records with a radio button in salesforce Lightning


Basic1.cmp ----------- <aura:component controller="Contact_list" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId, forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >     <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>     <aura:attribute name="Contact_list" type="list"/>     <aura:attribute name="Contact" type="Sobject"/>     <aura:attribute name="ShowNewItemPopUp" type="boolean"/>     <aura:attribute name="row" type="Integer"/>     <aura:registerEvent name="conDetail" type="c:sampleEvt"/>         <article class="slds-card  recept_head" style="margin-top:20px;background-color:#f2f2f2;">         <div class="slds-card__header slds-grid estimate_item" style="padding-top:6px;margin-bottom:6px;">             <header class="slds-media slds-media_center slds-has-flexi-truncate received_prdcts">                 <div class="slds-media__figure logo">                                        <lightning:icon iconName="standard:product_required" size="small"/>                 </div>                 <div class="slds-media__body">                     <span class="slds-text-heading_small">Contacts ({!v.Contact_list.length})</span>                 </div>             </header>              <div class="slds-no-flex">                 <div class="slds-button-group save_button" role="group">                     <lightning:button label="Edit Contact" onclick="{!c.Edit_Contact}"   disabled="" />                 </div>             </div>         </div>         </article>             <table class="slds-border--left slds-border--right slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal slds-no-row-hover">                 <thead>                                        <tr class="slds-text-body_regular">                          <th></th>                         <th scope="col" class="slds-text-align--center">  <div title="Name"><b> Name </b> </div>  </th>                         <th scope="col" class="slds-text-align--center">  <div title=""><b>Title </b> </div>  </th>                         <th scope="col" class="slds-text-align--center">  <div title=""><b>Phone </b> </div>  </th>                         <th scope="col" class="slds-text-align--center">  <div title=""><b> E-Mail</b></div>  </th>                         </tr>                 </thead>                 <tbody>                     <aura:iteration items="{!v.Contact_list}" var="item" indexVar="index">                         <tr>                              <td>                                 <div class="slds-size_1-of-22">                     <ui:inputRadio text="{!index}" name="s" click="{!c.setContact}"/>&nbsp;                 </div>                             </td>                             <td>{!item.con.Name}</td>                             <td>{!item.con.Title}</td>                             <td>{!item.con.Phone}</td>                             <td>{!item.con.Email}</td>                           </tr>                     </aura:iteration>                 </tbody>             </table>     <aura:if isTrue="{!v.ShowNewItemPopUp}" >         <div class="demo-only" style="height: 640px;" aura:id="popup1">             <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">                 <div class="slds-modal__container">                     <header class="slds-modal__header" style="background-color:#f2f2f2;">                         <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">                             <span class="slds-assistive-text">Close</span>                         </button>                         <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Edit Contact</h2>                     </header>                     <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">                         <div class="slds-grid slds-wrap " >                            <div class="slds-p-horizontal--small slds-p-bottom_small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2 ">                                 <label class="slds-m-right--xx-large slds-form-element__label ">First Name</label>                                 <div class="slds-form-element__control" aura:id="tldiv">                                     <ui:inputText value="{!v.Contact.FirstName}" class="slds-input"/>   </div>                             </div>                             <div class="slds-p-horizontal--small slds-p-bottom_small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2 ">                                 <label class="slds-m-right--xx-large slds-form-element__label ">Last Name</label>                                 <div class="slds-form-element__control" aura:id="tldiv">                                     <ui:inputText value="{!v.Contact.LastName}" class="slds-input"/>   </div>                             </div>                             <div class="slds-p-horizontal--small slds-p-bottom_small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2 ">                                 <label class="slds-m-right--xx-large slds-form-element__label ">Title</label>                                 <div class="slds-form-element__control" aura:id="tldiv">                                     <ui:inputText value="{!v.Contact.Title}" class="slds-input"/>   </div>                             </div>                             <div class="slds-p-horizontal--small slds-p-bottom_small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2 ">                                 <label class="slds-m-right--xx-large slds-form-element__label ">Phone</label>                                 <div class="slds-form-element__control" aura:id="tldiv">                                     <ui:inputText value="{!v.Contact.Phone}" class="slds-input"/>   </div>                             </div>                             <div class="slds-p-horizontal--small slds-p-bottom_small slds-size--1-of-1 slds-medium-size--1-of-1 slds-large-size--1-of-2 ">                                 <label class="slds-m-right--xx-large slds-form-element__label ">Email</label>                                 <div class="slds-form-element__control" aura:id="tldiv">                                     <ui:inputText value="{!v.Contact.Email}" class="slds-input"/>   </div>                             </div>                                                   </div></div>                     <footer class="slds-modal__footer">                          <lightning:button variant="brand" label="Update Contact" onclick="{!c.Save}"/>                         <lightning:button label="Cancel" onclick="{!c.Cancel}"/>                     </footer>                 </div>             </section>             <div class="slds-backdrop slds-backdrop_open"></div>         </div>     </aura:if> </aura:component> controller ---------- ({ doinit : function(component, event, helper) { var action = component.get("c.contacts");         action.setParams({});         action.setCallback(this,function(response){                 component.set("v.Contact_list" , response.getReturnValue()) ;                     });         $A.enqueueAction(action); },Save: function(component, event, helper) {         //alert(JSON.stringify(component.get("v.Contact")));         var action = component.get("c.Savecontact");         action.setParams({"con":component.get("v.Contact")});         action.setCallback(this,function(response){                 component.set("v.Contact_list" , response.getReturnValue()) ;             component.set("v.ShowNewItemPopUp",false);             component.set("v.row",-1);                     });         $A.enqueueAction(action);     },     Edit_Contact : function(component, event, helper) {         if(component.get("v.row")>=0){            // alert(JSON.stringify(component.get("v.Contact_list")[component.get("v.row")]));         component.set("v.Contact",component.get("v.Contact_list")[component.get("v.row")].con);           //  alert(JSON.stringify(component.get("v.Contact")));         component.set("v.ShowNewItemPopUp",true);         }     },     Cancel : function(component, event, helper) {         component.set("v.ShowNewItemPopUp",false);     },setContact: function(component, event, helper) {         component.set("v.row",event.getSource().get("v.text"));        // alert(JSON.stringify(component.get("v.Contact_list")[component.get("v.row")].con));         var cmpEvent = component.getEvent("conDetail");         cmpEvent.setParams({             "cont": component.get("v.Contact_list")[component.get("v.row")].con         });        cmpEvent.fire();     } }) Apex class ----------- public class Contact_list { @auraenabled     public static list<wrapper> contacts(){         list<wrapper> wrapperList=new list<wrapper>();         for(contact con:[select id,name,Phone,Email,title,AccountId from Contact]){             wrapperList.add(new wrapper(con,false));         }         return wrapperList;     }     @auraenabled     public static list<wrapper> Savecontact( contact con){         update con;         return contacts();     }     public class wrapper{         @auraenabled public contact con;         @auraenabled public boolean bool;         public wrapper(contact con,boolean bool){             this.con=con;this.bool=bool;         }     } } Lightning Application --------------------- <aura:application extends="force:slds"> <c:Basic1/> </aura:application>

Comments

  1. I have gone through your blog, it was very much useful for me and because of your blog, and also I gained many unknown information, the way you have clearly explained is really fantastic. Kindly post more like this, Thank You.
    Air hostess training in Chennai
    Air Hostess Training Institute in chennai
    air hostess academy in chennai
    air hostess course in chennai

    ReplyDelete
  2. how to add hyper link to contact name on click is should navigate to the sobject record page.

    ReplyDelete

Post a Comment