Rendering Barcodes in a Pivot Column Using Pivot 2.0 API [Linux]

Summary: Thalita Santos provides a detailed guide on how to integrate barcodes into a Sisense Pivot column using a widget script and the JsBarcode library. The solution involves modifying the widget script editor to transform each cell's value in a specified column into a barcode image, using the transformPivot API. The script ensures the JsBarcode library is loaded and transforms cells with caching for efficiency. It focuses on the CODE128 barcode format and highlights steps for both cloud and on-premises Sisense deployments. Important considerations include internet access for loading the library and testing the solution in specific environments.

Introduction

This article demonstrates how to replace the text values in a Sisense Pivot column with rendered barcodes using a widget script. Sisense has no native barcode widget currently, so this solution dynamically loads the open-source JsBarcode library and uses the Pivot transformPivot API to render each targeted cell's value as a fixed-size barcode image. The solution is tested on Sisense 2026.3.2 and works for both cloud and on-premises deployments.

Step-by-Step Guide

1. Open the widget script editor

Open the dashboard containing your Pivot widget. Enter edit mode, open the widget menu, and select Edit Script to open the widget script editor.

3. Paste the widget script

Paste the following into the widget script editor:

// The exact title of the Value column that should show barcodes (e.g. "Total Cost").
var TARGET_VALUE_TITLE = 'Total Cost';

// Barcode drawing options (passed to JsBarcode).
var BARCODE_OPTS = {
  format: 'CODE128',   // alphanumeric strings
  lineColor: '#000000',
  width: 1.5,          // px per bar module
  height: 40,          // px, bar height
  margin: 6,
  displayValue: true   // set false to hide the value text under the barcode
};

// Fixed rendered box so every cell reserves identical space (keeps rows in sync).
var BOX_WIDTH = 220;  // px
var BOX_HEIGHT = 62;  // px (bars + value text label)

var JSBARCODE_SRC = 'https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js';

// Cache generated data-URIs so re-renders don't recompute the same barcode.
var barcodeCache = {};

// Function to build a fixed-size <img> tag containing the barcode as a base64 PNG
function buildBarcodeImg(value) {
  var cached = barcodeCache[value];
  if (!cached) {
    var canvas = document.createElement('canvas');
    window.JsBarcode(canvas, value, BARCODE_OPTS);
    cached = canvas.toDataURL('image/png');
    barcodeCache[value] = cached;
  }
  // Explicit width/height => pivot measures correct row height on first pass.
  return '<img src="' + cached + '" ' +
         'width="' + BOX_WIDTH + '" height="' + BOX_HEIGHT + '" ' +
         'alt="' + value + '" ' +
         'style="display:block;width:' + BOX_WIDTH + 'px;height:' + BOX_HEIGHT + 'px;' +
         'object-fit:contain;" />';
}

// Function to register the cell transform (barcode is part of the cell content)
function registerBarcodeTransform() {
  var target = {
    type: ['value'],
    values: [{ title: TARGET_VALUE_TITLE }]
  };

  widget.transformPivot(target, function (metadata, cell) {
    if (cell.value === undefined || cell.value === null || cell.value === '') return;
    var raw = String(cell.value).trim();
    if (!raw) return;
    try {
      cell.contentType = 'html';
      cell.content = buildBarcodeImg(raw);
    } catch (e) {
      // Invalid value for the chosen format: leave the original text in place.
    }
  }, { pluginKey: 'barcodeColumn' });

  widget.refresh(); // ensure the transform is applied to the current render
}

// Ensure JsBarcode is loaded, THEN register the transform
widget.on('initialized', function () {
  if (window.JsBarcode) {
    registerBarcodeTransform();
    return;
  }
  var existing = document.getElementById('jsbarcode-lib');
  if (existing) {
    existing.addEventListener('load', registerBarcodeTransform);
    return;
  }
  var script = document.createElement('script');
  script.id = 'jsbarcode-lib';
  script.src = JSBARCODE_SRC;
  script.onload = registerBarcodeTransform;
  document.head.appendChild(script);
});

4. Set your target column title

Note the exact title of the Value column that should display barcodes (for example, "Total Cost"). You will set this in the TARGET_VALUE_TITLE variable in the script - the transform targets the column by its title, so it must match exactly.

5. Save and refresh

Save the script and refresh the widget. Each cell in the targeted column is rendered as a barcode image.

How it works

Fires on initialized: The script runs on the initialized event. It first ensures JsBarcode is available - using it directly if already loaded, attaching to an in-flight load if the library <script> tag already exists, or injecting the library from the CDN otherwise - and only then registers the transform.
transformPivot targets by title: The transform targets the Value column matching TARGET_VALUE_TITLE. For each matching cell it sets cell.contentType = 'html' and replaces cell.content with a barcode <img>, so the barcode becomes part of the cell content that the pivot renders and measures.
Barcode as a cached base64 PNG: Each value is drawn to an off-screen <canvas> with JsBarcode and converted to a PNG data-URI. Results are cached in barcodeCache, so repeated values and re-renders reuse the same image instead of recomputing it.
Fixed box for row alignment: The image is emitted at an explicit BOX_WIDTH x BOX_HEIGHT. Giving the pivot fixed dimensions lets it measure the correct row height on the first pass and keeps every row aligned.
Graceful fallback: A try/catch handles any value that is invalid for the chosen barcode format by leaving the original cell text in place.
CODE128 format: CODE128 is used because it natively supports full alphanumeric strings. You can change this to EAN13, UPC, QR, and so on depending on your needs.

Important notes

Barcode format and appearance: The format, width, height, margin, lineColor, and displayValue options in BARCODE_OPTS, together with BOX_WIDTH and BOX_HEIGHT, control the barcode type, size, spacing, color, whether the human-readable value appears beneath it, and the reserved cell box. Set displayValue to false to hide the text.
Internet access required for the CDN: This solution requires internet access to load JsBarcode from the CDN (cdn.jsdelivr.net). If your Sisense instance is in an air-gapped or restricted network environment, you will need to host the JsBarcode library file locally (for example, inside the Sisense plugins folder) and update the JSBARCODE_SRC path accordingly. If you prefer, you can use any external or custom library/API of your trust to build the barcode instead of JsBarcode.

Conclusion

With a single widget script you can turn a plain value column into a set of scannable, per-row barcodes without a native widget or a marketplace plugin. The same transformPivot pattern - loading an external library and rewriting cell content as HTML - can be reused to inject any custom rendering into a pivot column where native formatting falls short.

References / Related content

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.

Thalita Santos

Posted 2 weeks ago

0 comments