AdapTable Version:

Framework:

Configuring Comments

Summary

Developers can configure which Cells in the Grid are able to receive Comments
And like everything in AdapTable, Comments can be easily themed using CSS Variables

Comments are not available or enabled by default in AdapTable.

Instead, they need to be explicitly enabled and set up by developers at design time.

Note

Comments uses a very similar loading and persisting pattern as Team Sharing

Developer Guide

Setting up Comments

There are 3 steps you must follow in order for Comments to be available to end users:

const adaptableOptions: AdaptableOptions = {
  entitlementOptions: {
    defaultAccessLevel: 'Hidden',
    moduleEntitlements: [
      {
        adaptableModule: 'Comment',
        accessLevel: 'Full',
      },
    ],
  },
};

Make sure Comment Entitlement is not Hidden

Check the Comment Entitlement is one of these Access Levels:

Full (preferable)
ReadOnly

Alternatively, check the defaultAccessLevel property is set to Full

Caution

Comments will not appear if the defaultAccessLevel property is set to Hidden and the Comments Entitlement is not explicitly overridden

const adaptableOptions: AdaptableOptions = {
  commentOptions: {
    loadCommentThreads: async (context: CommentLoadContext) => {
      commentsService.subscribeToComments(comments => {
        context.adaptableApi.commentApi.setComments(comments);
      });
      return commentsService.getComments();
    },
  },
};

Provide loadCommentThreads property in Comment Options

Supply async loadCommentThreads property in Comment Options.

This retrieves any saved Comment Threads from the remote storage location.

const adaptableOptions: AdaptableOptions = {
  commentOptions: {
    persistCommentThreads: async (commentThreads: CommentThread[]) => {
      commentsService.setComments(commentThreads);
    },
  },
};

Provide persistCommentThreads property in Comment Options

Supply async persistCommentThreads property in Comment Options.

This perists Comment Threads to the remote storage location.

Commentable Cells

By default all cells in AG Grid - even readonly ones - can receive a Comment.

But developers are able to use the isCellCommentable property in Comment Options to specify on a cell by cell basis whether or not a Comment can be added.

Configuring Commentable Cells

Fork Fork

This example contains an implementation for the isCellCommentable property in Comment Options which prevents Comments from being added to Cells:
- in the Language Column
- in Rows where the value in the License Column is "Other"

Expand to see the function implementation

commentOptions: {
  isCellCommentable: (context: CommentableCellContext) => {
    // Dont allow Comments on the Language Column or Rows where License is 'Other'
    if (
      context.gridCell.column.columnId === 'language' ||
      context.gridCell.rowNode.data['license'] === 'Other'
    ) {
      return false;
    }
    return true;
  };
}

import {
  CommentableCellContext,
  CommentLoadContext,
  CommentThread,
  CustomContextMenuContext,
  AdaptableOptions,
  AdaptableSystemContextMenuItem,
  AdaptableContextMenuItemName,
} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';

const COMMENTS_PERSISTENCE_KEY = 'docs-commentable-cell-comments';

export class CommentsService {
  channel = new BroadcastChannel('comments');

  constructor() {}

  subscribeToComments(callback: (comments: CommentThread[]) => void) {
    console.log('subscribing to comments');
    this.channel.onmessage = event => {
      callback(event.data);
    };
  }

  setComments(comments: CommentThread[]) {
    console.log('sending comments', comments);
    localStorage.setItem(COMMENTS_PERSISTENCE_KEY, JSON.stringify(comments));
    this.channel.postMessage(comments);
  }

  getComments(): CommentThread[] {
    console.log('getting comments');
    const commentsString = localStorage.getItem(COMMENTS_PERSISTENCE_KEY);
    return commentsString ? JSON.parse(commentsString) : [];
  }
}

