Template Variables

Template variables allow you to:

Display dynamic data within Velt components.
Use the dynamic data to apply conditional templates or CSS classes.

There are two main ways to use them:

Using built-in Velt data
Injecting your own application data

1. Using Built-in Velt Data

Velt provides access to various data objects that you can display in your components using the VeltData component.

Basic Usage

React / Next.js
Other Frameworks

// Display user name
<VeltData field="user.name" />

// Access nested properties
<VeltData field="userContact.organizationName" />

// Display user name
<velt-data field="user.name"></velt-data>

// Access nested properties
<velt-data field="userContact.organizationName"></velt-data>

Available Data Objects

Global Variables

These are available across all Velt components:

Variable	Description	Data Fields
`user`	Current logged-in user	You can find all the fields here
`unreadCommentAnnotationCount`	Number of unread annotations	-
`unreadCommentCount`	Total unread comments	-

Context-Specific Variables

These are only available within relevant components they are used in:

Variable	Available In	Description
`userContact`	Autocomplete components	You can find all the fields here
`commentAnnotation`	Comment components	You can find all the fields here
`comment`	Comment thread components	You can find all the fields here
`notification`	Notification components	You can find all the fields here
`filteredCommentAnnotationsCount`	Comments Sidebar	Number of visible comments in sidebar when system filters are applied
`annotations`	Comment components	Supports nested access, e.g., `field="annotations.0.annotationId"`.
`allAnnotations`	Comment components	All annotations.

`context` Variable Resolution

The context variable resolves differently depending on the component it is used in:

Usage	Resolves From	Example
`field="context.someProperty"`	`parentLocalUIState.context` — the local UI state context of the parent component (e.g., Inline Comments Section)	`field="context.projectId"`
`field="annotation.context.someProperty"`	The `context` field on the `CommentAnnotation` object	`field="annotation.context.projectId"`

In components such as Inline Comments Section, field="context.someProperty" resolves from the component’s local UI state (parentLocalUIState.context), not from the annotation’s context. To access context stored on the annotation, use field="annotation.context.someProperty" instead.

Example: Building a Custom User Card

React / Next.js
Other Frameworks

<VeltAutocompleteOptionWireframe>
  <div className="user-card">
    <h3><VeltData field="userContact.name" /></h3>
    <p><VeltData field="userContact.email" /></p>
    <span className="org"><VeltData field="userContact.organizationName" /></span>
  </div>
</VeltAutocompleteOptionWireframe>

<velt-autocomplete-option-wireframe>
  <div class="user-card">
    <h3><velt-data field="userContact.name"></velt-data></h3>
    <p><velt-data field="userContact.email"></velt-data></p>
    <span class="org"><velt-data field="userContact.organizationName"></velt-data></span>
  </div>
</velt-autocomplete-option-wireframe>

2. Injecting Your Own Data

You can inject custom data from your application to use within Velt components.
This data is available in all Velt Wireframes, Velt If and Velt Data components.

Setting Custom Data

React / Next.js
Other Frameworks

// Set custom data
client.setUiState({
  projectName: 'Dashboard 2.0',
  teamSize: 5,
  customFlag: true
});

// Read custom data
client.getUiState().subscribe((data) => {
  console.log('Custom Data:', data);
});

// Set custom data
Velt.setUiState({
  projectName: 'Dashboard 2.0',
  teamSize: 5,
  customFlag: true
});

// Read custom data
Velt.getUiState().subscribe((data) => {
  console.log('Custom Data:', data);
});

Using Custom Data in Components

React / Next.js
Other Frameworks

<VeltCommentDialogWireframe.Header>
  <div className="header">
    <h2><VeltData field="projectName" /></h2>
    <span>Team Size: <VeltData field="teamSize" /></span>
  </div>
</VeltCommentDialogWireframe.Header>

<velt-comment-dialog-wireframe>
  <div class="header">
    <h2><velt-data field="projectName"></velt-data></h2>
    <span>Team Size: <velt-data field="teamSize"></velt-data></span>
  </div>
</velt-comment-dialog-wireframe>

Concepts

Async Collaboration

Realtime Collaboration

Template Variables

1. Using Built-in Velt Data

Basic Usage

Available Data Objects

Global Variables

Context-Specific Variables

`context` Variable Resolution

Example: Building a Custom User Card

2. Injecting Your Own Data

Setting Custom Data

Using Custom Data in Components

​1. Using Built-in Velt Data

​Basic Usage

​Available Data Objects

​Global Variables

​Context-Specific Variables

​context Variable Resolution

​Example: Building a Custom User Card

​2. Injecting Your Own Data

​Setting Custom Data

​Using Custom Data in Components

1. Using Built-in Velt Data

Basic Usage

Available Data Objects

Global Variables

Context-Specific Variables

`context` Variable Resolution

Example: Building a Custom User Card

2. Injecting Your Own Data

Setting Custom Data

Using Custom Data in Components