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:

1. Using built-in Velt data
2. 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

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

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

Other Frameworks

// 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

<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>

Other Frameworks

<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

// 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);
});

Other Frameworks

// 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

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

Other Frameworks

<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>