User Activity Report

Overview

This tutorial guides you through building a dynamic and engaging user activity dashboard in Salesforce using Avonni components. You'll learn how to create a report that provides a comprehensive view of user activity, with real-time updates based on user selection.

Here's what you'll build

• Interactive User Selection: A dropdown menu (Avonni Combobox) lets you easily select a specific user from your Salesforce org.
• Dynamic Metrics: Key performance indicators (KPIs) about the selected user, such as the total value of open opportunities or the number of closed deals, will be displayed using Avonni Metrics components. These metrics will update instantly whenever a new user is selected.
• Visualized Account Locations: An interactive map (Avonni Map) will pinpoint the locations of accounts associated with the selected user, providing a geographical representation of their activities.
• Detailed Data Table: A comprehensive data table (Avonni Data Table) will display detailed information related to the selected user, such as a list of accounts they manage, contact information, or recent activities. This table will also dynamically update based on the user selection.

Combining these interactive components will create a powerful dashboard that offers valuable insights into user performance, account distribution, and overall activity trends. This hands-on tutorial will equip you with the skills to build similar dynamic reports for various use cases within your Salesforce org.

---

Guided Steps

Step 1: Add a Header

Start by adding an Avonni Header component to your page. This will give your report a clean and consistent look.

In the Avonni Header settings:

• Enter a title for your report (e.g., "User Activity Report").

• Check the "Is Joined" box to remove the bottom border of the header for a seamless look.

• Check "Pull to boundary" to extend the header to the edges of the page.

• (Optional) Add an avatar or action button to the header.

Step 2: Add a User Selection Dropdown

• Drag and drop an Avonni Combobox component onto your page. This will allow users to select a user from a list.

• In the Combobox settings:

  • Label: Enter "Select a user". This is the text that will appear above the dropdown.

  • Data Source:

    • Choose "Query". This lets you retrieve user data directly.

    • Select the "User" object.

    • Map the Label: In the "Label" field, select "Full Name" from the User object. This ensures the dropdown displays user's full names.

• How this works: This dropdown will display a list of all users. When a user is selected, it will trigger updates in other components to show that user's data (we'll set that up in the next steps).

Step 3: Create a Dynamic Filter

Now, you'll create a unique formula that acts like a filter. This filter will automatically update the report components based on the user selected in the dropdown.

• Add a Formula Text Variable:

  • Create a new "Formula Text" variable to your page's variables. Let's name it userFilter.

  • Enter the Formula: This formula tells the report only to show data related to the selected user's ID:

    "OwnerId = '" & {!comboboxUser.selectedOption.Id} & "'" 

    • Explanation:

      • OwnerId =: This is the start of our filter condition. We're checking for records where the "OwnerId" field...

      • '..."' : The single quotes around the ID ensure it's treated as text in the query.

      • &: This symbol combines different parts of the formula.

      • {!comboboxUser.selectedOption.Id}: This dynamically fetches the ID of the user selected in the comboboxUser component.

Simplified Formula (using Text Template):

• For easier management, you can create a "Text Template" variable.

• In this template, enter: OwnerId = {!comboboxUser.selectedOption.Id}

• Then, in your userFilter formula variable, reference the text template variable.

How this works: This filter acts like a "WHERE" clause in a database query. It ensures that all the components we add next will only display data that belongs to the selected user.

Step 4: Display Key Metrics

In this step, you'll add visual metrics to your report to highlight important information about the selected user. You'll use Avonni's Metrics component and a Section element to organize the layout.

A. Add a Section for Layout

• Drag and drop a Section component onto your page.

• In the Section settings, divide it into three columns. This will allow you to display three metrics side-by-side neatly.

B. Add the First Metric

• Now, drag and drop an Avonni Metric component into the first column of your Section.

• In the Metrics settings:

  • Label: Enter "Open Opportunities".

  • Data Source:

    • Choose "Query".

    • Select the "Opportunity" object.

    • Field: Select "Amount".

    • Aggregate: Choose "Sum" to display the total open opportunities.

    • Filter: Map this query to the userFilter formula text variable you created in Step 3. This ensures the metric only shows opportunities related to the selected user.
  • Formatting:

    • Avatar: (Optional) Add an icon that represents open opportunities.

    • Format: Set the "Primary Metric Format Style" to "Currency" since you display a monetary value.

