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

{ "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": "×

Data Models Analytics Pulse Users Add-Ons Rest API File Management" }, { "type": "TextBlock", "text": " 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'; } " } ] }, { "type": "Column", "items": [ { "type": "TextBlock", "text": "

Home AlertsReports ▼:caret-down:Reports Management Dashboard Management Machine Learning ReportsReference Data Analytics DataServices:caret-:Bring Deliver Package ExpressMore ▼:caret-down:Training Playground Guide" } ] } ] } ] } ], "actions": [] } Auto Incrementing List

{ "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

{ "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:

{ "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

{ "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

{ "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": [] }