TransWikia.com

Show form on mouse hover using Lightning component

Salesforce Asked by SFDC Guest on December 28, 2021

I have written lightning component to display accounts. Can you please let me know how to display popup modal (with Account Name, Description) when keeping the mouse hover on Account name using overlay library component. recordviewform component should be called and displayed as modal when keeping mouse on account name. Thanks in advance.

AccountListController.cmp

    <aura:component controller="AccountListController"
                    implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
        
        <aura:attribute type="Account[]" name="acctList"/>
        <aura:attribute name="mycolumns" type="List"/>
        
        <aura:handler name="init" value="{!this}" action="{!c.fetchAccounts}"/>
        
        <lightning:datatable data="{! v.acctList }" 
                             columns="{! v.mycolumns }" 
                             keyField="id"
                             hideCheckboxColumn="true"/>
        
    </aura:component>

JS Controller:

    ({
        fetchAccounts : function(component, event, helper) {
            component.set('v.mycolumns', [
                {label: 'Account Name', fieldName: 'Name', type: 'text'},
                    {label: 'Industry', fieldName: 'Industry', type: 'text'},
                    {label: 'Type', fieldName: 'Type', type: 'Text'}
                ]);
            var action = component.get("c.fetchAccts");
            action.setParams({
            });
            action.setCallback(this, function(response){
                var state = response.getState();
                if (state === "SUCCESS") {
                    component.set("v.acctList", response.getReturnValue());
                }
            });
            $A.enqueueAction(action);
        }
    })

Server Side Controller:

public class AccountListController {
        
        @AuraEnabled
        public static List < Account > fetchAccts() {
            return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 10 ];
        }
        
    }

recordviewform.cmp:

    <aura:component>
        <lightning:recordViewForm recordId="{recordId}" objectApiName="Account">
            <div class="slds-box">
                <lightning:outputField fieldName="Name" />
                <lightning:outputField fieldName="Description" />
            </div>
        </lightning:recordViewForm>
    </aura:component>

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP