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

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.