Activity Logs Wireframe Variables

Template variables exposed by the Activity Logs wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

Overview

The Activity Logs wireframe exposes the variables below. Use them inside any <velt-activity-log-...-wireframe> tag via three forms:

You want to…	Use	Example
Display a value as text	<velt-data field="var" />	<velt-data field="dateGroup.displayLabel" />
Hide / show conditionally	velt-if="{var}"	velt-if="{isEnabled} && {isOpen}"
Toggle a CSS class	velt-class="'cls': {var}"	velt-class="'is-open': {isOpen}"

All variables are mapped — reference them by their short name. You do not need the componentConfig. prefix.

App State

App-wide values resolved from the shared signal.

Variable	Type	Description	Example
user	User	Currently identified end-user.	<velt-data field="user.name" />
darkMode	boolean	Dark mode active (global config or per-instance attribute).	velt-class="'theme-dark': {darkMode}"

Data State

Activity feed data: the raw list, filtered list, date grouping, and active filter.

Variable	Type	Description	Example
allActivities	ActivityRecord[] | null	Full unfiltered activity feed. null while loading.	velt-if="{allActivities.length} > 0"
loading	boolean	true while activities are being fetched.	velt-if="{loading}"
filteredActivities	ActivityRecord[] | null	Activities after activeFilter is applied.	<velt-data field="filteredActivities.length" />
groupedActivities	ActivityDateGroup[]	Activities bucketed by calendar date for display.	<velt-data field="groupedActivities.0.displayLabel" />
virtualScrollItems	ActivityScrollItem[]	Flattened list the virtual scroller iterates over. Read individual items via the iteration context.	Iterated internally.
activeFilter	'all' | ActivityFeatureType	Currently selected filter value.	velt-class="'filter-active': {activeFilter} !== 'all'"
availableFilters	ActivityFilterOption[]	All filter options shown in the dropdown.	<velt-data field="availableFilters.length" />

UI State

Per-instance UI flags driven by the component itself.

Variable	Type	Description	Example
isOpen	boolean	Activity Log panel is open.	velt-class="'is-open': {isOpen}"
darkMode	boolean	Dark mode is active (driven by global config or per-instance attribute).	velt-class="'theme-dark': {darkMode}"
variant	string	Per-instance variant tag set on the host element.	<velt-data field="variant" />
expandedGroups	Set<string>	Date-group keys currently expanded past the truncation limit.	Internal — used to compute group visibility.
defaultVisibleCount	number	Items shown per date-group before “Show more” appears. Defaults to 5.	<velt-data field="defaultVisibleCount" />
filterDropdownOpen	boolean	Filter dropdown menu is open.	velt-class="'open': {filterDropdownOpen}"

Feature State

Capability flags toggled via SDK config.

Variable	Type	Description	Example
isEnabled	boolean	Activity Log feature is enabled in the SDK.	velt-if="{isEnabled}"

Common Props

Every Activity Log primitive accepts:

React Prop	HTML Attribute	Type	Default	Description
defaultCondition	default-condition	boolean | "true" | "false"	true	When false, the component always renders regardless of internal state.

Signal inputs (for parent-child component composition):

• [componentConfigSignal] — shared config signal (filtered activities, date groups, virtual scroll items, available filters).
• [parentLocalUIState] — per-instance UI state signal (darkMode, variant).

The root <velt-activity-log> element additionally accepts attributes that map onto config and local UI state values: dark-mode, variant, is-open, etc.

Context-Specific Variables

These are only resolvable inside the nested wireframe tags noted in the Available in column. Each is injected by the iteration primitive that owns the tag.

Variable	Type	Available in	Example
dateGroup	ActivityDateGroup	<velt-activity-log-list-date-group-wireframe>, *-date-group-label, *-list-show-more	<velt-data field="dateGroup.displayLabel" />
activity	ActivityRecord	<velt-activity-log-list-item-wireframe> and all its descendants	<velt-data field="activity.user.name" />
filter	ActivityFilterOption	<velt-activity-log-header-filter-content-item-wireframe>, *-icon, *-label	<velt-data field="filter.label" />
isActive	boolean	Same tags as filter. true when this row matches activeFilter.	velt-class="'selected': {isActive}"
isExpanded	boolean	<velt-activity-log-list-show-more-wireframe>	velt-class="'expanded': {isExpanded}"
remainingCount	number	<velt-activity-log-list-show-more-wireframe>. Items still hidden in the date-group.	<velt-data field="remainingCount" />

