2

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 :

enter image description here

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)"]}}
8
  • Are you able to provide the component HTML source code? Also, show how this JS function is wired in the component HTML?
    – arut
    Nov 2, 2020 at 6:53
  • Thanks for your reply. I have updated my post. Nov 2, 2020 at 12:05
  • Did you get any Script error on the action? If not then what are you getting in console.log('Error Details>>'+JSON.stringify(errors)); ? Nov 2, 2020 at 13:28
  • Thanks, Sachin for taking the time to read it thoroughly. I have updated my post with the log you are referring to. Nov 2, 2020 at 13:47
  • No issue found in your code provided so far. I used the same errors value in lightning: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 an header element (with class="slds-popover__header") and a div element (with class="slds-popover__body")? or lightning-primitive-datatable-tooltip-bubble element? [Note: Click on error icon before checking this]
    – arut
    Nov 2, 2020 at 18:23

1 Answer 1

0

I was experiencing the same issue with <lightning-datatable /> in a quickaction modal. Following the advice of @arut I saw that a lightning-primitive-datatable-tooltip-bubble showed up in the html after the error icon is clicked.

Turns out it's a z-index issue. If it isn't already, wrap that <lightning:datatable /> in an aura component and inject some css to crank that z-index up:

<aura:component>

  <aura:html tag="style">
    .slds-popover {
      z-index: 10000;
    }
  </aura:html>

  <!--YOUR DATATABLE-->

</aura:component>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .