You are using an older browser that might negatively affect how this site is displayed. Please update to a modern browser to have a better experience. Sorry for the inconvenience!

Lightning Experience UI to show activities


In Lightning Experience, records don’t show the Open Activities and Activity History related lists. Instead, track your activities in the activity timeline. In order to show the user’s upcoming activities such as task/Events, we can create activity timeline using Lightning.

Step 1: We need to read the required Tasks.

Apex Controller:

  1. publicclass ActivityControl {
  2. @AuraEnabled
  3. public static List<task> taskList () {
  4. return [SELECT Id, Subject, Status, Description, ActivityDate, Who.Name, WhoId, Priority FROM Task LIMIT 20];
  5. }
  6. }

Step 2: In this step, create a Child Component which will display the Activity Title and their respective Details.

Child Component: [childActivity.cmp]

  1. <aura:component>
  2. <aura:attribute name=”activity”type=”object” description=”to store single activity (task/event) record data”/>
  3. <li>
  4. <div class=”isExpendable slds-timeline__item_expandable slds-timeline__item_task”aura:id=”expId”>
  5. <div class=”slds-media”>
  6. <div class=”slds-media__figure”>
  7. <button class=”slds-button slds-button_icon”onclick=”{!c.toggleAcitivity}” title=”test”
  8. aria-controls=”task-item-base”>
  9. <lightning:icon iconName=”utility:switch”
  10. size=”x-small”
  11. class=”slds-button__icon slds-timeline__details-action-icon”/>
  12. </button>
  13. <div class=”slds-icon_container”title=”task”>
  14. <lightning:icon iconName=”standard:task”size=”small”/>
  15. </div>
  16. </div>
  17. <div class=”slds-media__body”>
  18. <div class=”slds-grid slds-grid_align-spread slds-timeline__trigger”>
  19. <div class=”slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space”>
  20. <h3 class=”slds-truncate”title=”{!v.activity.Subject}”>
  21. <strong>{!v.activity.Subject}</strong>
  22. </h3>
  23. </div>
  24. </div>
  25. <p class=”slds-m-horizontal_xx-small”>
  26. <lightning:formattedDateTime value=”{!v.activity.ActivityDate}”/>
  27. </p>
  28. <!– expandable section start–>
  29. <article class=”slds-box slds-timeline__item_details slds-theme_shade slds-m-top_x-small slds-m-horizontal_xx-small”id=”task-item-base”aria-hidden=”true”>
  30. <ul class=”slds-list_horizontal slds-wrap”>
  31. <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>
  32. <span class=”slds-text-title slds-p-bottom_x-small”>Priority</span>
  33. <span class=”slds-text-body_medium slds-truncate”title=”{!v.activity.Priority}”>{!v.activity.Priority}</span>
  34. </li>
  35. <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>
  36. <span class=”slds-text-title slds-p-bottom_x-small”>Description</span>
  37. <span class=”slds-text-body_medium slds-truncate”title=”{!v.activity.Description}”>{!v.activity.Description}</span>
  38. </li>
  39. <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>
  40. <span class=”slds-text-title slds-p-bottom_x-small”>Related To</span>
  41. <span class=”slds-text-body_medium slds-truncate”title=”{!v.activity.Who.Name}”>{!v.activity.Who.Name}</span>
  42. </li>
  43. <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>
  44. <span class=”slds-text-title slds-p-bottom_x-small”>Status</span>
  45. <span class=”slds-text-body_medium slds-truncate” title=”{!v.activity.Status}”>{!v.activity.Status}</span>
  46. </li>
  47. </ul>
  48. </article>
  49. </div>
  50. </div>
  51. </div>
  52. </li>
  53. </aura:component>

Note: toggle ‘slds-is-open’ class to expand/collapse activity section

Child Component JavaScript: [childActivityController.js]

  1. ({
  2. toggleAcitivity : function(component, event, helper) {
  3. $A.util.toggleClass(component.find(‘expId’), ‘slds-is-open’);
  4. },
  5. })

Step 3:  In this step, create a Parent Component which will iterate all activity records in child component

Parent Component [Activity.cmp]

  1. <aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction”
  2. access=”global”
  3. controller=”ActivityControl”>
  4. <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
  5. <aura:attribute name=”lstActivity” type=”list” />
  6. <ul class=”slds-timeline”>
  7. <aura:iteration items=”{!v.lstActivity}” var=”task”>
  8. <c:childActivity activity=”{!task}”/>
  9. </aura:iteration>
  10. </ul>
  11. </aura:component>

Parent Component JavaScript: [ActivityController.js]

  1. ({
  2. doInit : function(component, event, helper) {
  3. var action = component.get(“c.taskList”);
  4. setCallback(this, function(response) {
  5. var state = response.getState();
  6. if (state === “SUCCESS”) {
  7. set(“v.lstActivity”, response.getReturnValue());
  8. }
  9. else if (state === “INCOMPLETE”) {
  10. log(“INCOMPLETE RESPONSE”);
  11. }
  12. elseif (state === “ERROR”) {
  13. var errors = response.getError();
  14. if(errors) {
  15. if(errors[0] && errors[0].message) {
  16. log(“Error message: “+
  17. errors[0].message);
  18. }
  19. else{
  20. log(“Unknown error”);
  21. }
  22. }
  23. });
  24. $A.enqueueAction(action);
  25. },
  26. })

Conclusion:

Activity Timeline is a very useful component for different purposes, and it provides a visual overview of what has happened to a record, customer, anything you can think of really, and when. This is in use in several places in the new Lightning Experience UI to show activities, both future and historic.

Output:
Salesforce Lightning Experience