Aliases: activity ↔ activityRecord, filter ↔ filterOption. Either name resolves; the friendly short form is preferred.

Type Reference

Types referenced by the variables above are documented in Data Models:

Type	Description
ActivityRecord	Core activity log object (id, featureType, action, user, timestamp, target, detail).
ActivityDateGroup	Date-bucketed group with dateKey, displayLabel, activities, and totalCount.
ActivityScrollItem	Discriminated union ('date-header' / 'activity' / 'show-more') for the virtual-scroll list.
ActivityFilterOption	Filter dropdown option with label, value, and optional icon.
ActivityFeatureType	Union of feature area strings ('comment', 'recorder', 'reaction', 'crdt', 'custom').
User	Identified end-user object.

Subcomponents

Each subcomponent below has its own wireframe tag. The tables show extra variables beyond the common set, the shouldShow condition, and host CSS classes.

activity-log (root)

• Public element: <velt-activity-log>
• Wireframe tag: <velt-activity-log-wireframe>

Property	Value
Extra variables	None — root only sees common variables.
shouldShow	isEnabled === true && isOpen === true
Host class	velt-activity-log--container (always present)

React / Next.js

<VeltActivityLogWireframe veltIf="{isEnabled} && {isOpen}">
  <VeltActivityLogWireframe.Header />
  <VeltActivityLogWireframe.List />
  <VeltActivityLogWireframe.Empty />
  <VeltActivityLogWireframe.Loading />
</VeltActivityLogWireframe>

Other Frameworks

<velt-activity-log-wireframe velt-if="{isEnabled} && {isOpen}">
  <velt-activity-log-header-wireframe></velt-activity-log-header-wireframe>
  <velt-activity-log-list-wireframe></velt-activity-log-list-wireframe>
  <velt-activity-log-empty-wireframe></velt-activity-log-empty-wireframe>
  <velt-activity-log-loading-wireframe></velt-activity-log-loading-wireframe>
</velt-activity-log-wireframe>

---

activity-log-loading

Skeleton loader shown while activities are being fetched.

• Public element: <velt-activity-log-loading>
• Wireframe tag: <velt-activity-log-loading-wireframe>

Property	Value
Extra variables	None.
shouldShow	allActivities === null
Host class	velt-activity-log-loading--container

---

activity-log-empty

Empty-state shown when activities load but the filtered list is empty.

• Public element: <velt-activity-log-empty>
• Wireframe tag: <velt-activity-log-empty-wireframe>

Property	Value
Extra variables	None beyond common variables.
shouldShow	filteredActivities !== null && filteredActivities.length === 0
Host class	velt-activity-log-empty--container

React / Next.js

<VeltActivityLogWireframe.Empty veltIf="{filteredActivities.length} === 0">
  <p>No activity yet — be the first to start a thread.</p>
</VeltActivityLogWireframe.Empty>

Other Frameworks

<velt-activity-log-empty-wireframe velt-if="{filteredActivities.length} === 0">
  <p>No activity yet — be the first to start a thread.</p>
</velt-activity-log-empty-wireframe>

---

activity-log-header

Header bar with title, filter trigger, and close button.

• Public element: <velt-activity-log-header>
• Wireframe tag: <velt-activity-log-header-wireframe>
• Children: *-header-title, *-header-filter, *-header-close-button

Property	Value
Extra variables	None beyond common variables.

---

activity-log-header-title

Header title text.

• Public element: <velt-activity-log-header-title>
• Wireframe tag: <velt-activity-log-header-title-wireframe>

Property	Value
Extra variables	None.

---

activity-log-header-close-button

Close button.

• Public element: <velt-activity-log-header-close-button>
• Wireframe tag: <velt-activity-log-header-close-button-wireframe>

Property	Value
Extra variables	None.

---

activity-log-header-filter

