Custom filtering, sorting and grouping

Here is the overview on how it works:
- Enable custom actions in the comments sidebar.
- Add Velt Button Wireframe to the sidebar wireframe.
- Handle click events and lifecycle events to apply custom filtering, sorting, and grouping logic.
- Update sidebar data.
Here are the steps to implement it:

Enable Custom Actions

Using Props:

<VeltCommentsSidebar customActions={true} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();

Using Props:

<VeltCommentsSidebar customActions={true} />

Using API:

const commentElement = client.getCommentElement();
commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();

Using Props:

<velt-comments-sidebar custom-actions="true"></velt-comments-sidebar>

Using API:

const commentElement = Velt.getCommentElement();
commentElement.enableSidebarCustomActions();
commentElement.disableSidebarCustomActions();

Add Velt Buttons and handle click events

Learn more about how to setup Velt Button Wireframe.
Set default state using the active prop.
Handle veltButtonClick event to implement custom filtering, sorting, and grouping logic. It returns VeltButtonClickEvent.

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Panel>
      <VeltCommentsSidebarWireframe.Header />
      <div className="custom-filter-chip-container">

          <VeltButtonWireframe id="unread" type="multi-select" group="custom-filter" active={true}>
              <div className="custom-filter-chip-button">Unread</div>
          </VeltButtonWireframe>

          <VeltButtonWireframe id="mentions" type="multi-select" group="custom-filter">
              <div className="custom-filter-chip-button">Mentions</div>
          </VeltButtonWireframe>

      </div>
  </VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>

Handle the button click event:

const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
  if (veltButtonClickEventData) {
    if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
      const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
      if (selections?.unread) {
        // show unread comments
      }
      if (selections?.mentions) {
        // show comments with mentions
      }
    }
  }
}, [veltButtonClickEventData]);

<VeltWireframe>
  <VeltCommentsSidebarWireframe.Panel>
      <VeltCommentsSidebarWireframe.Header />
      <div className="custom-filter-chip-container">

          <VeltButtonWireframe id="unread" type="multi-select" group="custom-filter" active={true}>
              <div className="custom-filter-chip-button">Unread</div>
          </VeltButtonWireframe>

          <VeltButtonWireframe id="mentions" type="multi-select" group="custom-filter">
              <div className="custom-filter-chip-button">Mentions</div>
          </VeltButtonWireframe>

      </div>
  </VeltCommentsSidebarWireframe.Panel>
</VeltWireframe>

Handle the button click event:

const veltButtonClickEventData = useVeltEventCallback('veltButtonClick');
useEffect(() => {
  if (veltButtonClickEventData) {
    if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
      const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
      if (selections?.unread) {
        // show unread comments
      }
      if (selections?.mentions) {
        // show comments with mentions
      }
    }
  }
}, [veltButtonClickEventData]);

<velt-wireframe style="display:none;">
  <velt-comments-sidebar-wireframe-panel>
    <velt-comments-sidebar-wireframe-header></velt-comments-sidebar-wireframe-header>
    <div class="custom-filter-chip-container">

        <velt-button-wireframe id="unread" type="multi-select" group="custom-filter" active="true">
            <div class="custom-filter-chip-button">Unread</div>
        </velt-button-wireframe>

        <velt-button-wireframe id="mentions" type="multi-select" group="custom-filter">
            <div class="custom-filter-chip-button">Mentions</div>
        </velt-button-wireframe>

    </div>
  </velt-comments-sidebar-wireframe-panel>
</velt-wireframe>

Handle the button click event:

Velt.on('veltButtonClick').subscribe(veltButtonClickEventData => {
  if (veltButtonClickEventData) {
    if (veltButtonClickEventData.buttonContext?.groupId === 'custom-filter') {
      const selections = veltButtonClickEventData.buttonContext?.selections?.['custom-filter'];
      if (selections?.unread) {
        // Custom Filtering | Sorting | Grouping Logic
      }
      if (selections?.mentions) {
        // Custom Filtering | Sorting | Grouping Logic
      }
    }
  }
});

Handle Sidebar data lifecycle events

There are two lifecycle events you need to handle to implement custom filtering, sorting, and grouping logic:

commentSidebarDataInit: Triggered when comment sidebar data is first loaded. It returns CommentSidebarDataInitEvent
commentSidebarDataUpdate: Triggered when comment sidebar data is updated. It returns CommentSidebarDataUpdateEvent
- This event can trigger multiple times when either the comment data or unread comment count changes.

const commentSidebarDataInitEvent: CommentSidebarDataInitEvent = useCommentEventCallback('commentSidebarDataInit');
const commentSidebarDataUpdateEvent: CommentSidebarDataUpdateEvent = useCommentEventCallback('commentSidebarDataUpdate');

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

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

