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

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

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

// 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	Common Fields
`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

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>

<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

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

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

<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

Example: Building a Custom User Card

2. Injecting Your Own Data

Setting Custom Data

Using Custom Data in Components

Concepts

Async Collaboration

Realtime Collaboration

​1. Using Built-in Velt Data

​Basic Usage

​Available Data Objects

​Global Variables

​Context-Specific Variables

​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

Example: Building a Custom User Card

2. Injecting Your Own Data

Setting Custom Data

Using Custom Data in Components