0

I am trying to have a popover to display next to a button when that button is clicked in the lighting data table as shown below:enter image description here

As you can see, the pop over appears in the upper left hand corner instead of next to the info button.

The problem is that I can't reference the icon-button in the data table to pass it to reference selector of Overlay Library.

Below is my code. Please let me know on how I can fix this and excuse my rookie mistakes, I am new to Stack exchange and Salesforce developing.

Thank you!

Markup:

<div class="slds-grid" align = "bottom">
    <div class="slds-col slds-text-heading_large">Accounts</div>       
    <div class="slds-col " align ="right">
        Billing Groups

        <lightning:button class ="mainPopover"  iconName="utility:info"   variant="bare" onclick = "{!c.handlePopover}" />


    </div>

    <div class="slds-col" align="right" >

        <lightning:input type="checkbox" label = "Closed Accounts" /> 
    </div>
    <div class="slds-col">
        <lightning:input type="checkbox" label = "Admin Info"/>
    </div> 
</div>



<div class="slds-table">
    <aura:if isTrue="{!not(empty(v.mydata))}" >
        <!-- the container element determine the height of the datatable -->
        <lightning:datatable keyField="id"
                             data="{! v.mydata }"
                             columns="{! v.mycolumns }"
                             hideCheckboxColumn="true" 
                             onrowaction="{!c.handleInlinePopover}"></lightning:datatable>
    </aura:if>
    <aura:if isTrue="{!empty(v.mydata)}" >
        <p>{!v.noResults}</p>
    </aura:if>
    <aura:if isTrue="{! v.isLoading }">
        <lightning:spinner alternativeText="Loading"/>
    </aura:if>
</div>

Controller

({
init: function (component, event, helper) {
    helper.fetchData(component);
},
handlePopover : function (component, event, helper){
    helper.mainPopover(component, event);
},

handleInlinePopover : function (component, event, helper){
 helper.inlinePopover(component, event);   

}

})

Helper

({
fetchData: function (component) {

    var action = component.get('c.getData');
    action.setCallback(this, $A.getCallback(function (response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var jsonData = JSON.parse(response.getReturnValue());
            if(jsonData) {

                component.set('v.mycolumns', [
                    { label: 'Registration', fieldName: 'registration', type: 'text'},
                    { label: 'Type', fieldName: 'accountType', type: 'text'},
                    { label: 'Account#', fieldName: 'accountNum', type: 'text'},
                    //{ label: 'EO Visible', fieldName: 'eoVisible', type: 'boolean'},
                    { label: 'Custodian', fieldName:'custodian',type:'text'},
                    //{ label: 'Fee Schedule', fieldName:'feeSchedule', type:'text'},
                    {type: 'button-icon', initialWidth:50 ,typeAttributes: {
                     name:'inlinePopover',
                     title:'inlinePopover',
                     disabled:false,
                     class:'inlinePopover',
                     iconName: 'utility:info',
                     variant:'bare',
                     iconPosition: 'left'
                    }},
                    { label: 'SLOA on File',initialWidth:100, fieldName:'sloaOnFile', type:'boolean'},
                    { label: 'Status', initialWidth:100, fieldName:'status', type:'boolean'},
                    { label: 'Value', fieldName:'value', type:'currency'}
                ]);

                //Testing Conditional Formatting                  


                console.log('json items after parsed: ' + JSON.stringify(jsonData));
                component.set('v.mydata', jsonData);
                component.set('v.isLoading', false );
            } else {
                component.set("v.noResults", "No records to display");
            }
        } else if (state === "ERROR") {
            var errors = response.getError();
            console.error(errors);
            component.set("v.noResults", "An error occurred: No records to display");
        }
    }));
    $A.enqueueAction(action);
},

mainPopover : function (component, event){

    $A.createComponent('c:accountListingMainPopover', {},
                       function(content, status, error) {
                           if (status === "SUCCESS") {
                               component.find('overlayLib').showCustomPopover({
                                   body: content,
                                   referenceSelector:'.mainPopover',
                               });
                           } else {
                               throw new Error(error);
                           }
                       });

},

inlinePopover : function (component, event){
     var action = event.getParam('action');
    $A.createComponent('c:accountListingMainPopover', {},
                       function(content, status, error) {
                           if (status === "SUCCESS") {
                               component.find('overlayLib').showCustomPopover({
                                   body: content,
                                   referenceSelector:'.'+action.class,
                               });
                               var getParam = event.getSource()
                               console.log('the class is: +++ ' + JSON.stringify(action.class));
                           } else {
                               throw new Error(error);
                           }
                       }); 




}

})

0

come across this as I was looking at the same issue.

Found a solution here which is basically to use the referenceSelector to select which element the popover is appended to.

From the documentation:

referenceSelector   Object  The reference element to which the popover is appended. The popover is appended to the right of the reference element.
| 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.