In today’s fast-paced business landscape, productivity hinges on streamlined workflows and intuitive interfaces. While Salesforce offers robust activity tracking capabilities, sometimes the standard components fall short of specific organizational needs. 

That’s where a Custom Activity Component comes in—designed to tailor your activity management experience, boost user efficiency, and provide deeper insights into customer interactions.

In this blog, we’ll walk you through the key steps to create the Custom Activity Component:

How to Create the Custom Activity Timeline Component

Step 1: Create the Lightning Web Component (LWC)

  • Open Visual Studio Code.
  • Open the Command Palette by Ctrl+Shift+P for Windows
  • Select SFDX: Create Lightning Web Component
  • Create ActivityTimeline and ActivityTimelineItem as the component name.
  • Press Enter to accept the default directory.

Note: I have attached the zip file, which has the code. Please extract it and add the LWC and Apex Code.

  • Copy and paste the code into the LWC component.
    • HTML in ActivityTimeline.html and ActivityTimelineItem.html.
    • Javascript file code in ‘ActivityTimeline.js’ and ‘ActivityTimelineItem.js.

Step 2: Create the Apex Class

  • Create an Apex Class:
    • Create the Apex Classes and enter the code from the zip file.
  • Save the Apex Class.

Step 3: Deploy both the LWC and Apex classes to your Salesforce org.

Step 4: Add the Component to the Account Page Layout

  • Navigate to the Account Page Layout:
    • From Setup, enter Object Manager in the Quick Find box and select Account.
    • Select the record and edit the layout.
  • Add the Custom Component:

Drag and drop the ActivityTimeline component onto the page layout.

Save the Layout.

Test the functionality

To test the component, create a few activity logs with different owners or subjects. Use the filters to display or hide marketing activities to determine if they are functioning correctly.

Watch the Demo

Concluding Words

A Custom Activity Component not only enhances visibility into your team’s interactions but also empowers users with a more tailored and efficient Salesforce experience. By following the steps outlined above, you can create a dynamic, filterable activity timeline that aligns with your business needs.

We hope the tutorial was helpful to you!

For more proven techniques and best practices to thrive & stay ahead in the market, check out our informative Salesforce tutorials.

Related Articles

Setting up an Agentforce-enabled scratch org is the most important step for developers who want to experiment with AI features such as Prompt Builder and Einstein GPT. Whether you’re developing the next generation CRM software or experimenting with how generative AI may improve user experience, a scratch org equipped with Agentforce is your playground. Follow […]

Read More
Step-by-Step Guide to Enhance Your LWC Development Workflow with the Logger API

Are you looking to streamline your LWC development workflow but confused about how to do it? Then you are in the right place. The Salesforce Logger API is a powerful tool that helps you monitor, debug, and improve code quality in real time.  This step-by-step guide walks you through how to set it up and […]

Read More
Step-by-Step Guide to Integrating Salesforce Doc-Gen with eSigning Tools

In today’s fast-paced digital landscape, streamlining document workflows is no longer a luxury—it’s a necessity.  Integrating a document generation app, like Docs Made Easy, with an eSigning tool, helps businesses automate the entire document lifecycle—from creation to signature—saving time, reducing errors, and boosting productivity. In this guide, we’ll walk you through the key steps, tools, […]

Read More

The Models API plays a significant role in providing access to and facilitating interaction with large language models (LLMs) from various Salesforce partners such as Anthropic, Google, and OpenAI. It enables applications to leverage these models for various tasks, including text generation and other AI-powered capabilities. As a user, you can configure any Salesforce-enabled model […]

Read More
How to Integrate Salesforce Data Cloud with Amazon Redshift

Companies can finally connect Amazon Redshift to Salesforce Data Cloud without using the ordinary username & password authentication systems ever since its collaboration with AWS has happened. Business owners no longer have to be concerned about managing static credentials or breaching data security. By leveraging Salesforce IDP, companies can easily access their data lakehouse in […]

Read More
Trigger Prompt Templates Using Flow, Apex, or REST API

A prompt template is a pre-designed structure in Salesforce, specially designed to create personalized prompts by filling the substitute with particular details of customers, products, and more. This approach strengthens the creation of prompts and lets teams generate data-driven content. Every time a prompt template is used, it automatically merges the data to create a […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818