Skip to main content
New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

​
Overview

The Comment Tool wireframe exposes the variables below. Use them inside a <velt-comment-tool-wireframe> tag via three forms:
You want to…UseExample
Display a value as text<velt-data field="var" /><velt-data field="componentConfig.data.locationId" />
Hide / show conditionallyvelt-if="{var}"velt-if="{globalConfig.featureState.addCommentMode}"
Toggle a CSS classvelt-class="'cls': {var}"velt-class="'is-disabled': '!{commentToolEnabled}'"
This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> (per-instance) or globalConfig.featureState.<name> (cross-document) form. The wireframe also exposes a flat compatibility shape that surfaces top-level flags directly: {commentToolEnabled}, {addCommentMode}, and {disabled} resolve without any prefix. Tables below use the canonical full path for clarity.

​
Component Config

VariableTypeDescriptionExample
globalConfig.featureState.commentToolEnabledbooleanComment Tool is enabled at the workspace level.velt-class="'is-disabled': '!{globalConfig.featureState.commentToolEnabled}'"
globalConfig.featureState.addCommentModebooleanAdd-comment mode is currently active (next click anywhere drops a new pin).velt-class="'add-mode': {globalConfig.featureState.addCommentMode}"
globalConfig.featureState.popoverModebooleanPopover mode is enabled — the comment dialog opens as a popover after a pin is dropped.velt-class="'popover': {globalConfig.featureState.popoverMode}"
globalConfig.featureState.groupMatchedCommentsbooleanMatched comments are grouped together on the page.velt-class="'grouped': {globalConfig.featureState.groupMatchedComments}"
componentConfig.data.commentAnnotationAvailablebooleanAn annotation is currently associated with this tool instance.velt-if="{componentConfig.data.commentAnnotationAvailable}"
componentConfig.data.contextobject | nullFree-form annotation context bound to this tool instance.<velt-data field="componentConfig.data.context.foo" />
componentConfig.data.contextOptionsContextOptions | nullContext-options config for the next annotation.Used internally — read individual fields if needed.
componentConfig.data.folderIdstring | nullFolder this tool drops annotations into.<velt-data field="componentConfig.data.folderId" />
componentConfig.data.veltFolderIdstring | nullVelt-managed folder id (when no client folder is set).<velt-data field="componentConfig.data.veltFolderId" />
componentConfig.data.clientDocumentIdstring | nullClient-supplied document id.<velt-data field="componentConfig.data.clientDocumentId" />
componentConfig.data.documentIdstring | nullResolved document id for this instance.<velt-data field="componentConfig.data.documentId" />
componentConfig.data.locationIdstring | nullLocation id this tool is scoped to.<velt-data field="componentConfig.data.locationId" />
componentConfig.data.targetElementIdstring | nullDOM target the next annotation will anchor onto.<velt-data field="componentConfig.data.targetElementId" />
componentConfig.data.sourceIdstring | nullSource-id passed through from the host application.<velt-data field="componentConfig.data.sourceId" />
componentConfig.data.disabledbooleanTool is disabled by host configuration.velt-class="'is-disabled': {componentConfig.data.disabled}"
componentConfig.uiState.showDefaultBtnbooleanDefault built-in button should render. Set to false when a wireframe overrides the button entirely.velt-if="{componentConfig.uiState.showDefaultBtn}"
componentConfig.uiState.shadowDombooleanShadow-DOM rendering is enabled. Set on the host element, not from inside the wireframe.Host config — set via element attribute.
componentConfig.uiState.darkModebooleanDark mode is active for this instance.velt-class="'dark': {componentConfig.uiState.darkMode}"
componentConfig.uiState.addCommentModebooleanPer-instance mirror of globalConfig.featureState.addCommentMode.velt-class="'active': {componentConfig.uiState.addCommentMode}"
componentConfig.uiState.contextInPageModeComposerbooleanTool is rendering inside a page-mode composer.velt-class="'in-composer': {componentConfig.uiState.contextInPageModeComposer}"
componentConfig.uiState.commentToolEnabledbooleanPer-instance mirror of globalConfig.featureState.commentToolEnabled.velt-class="'enabled': {componentConfig.uiState.commentToolEnabled}"
parentLocalUIState.darkModebooleanLocal dark-mode flag (host attribute).velt-class="'dark': {parentLocalUIState.darkMode}"
parentLocalUIState.variantstringPer-instance variant tag set on the host element.<velt-data field="parentLocalUIState.variant" />
parentLocalUIState.shadowDombooleanLocal shadow-DOM flag.Host config — set via element attribute.

​
Subcomponents

​
comment-tool (root)

The trigger button customers place in their toolbar. Clicking it puts the document into add-comment mode (the next click anywhere drops a new pin).
  • Public element: <velt-comments-tool>
  • Wireframe tag: <velt-comment-tool-wireframe> (singular — registered name differs from the public element).
PropertyValue
Extra variablesNone — root only sees common variables.
shouldShowAlways renders. The inner button visually disables when commentToolEnabled === false.

​
Classes

ClassApplied when
velt-comment-toolAlways on the host wrapper.
velt-tool--action-btnAlways on the inner button.
activeaddCommentMode is true.
velt-tool--action-btn-disabledcommentToolEnabled is false.
velt-tool--action-btn-iconOn the inner SVG.
velt-comment-tool--custom-btnOn the custom-button slot (when overridden).
<VeltCommentToolWireframe veltClass="'active': {addCommentMode}, 'disabled': '!{commentToolEnabled}'">
  <button className="my-comment-button">
    <VeltIf condition="{addCommentMode}"><span>Click anywhere…</span></VeltIf>
    <VeltIf condition="!{addCommentMode}"><span>Add comment</span></VeltIf>
  </button>
</VeltCommentToolWireframe>
  • Comment Tool — wireframe overview and default markup for this primitive.
  • Template Variables — overview of the velt-data / velt-if / velt-class system.