Hi all,

I trying to build a component to display on the Opportunity record page. I should contain some details of the related Account, like name, adresse, etc.
I am struggling to get the account ID passed to the controller. I know that the below code is not working because I'm calling the action with the v.opportunityRecord.AccountId before it is set.
But how do I get the Account ID from the opportunity and pass it to the function?

Component

<aura:component controller="AL_AccountDetailsController" implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="account" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
    <aura:attribute name="opportunity" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="opportunityRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="opportunityRecordError" type="String"
                    description="An error message bound to force:recordData"/>

    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.opportunityRecordError}"
                      targetRecord="{!v.opportunity}"
                      targetFields="{!v.opportunityRecord }"
                      mode="VIEW"/>

    <!-- Display a lightning card with details about the record -->
    <div class="Oppty Details">
        <lightning:card  title="{!v.opportunityRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Account Id" value="{!v.opportunityRecord.AccountId }" />
                </p>
            </div>
        </lightning:card>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.opportunityRecordError))}">
        <div class="recordError">
                {!v.opportunityRecordError}</div>
    </aura:if>
    <aura:if isTrue="{!not(empty(v.accountRecordError))}">
        <div class="recordError">
                {!v.accountRecordError}</div>
    </aura:if>
</aura:component>

Controller

({
    doInit : function(component, event, helper) {

        // Prepare the action to load account record
        var action = component.get("c.getAccount");
        action.setParams({"accountId": component.get("v.opportunityRecord.AccountId")});
        console.log('MDJ Account ID: ' + component.get("v.opportunityRecord.AccountId"));
        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.account", response.getReturnValue());
            } else {
                console.log('Problem getting account, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    }   
})

Apex Controller

public with sharing class AL_AccountDetailsController {
	@AuraEnabled
    public static Account getAccount(Id accountId) {
        // Perform isAccessible() checks here
        return [SELECT Name, BillingCity, BillingState, website FROM Account WHERE Id = :accountId];
    }
}

Thanks,
Michael

Hi,

Amost there with unit testing of my first Aura Component, however I am stuck with testing of 2 functions. The first finds all the tasks assigned to current user and the second updates a task to Status=Completed.

First function:

@AuraEnabled
    public static List<Task> getTasks(Id oUser){
        System.debug('oUser'+oUser);
       List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,Who.Name,Priority,Status,Type,AL_Assigned_To__c
                              FROM Task
                              WHERE OwnerId=:oUser AND ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed'
                              ORDER BY ActivityDate ASC
                              LIMIT 7];
       System.debug('taskList: ' + taskList);
        return taskList;
    }

Second function:

@AuraEnabled
    public static void updateDetails(List<String> lstRecordId) {
        List<Task> lstUpdate = new List<Task>();
        for(Task t : [SELECT Id, Status FROM Task WHERE Id IN : lstRecordId]){
            t.Status = 'Completed'; // fields to update
            lstUpdate.add(t);
        }
        if(lstUpdate.size() > 0){
            update lstUpdate;
        }
    }

I have done the Trailhead Apex Testing (https://trailhead.salesforce.com/content/learn/modules/apex_testing?trail_id=force_com_dev_beginner) but maybe I'm not getting it or it doesn't cover what I'm trying to test here.

Here is where I'm at in the first test:

@isTest static void testGetTasks() {
        Task taskt = new Task(Subject='Test Task', OwnerId=UserInfo.getUserId(), Status='Not Started');
        insert taskt;

    }

Any help is really appreciated.

Thanks,
Michael

Hi,

I starting out with unit testing of my first Apex Controller. I got a few test running, but this simple one is giving me trouble.

Apex Class:

public class ALTaskController {
    @AuraEnabled 
    public static user fetchUser(){
     // query current user information  
      User oUser = [select id,Name 
                 	FROM User
                    Where id =: userInfo.getUserId()];
        return oUser;
    }
}

Test class:

@isTest(SeeAllData=true)
private class ALTaskControllerTest {   
    @isTest static void testfetchUser() {
        User u = ALTaskController.fetchUser(0050N000007fvAwQAI);
        System.assertEquals('0050N000007fvAwQAI', u);
	}
   
}

I'm getting an error "Comparison arguments must be compatible types: String, User"

I have tried with string also, but fetchUser is expecting a User, so how to reference this?

Thanks,
Michael

Hi,

I am showing the value of a date/time field but the format is off.
This is what I would like it to show (as show on the Page Layout):


However this is what it looks like in my component:


My code:

<lightning:formattedDateTime value="{!task.Task_LastModifiedDate__c}" timeZone="{!$Locale.timezone}" year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" hour12="false"/>

Basically I just want to show the standard date/time format.

Thanks,
Michael

Hi,

I have the below Apex Class with 2 queries. First I get the current user details (this one is working as I can display the details in the component).
I then want to pass the current user id to the getTasks query and only get the tasks assigned to the current user.
Howevet I'm not getting any results :(
If I remove the "WHERE OwnerId=:oUser" from the 2. query I get all tasks, so the query is working - just not the "WHERE OwnerId=:oUser" part.
What am I doing wrong? Thank!
 

public class ALTaskController {
    @AuraEnabled 
    public static user fetchUser(){
     // query current user information  
      User oUser = [select id,Name,TimeZoneSidKey,Username,Alias,Country,Email,FirstName,LastName,IsActive 
                 FROM User Where id =: userInfo.getUserId()];
        return oUser;
    }
    
    @AuraEnabled
    public static List<Task> getTasks(Id oUser){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE OwnerId=:oUser AND ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
}

 

Hi,

I am fairly new to working with Aura Components but have managed to build a component which shows all non-completed tasks on the user Home Page.
I have added a checkbox next to each Task and this is where I am stuck. I would like the Task Status to be updatet to 'Completed' when the checkbox i marked (true). How to accomplish this?

Any help is appreciated, thanks!

ApexController:

public class ALTaskController {
    @AuraEnabled
    public static List<Task> getTasks(){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
}

Component:

<aura:component controller="ALTaskController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
	<aura:attribute name="tasks" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />


        <lightning:card class="accountCard" variant="Narrow" iconName="standard:task" footer="Card Footer">
            <aura:set attribute="title">
                Mine opgaver
            </aura:set>
            <aura:set attribute="actions">
                <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
            </aura:set>
            <aura:set attribute="body">
                <p class="slds-p-horizontal_small">
                    <aura:iteration items="{!v.tasks}" var="task"> <!-- Use the Apex model and controller to fetch server side data -->
                    <lightning:tile label="{!task.Subject}" href="{!'/one/one.app?#/sObject/'+ task.Id + '/view'}">
                        <aura:set attribute="media">
							<lightning:input type="checkbox" name="input1" title="Fuldført"/>
                            <!--<lightning:icon iconName="standard:task"/>-->
                        </aura:set>
                        <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Forfaldsdato:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate"><lightning:formattedDateTime value="{!task.ActivityDate}" year="numeric" month="numeric" day="numeric"/></p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Status:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate">{!task.Status}</p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Kommentar:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class="" title="{!task.Description}"><p class="slds-truncate">{!task.Description}</p></div>
                            </div>
                        </div>
                    </lightning:tile>
                    </aura:iteration>
                </p>
            </aura:set>
            <aura:set attribute="footer">
            </aura:set>
        </lightning:card>
</aura:component>

Controller:

({
	doInit: function(component, event, helper) {
        // Fetch the task list from the Apex controller
        helper.getTaskLists(component);
    }
})

Helper:

({
	// Fetch the accounts from the Apex controller
    getTaskLists: function(component) {
        var action = component.get('c.getTasks');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.tasks', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

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;
}

 

Hi all,

I trying to build a component to display on the Opportunity record page. I should contain some details of the related Account, like name, adresse, etc.
I am struggling to get the account ID passed to the controller. I know that the below code is not working because I'm calling the action with the v.opportunityRecord.AccountId before it is set.
But how do I get the Account ID from the opportunity and pass it to the function?

Component

<aura:component controller="AL_AccountDetailsController" implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:attribute name="account" type="Account[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	
    <aura:attribute name="opportunity" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="opportunityRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="opportunityRecordError" type="String"
                    description="An error message bound to force:recordData"/>

    <force:recordData aura:id="record"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.opportunityRecordError}"
                      targetRecord="{!v.opportunity}"
                      targetFields="{!v.opportunityRecord }"
                      mode="VIEW"/>

    <!-- Display a lightning card with details about the record -->
    <div class="Oppty Details">
        <lightning:card  title="{!v.opportunityRecord.Name}" >
            <div class="slds-p-horizontal--small">
                <p class="slds-text-heading--small">
                    <lightning:formattedText title="Account Id" value="{!v.opportunityRecord.AccountId }" />
                </p>
            </div>
        </lightning:card>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.opportunityRecordError))}">
        <div class="recordError">
                {!v.opportunityRecordError}</div>
    </aura:if>
    <aura:if isTrue="{!not(empty(v.accountRecordError))}">
        <div class="recordError">
                {!v.accountRecordError}</div>
    </aura:if>
</aura:component>

Controller

({
    doInit : function(component, event, helper) {

        // Prepare the action to load account record
        var action = component.get("c.getAccount");
        action.setParams({"accountId": component.get("v.opportunityRecord.AccountId")});
        console.log('MDJ Account ID: ' + component.get("v.opportunityRecord.AccountId"));
        // Configure response handler
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.account", response.getReturnValue());
            } else {
                console.log('Problem getting account, response state: ' + state);
            }
        });
        $A.enqueueAction(action);
    }   
})

