You need to sign in to do that
Don't have an account?
muneeswar u
how to edit record on table in lightning component
Hi all,
I am unable to catch my record id during iteration on table in lighting component.Below is my code can any one help me.
Thank you.
**************************Lightning component*******************
<aura:component controller="EditContactWithButton" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<!-- aura attributes to store data/values -->
<aura:attribute name="ContactList" type="List"/>
<aura:attribute name="recordId" type="String" />
<aura:attribute name="editMode" type="boolean" default="false" />
<!-- call doInit method on component load -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="force:refreshView" action="{!c.doInit}" />
<table class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th aria-label="LastName" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="LastName">LastName</span>
</div>
</th>
<th aria-label="Phone" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Phone">Phone</span>
</div>
</th>
<th aria-label="Email" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Email">Email</span>
</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ContactList}" var="con" indexVar="index">
<!--to select each row-->
<tr class="slds-hint-parent" aura:id="rowId" >
<td >{!con.Id}</td> <!--tabindex="{!index}"-->
<td>
<div class="slds-truncate" title="LastName" >
<lightning:input data-selected-Index="{!index}" aura:id="lastname" id="lastname" name="lastname" disabled="{! !v.editMode }" value="{!con.LastName}" />
</div>
</td>
<td>
<div class="slds-truncate" title="Phone" aura:id="phone">
<lightning:input name="Phone" disabled="true" value="{!con.Phone}" />
</div>
</td>
<td>
<div class="slds-truncate" title="Email" aura:id="email">
<lightning:input name="Email" disabled="true" value="{!con.Email}" />
</div>
</td>
<div class="slds-grid">
<button class="slds-button slds-button--brand" onclick="{!c.editFields}">Edit</button>
</div>
</tr>
</aura:iteration>
</tbody>
</table>
<div class="slds-grid slds-grid--align-center">
<button class="slds-button slds-button--brand" onclick="{!c.updateFields}">Update</button>
</div>
</aura:component>
********controller***********
({
/**
* functionName : doInit
* Description :Invokes this method on load
**/
doInit : function(component, event, helper)
{
// Retrieve contacts during component initialization
helper.loadContacts(component, event, helper);
},
/**
* functionName : updateFields
* Description : To update selected records
**/
updateFields : function(component, event, helper)
{
var getAllId=component.find("rowId");
alert(getAllId);
var action=component.get("c.updateContact");
alert(action);
action.setParams({
"lstRecordId":getAllId
});
action.setCallback(this, function(response)
{
var state=response.getState();
if(state === "SUCCESS")
{
console.log(state);
$A.get('e.force:refreshView').fire();
}
});
$A.enqueueAction(action);
},
/**
* functionName : editFields
* Description : To edit selected record
**/
editFields : function(component, event, helper)
{
alert("test edit");
var target = event.target;
var dataEle = target.getAttribute("data-selected-Index");
//document.getElementById('input-2').disabled=false;
component.find("lastname").set("v.disabled", false);
console.log("Component at index "+dataEle); //+" has value "+target.value
},
/**
* functionName : saveRecord
* Description : To Save a selected record
**/
saveRecord : function(component, event, helper)
{
}
})
******helper ***************
({
/**
* functionName : loadContacts
* Description : This method is invoked by the doInit method on load
**/
loadContacts : function(component, event, helper)
{
// Load all contact data
var action=component.get("c.fetchContact");
action.setCallback(this, function(response)
{
var state=response.getState();
if(state === 'SUCCESS')
{
component.set('v.ContactList',response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
**********apex class **********
public with sharing class EditContactWithButton
{
@AuraEnabled
public static List<Contact> fetchContact()
{
//getting records from contact obj
return [select Id,LastName,Update_Time__c,Phone,Email from Contact limit 10];
}
@AuraEnabled
public static void updateContact(List<String> lstRecordId)
{
//List to store updated contacts
List<Contact> lstUpdate=new List<Contact>();
for(Contact con:[select Id,LastName,Update_Time__c,Phone,Email from Contact where Id=:lstRecordId])
{
con.Phone='123';
con.Email='';
//adding records to list
lstUpdate.add(con);
}
if(lstUpdate.size()>0)
{
update lstUpdate;
}
}
}
I am unable to catch my record id during iteration on table in lighting component.Below is my code can any one help me.
Thank you.
**************************Lightning component*******************
<aura:component controller="EditContactWithButton" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
<!-- aura attributes to store data/values -->
<aura:attribute name="ContactList" type="List"/>
<aura:attribute name="recordId" type="String" />
<aura:attribute name="editMode" type="boolean" default="false" />
<!-- call doInit method on component load -->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="force:refreshView" action="{!c.doInit}" />
<table class="slds-table slds-table_bordered slds-table_fixed-layout slds-table_resizable-cols" role="grid">
<thead>
<tr class="slds-line-height_reset">
<th aria-label="LastName" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="LastName">LastName</span>
</div>
</th>
<th aria-label="Phone" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Phone">Phone</span>
</div>
</th>
<th aria-label="Email" aria-sort="none" class="slds-is-resizable slds-is-sortable" scope="col">
<div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate">
<span class="slds-truncate" title="Email">Email</span>
</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.ContactList}" var="con" indexVar="index">
<!--to select each row-->
<tr class="slds-hint-parent" aura:id="rowId" >
<td >{!con.Id}</td> <!--tabindex="{!index}"-->
<td>
<div class="slds-truncate" title="LastName" >
<lightning:input data-selected-Index="{!index}" aura:id="lastname" id="lastname" name="lastname" disabled="{! !v.editMode }" value="{!con.LastName}" />
</div>
</td>
<td>
<div class="slds-truncate" title="Phone" aura:id="phone">
<lightning:input name="Phone" disabled="true" value="{!con.Phone}" />
</div>
</td>
<td>
<div class="slds-truncate" title="Email" aura:id="email">
<lightning:input name="Email" disabled="true" value="{!con.Email}" />
</div>
</td>
<div class="slds-grid">
<button class="slds-button slds-button--brand" onclick="{!c.editFields}">Edit</button>
</div>
</tr>
</aura:iteration>
</tbody>
</table>
<div class="slds-grid slds-grid--align-center">
<button class="slds-button slds-button--brand" onclick="{!c.updateFields}">Update</button>
</div>
</aura:component>
********controller***********
({
/**
* functionName : doInit
* Description :Invokes this method on load
**/
doInit : function(component, event, helper)
{
// Retrieve contacts during component initialization
helper.loadContacts(component, event, helper);
},
/**
* functionName : updateFields
* Description : To update selected records
**/
updateFields : function(component, event, helper)
{
var getAllId=component.find("rowId");
alert(getAllId);
var action=component.get("c.updateContact");
alert(action);
action.setParams({
"lstRecordId":getAllId
});
action.setCallback(this, function(response)
{
var state=response.getState();
if(state === "SUCCESS")
{
console.log(state);
$A.get('e.force:refreshView').fire();
}
});
$A.enqueueAction(action);
},
/**
* functionName : editFields
* Description : To edit selected record
**/
editFields : function(component, event, helper)
{
alert("test edit");
var target = event.target;
var dataEle = target.getAttribute("data-selected-Index");
//document.getElementById('input-2').disabled=false;
component.find("lastname").set("v.disabled", false);
console.log("Component at index "+dataEle); //+" has value "+target.value
},
/**
* functionName : saveRecord
* Description : To Save a selected record
**/
saveRecord : function(component, event, helper)
{
}
})
******helper ***************
({
/**
* functionName : loadContacts
* Description : This method is invoked by the doInit method on load
**/
loadContacts : function(component, event, helper)
{
// Load all contact data
var action=component.get("c.fetchContact");
action.setCallback(this, function(response)
{
var state=response.getState();
if(state === 'SUCCESS')
{
component.set('v.ContactList',response.getReturnValue());
}
});
$A.enqueueAction(action);
}
})
**********apex class **********
public with sharing class EditContactWithButton
{
@AuraEnabled
public static List<Contact> fetchContact()
{
//getting records from contact obj
return [select Id,LastName,Update_Time__c,Phone,Email from Contact limit 10];
}
@AuraEnabled
public static void updateContact(List<String> lstRecordId)
{
//List to store updated contacts
List<Contact> lstUpdate=new List<Contact>();
for(Contact con:[select Id,LastName,Update_Time__c,Phone,Email from Contact where Id=:lstRecordId])
{
con.Phone='123';
con.Email='';
//adding records to list
lstUpdate.add(con);
}
if(lstUpdate.size()>0)
{
update lstUpdate;
}
}
}
muneeswar u