How to add temporary per-cell highlighting and comments in Sisense Pivot Widgets [Linux]

Step-by-Step Guide

1. What does this solution do?

This approach adds two main features to Table or Pivot widgets:

• Highlighting: Click any cell to toggle a background color highlight (persists for your browser/user profile).
• Commenting: Double-click any cell to add or edit a comment. Comments are stored per-cell and appear as tooltips on hover for easy review.

2. Where do the highlights and comments live?

Both highlights and comments are safely stored in your browser’s local storage. They remain until your local storage data is cleaned either manually or automatically. Feel free to change this according to your needs.

3. How to implement

1. Open your dashboard, select the widget (Pivot) you wish to enhance, and go to the widget script.

• Select the widget.
• Click the menu (three dots) and choose "Edit Script."

2. Paste this JavaScript (Widget Script) code in:

/*
One click to highlight the cell
Two clicks to add/edit comment
*/

widget.on('ready', function(w, args) {
  // Helper to build a unique cell based on contents (cell value makes it unique)
  function getCellContent(td) {
    var $td = $(td);
    var $tr = $td.closest('tr');
    var colIdx = $td.index();

    var dimCols = widget.queryResult.headers ? widget.queryResult.headers.length : 1;
    var dimensions = [];
    $tr.find('td').each(function(i, cell) {
      if(i < dimCols) {
        dimensions.push($(cell).text().trim());
      }
    });

    var colHeader = '';
    var headerRows = $('table thead tr');
    if (headerRows.length > 0) {
      var headerCells = headerRows.last().children('th,td');
      colHeader = $(headerCells).eq(colIdx).text().trim();
    }

    var cellVal = $td.text().trim();
    return JSON.stringify({dims: dimensions, col: colHeader, val: cellVal});
  }

  // Local Storage Handling
  var highlights = JSON.parse(localStorage.getItem('sisense_table_highlights') || '{}');
  var comments = JSON.parse(localStorage.getItem('sisense_table_comments') || '{}');

  // Initial render of highlights and tooltips
  $('td').each(function() {
    var cellContent = getCellContent(this);
    if (highlights[cellContent]) {
      $(this).css('background', '#94F5F0');
    } else {
      $(this).css('background', '');
    }
    // Set browser tooltip for comments
    if (comments[cellContent] && comments[cellContent].length > 0) {
      $(this).attr('title', comments[cellContent]);
    } else {
      $(this).removeAttr('title');
    }
  });

  // Cell click: highlight/unhighlight
  $('td').off('click.table-highlight').on('click.table-highlight', function(e) {
    var cellContent = getCellContent(this);
    highlights[cellContent] = !highlights[cellContent];
    localStorage.setItem('sisense_table_highlights', JSON.stringify(highlights));
    $(this).css('background', highlights[cellContent] ? '#94F5F0' : '');
  });

  // Cell double-click: open modal for comment add/edit
  $('td').off('dblclick.table-comment').on('dblclick.table-comment', function(e) {
    var cellContent = getCellContent(this);
    var currentComment = comments[cellContent] || '';
    showModal(cellContent, currentComment, $(this));
  });

  // Modal for add/edit comment
  function showModal(cellContent, currentComment, $td) {
    $('body').find('.sisense-table-modal').remove();

    var bg = '#fff';
    var text = '#3a4356';
    var primary = '#94F5F0';
    var secondary = '#f5f5f5';

    var $modal = $(`
      <div class="sisense-table-modal" style="
        position:fixed;top:0;left:0;right:0;bottom:0;
        background:rgba(0,0,0,0.18);z-index:9999;display:flex;justify-content:center;align-items:center;">
        <div style="
          background:${bg};
          color:${text};
          padding:24px;
          border-radius:8px;
          min-width:340px;
          box-shadow:0 2px 18px rgba(0,0,0,0.18);">
          <div style="font-size:18px;margin-bottom:12px;">Add/Edit Comment</div>
          <textarea id="comment-textarea" style="
            width:100%;height:80px;font-size:14px;
            padding:8px;border:1px solid #e0e0e0;border-radius:4px;
            margin-bottom:18px;background:${secondary};color:${text};
          ">${currentComment}</textarea>
          <div style="text-align:right;">
            <button id="sisense-comment-cancel" style="
              background:${secondary};color:${text};border:none;
              padding:8px 18px;margin-right:4px;border-radius:3px;
              font-size:14px;cursor:pointer;">Cancel</button>
            <button id="sisense-comment-save" style="
              background:${primary};color:${text};border:none;
              padding:8px 18px;border-radius:3px;font-size:14px;
              font-weight:bold;cursor:pointer;">Save</button>
          </div>
        </div>
      </div>
    `);
    $('body').append($modal);

    $('#sisense-comment-cancel').on('click', function() {
      $modal.remove();
    });
    $('#sisense-comment-save').on('click', function() {
      var newComment = $('#comment-textarea').val();
      comments[cellContent] = newComment;
      localStorage.setItem('sisense_table_comments', JSON.stringify(comments));
      // Update the cell tooltip immediately!
      if (newComment.length > 0) {
        $td.attr('title', newComment);
      } else {
        $td.removeAttr('title');
      }
      $modal.remove();
    });
  }
});

Screenshot: Example of a cell being highlighted and the modal for comment entry.
Description: Shows a highlighted cell and the add/edit comment modal in action on a Table widget.

3. Now you can highlight cells by clicking on them, add/edit comments by double clicking, and easily visualize the comments by hovering over them.

 Usage tips

• Highlighting and comments are per browser, user, and cell, meaning other users will not be able to see what you do (both persist until local storage is cleared).
• Hover over a cell to see its comment.
• Cells with no comments/tooltips show the default content.
• You may style the modal and highlight color for your organization’s palette.
• Feel free to use this script as a foundation and adapt it to create a customized solution tailored to your organization’s needs. For example, you could extend the functionality by integrating additional code that synchronizes highlights and comments with a database, ensuring they persist across different users and devices instead of remaining temporary in each browser.

Conclusion

This solution enables deeper interactivity by allowing any dashboard user to quickly annotate and highlight data cells temporarily (only visible for them and available until Local Storage is cleaned) in Pivot widgets within Sisense, without leaving the dashboard context. It requires no backend integration and works across all standard dashboard deployments.

Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.