​
1. Comment click event

  • Listen for click events on comments in the sidebar to trigger actions like navigation.
  • The event callback provides access to the clicked comment’s annotation object, which includes location and context data.
  • Use this data to update your app’s state and navigate to the comment’s location.

The event handler receives an object with the following properties:

PropertyTypeDescription
documentIdstringID of the document containing the comment
locationObjectLocation details of the comment
targetElementIdstringDOM ID of the element the comment is attached to
contextObjectCustom context data associated with the comment
annotationCommentAnnotationThe full comment annotation object
 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 

// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  //handle custom navigation by getting location if you have used Locations
  const { pageId } = event.location;
  //handle custom navigation by getting context if you have used addContext()
  const { pageId } = event.context;
  yourNavigateToPageMethod(pageId);
};

​
2. Custom filtering, sorting and grouping

  • Here is the overview on how it works:
    • Enable custom actions in the comments sidebar.
    • Add action buttons to the sidebar wireframe.
    • Implement callback and event handlers to handle custom filtering, sorting, and grouping logic.
    • Set custom filtered data in the comments sidebar.
  • Here are the steps to implement it:
1

Enable Custom Actions

Using Props:

<VeltCommentsSidebar customActions={true} />

Using API:

commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();
2

Add action buttons to the sidebar wireframe

  • Specify an id to the action button. This can be used to identify which button was clicked/toggled in the callback or lifecycle events.
  • There are two types of action buttons available:
    • toggle: This button has on and off states. This can be used to enable AND logic.
    • default: This button has only one state. This can be used to take action on click eg: sort, filter or group by a field.
<VeltCommentsSidebarWireframe.ActionButton id="all" type="toggle" />
3

Set default actions

  • Set default custom sorting and filtering options in the comments sidebar.
  • When the sidebar is initialized, the default actions will be applied.
  • The keys of the object are the IDs of the action buttons you defined in the wireframe.
commentElement.setCommentSidebarDefaultCustomActions({
  'all': true,
  'unread': false,
  'mentions': false,
  'current-clip': false
});
4

Implement custom filtering, sorting, and grouping logic

  • Handle lifecycle and click events to implement custom filtering, sorting, and grouping logic:

    • onCommentSidebarActionButtonClick: Triggered when an action button is clicked.
    • onCommentSidebarInit: Triggered when the comments sidebar is initialized.
    • onCommentSidebarData: Triggered when the comments sidebar data is updated.

  • The events/lifecycle methods return a CommentSidebarCustomActionEventData object containing:

    • actions: Map of custom action button states
    • data: All unfiltered comment annotations
    • unreadDataMap: Map of unread comment counts by annotation ID
    • systemFilteredData: Comment annotations filtered by system filters
    import { useCommentSidebarActionButtonClick, useCommentSidebarInit, useCommentSidebarData } from '@veltdev/react';

const commentSidebarActionButtonClickData: CommentSidebarCustomActionEventData = useCommentSidebarActionButtonClick();
const commentSidebarInitData: CommentSidebarCustomActionEventData = useCommentSidebarInit();
const commentSidebarData: CommentSidebarCustomActionEventData = useCommentSidebarData();

useEffect(() => {
  if (commentSidebarActionButtonClick) {
    // Custom Filtering | Sorting | Grouping Logic
  }
}, [commentSidebarActionButtonClickData]);

useEffect(() => {
  if (commentSidebarInit) {
    // Custom Filtering | Sorting | Grouping Logic
  }
}, [commentSidebarInitData]);

useEffect(() => {
  if (commentSidebarData) {
    // Custom Filtering | Sorting | Grouping Logic
  }
}, [commentSidebarData]);
5

Set custom filtered data

  • Once you have applied your custom filtering, sorting, and grouping logic, create the data an array of CommentSidebarData objects and set it in the comments sidebar.

  • Use the options parameter to control if you want to group the comments or not.

    const options = {
  grouping: false
};

const customFilterData = [
  {
    "groupId": "group1",
    "groupName": "Group 1",
    "isExpanded": true,
    "annotations": [
      {
          ...annotation1
      },
      {
          ...annotation2
      },
    ]
  }
];

const commentElement = client.getCommentElement();
commentElement.setCommentSidebarData(customFilterData, options);

​
3. Add composer to sidebar with Page mode

  • This adds a composer in the sidebar where users can add comments without attaching them to any specific element.

Default: false

<VeltCommentsSidebar pageMode={true} />

​
4. Embed Sidebar in your component

  • By default, the sidebar will open up from the right corner of the page.
  • With embed mode, you can add the sidebar in your component and it will take up the full width and height of its container.
  • When in embed mode, the sidebar will not have the close button. You need to implement your own open and close functionality on the host component.
<div className="sidebar-container">
  <VeltCommentsSidebar embedMode={true} />
</div>

​
5. Exclude comments from certain locations

  • Use this to filter out comments from certain locations. These comments will not be displayed in the sidebar.

Using Props:

<VeltCommentsSidebar excludeLocationIds={['location1', 'location2']} />

Using API:

const commentElement = client.getCommentElement();
commentElement.excludeLocationIdsFromSidebar(['location1', 'location2']);

​
6. Floating mode

  • This makes the sidebar open in an overlay panel over the sidebar button float over the page content.