How this Works

The metric will display the total sum of open opportunities that belong to the user selected in the combobox. As the user selection changes, this metric will dynamically update to reflect the data for the new user.

Step 5: Visualize Data on a Map

Now, you'll add an interactive map to your report to visualize account locations related to the selected user. This will use the Avonni Map component.

• Add and Configure the Map

  • Drag and drop a Map component onto your page.

  • In the Map settings:

    • Data Type: Select "Google Maps".

    • Mode: Choose "Multiple Markers" to display multiple locations on the map.

    • Data Source:

      • Set to "Query".

      • Select the "Account" object.

      • Filter: Map this query to the userFilter formula text variable from Step 3. This ensures the map only shows accounts related to the selected user.
    • Data Mappings:

      • Map the required fields to display your account locations correctly. This will typically involve mapping latitude and longitude fields from your Account object to the corresponding fields in the Map component. (Refer to your Salesforce field names for accurate mapping.)

    • Marker Customization (Optional):

      • Explore the Map component's settings to customize the appearance of your map markers, including their type, shape, color, opacity, and weight.

How this Works

The map will dynamically display markers for accounts associated with the selected user. The map will update as the user selection changes to show the relevant account locations. This visually represents the user's activity and areas of influence.

Step 6: Display User-Specific Data in a Table

The final component for your User Activity report is the Avonni Data Table. This table will display a list of records for the user selected in the combobox. In this example, we'll show a list of accounts associated with the user.

• Configure the Data Table

  1. Add the Component: Drag and drop an Avonni Data Table component onto your page.

  2. Set the Data Source:

     • Choose "Query" to fetch data from your Salesforce org.

     • Select the "Account" object.

  3. Apply the Filter:

     • In the "Query Filter" section, map the filter to the userFilter text variable you created in Step 3. This ensures the table only displays accounts related to the selected user.
  4. Choose Columns:

     • In the "Data Mappings" section, select the Account fields you want to display as columns in your table. For this example, we'll use:

       • Name

       • Industry

       • Website

       • Annual Revenue

Customize Your Table

Feel free to adapt the content displayed in the Data Table. You can choose different objects, fields, and filters to suit your reporting needs. This example is simply an illustration to demonstrate how to integrate the Data Table into your interactive report.

How it Works

The Data Table will dynamically update each time you select a different user in the combobox. It will fetch and display the corresponding accounts related to that user, providing a detailed view of their associated data.

Step 7: Control Component Visibility

To make your report interactive, you must control when each component appears. In this user activity report, we want a specific flow:

1. Initial View: When the report first loads, only the combobox for selecting a user should be visible.

2. User Selection: Once a user is selected, the metrics, map, and data table should appear, displaying information relevant to that user.

Flow Builder's "Set Component Visibility" feature comes in here.

• Configure Visibility Rules

  1. Select a Component: In your Flow Builder canvas, select the component you want to control (e.g., the Metrics component, the Map component, or the Data Table).

  2. Access Visibility Settings: Find and expand the "Set Component Visibility" section in the right-hand panel.

  3. Define the Rule:

     • Click "Add Rule."

     • Set the "Resource" to your combobox component (e.g., comboboxUser).

     • Set the "Field" to "Value".

     • Set the "Operator" to "IS NULL".

     • Set the "Value" to "False".

This rule means: "Show this component only when the 'Value' of the combobox is NOT null (i.e., when a user has been selected)."

Apply to All Components

Repeat these steps for each component you want to hide initially (Metrics, Map, and Data Table). This ensures they only become visible after selecting a user in the combobox.

How this Works

By using these visibility rules, you create a dynamic and user-friendly experience. The report starts with a clean, uncluttered view, presenting the user with an explicit action: select a user. Once the selection is made, the report dynamically reveals the relevant information, providing a focused and engaging experience.

Conclusion

Congratulations! You've now built a dynamic and interactive user activity dashboard in Salesforce using Avonni components. By combining the power of the Combobox, Metrics, Map, and Data Table components, you've created a real-time report that provides a comprehensive view of user performance and related information.

This tutorial has equipped you with the fundamental skills to build similar interactive reports for various needs within your Salesforce org. Feel free to experiment with different data sources, filters, and visualizations to create dashboards tailored to your specific requirements.