Like in the below image in Quantity columns, I need to add input text field so that user can enter value in it.
Is it possible?
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this communityLike in the below image in Quantity columns, I need to add input text field so that user can enter value in it.
Is it possible?
Asuming you are using Aura, yes you can. Fist you would need please find code snippets below.
CMP file:
<div style="height: 300px">
<lightning:datatable
keyField="Id"
columns="{!v.orderLabels}"
data="{!v.orders}"
hideCheckboxColumn="true"
minColumnWidth="120"
errors="{!v.errors}"
draftValues="{!v.draftValues}"
onsave="{!c.handleSave}"
onrowaction="{!c.handleRowAction}"
showRowNumberColumn="false"
/>
</div>
JS to prepare the table on init and set which fields are editable:
setTableLabels: function(component) {
let action = component.get("c.getOrderLabels");
action.setCallback(this, function(response) {
if (response.getState() === "SUCCESS") {
var labelsMap = response.getReturnValue();
var moreInfoLabel = $A.get("$Label.c.CM_More_Info");
component.set("v.orderLabels", [
{label: labelsMap.OrderLine, type: "button", typeAttributes:{
label: moreInfoLabel,
name: "showOrderLine",
disabled: false
}},
{label: labelsMap.Name, fieldName: "Name", type: "text"},
{label: labelsMap.RecipientName, fieldName: "recipient", type: "text"},
{label: labelsMap.OrderType, fieldName: "OrderType__c", type: "text"},
{label: labelsMap.Status, fieldName: "Status__c", type: "text"},
{label: labelsMap.OrderPeriodStartDate, fieldName: "OrderPeriodStartDate__c", type: "date"},
{label: labelsMap.OrderPeriodEndDate, fieldName: "OrderPeriodEndDate__c", type: "date"},
{label: labelsMap.TotalAmount, fieldName: "TotalAmount__c", type: "currency"},
{label: labelsMap.CancelledDate, fieldName: "CancelledDate__c", type: "date"},
{label: labelsMap.ShippingZipPostalCode, fieldName: "ShippingZipPostalCode__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingStreet2, fieldName: "ShippingStreet2__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingStreet1, fieldName: "ShippingStreet1__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingStateProvince, fieldName: "ShippingStateProvince__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingCountry, fieldName: "ShippingCountry__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingCity, fieldName: "ShippingCity__c", type: "text", editable: "true", hideDefaultActions: true}
]);
}
});
$A.enqueueAction(action);
},
JS to handle the save actions:
handleSave : function(component, event, helper) {
var draftValues = event.getParam('draftValues');
var action = component.get("c.updateOrders");
action.setParams({"orders": draftValues});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
helper.showToastMessage(component, "Success!", "Order information updated successfully.", "success");
$A.get('e.force:refreshView').fire();
} else {
var errors = response.getError();
console.log(errors);
helper.showToastMessage(component, "Error! Can't update record.", errors[0].message, "error");
$A.get('e.force:refreshView').fire();
}
});
$A.enqueueAction(action);
},
There are more details, but I think this could give you a good start.