User Activity Report

This tutorial requires installing the Avonni Dynamic Components Package on your Salesforce org.

Overview

This tutorial guides you through creating a real-time, interactive user activity dashboard in Salesforce using Avonni components. You'll learn how to build a dashboard that lets you:

• Select a User: Easily choose a user from a drop-down list using the Combobox component

• View Key Metrics: Instantly see key performance indicators (KPIs) for the selected user (e.g., open opportunity value, closed deals).

• Visualize Account Locations: Display associated accounts on an interactive map.

• See Detailed Data: Explore related information (accounts, contacts, activities) in a dynamic data table.

By the end, you'll have the skills to build similar dynamic reports for various Salesforce use cases.

Step-by-Step Instructions

Step 1: Create the Dynamic Component

1. Open the Avonni Components App: Find and open the "Avonni Components" application from the Salesforce App Launcher.

2. Create a New Component: Click the New button.

3. Name the Component: Enter a descriptive name (e.g., "UserActivityReport").

4. Open the Component Builder: Click Create.

Step 2: Add and Configure the Card Component

1. Add the Card: Drag a Card component from the Component Library onto the canvas.

2. Set the Title (Optional): In the Properties Panel, set the Title property of the Card (e.g., "User Activity Report").

3. Set the Icon (Optional): Set the Icon Name property (e.g., standard:contact).

Step 3: Add the Combobox Component

• Add the Component: Place a Combobox component inside the card. This will serve as our User selection dropdown.

• Set Data Source: Configure the Combobox to use a 'Query' data source that targets the User object.

• Configure Display: Set the 'Label' (the text shown in the dropdown) to display the Full Name field from the user records retrieved from the query.

Step 4: Add the Container Component

Add the Container component below the combobox. This important step highlights a key benefit of Avonni Dynamic Components. We'll use the Container to hold multiple other Avonni components. Setting the visibility on the container itself allows us to control the visibility of all the components contained at once, simplifying management and avoiding repetitive configuration.

POWER TIP: Unlock Easy Visibility Management

The Container component is your secret weapon for controlling the visibility of multiple components at once. Instead of setting visibility rules individually, set it on the Container – and all contained components will follow suit! This saves time and simplifies complex layouts.

Set Component Visibility Configuration.

We want the Container to be hidden initially and only appear after a user is chosen in the Combobox. Here's how to set that visibility rule:

1. Select the Container component.

2. Go to its Visibility settings (usually in the Properties Panel).

3. Choose the option Show component when all conditions are met (or similar wording like "All Conditions Are Met").

4. Define the condition: * Base it on the Combobox Component. * Specifically, check its Selected Items attribute. * Use the operator Is not Empty.

Why Is not Empty? Because when no user is selected, the Selected Items list is empty. When a user is chosen, the list is no longer empty, and the condition becomes true, making the Container visible.

Step 5: Add the column component inside the container

Inside the Container, add a Column component. We'll use this to structure our metrics. Configure the Column component with three columns and set the 'Horizontal Spacing Between Items' to 'medium'.

Step 6: Add Metrics inside the column

Inside the first column, add a Metric component. Set the label to 'Open Opportunities'. Configure this metric to display the sum of the Amount field from the Opportunity object. Critically, we'll link this metric to the Combobox from Step 3: the metric will automatically filter its results based on the User ID selected in the Combobox.

POWER TIP: Unleash Real-Time Data Updates

The power of Avonni Dynamic Components lies in this easy linking of component properties. You can create reactive metrics that automatically update based on user selections and other dynamic filters.

Repeat the process for the remaining metrics, placing each in its column.

Step 7: Add other relevant components inside the container

With the metrics in place, we can add other components inside the Container to display more information related to user activity.

For example, let's add a Data Table to show a list of active accounts. We'll define an active account as one with any activity logged in the last 60 days.

To do this:

1. Add a Data Table component inside the Container.

2. Configure the Data Table to query the Account object.

3. Add a filter to the query: Last Activity field is equal to LAST 60 DAYS."

POWER TIP: Reusable Queries Save Time

Queries you create in a Dynamic Component aren't limited to a single component. To avoid repetitive setup, you can reuse them across multiple components within the same Dynamic Component. You can also create new queries based on existing ones, tweaking and adapting them quickly.

Step 8: Activate and publish your component

Ready to see your dynamic component in action? This simple process will allow you to publish your component and add it to any Lightning App or Record Page, making it visible and interactive for your users.

1. Save your Dynamic Component.

2. Activate it (using the Activate button in the Component Builder).

3. Add to a Page:

   • Open the Lightning App Builder for the desired App or Record Page.

   • Find your Dynamic Component under "Custom - Managed" in the component list.

   • Drag and drop it onto the page.

   • Configure any page-level properties if needed.

   • Save and activate the page.