Date Range

Overview

The Avonni Date Range component offers an intuitive interface that allows users to select a start and end date or a start and end date and time, thereby defining a specific period. This is commonly used for filtering data, setting parameters for reports, scheduling, or any scenario requiring a specified time window.

This component presents two input fields: one for the start of the desired range and one for the end. Key features include:

• Date and Date/Time Selection: Supports selection of full dates or specific date and time values.

• Clear Range Definition: Users can easily see and modify the start and end of their selected period.

• Customizable Formatting: Control the display style of dates and times.

• Customizable Input Labels: Tailor the labels for the start and end input fields.

Use Cases

• Filtering Data Tables, Lists, or Charts to show records within a selected period (e.g., "Opportunities Closed This Quarter," "Cases Created Last Week").

• Setting date parameters for generating reports.

• Defining start and end times for scheduling events or tasks.

• Logging periods for activities or projects.

• Setting validity periods for promotions or offers.

Configuration

Select the Date Range component on the canvas to view its properties in the right-hand Properties Panel.

Basic Properties

These handle labeling and identification.

Core Functionality & Data Binding

These settings define the type of range and how data is captured.

Appearance & Formatting

These properties control the visual presentation.

Behavior Properties

These settings affect user interaction and component state.

Example

Filtering a Data Table by Opportunity Close Date

Follow these steps to filter Opportunities by close date:

1

Add Date Range Component

• API Name: OpportunityDateFilter

• Label: "Filter Opportunities by Close Date:"

• Type: date

2

Add Data Table Component

Follow these steps to integrate a Data Table below the Date Range component, displaying filtered Opportunities based on the selected dates.

• Drag the Component: From the Component Library (left panel), drag the "Data Table" onto the canvas and position it below the Date Range component.

• Create a Query: In the Data Table's Properties Panel, set up an Avonni Query Data Source to fetch Opportunity records (e.g., select "Opportunity" as the object).

• Add Query Filters: Configure filters on the query to use the dates from the Date Range:

  • Filter 1: CloseDate >= {!DateRange1.startDate}

  • Filter 2: CloseDate <= {!DateRange1.endDate}

  • Tip: Use AND logic to ensure both filters apply only when dates are set.

• Add Columns: In the Columns section of the Properties Panel, select and add fields from the Opportunity query (e.g., Name, Amount, Stage, Close Date) to display in the table.

Result: The Data Table will show Opportunities filtered by the user's date selections, updating dynamically on changes

3

Set Data Table visibility rule

To prevent displaying the Data Table with query errors (e.g., when filters are incomplete due to missing start or end dates), configure a visibility rule. This ensures the table only appears once both dates are selected in the Date Range component.

Result: User selections update variables, refreshing the table to show filtered Opportunities.

Result: When the user selects a new start or end date in the Date Range component, the values will trigger the Data Table's query to re-filter and display only Opportunities within the selected close date range.

Key Considerations

• Type Matching: Ensure the Type property (date or datetime) matches the data type of the variables you bind to the value properties.

• Time Zones: When using datetime, be mindful of how Salesforce handles time zones. The selected values will typically be in the user's local time zone.

• Clear Labels: Use the main Label and the custom Date/Time Input Labels effectively to guide users.

In Summary

The Avonni Date Range component offers a user-friendly way to select date or date/time periods. By binding its start and end value properties to variables, you can easily use the range chosen to filter data, trigger actions, or control other dynamic aspects of your Salesforce UI.