0

I have a lightning datatable. I'm trying to pop out error messages based on some values. I'm getting errors correctly mapped to each cell and each row as well. But the error tooltip is not getting CSS aligned properly.

Look at the below 2 images :

my div id location

<div Id = "myDivId">

Component is created in this div dynamically

tooltip div

<lightning-primitive-datatable-tooltip-bubble> is the tooltip bubble that pops up when the Error icon is clicked near Cancel and Save Same issue happens when i click error icon on the row level

Here is my code :

VF Page :

(I gave the styling to check if its applying , it did apply but the alignment still did not get fixed. So commented out)

<!-- EM_CustomAddProducts_V2.vfp -->
<apex:page standardController="Quote">
    <!--
-->
    <html>
        <head>
            <!--
            <style>
                .slds-popover_error
                {
                    z-index: 9999 !important;
                    background-color : blue !important;
                }
            </style>
            -->
        </head>

        <body>  
            <apex:includeLightning />  
            <div id="myDivId">  
            </div>  

            <script>  
            var myUserContext = "{!$User.UITheme}";  

            $Lightning.use("c:EM_AddProductsApp_V2", function() {  
                $Lightning.createComponent(  
                    "c:EM_AddProducts_V2",  
                    { 
                        //UserContext: myUserContext,
                        "recordId" : "{!$CurrentPage.parameters.id}",
                        "showSpinner" : true
                    },  
                    "myDivId",  
                    function(cmp) {  
                        console.log('component created');  
                        console.log(cmp);  
                    });  
            });  
            </script>  
        </body> 
    </html>

</apex:page>

Lightning out App :

<!-- APP : c:EM_AddProductsApp_V2 -->
<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:EM_AddProducts_V2"/>
</aura:application>

Lightning component - MARKUP :

(adding only the necessary code)

<div aura:id="selectedPRDTable" class="slds-modal__content slds-hide applyOverflow">
    <aura:if isTrue="{!v.flagValue}">
        <a href="javascript:void(0)" onclick="{!c.showAllProducts}">
            Show All Products 
        </a>
    </aura:if>
    <br/><br/>

    <legend class="slds-text-title--caps legendTitle">Selected Products</legend>

    <div class="slds-tile">
        <lightning:datatable aura:id="selecteddataTable"
                             data="{!v.SelectedPRDData}"
                             columns="{!v.SelectedPRDColumns}"
                             keyField="Id"
                             selectedRows="{!v.recordIdsStored}"
                             onrowselection="{!c.getSelectedRows}"
                             onsave="{!c.Save}"
                             oncancel="{!c.goBack}"
                             errors="{!v.tableErrors}"
                             hideCheckboxColumn="false"/>
    </div>
    <br/>
    <!--
            <aura:if isTrue="{!!v.hideCheckbox}">
                <div>
                    <lightning:button label="Save Products" class="slds-button_brand" onclick="{!c.Save}"/>
                    <lightning:button label="Back" class="slds-button_neutral" onclick="{!c.goBack}"/>
                </div>                    
            </aura:if>
    -->
    <br/>
</div>

CSS :

(I tried this but not much of use)

/* lightning-primitive-data table-status-bar .slds-popover*/
.THIS .slds-popover_error{
    z-index: 9999 !important;    
    background-color : blue !important;
}

JS CONTROLLER :

/*Insert Quote Line Items & call the ERP webservice to get quote line prices*/
    getQuotePricesFromERP : function(component,event) 
    {
        var errorsFound = false;

        var selectedRecs = component.get("v.selectedRecords");
        var getVal = component.find("selecteddataTable").get("v.draftValues");        
        console.log('selectedRecs**'+JSON.stringify(selectedRecs));
        console.log('get draft**'+JSON.stringify(getVal));

        var errors = { rows: {}, table: {} }
        selectedRecs.forEach(function(ey,index)
        {
            if(getVal[index] && getVal[index].qliQuantity)
                selectedRecs[index].qliQuantity = getVal[index].qliQuantity;
            if(getVal[index] && getVal[index].qliDiscount)
                selectedRecs[index].qliDiscount = getVal[index].qliDiscount;
            if(getVal[index] && getVal[index].UnitPrice)
                selectedRecs[index].UnitPrice = getVal[index].UnitPrice;

            if(ey.isSelected == true && 
               ey.UnitPrice == null || ey.qliDiscount == null || ey.qliQuantity == null)
            {
                errorsFound = true;
                errors.rows[ey.Id] = { 
                                        title: "Please input values for the mandatory fields.",
                                        messages: [
                                            'Enter a valid Sales Price, Discount & Quantity',
                                        ],
                                        fieldNames: [
                                            (ey.UnitPrice == null ? 'UnitPrice' : ''),
                                            (ey.qliDiscount == null ? 'qliDiscount' : ''),
                                            (ey.qliQuantity == null ? 'qliQuantity' : '')
                                        ]
                                    }    
            }
        });

        errors.table.title = "Your entry cannot be saved. Fix the errors and try again.";
        errors.table.messages = ['Unit Price is mandatory',
                                 'Quantity is mandatory',
                                 'Discount is mandatory'];

        console.log('errors**'+JSON.stringify(errors));
        component.set("v.tableErrors", errors);

        if(!errorsFound)
        {
            var selRecs = [];
            for(var ey in selectedRecs)
            {
                if(getVal[ey].Id == selectedRecs[ey].Id)
                {
                    var eachSelectedSet = {
                        "prodId" : selectedRecs[ey].Product2Id,
                        "qliId" : selectedRecs[ey].qliId,
                        "quantity": getVal[ey].qliQuantity,
                        "discount": getVal[ey].qliDiscount,
                        "description": getVal[ey].qliDescription,
                        "price" : (getVal[ey].UnitPrice != null) ? getVal[ey].UnitPrice : selectedRecs[ey].UnitPrice,
                        "pbeId" : getVal[ey].Id
                    };
                    selRecs.push(eachSelectedSet);
                }
            }

            console.log('selRecs**'+JSON.stringify(selRecs));

            // performing action here
            action.setParams({
                myWraps : JSON.stringify(selRecs),
                quoteId : component.get("v.recordId") 
            });  
        }
        else{
            // open error showing that table errors found
        }        
    },
0

Use below in your code and it will fix the issue.

.THIS .slds-popover_error{
display : none !important; }

| improve this answer | |
  • I want that error to be shown with proper CSS not to hide that error altogether. – AjaySFDC Oct 11 '19 at 14:07
  • It has fixed the issue for me and I was able to get the tooltip correctly – Mangesh Belsare Oct 12 '19 at 3:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.