2

I am trying to display table in the modalbody and modalfooter with ok and cancel button but over lay is not loading it throws some promise errors:

Uncaught (in promise) TypeError: Cannot read property 'la' of undefined
    at Object.dispatchGlobalEvent (aura_prod.js:707)
    at Promise (lightning-overlay-utils.js:2)
    at new Promise (<anonymous>)
    at Promise.all.then (lightning-overlay-utils.js:2)

overlaycomponent:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
<lightning:overlayLibrary aura:id="overlayLib"/>    
</aura:component>

({
    doInit : function(component, event, helper) {
    var modalBody;
    var modalFooter;
    $A.createComponents([
        ["c:Datatablecomponent",{}],
        ["c:modalFooter",{}]
    ],
    function(components, status){
        if (status === "SUCCESS") {
            modalBody = components[0];
            modalFooter = components[1];
            component.find('overlayLib').showCustomModal({
               header: "Application Confirmation",
               body: modalBody, 
               footer: modalFooter,
               showCloseButton: true,
               closeCallback: function() {
                   alert('You closed the alert!');
               }
           })
        }
    }
   );   
    }
})

modalfooter:

<aura:component >
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button name="cancel" label="Cancel" onclick=""/>
    <lightning:button name="ok" label="OK" variant="brand" onclick=""/>
</aura:component>

datatable component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller="AccountController">
    <aura:attribute name="AccountData" type="Object"/>
    <aura:attribute name="SelectedAccount" type="Object[]"/>
    <aura:attribute name="columns" type="List"/>    
    <!-- Attribute Declration For Pagination -->
    <aura:attribute name="PaginationList" type="account"/>
    <aura:attribute name="startPage" type="Integer" />
    <aura:attribute name="endPage" type="Integer"/>
    <aura:attribute name="totalRecords" type="Integer"/>
    <aura:attribute name="pageSize" type="Integer" default="10"/>
    <!-- Attribute Declration For Pagination End-->
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <label>Account Table</label>
        <lightning:datatable aura:id="accountTable" data="{! v.PaginationList }" 
                             columns="{! v.columns }" 
                             keyField="id"
                             onrowselection="{! c.getSelectedName }"/>  
        <br/>
        <lightning:buttonGroup >
            <lightning:button label="Previous" disabled="{!v.startPage == 0}"  
                              onclick="{!c.previous}" variant="brand"
                              iconName='utility:back'/>
            &nbsp; &nbsp; &nbsp;
            <lightning:button label="Next" disabled="{!v.endPage >= v.totalRecords}" 
                              onclick="{!c.next}" variant="brand"
                              iconName='utility:forward' iconPosition='right'/>
        </lightning:buttonGroup>
        <lightning:button label="Save"  
                              onclick="{!c.save}" variant="brand"/>
</aura:component>
2

I can reproduce this issue for my popovers when I test my harness app or run mochaTests.app:

https://<my-environment>.lightning.force.com/c/<my-harness-app>.app

However, everything works inside my custom lightning page where I have added my Lightning component:

https://<my-environment>.lightning.force.com/one/one.app#/n/Awesome_and_Incredible_Taskpace_Tasks

Use the app builder to create a new lightning page. Then add your [root] component to this page.

I believe this is the correct way to test modals/popovers as well as navigation and urls in your components.

| improve this answer | |

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.