Apex Controller

public with sharing class AL_AccountDetailsController {
	@AuraEnabled
    public static Account getAccount(Id accountId) {
        // Perform isAccessible() checks here
        return [SELECT Name, BillingCity, BillingState, website FROM Account WHERE Id = :accountId];
    }
}

Thanks,
Michael

Hi,

Amost there with unit testing of my first Aura Component, however I am stuck with testing of 2 functions. The first finds all the tasks assigned to current user and the second updates a task to Status=Completed.

First function:

@AuraEnabled
    public static List<Task> getTasks(Id oUser){
        System.debug('oUser'+oUser);
       List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,Who.Name,Priority,Status,Type,AL_Assigned_To__c
                              FROM Task
                              WHERE OwnerId=:oUser AND ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed'
                              ORDER BY ActivityDate ASC
                              LIMIT 7];
       System.debug('taskList: ' + taskList);
        return taskList;
    }

Second function:

@AuraEnabled
    public static void updateDetails(List<String> lstRecordId) {
        List<Task> lstUpdate = new List<Task>();
        for(Task t : [SELECT Id, Status FROM Task WHERE Id IN : lstRecordId]){
            t.Status = 'Completed'; // fields to update
            lstUpdate.add(t);
        }
        if(lstUpdate.size() > 0){
            update lstUpdate;
        }
    }