Filter dropdown wrapper. Contains trigger and content children.

• Public element: <velt-activity-log-header-filter>
• Wireframe tag: <velt-activity-log-header-filter-wireframe>
• Children:
  • *-header-filter-trigger — opens the dropdown.
    • *-header-filter-trigger-icon
    • *-header-filter-trigger-label
  • *-header-filter-content — the open menu.
    • *-header-filter-content-item (per-filter row, iterated over availableFilters).
      • *-header-filter-content-item-icon, *-header-filter-content-item-label.

Property	Value
Extra variables	None beyond common variables.

---

activity-log-header-filter-content-item

A single filter row inside the dropdown menu.

• Public element: <velt-activity-log-header-filter-content-item>
• Wireframe tag: <velt-activity-log-header-filter-content-item-wireframe>

Variable	Type	Example
filter	ActivityFilterOption	<velt-data field="filter.label" />
filter.value	string	velt-class="'selected': {filter.value} === {activeFilter}"
filter.icon	string | undefined	<velt-data field="filter.icon" />
isActive	boolean	velt-class="'selected': {isActive}"

React / Next.js

<VeltActivityLogWireframe.Header.Filter.Content.Item
  veltClass="'selected': {isActive}">
  <VeltActivityLogWireframe.Header.Filter.Content.Item.Icon />
  <VeltActivityLogWireframe.Header.Filter.Content.Item.Label />
</VeltActivityLogWireframe.Header.Filter.Content.Item>

Other Frameworks

<velt-activity-log-header-filter-content-item-wireframe
  velt-class="'selected': {isActive}">
  <velt-activity-log-header-filter-content-item-icon-wireframe></velt-activity-log-header-filter-content-item-icon-wireframe>
  <velt-activity-log-header-filter-content-item-label-wireframe></velt-activity-log-header-filter-content-item-label-wireframe>
</velt-activity-log-header-filter-content-item-wireframe>

---

activity-log-list

Virtual-scroll list container. Iterates virtualScrollItems and dispatches each entry to the appropriate child.

• Public element: <velt-activity-log-list>
• Wireframe tag: <velt-activity-log-list-wireframe>
• Children: *-list-date-group, *-list-item, *-list-show-more

Property	Value
Extra variables	None beyond common variables.

---

activity-log-list-date-group

A date header row.

• Public element: <velt-activity-log-list-date-group>
• Wireframe tag: <velt-activity-log-list-date-group-wireframe>
• Children: *-list-date-group-label

Variable	Type	Example
dateGroup	ActivityDateGroup	<velt-data field="dateGroup.displayLabel" />
dateGroup.dateKey	string	<velt-data field="dateGroup.dateKey" />
dateGroup.totalCount	number	<velt-data field="dateGroup.totalCount" />

---

activity-log-list-item

A single activity row. Composes avatar, icon, content, and time sub-components.

• Public element: <velt-activity-log-list-item>
• Wireframe tag: <velt-activity-log-list-item-wireframe>
• Children:
  • *-list-item-avatar — user avatar.
  • *-list-item-icon — action-type icon.
  • *-list-item-content — main content row.
    • *-list-item-content-user — actor name.
    • *-list-item-content-action — action verb ('commented', 'reacted', …).
    • *-list-item-content-target — target object label.
    • *-list-item-content-detail — optional detail snippet.
  • *-list-item-time — relative timestamp.

Variable	Type	Example
activity	ActivityRecord	<velt-data field="activity.action" />
activity.user	User	<velt-data field="activity.user.name" />
activity.user.userId	string	velt-if="{activity.user.userId} === {user.userId}"
activity.timestamp	number	<velt-data field="activity.timestamp" />
activity.featureType	'comment' | 'recorder' | 'reaction' | 'crdt'	velt-class="'is-{activity.featureType}': true"
activity.target	any	Shape varies by activity type.

React / Next.js

<VeltActivityLogWireframe.List.Item
  veltClass="'mine': {activity.user.userId} === {user.userId}">
  <VeltActivityLogWireframe.List.Item.Icon />
  <VeltActivityLogWireframe.List.Item.Content />
  <VeltActivityLogWireframe.List.Item.Time />
