You can add custom lists at two levels: a. on the CommentAnnotation and b. on the Comment.

​
1. Add Custom Lists on Comment Annotation

  • Add a custom dropdown list at the Comment Annotation level.
  • Use this to add custom tags or categories to the comment.

let customList = [
    { id: 'violent', label: 'Violent' },
    { id: 'inappropriate', label: 'Inappropriate' },
    { id: 'robbery', label: 'Robbery' },
    { id: 'nsfw', label: 'NSFW' },
];

const customListDataOnCommentAnnotation = {
	type: 'multi', // choose from 'multi' or 'single'
    placeholder: 'Select a category',
    data: customList, // your customList data here
};

Using Props:

<VeltComments customListDataOnAnnotation={customListDataOnCommentAnnotation} />

API Method:

const commentElement = useCommentUtils();		
commentElement.createCustomListDataOnAnnotation(customListDataOnCommentAnnotation);

​
2. Add Custom Lists on Comment

You can have custom dropdown lists appear when certain hotkeys are pressed.

When you press a hotkey inside the Comment Dialog composer, it will open a dropdown list of items that you can select.

Selecting an item frop the dropdown list will add a chip that inside the comment text.

1

Set hotkey and list data

Make sure the hotkey is a single character such as # or /
  • Create the list of data will be shown when the hotkey is pressed. Eg: When the user presses #, the list of files or links from other parts of your app is shown.
  • The items in the list must be in the following schema:
export class AutocompleteItem {
    id!: string; // Unique identifier
    name!: string; // Item name. This appears as the main item text in the UI.
    description?: string; // Item description. This appears as the secondary item text in the UI.
    icon?: { url?: string, svg?: string }; // Item icon. This appears as the icon in the UI.
    link?: string; // Item link. You can use this to open a link when the item is clicked. Check the event listener below for more details.
}

let customList = [
    {
        id: '1',
        name: 'File 1',
        description: 'File Description 1',
        icon: {url: 'https://cdn-icons-png.flaticon.com/512/9496/9496432.png'}
    },
    {
        id: '2',
        name: 'File 2',
        description: 'File Description 2',
        icon: {url: 'https://cdn-icons-png.flaticon.com/512/11471/11471469.png'}
    },
    {
        id: '3',
        name: 'File 3',
        description: 'File Description 3',
        icon: {url: 'https://cdn-icons-png.flaticon.com/512/2656/2656402.png'}
    }
];

const customListDataOnComment = {
	hotkey: 'UNIQUE_HOTKEY', // only single charater is allowed. eg: '#'
	type: 'custom',
    data: customList, // your customList data here
};

Using Props:

<VeltComments customListDataOnComment={customListDataOnComment} />

API Method:

const commentElement = useCommentUtils();		
commentElement.createCustomListDataOnComment(customListDataOnComment);
2

Listen to click event data on chips

  • After the comment is saved, the item will be rendered as a chip on the comment content.
  • When the user clicks on it, you will get an event callback with the data of the clicked chip (AutocompleteItem).
This event will also be triggered when the user clicks on the contact chips added via the @mentions feature.
let autocompleteChipData = useAutocompleteChipClick();

Was this page helpful?

@MentionsAdd Custom Metadata