Template Variables

You can render dynamic data from these Data Classes inside your Velt Components Wireframe.

​

Types

There are two types of template variables:

1. Global Template Variables: These can be used across all components. example: the current logged in User is available across all components.

2. Local Template Variables: These are only available within the component it’s data class is used. Eg: CommentAnnotation is only avaialable within the comment dialog container and its child components.

​

Syntax

• Refer the supported Class’ fields in the field field of the Velt Data component.
• You can refer to nested fields using the dot notation.

• React / Next.js
• Other Frameworks

<VeltData field='userContact.name' />

​

Global Template Variables

​

1. User

• Variable: user
• This represents the current logged-in user. It is available across all components. Learn more about the User data class here.

​

2. Unread Comment Annotation Count

• Variable: unreadCommentAnnotationCount
• This represents the number of unread comment annotations on the current document.

​

3. Unread Comment Count

• Variable: unreadCommentCount
• This represents the total number of unread comments on the current document.

​

Local Template Variables

​

1. UserContact

• Variable: userContact
• This represents the user contact object (it has the same class as the User). It is available on the autocomplete component where the user contacts are rendered. Learn more about the UserContact data class here.

​

2. CommentAnnotation

• Variable: commentAnnotation
• This represents the comment thread. This is available within the comment feature components. Learn more about the CommentAnnotation data class here.

​

3. Comment

• Variable: comment
• This represents the message inside the thread. This is available within the comment feature components. Learn more about the Comment data class here.

​

Example Usage

• React / Next.js
• Other Frameworks

<VeltAutocompleteOptionWireframe>
  <VeltData field='userContact.name' />
  <VeltData field='userContact.organizationName' />
</VeltAutocompleteOptionWireframe>