const commentsService = new CommentsService();

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Commentable Cells',
  userName: 'Demo User',
  contextMenuOptions: {
    customContextMenu: (customMenuContext: CustomContextMenuContext) => {
      return customMenuContext.defaultAdaptableMenuStructure
        .filter(
          (
            item
          ): item is AdaptableSystemContextMenuItem<AdaptableContextMenuItemName> =>
            item !== '-'
        )
        .filter(
          item => item.category === 'Comment' || item.category === 'Note'
        );
    },
  },
  commentOptions: {
    loadCommentThreads: async (commentLoadContext: CommentLoadContext) => {
      commentsService.subscribeToComments(comments => {
        commentLoadContext.adaptableApi.commentApi.setComments(comments);
      });
      return commentsService.getComments();
    },
    persistCommentThreads: async (commentThreads: CommentThread[]) => {
      commentsService.setComments(commentThreads);
    },
    isCellCommentable: (context: CommentableCellContext) => {
      // Dont allow Comments on the Language Column or Rows where License is 'Other'
      if (
        context.gridCell.column.columnId === 'language' ||
        context.gridCell.rowNode.data['license'] === 'Other'
      ) {
        return false;
      }
      return true;
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        tooltip: 'Reset state',
        icon: {
          name: 'refresh',
        },
        buttonStyle: {
          tone: 'error',
        },
        onClick: (_, context) => {
          localStorage.removeItem(COMMENTS_PERSISTENCE_KEY);
          context.adaptableApi.stateApi.reloadInitialState();
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Comment'],
    },
    Theme: {CurrentTheme: 'dark'},

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Theming Comments

By default the triangle in a cell to denote a Comment is painted blue.

Note

Technically AdapTable uses the value of the --ab-color-info variable, which itself can be overridden

However, like everything theming-related in AdapTable, this can be overridden using CSS Variables.

All that is required is to provide a different value for the --ab-CellComment-triangle-color CSS variable.

Comments CSS

Fork Fork

In this demo we have overridden the --ab-CellComment-triangle-color CSS Variable so that the Notes triangle appears as yellow

Expand to see the CSS provided

import {
  AdaptableContextMenuItemName,
  AdaptableSystemContextMenuItem,
  CommentLoadContext,
  CommentThread,
  CustomContextMenuContext,
} from '@adaptabletools/adaptable';
import {AdaptableOptions} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';

const COMMENTS_PERSISTENCE_KEY = 'adaptable-css-comments';

export class CommentsService {
  channel = new BroadcastChannel('comments');

  constructor() {}

  subscribeToComments(callback: (comments: CommentThread[]) => void) {
    console.log('subscribing to comments');
    this.channel.onmessage = event => {
      callback(event.data);
    };
  }

  setComments(comments: CommentThread[]) {
    console.log('sending comments', comments);
    localStorage.setItem(COMMENTS_PERSISTENCE_KEY, JSON.stringify(comments));
    this.channel.postMessage(comments);
  }

  getComments(): CommentThread[] {
    console.log('getting comments');
    const commentsString = localStorage.getItem(COMMENTS_PERSISTENCE_KEY);
    return commentsString ? JSON.parse(commentsString) : [];
  }
}
const commentsService = new CommentsService();

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Comments CSS',
  userName: 'Demo User',
  contextMenuOptions: {
    customContextMenu: (customMenuContext: CustomContextMenuContext) => {
      return customMenuContext.defaultAdaptableMenuStructure
        .filter(
          (
            item
          ): item is AdaptableSystemContextMenuItem<AdaptableContextMenuItemName> =>
            item !== '-'
        )
        .filter(
          item => item.category === 'Comment' || item.category === 'Note'
        );
    },
  },
  commentOptions: {
    loadCommentThreads: async (commentLoadContext: CommentLoadContext) => {
      commentsService.subscribeToComments(comments => {
        commentLoadContext.adaptableApi.commentApi.setComments(comments);
      });
      return commentsService.getComments();
    },
    persistCommentThreads: async (commentThreads: CommentThread[]) => {
      commentsService.setComments(commentThreads);
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        tooltip: 'Reset state',
        icon: {
          name: 'refresh',
        },
        buttonStyle: {
          tone: 'error',
        },
        onClick: (_, context) => {
          localStorage.removeItem(COMMENTS_PERSISTENCE_KEY);
          context.adaptableApi.stateApi.reloadInitialState();
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Comment'],
    },
    Theme: {CurrentTheme: 'dark'},

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Date Format

AdapTable provides a property to configure how the timestamp of a Comment is displayed.

Note

This is used in both the Comment itself and the Commments screen that shows all current Comments

The property is available in Comment Options and returns a string (optionally via a function).

dateFormat

Default: dd-MM-yyyy HH:mm:ss

String

Date Format to use for timestamp in Comments

By default AdapTable will format the timestamp using 'dd-MM-yyyy HH:mm:ss'.

Use this property to set an alternative Date Format, including via a function if preferred.

// Provide custom Date Format
  commentOptions:{
    dateFormat: 'MMM do yyyy',
};

Comments Date Format

Fork Fork

In this demo we provide a custom Date Format of 'MMM do yyyy' which is used when displaying the Timestamp in Comments

Expand to see the Comment Option provided

import {
  CommentableCellContext,
  CommentLoadContext,
  CommentThread,
  CustomContextMenuContext,
  AdaptableOptions,
  AdaptableSystemContextMenuItem,
  AdaptableContextMenuItemName,
} from '@adaptabletools/adaptable';

import {WebFramework} from './rowData';

const COMMENTS_PERSISTENCE_KEY = 'docs-commentable-cell-comments';

export class CommentsService {
  channel = new BroadcastChannel('comments');

  constructor() {}

  subscribeToComments(callback: (comments: CommentThread[]) => void) {
    console.log('subscribing to comments');
    this.channel.onmessage = event => {
      callback(event.data);
    };
  }

  setComments(comments: CommentThread[]) {
    console.log('sending comments', comments);
    localStorage.setItem(COMMENTS_PERSISTENCE_KEY, JSON.stringify(comments));
    this.channel.postMessage(comments);
  }

  getComments(): CommentThread[] {
    console.log('getting comments');
    const commentsString = localStorage.getItem(COMMENTS_PERSISTENCE_KEY);
    return commentsString ? JSON.parse(commentsString) : [];
  }
}

const commentsService = new CommentsService();

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Comments Date Format',
  userName: 'Demo User',
  contextMenuOptions: {
    customContextMenu: (customMenuContext: CustomContextMenuContext) => {
      return customMenuContext.defaultAdaptableMenuStructure
        .filter(
          (
            item
          ): item is AdaptableSystemContextMenuItem<AdaptableContextMenuItemName> =>
            item !== '-'
        )
        .filter(
          item => item.category === 'Comment' || item.category === 'Note'
        );
    },
  },
  commentOptions: {
    loadCommentThreads: async (commentLoadContext: CommentLoadContext) => {
      commentsService.subscribeToComments(comments => {
        commentLoadContext.adaptableApi.commentApi.setComments(comments);
      });
      return commentsService.getComments();
    },
    persistCommentThreads: async (commentThreads: CommentThread[]) => {
      commentsService.setComments(commentThreads);
    },
    dateFormat: 'MMM do yyyy',
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        tooltip: 'Reset state',
        icon: {
          name: 'refresh',
        },
        buttonStyle: {
          tone: 'error',
        },
        onClick: (_, context) => {
          localStorage.removeItem(COMMENTS_PERSISTENCE_KEY);
          context.adaptableApi.stateApi.reloadInitialState();
        },
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['Comment'],
    },
    Theme: {CurrentTheme: 'dark'},

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'github_stars',
            'license',
            'github_watchers',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'description',
            'open_pr_count',
            'closed_pr_count',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousComments NextTechnical Reference

Framework: