+ Start a Discussion
Michael Degn JensenMichael Degn Jensen 

Aura Component modal <div> show only first record

Hi,

I trying to build a custom list view where our user would like to have more information about the Account when hovering over certain columns in the table/list view.

I have build the list view and the modal which opens when the user hovers over the Name column. In the modal div I want to show more info from the record, but no matter which row I hover over, the information from the first row is displayed :(

Btw if there is an easier way to create the modal, I am very interested.

Any help is appreciated.

Thanks!

component:
<aura:component controller="AccountsController">
    
    
    <aura:attribute name="accounts" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
    <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
        <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
                <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
                <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
            </tr>
        </thead>
        <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.accounts}" var="account">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!account.Id}">{!account.Id}</div></th>
                    <td><div class="slds-truncate" title="{!account.Name}" onmouseover="{!c.openModal}">{!account.Name}</div></td>
                    <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
                    <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
                    <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
                    <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
                    <td>
                        <form class="account-form" onsubmit="{!c.deleteAccount}">
                            <input type="hidden" value="{!account.Name}" class="account-name" />
                            <!-- Use a Lightning Base Component To display an icon next to the label -->
                            <lightning:button
                                              label="Delete"
                                              iconName="utility:delete"
                                              iconPosition="left"
                                              variant="destructive"
                                              type="submit"
                                              />
                        </form>
                    </td>
                </tr>
                
                <!-- The Modal -->
                <div id="myModal" class="modal">
                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close" onmouseout="{!c.closeModal}">&times;</span>
                        <p>{!account.Name}</p>
                    </div>
                </div>
            </aura:iteration>
        </tbody>
    </table>
    
    
</aura:component>

