# User Activity Report

{% hint style="warning" %}
This tutorial requires installing [**the Avonni Dynamic Components Package**](https://appexchange.salesforce.com/appxListingDetail?listingId=e855ec28-bf2c-47fa-aa38-30b43948ab4f) on your Salesforce org.
{% endhint %}

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

<figure><img src="https://3857391697-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdHOej9Pd5IxJNGEJMZKW%2Fuploads%2FaVSuCIIu00loHQgm69gT%2F2025-03-25_15-27-21%20(1).gif?alt=media&#x26;token=d18f6217-f97e-490a-867c-e5b74472c16e" alt=""><figcaption></figcaption></figure>

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

## Step-by-Step Instructions

{% stepper %}
{% step %}

### **Create the Dynamic Component**

{% embed url="<https://demo.arcade.software/ZLmn8KHIfrRXhg6Fmnsc?embed=>" %}

1. **Open the Avonni Components App:** Find and open the "Avonni Components" application from the Salesforce App Launcher.&#x20;
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**
   {% endstep %}

{% step %}

### **Add and Configure the Card Component**

{% embed url="<https://demo.arcade.software/abXW2ArmQHyo3w9fAfMe?embed=>" %}

1. **Add the Card:** Drag a [**Card** component](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/card) 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`).
   {% endstep %}

{% step %}

### **Add the Combobox Component**

1. **Add the Component:** Place a [Combobox component](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/combobox) inside the card. This will serve as our User selection dropdown.
2. **Set Data Source:** Configure the Combobox to use a 'Query' data source that targets the `User` object.
3. **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.

{% embed url="<https://demo.arcade.software/QUeVFlSCCRuQ8DWahx5C?embed=>" %}
{% endstep %}

{% step %}

### **Add the Container Component**

Add the [Container component](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/container) 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.

{% hint style="success" %}

## 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](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/core-concepts/component-visibility) individually, set it on the Container – and all contained components will follow suit! This saves time and simplifies complex layouts.
{% endhint %}

#### 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.*

{% embed url="<https://demo.arcade.software/24692dp9w07rekREdeWx?embed=>" %}
{% endstep %}

{% step %}

### 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'.

{% embed url="<https://demo.arcade.software/wUBQ8fYRKJlTqhulj9Nu?embed=>" %}
{% endstep %}

{% step %}

### 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](#step-3-add-the-combobox-component): the metric will automatically filter its results based on the User ID selected in the Combobox.

{% hint style="success" %}

## 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](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/tutorials/reactive-components) that automatically update based on user selections and other dynamic filters.
{% endhint %}

Repeat the process for the remaining metrics, placing each in its column.
{% endstep %}

{% step %}

### 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`."

{% hint style="success" %}

## 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.
{% endhint %}
{% endstep %}

{% step %}

### 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.*

{% embed url="<https://demo.arcade.software/ApD2Sr11jVEcRTrWEvUh?embed=>" %}
{% endstep %}
{% endstepper %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/projects/dynamic-components/working-with-data/user-activity-report.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.