<VeltSidebarButton floatingMode={true} />

​
7. Change sidebar open position

  • Change the default direction where the sidebar opens from.
  • Options: left or right
  • Default: right
<VeltCommentsSidebar position="left"/>

​
8. Enable/Disable Sidebar URL Navigation

  • By default, clicking a comment in the sidebar doesn’t automatically update the page URL where the comment was added.
  • Use this to enable automatic URL navigation when clicking comments in the sidebar.
  • If your app’s state is more complex, you might need to listen for onCommentClick events and implement custom navigation logic.

Default: false

Using Props:

<VeltCommentsSidebar urlNavigation={true} />

Using API method:

const commentElement = client.getCommentElement();
// to enable sidebar url navigation
commentElement.enableSidebarUrlNavigation();
// to disable sidebar url navigation
commentElement.disableSidebarUrlNavigation();

​
9. Open/close the Comments Sidebar

const commentElement = client.getCommentElement();
commentElement.openCommentSidebar(); // opens the comments side bar
commentElement.closeCommentSidebar(); // closes the comments side bar
commentElement.toggleCommentSidebar(); // toggles the comments side bar

​
10. Enable/disable “this page” suffix

  • Adds “(this page)” suffix to the group name when the current location matches the group’s location.

Default: false

<VeltCommentsSidebar currentLocationSuffix={true}/>

​
11. System Filters Customization

  • Customize the available system filters:
  • location
  • people
  • priority
  • category
  • You can rename, disable, configure grouping, and multi-select behavior of the filters as needed.
const filterConfig = {
  location: {
    enable: true,
    name: "Pages", // change the display name of the filter
    enableGrouping: true, // whether to enable grouping based on location filter
    multiSelection: true, // whether to enable multiselection for the filter
    order: ['locationId1', 'locationId2', 'locationId3'] // change the order of the filter options
  },
  people: {
    enable: true,
    name: "People", // change the display name of the filter
    enableGrouping: true, // whether to enable grouping based on people filter
    multiSelection: true, // whether to enable multiselection for the filter
  },
  priority: {
    enable: true,
    name: "Priority", // change the display name of the filter
    enableGrouping: false, // whether to enable grouping based on priority filter
    multiSelection: true, // whether to enable multiselection for the filter
  },
  category: {
    enable: true,
    name: "Category", // change the display name of the filter
    enableGrouping: true, // whether to enable grouping based on category filter
    multiSelection: true, // whether to enable multiselection for the filter
  }
}

<VeltCommentsSidebar filterConfig={filterConfig} />

​
12. System Grouping Customization

  • Enable/disable the option to group comments in the sidebar with the group config attribute:
const groupConfig = {
  enable: true, // whether to enable group by option
  name: "Custom Group By", // change the display name of the group by option in the filter panel
};

<VeltCommentsSidebar groupConfig={groupConfig} />

​
13. System Sorting Customization

  • Change the default sorting order of Comments in the Sidebar.
  • Default: desc

There are three options for sorting:

  • asc - to show comments in ascending order of when they were last updated
  • desc - to show comments in descending order of when they were last updated
  • none - to show comments in the sequence they were added
<VeltCommentsSidebar sortData="asc" />

​
14. Apply System Filters Programmatically

  • Programmatically set the system filters on the sidebar:
const filters = {
	location: [
		{ id: 'location1Id' }, // id field is required
		{ id: 'location2Id' }, // id field is required
	],
	people: [
		{ userId: 'userIdToFilter' }, // userId or
		{ email: 'userEmailToFilter' } // user email is required
	],
	priority: ['P0', 'P1', 'P2'], // default supported values
	status: ['OPEN', 'IN_PROGRESS', 'RESOLVED'], // default supported values
	category: ['bug', 'feedback', 'question'], // default supported values
};


<VeltCommentsSidebar filters={filters} />

API Methods:

const commentElement = client.getCommentElement();
commentElement.setCommentSidebarFilters(filters);

​
15. Filter panel layout customization

  • Change the layout of the filter panel in the sidebar.
  • Options: menu or bottomSheet Default: bottomSheet
<VeltCommentsSidebar filterPanelLayout="menu"/>

​
16. Focused Thread Mode

  • In this mode, when you click on a comment in the sidebar, it opens the thread in an expanded view within the sidebar itself.
  • Other threads and actions like filters, search etc. are hidden behind a back button.
  • Enabling this mode also adds a navigation button in the comment dialog. Clicking it will navigate to the comment and trigger a callback.
  • If you had previously used a wireframe for the comment dialog, you will need to add the navigation button wireframe and the focused thread wireframe.
<VeltCommentsSidebar focusedThreadMode={true} />

Handling the navigation button click:

<VeltCommentsSidebar onCommentNavigationButtonClick={onCommentNavigationButtonClick} />

  // event handler for when a comment is clicked on 
  const onCommentNavigationButtonClick = (event) => {
    console.log('onCommentNavigationButtonClick', event);
    //handle custom navigation by getting location if you have used Locations
    const { pageId } = event.location;
    //handle custom navigation by getting context if you have used addContext()
    const { pageId } = event.context;
    yourNavigateToPageMethod(pageId);
  };

Was this page helpful?

SetupOverview