# BloX Code Samples
> Sample code for you to use to help create your BloX widgets.
*Source: https://docs.sisense.com/main/SisenseLinux/blox-sample-code.htm*
---
Last updated: June 10, 2026
| | | |
| --- | --- | --- |
| [Tier](https://www.sisense.com/pricing/#pricing) | [Deployment](https://docs.sisense.com/main/SisenseLinux/introduction-to-sisense-cloud-managed-services.md#ComparisonofManagedCloudandSelfHosted) | [Availability](https://docs.sisense.com/main/SisenseLinux/l2026-2-release-notes.md#ClassicMode) |
| Enterprise | Cloud On-Prem | Classic Mode Only |
The following are some examples of BloX code to help you create your BloX widgets. Screenshots are also included, so that you can see the widget generated by the code.
[Branded Side Menu and Main Menu](#)
[Copy](javascript:void(0);)
```
{
"style": "widget[type='BloX']{height:85px !Important} .sidebar { height: 100% ; width: 0; position: fixed !important; z-index: 50 !important; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidebar a { padding: 8px 8px 8px 32px ; text-decoration: none; font-size: 25px; color: #F7C506 ; display: block; transition: 0.3s ; } .sidebar a:hover { color: #f1f1f1 ; } .sidebar .closebtn { position: absolute ; top: 0; right: 25px ; font-size: 36px ; margin-left: 50px ; } .openbtn { font-size: 150px; cursor: pointer; background-color: #111; color: white; padding: 20px 20px; border: none;} .openbtn:hover { background-color: #444; } #main { transition: margin-left .5s !Important; padding: 16px !Important; } /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ @media screen and (max-height: 450px) { .sidebar {padding-top: 15px !Important;} .sidebar a {font-size: 18px;} } .navbar { overflow: hidden; background-color: #004D99; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .subnav { float: left; overflow: hidden; } .subnav .subnavbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .subnav:hover .subnavbtn { background-color: #0e75c9; } .subnav-content { display: none; position: absolute; left: 0; background-color: #eef6f8; width: 100%;} .subnav-content a { float: center; color: white; text-decoration: none; } .subnav-content a:hover { background-color: #eef6f8; color: black; } .subnav:hover .subnav-content { display: block; }",
"script": "",
"title": "",
"titleStyle": [
{
"display": "none"
}
],
"showCarousel": false,
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {},
"items": [
{
"type": "TextBlock",
"text": "
"
},
{
"type": "TextBlock",
"text": ""
},
{
"type": "TextBlock",
"text": ""
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": ""
}
]
}
]
}
]
}
],
"actions": []
}
```
[Auto Incrementing List](#)
[Copy](javascript:void(0);)
```
{
"style": ".counter{counter-reset: counter-name;} .section::before{position:absolute; left: 1em;background:rgba(255, 255, 255, 0.24); width:2em; height: 2em; display:flex; justify-content:center; align-items:center; border-radius:50%; border:1px solid white; box-sizing:border-box; counter-increment:counter-name; content:counter(counter-name);} .section{position:relative}",
"script": "$('.getParent').parent().parent().parent().parent().eq(0).attr('class', 'counter')",
"title": "",
"showCarousel": false,
"body": [
{
"type": "Container",
"class": "getParent",
"style": {
"padding": "1em"
},
"items": [
{
"type": "TextBlock",
"text": "{panel:category}",
"class": "section",
"style": {
"display": "flex",
"align-items": "center",
"padding-left": "5em",
"overflow": "visible"
}
}
]
}
],
"actions": []
}
```
[Add Logo to PDF Export](#)
[Copy](javascript:void(0);)
```
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"backgroundColor": "#3adcca",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"id": "",
"class": "logo",
"url": "/plugins/BloX/blox-images/ConditionalCard/green_boto_bg.png",
"altText": "image descriptions",
"size": "medium",
"style": {
"flex-grow": 1,
"align-self": "center"
}
}
],
"style": {
"flex-grow": 0,
"align-items": "center",
"flex-basis": "20%",
"justify-content": "center"
}
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Logo on PDF export",
"style": {
"text-align": "center",
"font-weight": "bold",
"font-size": "24px",
"margin": "5px"
}
},
{
"type": "TextBlock",
"text": "This Dashboard displays a logo on PDF export only",
"style": {
"text-align": "center",
"font-weight": "default",
"font-size": "15px",
"margin": "5px"
}
}
],
"style": {
"flex-grow": 2
}
},
{
"type": "Column",
"items": [],
"style": {
"flex-grow": 0,
"flex-basis": "20%",
"flex-direction": "row",
"align-items": "stretch",
"justify-content": "center"
}
}
]
}
]
}
],
"actions": []
}
```
[Show Filtered Members](#)
**Note:**
To show more than 10 members, you must disable lazy loading.
Unfiltered Display:
Filtered Display:
[Copy](javascript:void(0);)
```
{
"style": ".blox-slides{display:inline-block; } .blox-container{display:flex; flex-flow: row wrap; justify-content:center; align-items: center; align-content:center} .blox-slides:first-child .blox-pivot-title{display:block; !important;} ",
"script": "$('.blox-slides').parent().eq(0).attr('class', 'blox-container')",
"title": "",
"disableLazyLoading": true,
"titleStyle": [
{
"display": "show"
}
],
"showCarousel": false,
"body": [
{
"type": "Container",
"style": {},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "{panel:Condition}",
"style": {
"margin-top": "20px",
"margin-bottom": "20px",
"border-right": "1px solid #999",
"border-left": "1px solid #999",
"padding-right": "20px",
"padding-left": "20px"
}
}
]
}
],
"actions": []
}
```
[Display Cards/Tiles](#)
[Copy](javascript:void(0);)
```
{
"style": ".blox-slides{display:inline-block; transition:all .2s ease-in-out} .blox-slides:hover{transform:scale(1.05)} .blox-container{display:flex; flex-flow: row wrap; justify-content:center; align-items: center; align-content:center}",
"script": "$('.blox-slides').parent().eq(0).attr('class', 'blox-container')",
"title": "",
"titleStyle": [
{
"display": "none"
}
],
"showCarousel": false,
"body": [
{
"type": "Container",
"style": {
"padding": "20px"
},
"items": [
{
"type": "Container",
"backgroundColor": "white",
"horizontalAlignment": "center",
"style": {
"box-shadow": "0px 0px 12px {panel:Case} #F42931",
"border-radius": "5px",
"overflow": "hidden"
},
"items": [
{
"type": "TextBlock",
"text": "Job Name",
"weight": "bold",
"color": "black",
"size": "medium",
"style": {
"background-color": "lightgrey",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Start Date: {panel:Start Date}",
"size": "small",
"style": {
"background-color": "#f4f4f4",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Due Date: {panel:Due Date}",
"size": "small",
"style": {
"background-color": "f4f4f4",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Job Progress: {panel:country}%",
"size": "small",
"style": {
"background-color": "#f4f4f4",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Job Status: Completed",
"size": "small",
"style": {
"background-color": "f4f4f4",
"padding": "15px"
}
}
]
}
]
}
],
"actions": []
}
```
[Set of Cards - Display Card Upon Mouse-Over](#)
[Copy](javascript:void(0);)
```
{
"style": ".blox-container{display:flex; overflow-x:scroll; overflow-y:hidden; padding: 3rem 1rem; background-color:#3d394f; justify-content:center} .blox-slides{display:flex; position:relative; transition:.2s} .blox-slides:hover{transform:translateY(-1rem)} .blox-slides:hover~.blox-slides{transform: translateX(185px)} .blox-slides:not(:first-child){margin-left:-185px}",
"script": "$('.blox-slides').parent().eq(0).attr('class', 'blox-container')",
"title": "",
"showCarousel": false,
"titleStyle": [
{
"display": "none"
}
],
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 15,
"image": "/plugins/BloX/blox-images/StockMarket/arrow-down.png"
},
{
"minRange": 15,
"maxRange": "Infinity",
"image": "/plugins/BloX/blox-images/StockMarket/arrow-up.png"
}
],
"body": [
{
"type": "Container",
"style": {
"flex-direction": "column",
"height": "350px",
"min-width": "250px",
"padding": "1rem",
"border-radius": "16px",
"box-shadow": "-1rem 0 2rem #000",
"background-color": "#17141d"
},
"selectAction": {
"type": "Filters",
"title": "{panel:Category}",
"data": {
"filters": [
{
"panelName": "Category",
"filterJaql": {
"explicit": true,
"members": [
"{value:Category}"
]
}
}
]
}
},
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "3em",
"style": {
"justify-content": "space-between",
"padding-top": "10px",
"background-color": ""
},
"items": [
{
"type": "Image",
"class": "conditional_image",
"url": "/plugins/BloX/blox-images/ConditionalCard/green_boto_bg.png",
"size": "small"
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "{panel: category}",
"color": "white",
"size": "medium",
"weight": "light",
"style": {
"transform": "rotate(-90deg)",
"transform-origin": "center left",
"width": "10em",
"margin-left": "5px",
"background-color": ""
}
}
]
},
{
"type": "Column",
"separator": false,
"style": {
"padding-left": "10px",
"background-color": ""
},
"items": [
{
"type": "TextBlock",
"id": "",
"class": "condition_data",
"text": "{panel:total cost}",
"color": "#24c97f",
"size": "large",
"weight": "bold"
},
{
"type": "TextBlock",
"id": "",
"class": "",
"text": "{panel:condition}",
"color": "#24c97f",
"size": "medium",
"weight": "bold"
},
{
"type": "Image",
"id": "",
"class": "",
"url": "https://unsplash.it/150/150",
"altText": "image descriptions",
"size": "auto",
"horizontalAlignment": "left",
"style": {
"margin-top": "50px",
"border-radius": "50%"
}
}
]
}
]
}
]
}
],
"actions": []
}
```
Data Models Analytics Pulse Users Add-Ons Rest API File Management