BloX Code Samples
Last updated: June 10, 2026
| Tier | Deployment | Availability |
|
|
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
{
"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": "<div id='navbar'> <button class='openbtn' onclick='openNav()'><b><h4>☰</h4></b></button></div>"
},
{
"type": "TextBlock",
"text": "<div id='mySidebar' class='sidebar'> <a href='javascript:void(0)' class='closebtn' onclick='closeNav()'>×</a> <a href='#home'><img alt='sisense' src='https://i.imgur.com/2DVXGyc.png' width='50%' height='20%' style='width:170px;height:auto'></a> <a href='http://10.50.57.72:30845/app/data?embed=true' target='_blank'>Data Models</a> <a href='http://10.50.57.72:30845/app/main#/home?embed=true' target='_blank'>Analytics</a> <a href='http://10.50.57.72:30845/app/main#/pulse?embed=true' target='_blank'>Pulse</a> <a href='http://10.50.57.72:30845/app/settings#/users?embed=true' target='_blank'>Users</a> <a href='http://10.50.57.72:30845/app/settings#/add-ons?embed=true' target='_blank'>Add-Ons</a> <a href='http://10.50.57.72:30845/app/settings#/rest?embed=true' target='_blank'>Rest API</a> <a href='http://10.50.57.72:30845/app/explore/#?embed=true' target='_blank'>File Management</a> </div>"
},
{
"type": "TextBlock",
"text": "<script> function openNav() { document.getElementById('mySidebar').style.width = '250px'; document.getElementById('main').style.marginLeft = '250px'; } function closeNav() { document.getElementById('mySidebar').style.width = '0'; document.getElementById('main').style.marginLeft= '0'; } </script>"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "<div class='navbar'> <a href='#home'><img alt='bottomline' src='https://i.imgur.com/2DVXGyc.png' width='15%' height='20%' style='width:110px;height:auto'></a> <a href='#'>Home</a> <a href='#'>Alerts</a> <div class='subnav'> <button class='subnavbtn'>Reports ▼<i class='fa fa-caret-down'></i></button> <div class='subnav-content'> <a href='#company'>Reports Management</a> <a href='#team'>Dashboard Management</a> <a href='#careers'>Machine Learning Reports</a> </div> </div> <a href='#contact'>Reference Data</a> <a href='#contact'>Analytics Data</a> <div class='subnav'> <button class='subnavbtn'>Services <i class='fa fa-caret-down'></i></button> <div class='subnav-content'> <a href='#bring'>Bring</a> <a href='#deliver'>Deliver</a> <a href='#package'>Package</a> <a href='#express'>Express</a> </div> </div> <div class='subnav'> <button class='subnavbtn'>More ▼<i class='fa fa-caret-down'></i></button> <div class='subnav-content'> <a href='#link1'>Training</a> <a href='#link2'>Playground</a> <a href='#link3'>Guide</a></div> </div> </div>"
}
]
}
]
}
]
}
],
"actions": []
}Auto Incrementing List
Copy
{
"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
{
"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
{
"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
{
"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: <b>{panel:Start Date}</b>",
"size": "small",
"style": {
"background-color": "#f4f4f4",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Due Date: <b>{panel:Due Date}</b>",
"size": "small",
"style": {
"background-color": "f4f4f4",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Job Progress: <b>{panel:country}%</b>",
"size": "small",
"style": {
"background-color": "#f4f4f4",
"padding": "15px"
}
},
{
"type": "TextBlock",
"text": "Job Status: <b>Completed</b>",
"size": "small",
"style": {
"background-color": "f4f4f4",
"padding": "15px"
}
}
]
}
]
}
],
"actions": []
}Set of Cards - Display Card Upon Mouse-Over
Copy
{
"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": []
}