- Display dynamic data within Velt components.
- Use the dynamic data to apply conditional templates or CSS classes.
- 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 theVeltData
component.
Basic Usage
- React / Next.js
- Other Frameworks
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 |
Example: Building a Custom User Card
- React / Next.js
- Other Frameworks
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
Using Custom Data in Components
- React / Next.js
- Other Frameworks