</VeltActivityLogWireframe.List.Item>

Other Frameworks

<velt-activity-log-list-item-wireframe
  velt-class="'mine': {activity.user.userId} === {user.userId}">
  <velt-activity-log-list-item-icon-wireframe></velt-activity-log-list-item-icon-wireframe>
  <velt-activity-log-list-item-content-wireframe></velt-activity-log-list-item-content-wireframe>
  <velt-activity-log-list-item-time-wireframe></velt-activity-log-list-item-time-wireframe>
</velt-activity-log-list-item-wireframe>

---

activity-log-list-show-more

“Show more” expand row at the end of a collapsed date-group.

• Public element: <velt-activity-log-list-show-more>
• Wireframe tag: <velt-activity-log-list-show-more-wireframe>

Variable	Type	Example
dateGroup	ActivityDateGroup	<velt-data field="dateGroup.totalCount" />
isExpanded	boolean	velt-class="'expanded': {isExpanded}"
remainingCount	number	<velt-data field="remainingCount" />

Property	Value
shouldShow	dateGroup.totalCount > defaultVisibleCount

React / Next.js

<VeltActivityLogWireframe.List.ShowMore veltIf="{remainingCount} > 0">
  <span>Show <VeltData field="remainingCount" /> more</span>
</VeltActivityLogWireframe.List.ShowMore>

Other Frameworks

<velt-activity-log-list-show-more-wireframe velt-if="{remainingCount} > 0">
  <span>Show <velt-data field="remainingCount"></velt-data> more</span>
</velt-activity-log-list-show-more-wireframe>

---

Deeply-Nested Wireframe Tags

Each tag below has its own <velt-activity-log-...-wireframe> registration and inherits context variables from its parent.

Header filter sub-components

Tag	Notes	Example
<velt-activity-log-header-filter-trigger-wireframe>	The closed-state pill (filter button).	velt-class="'open': {filterDropdownOpen}"
<velt-activity-log-header-filter-trigger-icon-wireframe>	Icon inside the trigger.	<velt-data field="activeFilter" />
<velt-activity-log-header-filter-trigger-label-wireframe>	Label inside the trigger (“All”, “Comments”, etc.).	<velt-data field="activeFilter" />
<velt-activity-log-header-filter-content-wireframe>	The opened menu wrapper.	velt-class="'menu-open': {filterDropdownOpen}"
<velt-activity-log-header-filter-content-item-icon-wireframe>	Per-row tick icon (rendered when isActive).	velt-class="'visible': {isActive}"
<velt-activity-log-header-filter-content-item-label-wireframe>	Per-row label.	<velt-data field="filter.label" />

List-item sub-components

Tag	Notes	Example
<velt-activity-log-list-date-group-label-wireframe>	Date heading inside a date-group row.	<velt-data field="dateGroup.displayLabel" />
<velt-activity-log-list-item-avatar-wireframe>	Avatar of the activity actor.	<velt-data field="activity.user.photoUrl" />
<velt-activity-log-list-item-icon-wireframe>	Action-type icon (comment / recorder / reaction).	velt-class="'icon-{activity.featureType}': true"
<velt-activity-log-list-item-time-wireframe>	Relative timestamp (“2m ago”).	<velt-data field="activity.timestamp" />
<velt-activity-log-list-item-content-wireframe>	Wrapper for the row’s text content.	Composes the four sub-components below.
<velt-activity-log-list-item-content-user-wireframe>	Actor-name fragment.	<velt-data field="activity.user.name" />
<velt-activity-log-list-item-content-action-wireframe>	Action verb (“commented”, “reacted”…).	<velt-data field="activity.action" />
<velt-activity-log-list-item-content-target-wireframe>	Target-object label.	<velt-data field="activity.target.label" />
<velt-activity-log-list-item-content-detail-wireframe>	Optional detail snippet.	<velt-data field="activity.detail" />

Related

• Activity Logs Wireframes — composition reference for the wireframe tags themselves.
• Activity Logs Primitives — granular components if you don’t need a full wireframe.
• Template Variables — overview of the velt-data / velt-if / velt-class system.