I have a lightning component to allow inline edit on flow. Whenever some changes made on the data table I am validating it from js and adding the error message to the data table eventually.
I am getting the error icon for bad data in the table but when clicking on it the popover not working.
Lightning Component :
var draftValues = event.getParam('draftValues');
console.log('Draft Values'+JSON.stringify(draftValues));
var availableRecords = component.get("v.records");
var totalErrors = 0;
var errors = {};// new Map<String, Object>();
var rowsError = {};// new Map<String, Object>();
draftValues.forEach(function(draftRecord){
var rowErrorMessages = [];
var rowErrorFieldNames = [];
var totalPercent = 0;
availableRecords.forEach(function(originalRecord){
if(draftRecord.Id == originalRecord.Id) {
//Total Percentage calcualtion=> Logic removed
if(totalPercent != 100) {
rowErrorMessages.push('Overall percentage must be equals to 100');
rowErrorFieldNames.push('Overall__c');
}
if (rowErrorMessages.length > 0) {
totalErrors += rowErrorMessages.length;
rowsError[originalRecord.Id] = {
messages: rowErrorMessages,
fieldNames: rowErrorFieldNames,
title: originalRecord.Material__c + ' has ' + rowErrorMessages.length + ' error(s)'
};
}
}
});
});
if (totalErrors > 0) {
var tableMessages = [];// new List<String>();
var rowErrorValues = Object.values(rowsError);
rowErrorValues.forEach(function (rowError) {
tableMessages.push(rowError.title);
});
errors = {
/*
* https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/example#lightningcomponentdemo:exampleDatatableInlineEdit
*/
rows: rowsError,
table: {
title : 'Some records have errors', // the title of the popover
messages : tableMessages // A list of messages to be displayed as the popover content
}
};
console.log('Error Details>>'+JSON.stringify(errors));
component.set("v.errors",errors);
}
Image of my flow :
Appreciate your help.
Thank you.
Updating with Lightning component code
<lightning:datatable keyField="Id"
data="{!v.records}"
columns="{!v.columns}"
errors="{! v.errors }"
hideCheckboxColumn="true"
draftValues="{!v.draftValues}"
onsave="{!c.handleSave}"/>
Updating the error string in console log. This is the custom error object I am adding in js.
{"rows":{"a1z26000001zNtsAAE":{"messages":["Overall percentage must be equals to 100"],"fieldNames":["Overall__c"],"title":"General Construction Waste has 1 error(s)"}},"table":{"title":"Some records have errors","messages":["General Construction Waste has 1 error(s)"]}}
errors
value inlightning:datatable
and was able to see the error pop-up. Have you checked if the component has any CSS that could be causing this issue? If possible, provide the same in the question. Also (assuming that you are familiar to Chrome dev console), can you check if the rendered page HTML has anheader
element (with class="slds-popover__header") and adiv element
(with class="slds-popover__body")? orlightning-primitive-datatable-tooltip-bubble
element? [Note: Click on error icon before checking this]