Custom Activity Timeline in Lightning Component

Custom Activity Timeline in Lightning Component

About Activity Timeline:

The items in the activity timeline are in order of due date. Tasks and all-day events have a due date of midnight. On the detail page for objects that support activities, Lightning Experience doesn’t display Open Activities or Activity History along with other related lists. It displays the activity timeline instead.

The activity timeline displays each of the user’s upcoming, current, and past activities like tasks and events.

In some Salesforce orgs, page layouts or record types need adjustments to prevent tabs from disappearing from the activity composer. Also, if you customize the display and order of fields in the activity timeline, be aware of the behavior of certain fields.

Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar.

Accessibility

Text describing the type of timeline item is placed in a span. It is the first element in the timeline item and should be hidden with the  slds-assistive-text class. The SVG image does not need the slds-assistive-text class.

Button Interactions

The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.

Below are the following steps for creating a custom activity timeline as follows:-

Step 1 : Create a child lightning component.

  • CustomActivity.cmp

<aura:component implements=”force:appHostable, flexipage:availableForAllPageTypes, force:lightningQuickAction” access=”global” >

    <aura:attribute name=”activity” type=”object” description=”For Single Activity Store “/> 

    <li>

        <div class=”isExpendable slds-timeline__item_expandable slds-timeline__item_task” aura:id=”expId”> 

            <div class=”slds-media”>

                <div class=”slds-media__figure”>

                    <button class=”slds-button slds-button_icon”

                            onclick=”{!c.toggleAcitivity}”

                            title=”test”

                            aria-controls=”task-item-base”>

                        <lightning:icon iconName=”utility:switch” 

                                        size=”x-small”

                                        class=”slds-button__icon slds-timeline__details-action-icon”/>

                    </button>

                    <div class=”slds-icon_container” title=”task”>

                        <lightning:icon iconName=”standard:task” size=”small”/>

                    </div>

                </div>

                <div class=”slds-media__body”>

                    <div class=”slds-grid slds-grid_align-spread slds-timeline__trigger”>

                        <div class=”slds-grid slds-grid_vertical-align-center slds-truncate_container_75 slds-no-space”>

                            <h3 class=”slds-truncate” title=”{!v.activity.Subject}”>

                                <strong>{!v.activity.Subject}</strong>

                            </h3>

                        </div>

                    </div>

                    <p class=”slds-m-horizontal_xx-small”>

                        <lightning:formattedDateTime value=”{!v.activity.ActivityDate}”/> 

                    </p>

                    <!– expandable section start–>

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

                        <ul class=”slds-list_horizontal slds-wrap”>

                            <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>

                                <span class=”slds-text-title slds-p-bottom_x-small”>Priority</span>

                                <span class=”slds-text-body_medium slds-truncate” title=”{!v.activity.Priority}”>{!v.activity.Priority}</span>

                            </li>

                            <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>

                                <span class=”slds-text-title slds-p-bottom_x-small”>Description</span>

                                <span class=”slds-text-body_medium slds-truncate” title=”{!v.activity.Description}”>{!v.activity.Description}</span>

                            </li>

                            <li class=”slds-grid slds-grid_vertical slds-size_1-of-2 slds-p-bottom_small”>

                                <span class=”slds-text-title slds-p-bottom_x-small”>Related To</span>

                                <span class=”slds-text-body_medium slds-truncate” title=”{!v.activity.Who.Name}”>{!v.activity.Who.Name}</span>

                            </li>

                        </ul>

                    </article>

                </div>

            </div>

        </div>

    </li>

</aura:component>

Step 2: Create controller.js

  • CustomActivityController.js

({

    toggleAcitivity : function(component, event, helper) {

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

        $A.util.toggleClass(component.find(‘expId’), ‘slds-is-open’);

    },   

})

Step 3: Create Apex Class

  • CustomActCtrl.apx

public class customActCtrl {

    @AuraEnabled 

    public static List<task> findTask(){

        return [SELECT Id,Subject,Description,ActivityDate,Who.Name,WhoId,Priority

                FROM Task

                LIMIT 10];

    }

}

Step 4: Create parent lightning component.

  • CustomActivityP.cmp

<aura:component implements=”force:appHostable, flexipage:availableForAllPageTypes, flexipage:availableForRecordHome, force:hasRecordId, forceCommunity:availableForAllPageTypes, force:lightningQuickAction”

                access=”global”

                controller=”customActCtrl”>

    <aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>

    <aura:attribute name=”lstActivity” type=”list” />

    <ul class=”slds-timeline”>        

        <!–iterate all activity records in child component–>

        <aura:iteration items=”{!v.lstActivity}” var=”task”>

            <c:customActivity activity=”{!task}”/>

        </aura:iteration>

    </ul>

</aura:component>

Step 4 : Create controller.js

  • CustomActivityPController.js

({

    doInit : function(component, event, helper) {

        var action = component.get(“c.fetchTask”);

        action.setCallback(this, function(response) {

            var state = response.getState();

            if (state === “SUCCESS”) {

                component.set(“v.lstActivity” , response.getReturnValue()); 

            }

            else if (state === “INCOMPLETE”) {

                console.log(“INCOMPLETE RESPONSE”);

            }

                else if (state === “ERROR”) {

                    var errors = response.getError();

                    if (errors) {

                        if (errors[0] && errors[0].message) {

                            console.log(“Error message: ” + 

                                        errors[0].message);

                        }

                    } else {

                        console.log(“Unknown error”);

                    }

                }

        });

        $A.enqueueAction(action);

    },    

})

  • Add this component to the home page and you can see all the recent activity like events and tasks.  

fig. Custom Activity Timeline

Fig. Custom Activity on Home Page