Rendering a Barcode Using BloX with External library [Linux]
Summary: Thalita Santos provides a detailed guide on how to display an alphanumeric string as a barcode in a Sisense dashboard using a BloX widget. Since there is no native barcode widget in Sisense, the guide details how to dynamically load the open-source JsBarcode library to render the barcode. The process involves setting up a BloX widget, configuring the data panel, and using JsBarcode to draw the barcode. Key considerations include internet access requirements for the CDN and customization options for barcode appearance. The post includes important notes about possible limitations and recommends testing the solution in different Sisense environments before deployment.
Introduction
This article demonstrates how to display an alphanumeric string from a data panel as a rendered barcode inside a Sisense dashboard using a BloX widget. Sisense has no native barcode widget and there is no existing marketplace plugin specifically for this, so the solution dynamically loads the open-source JsBarcode library to handle the rendering. You can use any external or custom library/API of your trust instead. The solution is tested on Sisense 2026.3.2 and works for both cloud and on-premises deployments.
Step-by-Step Guide
1. Add a BloX widget
Open an existing dashboard or create a new one. Click + Add Widget and select BloX from the widget type list, then open the BloX editor.
2. Add your barcode field to the data panel
If you are loading the barcode value dynamically from your data source, drag your alphanumeric barcode field into the Items or Values data panel. You will reference this field as {panel:barcode_value} in the template below.
3. Paste the full BloX JSON
Replace the contents of the BloX Editor tab with the following JSON:
{
"style": ".barcode-render { max-width: 100%; }",
"script": "function renderBarcodes() { var svgElements = document.querySelectorAll('svg.barcode-render'); if (!svgElements.length) return; if (typeof JsBarcode === 'undefined') { var s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/JsBarcode.all.min.js'; s.onload = function() { svgElements.forEach(function(svgEl) { var val = svgEl.getAttribute('data-value'); if (val) { JsBarcode(svgEl, val, { format: 'CODE128', lineColor: '#000000', width: 2, height: 80, displayValue: true }); } }); }; document.head.appendChild(s); } else { svgElements.forEach(function(svgEl) { var val = svgEl.getAttribute('data-value'); if (val) { JsBarcode(svgEl, val, { format: 'CODE128', lineColor: '#000000', width: 2, height: 80, displayValue: true }); } }); } } renderBarcodes();",
"title": "Barcode",
"showCarousel": false,
"body": [
{
"type": "Container",
"style": {
"display": "flex",
"justify-content": "center",
"align-items": "center",
"padding": "10px"
},
"items": [
{
"type": "TextBlock",
"text": "<svg class='barcode-render' data-value='{panel:barcode_value}'></svg>"
}
]
}
],
"actions": []
}4. Point the template at your field
Replace barcode_value with the exact name of the field you added to the BloX Items panel. If you are not loading values dynamically, replace {panel:barcode_value} with your literal barcode string.
5. Save and test
Click Save in the BloX editor. The widget renders the <svg> element, loads JsBarcode from the CDN if it is not already present, and draws the barcode from your field value.
How it works
TextBlock with HTML in text: BloX renders the TextBlock
textvalue as HTML, so the<svg>tag is injected into the DOM. Thedata-valueattribute carries the actual barcode string from your data panel using the{panel:barcode_value}notation.script field: The script runs after the BloX renders. It finds the
<svg>element, reads the barcode value from itsdata-valueattribute, dynamically loads JsBarcode from the CDN if it is not already loaded, and callsJsBarcode()to render the barcode into the SVG.data-value pattern: Because
{panel:barcode_value}is resolved by BloX before the DOM renders, the value is stored in adata-valueattribute on the SVG element, which the script then reads. This is the correct way to pass a panel value into JavaScript logic within thescriptfield.showCarousel: false: Set to
falsefor a single barcode display. If you need to display one barcode per data row, set this totrue.
Important notes
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 thes.srcpath in the script accordingly. If you prefer, you can use any external or custom library/API of your trust to build the barcode instead of JsBarcode.Barcode format: The template uses the
CODE128format. JsBarcode supports other formats (such as EAN, UPC, and CODE39); change theformatvalue in the script to match your requirement.Appearance: The
width,height,lineColor, anddisplayValueoptions in the script control the barcode's size, color, and whether the human-readable value is shown beneath it. Adjust these to suit your dashboard.
Conclusion
With a single BloX widget you can turn any alphanumeric data field into a scannable barcode. The same dynamic-library-loading pattern - injecting an SVG placeholder and passing a panel value through a data-value attribute - can be reused whenever you need to render output from an external JavaScript library inside a Sisense dashboard.
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.