const commentSidebarDataInitEvent: CommentSidebarDataInitEvent = useCommentEventCallback('commentSidebarDataInit');
const commentSidebarDataUpdateEvent: CommentSidebarDataUpdateEvent = useCommentEventCallback('commentSidebarDataUpdate');

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

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

const commentElement = Velt.getCommentElement();

commentElement.on('commentSidebarDataInit').subscribe((data) => {
  // Custom Filtering | Sorting | Grouping Logic
});

commentElement.on('commentSidebarDataUpdate').subscribe((data) => {
  // Custom Filtering | Sorting | Grouping Logic
});

Update sidebar data based on custom logic

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);

const options = {
  grouping: false
};

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

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

const options = {
  grouping: false
};
const customFilterData = [
  {
    "groupId": "group1",
    "groupName": "Group 1",
    "isExpanded": true,
    "annotations": [
      {
          ...annotation1
      },
      {
          ...annotation2
      },
    ]
  }
];
const commentElement = Velt.getCommentElement();
commentElement.setCommentSidebarData(customFilterData, options);

onCommentClick

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:

Property	Type	Description
`documentId`	string	ID of the document containing the comment
`location`	Object	Location details of the comment
`targetElementId`	string	DOM ID of the element the comment is attached to
`context`	Object	Custom context data associated with the comment
`annotation`	CommentAnnotation	The 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 set custom locations
  const { pageId } = event.location;
  //handle custom navigation by getting context if you have added metadata using addContext()
  const { pageId } = event.context;
  yourNavigateToPageMethod(pageId);
};

 <VeltCommentsSidebar onCommentClick={onCommentClick} /> 

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

// event handler for when a comment is clicked on 
const onCommentClick = (event) => {
  console.log('onCommentClick', event.detail);
  //handle custom navigation by getting location if you have set custom locations
  const { pageId } = event.detail.location;
  //handle custom navigation by getting context if you have added metadata using addContext()
  const { pageId } = event.detail.context;
  yourNavigateToPageMethod(pageId);
};

const commentElement = document.querySelector('velt-comments-sidebar');
commentElement.addEventListener('onCommentClick', onCommentClick);

onCommentNavigationButtonClick

This event is triggered when the navigation button in the comment dialog in the Sidebar is clicked.
Use this event to implement custom navigation logic.

<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);
  };

<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);
  };

const commentSidebarElement = document.querySelector('velt-comments-sidebar');
commentSidebarElement.addEventListener('onCommentNavigationButtonClick', (event) => {
  console.log('onCommentNavigationButtonClick', event.detail);
});

enableSidebarUrlNavigation

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();

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();

Using Props:

<velt-comments-sidebar url-navigation="false"></velt-comments-sidebar>

Using API method:

const commentElement = Velt.getCommentElement();
commentElement.enableSidebarUrlNavigation();
commentElement.disableSidebarUrlNavigation();

UI

currentLocationSuffix

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

Default: false

<VeltCommentsSidebar currentLocationSuffix={true}/>

embedMode

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>

excludeLocationIdsFromSidebar

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']);

Using Props:

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

Using API:

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

Using Props:

<velt-comments-sidebar exclude-location-ids='["location1", "location2"]'></velt-comments-sidebar>

Using API:

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

filterPanelLayout

Change the layout of the filter panel in the sidebar.
Options: menu or bottomSheet Default: bottomSheet

<VeltCommentsSidebar filterPanelLayout="menu"/>

filterOptionLayout

Change the layout of the filter options in the sidebar filter panel.
Options:
- checkbox: (default) to show the filter options in a checkbox list
- dropdown: to show the filter options in a searchable dropdown with checklist

<VeltCommentsSidebar filterOptionLayout="dropdown"/>

filterCount

Disable comment count on filter options. This leads to better performance.

<VeltCommentsSidebar filterCount={false}/>

floatingMode

This makes the sidebar open in an overlay panel over the sidebar button float over the page content.

<VeltSidebarButton floatingMode={true} />

focusedThreadMode

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. Learn more about it here.

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} />

pageMode

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

Default: false

<VeltCommentsSidebar pageMode={true} />

position

Change the default direction where the sidebar opens from.
Options: left or right
Default: right

<VeltCommentsSidebar position="left"/>

openCommentSidebar

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

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

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

searchPlaceholder

Customize the placeholder text shown in the search input of the comments sidebar.

  <VeltCommentsSidebar searchPlaceholder="New placeholder" />

System Filters, Sorting and Grouping

filterConfig