Controller:
({
    doInit: function(component, event, helper) {
        // Fetch the account list from the Apex controller
        helper.getAccountList(component);
    },
    deleteAccount: function(component, event, helper) {
        // Prevent the form from getting submitted
        event.preventDefault();
        // Get the value from the field that's in the form
        var accountName = event.target.getElementsByClassName('account-name')[0].value;
        confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
    },
    
    // When the user clicks the button, open the modal 
    openModal: function() {
        var modal = document.getElementById("myModal"); // Get the modal
        var btn = document.getElementById("myBtn"); // Get the button that opens the modal
        var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
      	modal.style.display = "block";
    },
    // When the user clicks on <span> (x), close the modal
    closeModal: function() {
    	var modal = document.getElementById("myModal"); // Get the modal
        var btn = document.getElementById("myBtn"); // Get the button that opens the modal
        var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
      	modal.style.display = "none";
    },
    // When the user clicks anywhere outside of the modal, close it
    clickOutside: function(event) {
    	var modal = document.getElementById("myModal"); // Get the modal
        var btn = document.getElementById("myBtn"); // Get the button that opens the modal
        var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
        if (event.target == modal) {
        	modal.style.display = "none";
      	}
    }
})
Helper:
({
    // Fetch the accounts from the Apex controller
    getAccountList: function(component) {
        var action = component.get('c.getAccounts');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.accounts', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})
Style:
.THIS {
}

/* The Modal (background) */
.THIS .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.THIS .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.THIS .close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.THIS .close:hover,
.THIS .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}



 
Best Answer chosen by Michael Degn Jensen
Deepali KulshresthaDeepali Kulshrestha
Hi Michael,
Greetings to you!

- I read your problem and implemented in my Org. Please use the below code[Solved] : - 
- mouse hover is applied on Account Id.

Component : - 
<aura:component controller="AccountsController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">

        <aura:attribute name="accounts" type="List" />
        <aura:attribute name="accountDetails" type="List" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
        <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
            <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
                <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
                <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
            </tr>
            </thead>
            <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.accounts}" var="account">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!account.Id}" onmouseover="{!c.openModal}">{!account.Id}</div></th>
                    <td><div class="slds-truncate" title="{!account.Name}" >{!account.Name}</div></td>
                    <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
                    <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
                    <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
                    <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
                    <td>
                        <form class="account-form" onsubmit="{!c.deleteAccount}">
                            <input type="hidden" value="{!account.Name}" class="account-name" />
                            <!-- Use a Lightning Base Component To display an icon next to the label -->
                            <lightning:button
                                    label="Delete"
                                    iconName="utility:delete"
                                    iconPosition="left"
                                    variant="destructive"
                                    type="submit"
                            />
                        </form>
                    </td>
                </tr>

                <!-- The Modal -->
                <div id="myModal" class="modal">
                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close" onmouseout="{!c.closeModal}">&times;</span>
                        <aura:iteration items="{!v.accountDetails}" var="accounts">
                            <p>{!accounts.Name}</p>
                            <p>{!accounts.Type}</p>
                            <p>{!accounts.NumberOfEmployees}</p>
                            <p>{!accounts.TickerSymbol}</p>
                            <p>{!accounts.Phone}</p>
                        </aura:iteration>
                    </div>
                </div>
            </aura:iteration>
            </tbody>
        </table>


    </aura:component>


JS Controller : -

    ({
        doInit: function(component, event, helper) {
            // Fetch the account list from the Apex controller
            helper.getAccountLists(component);
        },
        deleteAccount: function(component, event, helper) {
            // Prevent the form from getting submitted
            event.preventDefault();
            // Get the value from the field that's in the form
            var accountName = event.target.getElementsByClassName('account-name')[0].value;
            confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
        },

        // When the user clicks the button, open the modal
        openModal: function(component, event, helper) {
            event.preventDefault();
            console.log('val--->>'+event.currentTarget.title);
            let accId = event.currentTarget.title;
            var action = component.get('c.getAccountsDetails');
            // Set up the callback
            action.setParams({
               "accId": accId,
           });
            action.setCallback(this, function(actionResult) {
                component.set('v.accountDetails', actionResult.getReturnValue());
            });
            $A.enqueueAction(action);
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            modal.style.display = "block";
        },
        // When the user clicks on <span> (x), close the modal
        closeModal: function() {
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            modal.style.display = "none";
        },
        // When the user clicks anywhere outside of the modal, close it
        clickOutside: function(event) {
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    })


JS Helper : - 

    ({
        // Fetch the accounts from the Apex controller
        getAccountLists: function(component) {
            var action = component.get('c.getAccounts');
            // Set up the callback
            var self = this;
            action.setCallback(this, function(actionResult) {
                component.set('v.accounts', actionResult.getReturnValue());
            });
            $A.enqueueAction(action);
        }
    })
    
    
Class [AccountsController] : -

    public class AccountsController {

        @AuraEnabled
         public static List<Account> getAccounts(){
            List<Account> accList = [SELECT Id,Name,Type,NumberOfEmployees,TickerSymbol,Phone FROM Account];
        return accList;
        }

        @AuraEnabled
        public static List<Account> getAccountsDetails(String accId){
            List<Account> accList = [SELECT Id,Name,Type,NumberOfEmployees,TickerSymbol,Phone FROM Account WHERE Id=:accId];
            return accList;
        }
    }

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.

All Answers

Deepali KulshresthaDeepali Kulshrestha
Hi Michael,
Greetings to you!

- I read your problem and implemented in my Org. Please use the below code[Solved] : - 
- mouse hover is applied on Account Id.

Component : - 
<aura:component controller="AccountsController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">

        <aura:attribute name="accounts" type="List" />
        <aura:attribute name="accountDetails" type="List" />
        <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
        <!-- Use a data table from the Lightning Design System: https://www.lightningdesignsystem.com/components/data-tables/ -->
        <table class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">
            <thead>
            <tr class="slds-text-heading_label">
                <th scope="col"><div class="slds-truncate" title="ID">ID</div></th>
                <th scope="col"><div class="slds-truncate" title="Name">Name</div></th>
                <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
                <th scope="col"><div class="slds-truncate" title="Number Of Employees">Number Of Employees</div></th>
                <th scope="col"><div class="slds-truncate" title="Ticker Symbol">Ticker Symbol</div></th>
                <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
                <th scope="col"><div class="slds-truncate" title="Delete">Delete</div></th>
            </tr>
            </thead>
            <tbody>
            <!-- Use the Apex model and controller to fetch server side data -->
            <aura:iteration items="{!v.accounts}" var="account">
                <tr>
                    <th scope="row"><div class="slds-truncate" title="{!account.Id}" onmouseover="{!c.openModal}">{!account.Id}</div></th>
                    <td><div class="slds-truncate" title="{!account.Name}" >{!account.Name}</div></td>
                    <td><div class="slds-truncate" title="{!account.Type}">{!account.Type}</div></td>
                    <td><div class="slds-truncate" title="{!account.NumberOfEmployees}">{!account.NumberOfEmployees}</div></td>
                    <td><div class="slds-truncate" title="{!account.TickerSymbol}">{!account.TickerSymbol}</div></td>
                    <td><div class="slds-truncate" title="{!account.Phone}">{!account.Phone}</div></td>
                    <td>
                        <form class="account-form" onsubmit="{!c.deleteAccount}">
                            <input type="hidden" value="{!account.Name}" class="account-name" />
                            <!-- Use a Lightning Base Component To display an icon next to the label -->
                            <lightning:button
                                    label="Delete"
                                    iconName="utility:delete"
                                    iconPosition="left"
                                    variant="destructive"
                                    type="submit"
                            />
                        </form>
                    </td>
                </tr>

                <!-- The Modal -->
                <div id="myModal" class="modal">
                    <!-- Modal content -->
                    <div class="modal-content">
                        <span class="close" onmouseout="{!c.closeModal}">&times;</span>
                        <aura:iteration items="{!v.accountDetails}" var="accounts">
                            <p>{!accounts.Name}</p>
                            <p>{!accounts.Type}</p>
                            <p>{!accounts.NumberOfEmployees}</p>
                            <p>{!accounts.TickerSymbol}</p>
                            <p>{!accounts.Phone}</p>
                        </aura:iteration>
                    </div>
                </div>
            </aura:iteration>
            </tbody>
        </table>


    </aura:component>


JS Controller : -

    ({
        doInit: function(component, event, helper) {
            // Fetch the account list from the Apex controller
            helper.getAccountLists(component);
        },
        deleteAccount: function(component, event, helper) {
            // Prevent the form from getting submitted
            event.preventDefault();
            // Get the value from the field that's in the form
            var accountName = event.target.getElementsByClassName('account-name')[0].value;
            confirm('Delete the ' + accountName + ' account? (don’t worry, this won’t actually work!)');
        },

        // When the user clicks the button, open the modal
        openModal: function(component, event, helper) {
            event.preventDefault();
            console.log('val--->>'+event.currentTarget.title);
            let accId = event.currentTarget.title;
            var action = component.get('c.getAccountsDetails');
            // Set up the callback
            action.setParams({
               "accId": accId,
           });
            action.setCallback(this, function(actionResult) {
                component.set('v.accountDetails', actionResult.getReturnValue());
            });
            $A.enqueueAction(action);
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            modal.style.display = "block";
        },
        // When the user clicks on <span> (x), close the modal
        closeModal: function() {
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            modal.style.display = "none";
        },
        // When the user clicks anywhere outside of the modal, close it
        clickOutside: function(event) {
            var modal = document.getElementById("myModal"); // Get the modal
            var btn = document.getElementById("myBtn"); // Get the button that opens the modal
            var span = document.getElementsByClassName("close")[0]; // Get the <span> element that closes the modal
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    })


JS Helper : - 

    ({
        // Fetch the accounts from the Apex controller
        getAccountLists: function(component) {
            var action = component.get('c.getAccounts');
            // Set up the callback
            var self = this;
            action.setCallback(this, function(actionResult) {
                component.set('v.accounts', actionResult.getReturnValue());
            });
            $A.enqueueAction(action);
        }
    })
    
    
Class [AccountsController] : -

    public class AccountsController {

        @AuraEnabled
         public static List<Account> getAccounts(){
            List<Account> accList = [SELECT Id,Name,Type,NumberOfEmployees,TickerSymbol,Phone FROM Account];
        return accList;
        }

        @AuraEnabled
        public static List<Account> getAccountsDetails(String accId){
            List<Account> accList = [SELECT Id,Name,Type,NumberOfEmployees,TickerSymbol,Phone FROM Account WHERE Id=:accId];
            return accList;
        }
    }

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.
This was selected as the best answer
Michael Degn JensenMichael Degn Jensen
Wow Deepali, thank you so much! Works like a charm :)
Michael Degn JensenMichael Degn Jensen
Can you also tell me how to get the onmouseout to work when the cursor is moved away from the <div> where the onmouse over is? Tried to apply it like this
<th scope="row"><div class="slds-truncate" title="{!account.Id}" onmouseover="{!c.openModal}" onmouseout="{!c.closeModal}">{!account.Id}</div></th>

but the modal is just flickering (showing/hiding rapidly).

Thanks.