I have to dynamically add and delete records in my lightning page.
I have done with adding the rows but I am not getting how i will remove the records. Rather I am not understanding how I will get the record that i have to delete as an parameter.
App
<aura:application >
<c:AddDeleteMapping>
</aura:application>
Component
<aura:component controller="AddMappingController">
<aura:attribute name="wrappers" type="OpportunityRollOverStageMapping[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:registerEvent name="deleteExpenseItem" type="c:deleteExpenseItem"/>
<table>
<tr>
<th class="head">Count</th>
<th class="head">From Stage</th>
<th class="head">To Stage</th>
<th class="head"></th>
</tr>
<aura:iteration items="{!v.wrappers}" var="wrap">
<tr>
<td class="cell">
<ui:outputText value="{!wrap.count}" />
</td>
<td class="cell">
<ui:outputText value="{!wrap.fromStage}" />
</td>
<td class="cell">
<ui:outputText value="{!wrap.toStage}" />
</td>
<td class="cell">
<ui:button label="Delete" press="{!c.deleteMapping}"/>
</td>
</tr>
</aura:iteration>
</table>
<button onclick="{!c.addMapping}">Add Mapping</button>
lightning Controller
({
doInit : function(component, event, helper) {
helper.GetStageMapping(component);
},
addMapping : function(component, event, helper){
helper.AddStageMapping(component);
},
deleteMapping : function(component, event, helper){
}})
Helper
({
GetStageMapping : function(component){
var action = component.get("c.getFromStageAndToStages");
var responses ='';
action.setCallback(this,function(response){
responses = response.getReturnValue();
var wrappers=new Array();
if(component.isValid()){
var wrappers=new Array();
for (var idx=0; idx<responses.length; idx++) {
var wrapper = { 'count' : responses[idx].count,
'fromStage' : responses[idx].fromStage,
'toStage' : responses[idx].toStage
};
wrappers.push(wrapper);
}
component.set("v.wrappers",wrappers );
}
});
$A.enqueueAction(action);
},
AddStageMapping:function(component){
var action = component.get("c.getAddedStageAndToStages");
var responses ='';
var wrappers=component.get('v.wrappers');
alert('wRAPPERS: '+ wrappers);
var mappRecords = new Array();
for (var idx=0; idx<wrappers.length; idx++) {
mappRecords.push(wrappers[idx]);
}
var ListJSON=JSON.stringify(mappRecords);
alert(ListJSON);
action.setParams({
OpportunityRollOverStageMapping : ListJSON
});
action.setCallback(this,function(response){
responses = response.getReturnValue();
var wrappers=new Array();
if(component.isValid()){
var wrappers=new Array();
for (var idx=0; idx<responses.length; idx++) {
var wrapper = { 'count' : responses[idx].count,
'fromStage' : responses[idx].fromStage,
'toStage' : responses[idx].toStage
};
wrappers.push(wrapper);
}
component.set("v.wrappers",wrappers );
}
});
$A.enqueueAction(action);
},
DeleteMapping : function(component, expense, callback) {
}
})
Apex Controller
public class AddMappingController {
public static List<OpportunityRollOverStageMapping> listStageMappings;
public AddMappingController (){
listStageMappings = new List<OpportunityRollOverStageMapping>();
}
@AuraEnabled
public static List<OpportunityRollOverStageMapping> getFromStageAndToStages(){
listStageMappings = new List<OpportunityRollOverStageMapping>();
List<OpportunityRollOverStageMapping> wcList = new List<OpportunityRollOverStageMapping>();
for(integer i =0 ; i< 2; i++){
OpportunityRollOverStageMapping opportunityRollOverStageMap= new OpportunityRollOverStageMapping();
opportunityRollOverStageMap.count = i;
opportunityRollOverStageMap.fromStage= 'str'+i;
opportunityRollOverStageMap.toStage= 'str'+i;
listStageMappings.add(opportunityRollOverStageMap);
wcList.add(opportunityRollOverStageMap);
}
return wcList;
}
@AuraEnabled
public static List<OpportunityRollOverStageMapping> getAddedStageAndToStages(string OpportunityRollOverStageMapping){
Type stageMappingType = Type.forName('List<OpportunityRollOverStageMapping>');
List<OpportunityRollOverStageMapping> parameterList = (List<OpportunityRollOverStageMapping>) JSON.deserialize(OpportunityRollOverStageMapping, stageMappingType);
List<OpportunityRollOverStageMapping> wcList =new List<OpportunityRollOverStageMapping>();
wcList.addAll(parameterList);
OpportunityRollOverStageMapping opportunityRollOverStageMap= new OpportunityRollOverStageMapping();
opportunityRollOverStageMap.count = wcList.size();
opportunityRollOverStageMap.fromStage= 'str'+wcList.size();
opportunityRollOverStageMap.toStage= 'str'+wcList.size();
wcList.add(opportunityRollOverStageMap);
return wcList;
}
@AuraEnabled
public static string deleteExpenseItem(string OpportunityRollOverStageMapping) {
return 'srk';
}}
Add the element as new row is done. But how will i delete the specific selected row from the list?