I have done the Trailhead Apex Testing (https://trailhead.salesforce.com/content/learn/modules/apex_testing?trail_id=force_com_dev_beginner) but maybe I'm not getting it or it doesn't cover what I'm trying to test here.

Here is where I'm at in the first test:

@isTest static void testGetTasks() {
        Task taskt = new Task(Subject='Test Task', OwnerId=UserInfo.getUserId(), Status='Not Started');
        insert taskt;

    }

Any help is really appreciated.

Thanks,
Michael

Hi,

I starting out with unit testing of my first Apex Controller. I got a few test running, but this simple one is giving me trouble.

Apex Class:

public class ALTaskController {
    @AuraEnabled 
    public static user fetchUser(){
     // query current user information  
      User oUser = [select id,Name 
                 	FROM User
                    Where id =: userInfo.getUserId()];
        return oUser;
    }
}

Test class:

@isTest(SeeAllData=true)
private class ALTaskControllerTest {   
    @isTest static void testfetchUser() {
        User u = ALTaskController.fetchUser(0050N000007fvAwQAI);
        System.assertEquals('0050N000007fvAwQAI', u);
	}
   
}

I'm getting an error "Comparison arguments must be compatible types: String, User"

I have tried with string also, but fetchUser is expecting a User, so how to reference this?

Thanks,
Michael

Hi,

I am showing the value of a date/time field but the format is off.
This is what I would like it to show (as show on the Page Layout):


However this is what it looks like in my component:


My code:

<lightning:formattedDateTime value="{!task.Task_LastModifiedDate__c}" timeZone="{!$Locale.timezone}" year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" hour12="false"/>

Basically I just want to show the standard date/time format.

Thanks,
Michael

Hi,

I have the below Apex Class with 2 queries. First I get the current user details (this one is working as I can display the details in the component).
I then want to pass the current user id to the getTasks query and only get the tasks assigned to the current user.
Howevet I'm not getting any results :(
If I remove the "WHERE OwnerId=:oUser" from the 2. query I get all tasks, so the query is working - just not the "WHERE OwnerId=:oUser" part.
What am I doing wrong? Thank!
 

public class ALTaskController {
    @AuraEnabled 
    public static user fetchUser(){
     // query current user information  
      User oUser = [select id,Name,TimeZoneSidKey,Username,Alias,Country,Email,FirstName,LastName,IsActive 
                 FROM User Where id =: userInfo.getUserId()];
        return oUser;
    }
    
    @AuraEnabled
    public static List<Task> getTasks(Id oUser){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE OwnerId=:oUser AND ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
}

 

Hi,

I am fairly new to working with Aura Components but have managed to build a component which shows all non-completed tasks on the user Home Page.
I have added a checkbox next to each Task and this is where I am stuck. I would like the Task Status to be updatet to 'Completed' when the checkbox i marked (true). How to accomplish this?

Any help is appreciated, thanks!

ApexController:

public class ALTaskController {
    @AuraEnabled
    public static List<Task> getTasks(){
        List<Task> taskList = [SELECT Id,Subject,Description,OwnerId,ActivityDate,WhoId,Priority,Status,Type FROM Task WHERE ActivityDate <= NEXT_N_DAYS:3 AND Status != 'Completed' ORDER BY ActivityDate ASC];
        return taskList;
    }
}

Component:

<aura:component controller="ALTaskController" implements="flexipage:availableForAllPageTypes,force:appHostable" access="global">
	<aura:attribute name="tasks" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />


        <lightning:card class="accountCard" variant="Narrow" iconName="standard:task" footer="Card Footer">
            <aura:set attribute="title">
                Mine opgaver
            </aura:set>
            <aura:set attribute="actions">
                <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
            </aura:set>
            <aura:set attribute="body">
                <p class="slds-p-horizontal_small">
                    <aura:iteration items="{!v.tasks}" var="task"> <!-- Use the Apex model and controller to fetch server side data -->
                    <lightning:tile label="{!task.Subject}" href="{!'/one/one.app?#/sObject/'+ task.Id + '/view'}">
                        <aura:set attribute="media">
							<lightning:input type="checkbox" name="input1" title="Fuldført"/>
                            <!--<lightning:icon iconName="standard:task"/>-->
                        </aura:set>
                        <div class="demo-only demo-only--sizing slds-grid slds-wrap">
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Forfaldsdato:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate"><lightning:formattedDateTime value="{!task.ActivityDate}" year="numeric" month="numeric" day="numeric"/></p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Status:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class=""><p class="slds-truncate">{!task.Status}</p></div>
                            </div>
                            <div class="slds-size_3-of-12">
                                <div class=""><p class="slds-truncate">Kommentar:</p></div>
                            </div>
                            <div class="slds-size_9-of-12">
                                <div class="" title="{!task.Description}"><p class="slds-truncate">{!task.Description}</p></div>
                            </div>
                        </div>
                    </lightning:tile>
                    </aura:iteration>
                </p>
            </aura:set>
            <aura:set attribute="footer">
            </aura:set>
        </lightning:card>
</aura:component>

Controller:

({
	doInit: function(component, event, helper) {
        // Fetch the task list from the Apex controller
        helper.getTaskLists(component);
    }
})

Helper:

({
	// Fetch the accounts from the Apex controller
    getTaskLists: function(component) {
        var action = component.get('c.getTasks');
        // Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set('v.tasks', actionResult.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

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;
}