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>
