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

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

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

​
Available Data Objects

​
Global Variables

These are available across all Velt components:
VariableDescriptionData Fields
userCurrent logged-in userYou can find all the fields here
unreadCommentAnnotationCountNumber of unread annotations-
unreadCommentCountTotal unread comments-

​
Context-Specific Variables

These are only available within relevant components they are used in:
VariableAvailable InDescription
userContactAutocomplete componentsYou can find all the fields here
commentAnnotationComment componentsYou can find all the fields here
commentComment thread componentsYou can find all the fields here
notificationNotification componentsYou can find all the fields here
filteredCommentAnnotationsCountComments SidebarNumber of visible comments in sidebar when system filters are applied

​
Example: Building a Custom User Card

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

​
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

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

​
Using Custom Data in Components

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