Customize the available system filters:
location: Filter comments by location.
people: Filter comments by author of comment annotation.
tagged: Filter comments by users who were tagged in the comment. Only available in the latest SDK version.
assigned: Filter comments by users who were assigned to the comment. Only available in the latest SDK version.
priority: Filter comments by priority.
category: Filter comments by category.
status: Filter comments by status.
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: "Author", // 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
  },
  tagged: {
    enable: true,
    name: "Tagged", // change the display name of the filter
    enableGrouping: false, // whether to enable grouping based on tagged filter
    multiSelection: true, // whether to enable multiselection for the filter
  },
  assigned: {
    enable: true,
    name: "Assigned", // change the display name of the filter
    enableGrouping: false, // whether to enable grouping based on assigned 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
  },
  status: {
    enable: true,
    name: "Status", // change the display name of the filter
    multiSelection: true, // whether to enable multiselection for the filter
  }
}

<VeltCommentsSidebar filterConfig={filterConfig} />

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: "Author", // 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
  },
  tagged: {
    enable: true,
    name: "Tagged", // change the display name of the filter
    enableGrouping: false, // whether to enable grouping based on tagged filter
    multiSelection: true, // whether to enable multiselection for the filter
  },
  assigned: {
    enable: true,
    name: "Assigned", // change the display name of the filter
    enableGrouping: false, // whether to enable grouping based on assigned 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
  },
  status: {
    enable: true,
    name: "Status", // change the display name of the filter
    multiSelection: true, // whether to enable multiselection for the filter
  }
}

<VeltCommentsSidebar filterConfig={filterConfig} />

const filterConfig = {
  location: {
    enable: true, // enable/disable location filter
    name: "Pages", // customize location filter heading
    enableGrouping: true, // to enable/disable grouping based on location filter
    multiSelection: true, // to enable/disable multiple selection
    order: ['locationId1', 'locationId2', 'locationId3'] // pass array of location ids here
  },
  people: {
    enable: true, // enable/disable people filter
    name: "People", // customize people filter heading
    enableGrouping: true, // to enable/disable grouping based on people filter
    multiSelection: true, // to enable/disable multiple selection
  },
  priority: {
    enable: true, // enable/disable priority filter
    name: "Priority", // customize priority filter heading
    enableGrouping: false, // to enable/disable grouping based on priority filter
    multiSelection: true, // to enable/disable multiple selection
  },
  category: {
    enable: true, // enable/disable category filter
    name: "Category", // customize category filter heading
    enableGrouping: true, // to enable/disable grouping based on category filter
    multiSelection: true, // to enable/disable multiple selection
  },
  status: {
    enable: true, // enable/disable status filter
    name: "Status", // customize status filter heading
    multiSelection: true, // to enable/disable multiple selection
  }
};

const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filter-config", JSON.stringify(filterConfig));

groupConfig

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} />

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} />

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
};


const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("group-config", JSON.stringify(groupConfig));

sortData

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" />

setCommentSidebarFilters

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);

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);

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
};

const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filters", JSON.stringify(filters));

API Methods:

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

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Email Notifications

Webhooks

Security

Miscellaneous

Customize Behavior

Custom filtering, sorting and grouping

Enable Custom Actions

Add Velt Buttons and handle click events

Handle Sidebar data lifecycle events

Update sidebar data based on custom logic

Navigation

onCommentClick

onCommentNavigationButtonClick

enableSidebarUrlNavigation

UI

currentLocationSuffix

embedMode

excludeLocationIdsFromSidebar

filterPanelLayout

filterOptionLayout

filterCount

floatingMode

focusedThreadMode

pageMode

position

openCommentSidebar

searchPlaceholder

System Filters, Sorting and Grouping

filterConfig

groupConfig

sortData

setCommentSidebarFilters

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

Self-Host Data

Email Notifications

Webhooks

Security

Miscellaneous

​Custom filtering, sorting and grouping

Enable Custom Actions

Add Velt Buttons and handle click events

Handle Sidebar data lifecycle events

Update sidebar data based on custom logic

​Navigation

​onCommentClick

​onCommentNavigationButtonClick

​enableSidebarUrlNavigation

​UI

​currentLocationSuffix

​embedMode

​excludeLocationIdsFromSidebar

​filterPanelLayout

​filterOptionLayout

​filterCount

​floatingMode

​focusedThreadMode

​pageMode

​position

​openCommentSidebar

​searchPlaceholder

​System Filters, Sorting and Grouping

​filterConfig

​groupConfig

​sortData

​setCommentSidebarFilters

Custom filtering, sorting and grouping

Navigation

onCommentClick

onCommentNavigationButtonClick

enableSidebarUrlNavigation

UI

currentLocationSuffix

embedMode

excludeLocationIdsFromSidebar

filterPanelLayout

filterOptionLayout

filterCount

floatingMode

focusedThreadMode

pageMode

position

openCommentSidebar

searchPlaceholder

System Filters, Sorting and Grouping

filterConfig

groupConfig

sortData

setCommentSidebarFilters