Using Variables and Component Data

Using Variables and Component Data

Avonni Dynamic Components allow you to easily access various data types to make your components truly dynamic and responsive. This includes system-provided Global Variables, your defined Resources (Variables, Constants, Formulas), and Attributes from Other Components on your canvas. Understanding how to access this data is key to building powerful interactions and interfaces.

How to Access Data: The Resource Selector

The primary way you access any of these data types within the Component Builder is through the Resource Selector. This is the small icon (often resembling { }, a tag, or a variable symbol) located next to many properties in the Properties Panel, filter configurations, and interaction settings.

When you click the Resource Selector, you'll typically see options to choose from:

• Global Variables (usually starting with $)

• Your defined Resources (Variables, Constants, Formulas - usually referenced like {!YourResourceName})

• Component Attributes (allowing you to reference other components using @ComponentName.attribute)

Accessing Global Variables

Global Variables provide ready-made information about the context your component is running in. You select them via the Resource Selector.

Key global variables include:

• $Api: Provides information related to Salesforce APIs. (Used in advanced scenarios).

• $Component: Provides context specific to the Dynamic Component itself.

  • $Component.record: When the Target Object API Name is set and the component is on a record page, this crucial variable holds the entire current record's data. You access fields using dot notation (e.g., $Component.record.Name, $Component.record.Industry).

  • $Component.recordId (or @recordId via Resource Selector): When the Target Object API Name is set and the component is on a record page, this directly provides the current record's 15- or 18-character ID. Very useful for filters or passing to interactions.

• $Organization: Provides details about the current Salesforce organization (e.g., $Organization.Id, $Organization.Name).

• $Profile: Provides details about the current user's Salesforce Profile (e.g., $Profile.Id, $Profile.Name). Useful for controlling visibility based on profile.

• $System: Provides system-related information (availability may vary, check specific contexts).

• $User: Provides details about the currently logged-in user.

  • Examples: $User.Id, $User.FirstName, $User.LastName, $User.Email, $User.Username. Useful for personalization, filtering data ("My Records"), or conditional logic.

Accessing Your Resources (Variables, Constants, Formulas)

You can easily use the Variables, Constants, and Formulas you create in the Resources Panel:

• How: Click the Resource Selector next to a property, filter value, or interaction input. Select the desired Variable, Constant, or Formula resource from the list.

• Syntax (Displayed): The builder will typically display the reference like {!YourResourceApiName}.

• Use Cases: Displaying calculated values, storing user input, setting default values, controlling visibility, using in filters, passing data to interactions.

Accessing Attributes from Other Components (Key to Reactivity)

This is how you make components interact dynamically:

• How: Click the Resource Selector. Choose the Component Attribute option.

• Select Component: Choose the other component on your canvas that you want to get data from.

• Select Attribute: Choose the specific attribute of that component whose value you need (e.g., .value for input components, .firstSelectedRow for Data Tables, activeItemValue for Tabs).

• Syntax (Displayed): The builder will typically display the reference like @ComponentApiName.attributeName (e.g., @MyCombobox.value, @AccountsTable.firstSelectedRow.Id).

• Use Cases: Creating reactive filters (filtering Data Table B based on selection in Data Table A), updating display components (showing text based on a Combobox selection), controlling visibility based on another component's state.

Practical Examples

Example 1: Displaying the Current User's Name

1. Add a Text component.

2. In its Value property, click the resource selector.

3. Select Global Variable.

4. Select $User.

5. Select FirstName. (The value might show as $User.FirstName).

6. Add another Text component.

7. In its Value, use the resource selector to choose Global Variable > $User > LastName.

8. You could also use a formula {!$User.FirstName} & " " & {!$User.LastName}

Example 2: Controlling Visibility with a Combobox

Imagine you have a combobox that allows users to select a status ('Active' or 'Inactive'). You want to show a "Reactivate" button only when 'Inactive' is selected.

1. Add Combobox: Add an Avonni Combobox. Give it an API Name (e.g., StatusSelector). Configure its options (Label/Value: Active/active, Inactive/inactive).

2. Add Button: Add an Avonni Button. Set its Label to "Reactivate".

3. Set Button Visibility: Select the Button. In the Visible property, click the resource selector:

   • Choose Component Attribute.

   • Component: Select your Combobox (StatusSelector).

   • Attribute: Select value.

   • Operator: Set to equals.

   • Value: Enter the text inactive (matching the combobox option value).

Now, the "Reactivate" button only appears when "Inactive" is selected in the Combobox.

In Summary

Avonni Dynamic Components provide flexible access to global context, your defined resources, and the state of other components via the resource selector. Mastering this allows you to build highly dynamic, interactive, and data-aware user interfaces without code