BloX Templates
The following are some BloX templates to help you create your BloX widgets. Screenshots are also included, so that you can see the widget generated by the code.
Card
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"backgroundImage": "/resources/blox/images/base/baseball_bg.png",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Employees",
"weight": "bold",
"size": "extraLarge",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "Birthdays",
"size": "medium",
"spacing": "medium",
"weight": "light",
"horizontalAlignment": "center"
},
{
"type": "Image",
"horizontalAlignment": "center",
"spacing": "medium",
"url": "/resources/blox/images/base/female_placeholder.png",
"size": "large",
"style": {
"border-radius": "50%",
"border": "4px solid #fff"
},
"altText": "placeholder"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:name}",
"size": "medium",
"weight": "bold",
"spacing": "large"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:birthday}",
"size": "samll",
"weight": "light",
"spacing": "samll"
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Open In Web",
"url": "https://www.example.com/example-labs/"
}
]
}Choose Date Granularity - Drop-down
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"width": "",
"items": [
{
"type": "ColumnSet",
"width": "",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "regular",
"text": "Choose Date Granularity",
"style": {
"color": "",
"padding-left": "20%"
}
}
]
},
{
"type": "Column",
"items": [
{
"type": "Input.ChoiceSet",
"id": "data.filters[0].filterJaql.members[0]",
"class": "",
"displayType": "compact",
"value": "1",
"choices": [
{
"title": "Hours",
"value": "minutes"
},
{
"title": "Days",
"value": "days"
},
{
"title": "Weeks",
"value": "weeks"
},
{
"title": "Months",
"value": "months"
},
{
"title": "Quarters",
"value": "quarters"
},
{
"title": "Years",
"value": "years"
}
]
}
]
},
{
"type": "Column",
"width": "",
"items": [
{
"type": "ActionSet",
"style": {
"margin-top": "0px",
"padding-top": "0px",
"align-self": "",
"padding-left": ""
},
"actions": [
{
"type": "DateGranDrill18",
"title": "Apply"
}
]
}
]
}
]
}
]
}
],
"actions": []
}Date Range - Calendar Selector
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"carouselAnimation": {
"showButtons": false
},
"body": [
{
"type": "Container",
"width": "20%",
"style": {
"margin": "0 auto"
},
"items": [
{
"spacing": "large",
"type": "TextBlock",
"text": "From Date",
"weight": "light",
"color": "black"
},
{
"type": "Input.Date",
"id": "SelectVal_from",
"placeholder": "",
"defaultValue": "",
"style": {
"width": "100%"
},
"borderRadius": "4px",
"borderStyle": "none",
"backgroundColor": "#F4F4F8"
},
{
"spacing": "medium",
"type": "TextBlock",
"text": "To Date",
"color": "black"
},
{
"type": "Input.Date",
"id": "SelectVal_to",
"placeholder": "",
"defaultValue": "",
"style": {
"width": "100%"
},
"borderRadius": "4px",
"borderStyle": "none",
"backgroundColor": "#F4F4F8"
},
{
"type": "ActionSet",
"actions": [
{
"type": "filter-date",
"title": "Submit",
"data": {
"FilterFields": [
"[Commerce.Date (Calendar)]"
]
}
}
]
}
]
}
]
}Date Time Filter
Copy
{
"style": "",
"script": "",
"title": "",
"titleStyle": [
{
"display": "true"
}
],
"showCarousel": "true",
"carouselAnimation": {
"showButtons": false
},
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"style": {}
},
{
"type": "Column",
"style": {},
"items": [
{
"type": "TextBlock",
"text": "From",
"style": {
"justify-items": "center",
"align-items": "center"
}
}
]
},
{
"type": "Column",
"style": {},
"items": [
{
"type": "Input.Date",
"id": "datevalstart",
"class": "",
"style": {
"justify-items": "center",
"align-items": "center"
}
}
]
},
{
"type": "Column",
"style": {},
"items": [
{
"type": "Input.Time",
"id": "timevalstart",
"class": "",
"style": {
"justify-items": "center",
"align-items": "center"
}
}
]
},
{
"type": "Column",
"style": {},
"items": [
{
"type": "TextBlock",
"text": "To",
"style": {}
}
]
},
{
"type": "Column",
"style": {},
"items": [
{
"type": "Input.Date",
"id": "datevalend",
"class": "",
"style": {
"justify-items": "center",
"align-items": "center"
}
}
]
},
{
"type": "Column",
"style": {},
"items": [
{
"type": "Input.Time",
"id": "timevalend",
"class": "",
"style": {
"justify-items": "center",
"align-items": "center"
}
}
]
},
{
"type": "Column",
"style": {
"margin-top": "-40px"
},
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "DateTimeSelector",
"title": "Filter",
"data": {
"NumDateTimeColumn": [
"Admissions.Admission_Time_Int"
]
}
}
]
}
]
}
]
}
]
}
],
"actions": []
}Detailed List
Copy
{
"style": "",
"script": "",
"title": "",
"titleStyle": [
{
"display": "none"
}
],
"showCarousel": false,
"body": [
{
"type": "Container"
},
{
"type": "ColumnSet",
"separator": true,
"spacing": "large",
"columns": [
{
"type": "Column",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://my.salesforce.com/{panel:Account_Id}"
},
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bold",
"wrap": true,
"text": "{panel:Username}"
},
{
"type": "TextBlock",
"size": "small",
"color": "grey",
"wrap": true,
"weight": "bold",
"text": "{panel:Customer Type}"
},
{
"type": "TextBlock",
"size": "small",
"color": "grey",
"wrap": true,
"text": "Customer Rating: <strong>{panel:Rating}</strong>"
},
{
"type": "TextBlock",
"size": "small",
"color": "grey",
"wrap": true,
"text": "Active Since <strong>{panel:First TRX}</strong>"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bold",
"text": "Profile"
},
{
"type": "TextBlock",
"spacing": "large",
"text": "Average Order Value: <strong>{panel:Average Order Value}</strong>"
},
{
"type": "TextBlock",
"text": "<strong>{panel:% online}</strong> Online Orders"
},
{
"type": "TextBlock",
"text": "<strong>{panel:%Returned}</strong> of orders returned"
}
]
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"size": "medium",
"weight": "bold",
"text": "Activity"
},
{
"type": "TextBlock",
"spacing": "large",
"text": "Last login at <strong>{panel:last_login}</strong>"
},
{
"type": "TextBlock",
"text": "<strong>{panel:Orders Last 30 Days}</strong> Orders in the Last 30 Days"
},
{
"type": "TextBlock",
"text": "<strong>{panel:Orders This Year}</strong> Orders this Year"
}
]
}
]
}
],
"actions": []
}Filtered Views
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"style": {
"backgroundImage": "linear-gradient(#F5A9AA, #E97EA3)",
"box-shadow": "0 1px 3px 1px rgba(58,67,86,0.1)",
"padding": "50px"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "large",
"weight": "bold",
"text": "BloX Stories"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "medium",
"spacing": "small",
"text": "Open BloX Editor to customize filters"
}
]
}
],
"actions": [
{
"type": "Filters",
"title": "New Opportunities",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Days in Date",
"filterJaql": {
"last": {
"count": 7,
"offset": 0
}
}
}
]
}
},
{
"type": "Filters",
"title": "Opportunities at Risk",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Risk Level",
"filterJaql": {
"from": 4
}
}
]
}
},
{
"type": "Filters",
"title": "Aging Opportunities",
"data": {
"filters": [
{
"filterName": "Stage",
"filterJaql": {
"explicit": true,
"members": [
"Prospect"
]
}
},
{
"filterName": "Days Open",
"filterJaql": {
"from": 90
}
}
]
}
}
]
}Form
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"width": "90%",
"style": {
"margin": "0 auto"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Your Feedback",
"weight": "bold",
"size": "extraLarge",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "large",
"text": "Please fill out the form below.",
"weight": "default",
"size": "medium",
"wrap": true
},
{
"type": "TextBlock",
"text": "Don't worry, we'll never share or sell your information.",
"size": "small",
"color": "grey",
"wrap": true
}
]
},
{
"type": "Container",
"items": [
{
"spacing": "large",
"type": "TextBlock",
"text": "Your Name",
"color": "black"
},
{
"type": "Input.Text",
"id": "data.message.from_name",
"placeholder": "Full Name",
"defaultValue": "",
"borderRadius": "4px",
"borderStyle": "none",
"backgroundColor": "#F4F4F8"
},
{
"spacing": "medium",
"type": "TextBlock",
"text": "Your Email",
"color": "black"
},
{
"type": "Input.Text",
"id": "data.message.from_email",
"placeholder": "youremail@example.com",
"defaultValue": "",
"borderRadius": "4px",
"borderStyle": "none",
"backgroundColor": "#F4F4F8"
},
{
"spacing": "medium",
"type": "TextBlock",
"text": "Your Message",
"color": "black"
},
{
"type": "Input.Text",
"id": "data.message.html",
"placeholder": "Message...",
"defaultValue": "",
"isMultiline": true,
"rows": "5",
"borderRadius": "4px",
"borderStyle": "none",
"backgroundColor": "#F4F4F8"
}
]
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Submit",
"action": "post",
"url": "https://mandrillapp.com/api/1.0/messages/send.json",
"title": "Submit",
"data": {
"key": "example key",
"message": {
"subject": "Message from BloX Form",
"from_email": "",
"from_name": "",
"to": [
{
"email": "recipient.email@example.com",
"name": "Recipient Name",
"type": "to"
}
],
"html": ""
}
}
}
]
}
]
}
]
}Two Indicator Widgets
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"backgroundImage": "/resources/blox/images/base/artboard_1.png",
"BackgroundImageMode": "no-repeat",
"style": {
"padding": "5%"
},
"items": [
{
"type": "TextBlock",
"spacing": "none",
"text": "Sales per segmet",
"color": "white",
"size": "extraLarge",
"horizontalAlignment": "center",
"weight": "bold"
},
{
"type": "TextBlock",
"spacing": "small",
"text": "{panel:data}",
"color": "white",
"size": "large",
"horizontalAlignment": "center",
"weight": "default"
}
]
},
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"spacing": "extraLarge",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"spacing": "medium",
"text": "$5M",
"color": "grey",
"size": "extraLarge",
"horizontalAlignment": "center",
"weight": "default"
},
{
"type": "TextBlock",
"spacing": "medium",
"text": "{panel:data}",
"color": "lightgrey",
"horizontalAlignment": "center",
"weight": "center"
}
]
},
{
"type": "Column",
"separator": true,
"items": [
{
"type": "TextBlock",
"spacing": "medium",
"text": "$9.7M",
"color": "grey",
"size": "extraLarge",
"horizontalAlignment": "center",
"weight": "default"
},
{
"type": "TextBlock",
"spacing": "medium",
"text": "{panel:data}",
"color": "lightgrey",
"horizontalAlignment": "center",
"weight": "center"
}
]
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Open In Web",
"url": "https://www.example.com/example-labs/"
}
]
}Indicator - Center, Left, and Right Aligned
-
Centered
Copy{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"backgroundImage": "/resources/blox/images/base/indicator.png",
"body": [
{
"type": "Container",
"items": [
{
"type": "Image",
"url": "/resources/blox/images/base/indicator_top_icon.png",
"spacing": "large",
"horizontalAlignment": "center",
"size": "small",
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
},
{
"type": "TextBlock",
"text": "Total Sales",
"size": "medium",
"color": "default",
"weight": "light",
"spacing": "large",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "{panel:data}",
"size": "large",
"style": {
"align-self": "center",
"font-weight": "bold"
},
"color": "white",
"spacing": "extraLarge",
"horizontalAlignment": "center",
"separator": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"title": "Open In Web",
"url": "https://www.example.com/example-labs/"
}
]
}
]
}
]
} -
Left-aligned
Copy{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"horizontalAlignment": "center",
"style": {
"justify-content": "center"
},
"items": [
{
"type": "Image",
"url": "/resources/blox/images/base/indicator_top_icon.png",
"spacing": "extraLarge",
"horizontalAlignment": "center",
"size": "small"
},
{
"type": "TextBlock",
"text": "Total Sales",
"size": "medium",
"color": "default",
"weight": "light",
"spacing": "small",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "{panel:data}",
"style": {
"align-self": "center",
"font-weight": "bold"
},
"size": "large",
"color": "default",
"spacing": "large",
"horizontalAlignment": "center",
"separator": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"action": "lightbox",
"title": "Send",
"url": "https://www.example.com/example-labs/"
}
]
}
]
},
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "/resources/blox/images/base/headphone.png",
"horizontalAlignment": "center",
"size": "stretch"
}
]
}
]
}
]
}
]
} -
Right-aligned
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "/resources/blox/images/base/headphone.png",
"horizontalAlignment": "center",
"size": "stretch"
}
]
},
{
"type": "Column",
"horizontalAlignment": "center",
"style": {
"justify-content": "center"
},
"items": [
{
"type": "Image",
"url": "/resources/blox/images/base/indicator_top_icon.png",
"spacing": "extraLarge",
"horizontalAlignment": "center",
"size": "small"
},
{
"type": "TextBlock",
"text": "Total Sales",
"size": "medium",
"color": "default",
"weight": "light",
"spacing": "small",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "{panel:data}",
"style": {
"align-self": "center",
"font-weight": "bold"
},
"size": "large",
"color": "default",
"spacing": "large",
"horizontalAlignment": "center",
"separator": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.OpenUrl",
"action": "lightbox",
"title": "Send",
"url": "https://www.example.com/example-labs/"
}
]
}
]
}
]
}
]
}
]
}List
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": false,
"body": [
{
"type": "ColumnSet",
"class": "blox-url-targets-content",
"style": {
"margin-bottom": "30px"
},
"columns": [
{
"type": "Column",
"width": "35%",
"items": [
{
"type": "TextBlock",
"color": "black",
"size": "medium",
"text": "<span class='app-icon app-icon--general-server'><svg class='app-icon__svg'><use xlink:href='#general-server'></use></svg></span>{panel:Source}"
}
]
},
{
"type": "Column",
"width": "15%",
"items": [
{
"type": "TextBlock",
"color": "yellow",
"size": "medium",
"horizontalAlignment": "center",
"text": "{panel:CTR}"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"wrap": true,
"text": "Click Through Rate"
}
]
},
{
"type": "Column",
"width": "15%",
"items": [
{
"type": "TextBlock",
"color": "yellow",
"size": "medium",
"horizontalAlignment": "center",
"text": "{panel:CPA}"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"wrap": true,
"text": "Cost per Conversion"
}
]
},
{
"type": "Column",
"width": "15%",
"items": [
{
"type": "TextBlock",
"color": "yellow",
"size": "medium",
"horizontalAlignment": "center",
"text": "{panel:CPC}"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"wrap": true,
"text": "Cost per Click"
}
]
},
{
"type": "Column",
"width": "15%",
"items": [
{
"type": "TextBlock",
"color": "yellow",
"size": "medium",
"horizontalAlignment": "center",
"text": "{panel:CPM}"
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"size": "small",
"wrap": true,
"text": "Cost per Mille"
}
]
}
]
}
]
}Multiple Indicators
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"backgroundImage": "",
"body": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"text": "Social Status",
"size": "extraLarge",
"color": "default",
"weight": "bold",
"horizontalAlignment": "center"
},
{
"type": "TextBlock",
"text": "{panel:date}",
"spacing": "medium",
"horizontalAlignment": "center",
"color": "default",
"size": "medium",
"weight": "light"
},
{
"type": "ColumnSet",
"spacing": "extraLarge",
"columns": [
{
"type": "Column",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "Image",
"url": "/resources/blox/images/base/google_plus.png",
"spacing": "small",
"horizontalAlignment": "center",
"size": "medium"
},
{
"type": "TextBlock",
"size": "light",
"weight": "light",
"horizontalAlignment": "center",
"spacing": "medium",
"color": "default",
"text": "{value:google} views"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
},
{
"type": "Column",
"items": [
{
"type": "Image",
"spacing": "small",
"horizontalAlignment": "center",
"url": "/resources/blox/images/base/facebook.png",
"size": "medium"
},
{
"type": "TextBlock",
"size": "light",
"weight": "light",
"horizontalAlignment": "center",
"spacing": "medium",
"color": "default",
"text": "{value:facebook} views"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
},
{
"type": "Column",
"items": [
{
"type": "Image",
"spacing": "small",
"horizontalAlignment": "center",
"url": "/resources/blox/images/base/instagram.png",
"size": "medium"
},
{
"type": "TextBlock",
"size": "light",
"weight": "light",
"horizontalAlignment": "center",
"spacing": "medium",
"color": "default",
"text": "{value:instagram} views"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
}
]
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"separator": true,
"spacing": "medium",
"items": [
{
"type": "Image",
"horizontalAlignment": "center",
"url": "/resources/blox/images/base/twitter.png",
"spacing": "small",
"size": "medium"
},
{
"type": "TextBlock",
"size": "light",
"weight": "light",
"spacing": "medium",
"horizontalAlignment": "center",
"color": "default",
"text": "{value:twitter} views"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
},
{
"type": "Column",
"separator": false,
"spacing": "medium",
"items": [
{
"type": "Image",
"horizontalAlignment": "center",
"url": "/resources/blox/images/base/linkedin.png",
"spacing": "small",
"size": "medium"
},
{
"type": "TextBlock",
"size": "light",
"weight": "default",
"spacing": "medium",
"horizontalAlignment": "center",
"color": "default",
"text": "{value:linkedIn} views"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
},
{
"type": "Column",
"separator": false,
"spacing": "medium",
"items": [
{
"type": "Image",
"horizontalAlignment": "center",
"url": "/resources/blox/images/base/youtube.png",
"spacing": "small",
"size": "medium"
},
{
"type": "TextBlock",
"size": "light",
"weight": "default",
"spacing": "medium",
"horizontalAlignment": "center",
"color": "default",
"text": "{value:youTube} views"
}
],
"selectAction": {
"type": "Action.OpenUrl",
"url": "https://www.example.com/example-labs/"
}
}
]
}
]
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Open In Web",
"url": "https://www.example.com/example-labs/"
}
]
}Stock Market
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 3,
"color": "#FA5656",
"image": "/resources/blox/images/base/arrow_down.png"
},
{
"minRange": 3.1,
"maxRange": "Infinity",
"color": "#54a254",
"image": "/resources/blox/images/base/arrow_up.png"
}
],
"body": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"spacing": "extraLarge",
"columns": [
{
"type": "Column",
"backgroundImage": "/resources/blox/images/base/todd_quackenbush.png",
"spacing": "none",
"style": {
"padding-left": "20px"
},
"items": [
{
"type": "TextBlock",
"text": "Stocks",
"color": "white",
"size": "extraLarge",
"spacing": "large"
},
{
"type": "TextBlock",
"text": "Overview",
"color": "white",
"size": "medium",
"spacing": "small",
"weight": "light"
}
]
},
{
"type": "Column",
"spacing": "large",
"items": [
{
"type": "Container",
"spacing": "none",
"items": [
{
"type": "ColumnSet",
"separator": false,
"spacing": "none",
"columns": [
{
"type": "Column",
"spacing": "none",
"style": {
"flex-direction": "row"
},
"items": [
{
"type": "TextBlock",
"tag": "span",
"text": "S&P 500",
"size": "large",
"color": "default",
"weight": "light",
"spacing": "small",
"separator": false
}
]
}
]
},
{
"type": "TextBlock",
"text": "INDEXSP: .INX",
"size": "small",
"weight": "light",
"color": "grey",
"spacing": "small"
},
{
"type": "ColumnSet",
"class": "condition_container indexsp-stock",
"spacing": "extraLarge",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"class": "condition_data indexsp-stock",
"text": "2.3%",
"size": "extraLarge",
"color": "red",
"spacing": "none"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"class": "conditional_image indexsp-stock",
"url": "/resources/blox/images/base/arrow_down.png",
"style": {
"margin": "auto"
},
"size": "small",
"spacing": "none"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"style": {
"justify-content": "center"
},
"actions": [
{
"type": "Action.OpenUrl",
"title": "Get Report",
"url": "https://www.example.com/example-labs/"
}
]
}
]
}
]
}
]
},
{
"type": "Container",
"spacing": "extraLarge",
"separator": true,
"items": [
{
"type": "ColumnSet",
"class": "condition_container sisense-stock",
"separator": false,
"spacing": "none",
"columns": [
{
"type": "Column",
"spacing": "none",
"style": {
"flex-direction": "row"
},
"items": [
{
"type": "TextBlock",
"tag": "span",
"text": "Bot",
"size": "large",
"color": "default",
"weight": "light",
"spacing": "small",
"separator": false
}
]
}
]
},
{
"type": "TextBlock",
"text": "TextBlock",
"size": "small",
"weight": "light",
"color": "grey",
"spacing": "small"
},
{
"type": "ColumnSet",
"separator": false,
"spacing": "extraLarge",
"columns": [
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "TextBlock",
"class": "condition_data sisense-stock",
"text": "4.0%",
"size": "extraLarge",
"color": "green",
"spacing": "none"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Image",
"class": "conditional_image sisense-stock",
"url": "/resources/blox/images/base/arrow_up.png",
"style": {
"margin": "auto"
},
"size": "small",
"spacing": "none"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "ActionSet",
"style": {
"justify-content": "center"
},
"actions": [
{
"type": "Action.OpenUrl",
"title": "Get Report",
"url": "https://www.example.com/example-labs/"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}Stock Updates
Copy
{
"style": "",
"script": "[].slice.call( document.getElementsByClassName('blox-date') ).forEach(function ( div ) { div.innerHTML = new Date().toLocaleDateString(); })",
"title": "",
"showCarousel": true,
"backgroundImage": "",
"conditions": [
{
"minRange": "-Infinity",
"maxRange": 2,
"color": "#FA5656",
"image": "/resources/blox/images/base/arrow_down.png"
},
{
"minRange": 2,
"maxRange": "Infinity",
"color": "#54a254",
"image": "/resources/blox/images/base/arrow_up.png"
}
],
"body": [
{
"type": "Container",
"style": {
"padding": "50px",
"backgroundImage": "linear-gradient(160deg, #E5E4E2, #62B4B9)"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "My Stocks",
"color": "white",
"size": "large",
"style": {
"fontWeight": "600"
}
},
{
"type": "TextBlock",
"text": "Date",
"class": "blox-date",
"horizontalAlignment": "center",
"separator": false,
"color": "white",
"size": "medium",
"spacing": "medium"
}
]
},
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"spacing": "large",
"size": "medium",
"text": "Acme LTD",
"color": "grey"
},
{
"type": "ColumnSet",
"style": {
"justifyContent": "center"
},
"columns": [
{
"type": "Column",
"width": "7%",
"items": [
{
"type": "Image",
"class": "conditional_image",
"url": "url"
}
]
},
{
"type": "Column",
"width": "7%",
"items": [
{
"type": "TextBlock",
"size": "medium",
"class": "condition_data",
"text": "2.3%"
}
]
}
]
},
{
"type": "Container",
"spacing": "large",
"style": {
"height": "1px",
"width": "275px",
"borderRadius": "1.5px",
"backgroundColor": "#D9D9D9",
"alignSelf": "center",
"padding": "0"
},
"items": []
},
{
"type": "ColumnSet",
"style": {
"justifyContent": "center"
},
"columns": [
{
"type": "Column",
"style": {
"justifyContent": "center",
"padding": "30px"
},
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "$75.30",
"size": "extraLarge"
}
]
},
{
"type": "Column",
"items": [
{
"type": "FactSet",
"facts": [
{
"title": "Open",
"value": "$29.7"
},
{
"title": "High",
"value": "$30.4"
},
{
"title": "Low",
"value": "$28.0"
}
]
}
]
}
]
}
]
}
]
}Table
Copy
{
"style": "",
"script": "",
"title": "",
"showCarousel": true,
"body": [
{
"type": "ColumnSet",
"separator": false,
"horizontalAlignment": "center",
"style": {
"padding": "",
"margin-top": "5px",
"margin-bottom": "5px",
"justify-content": "center"
},
"columns": [
{
"type": "Column",
"separator": false,
"width": "200px",
"horizontalAlignment": "center",
"style": {
"backgroundColor": "",
"margin-left": "0px",
"margin-bottom": "0px",
"border": "2px solid #b3b3b3",
"border-right": "1px"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "SCORE",
"size": "",
"style": {
"padding": "10px",
"color": "#fff",
"fontWeight": "",
"background-color": "#09273D"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Excellent",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Good",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Fair",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Poor",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "c",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"color": "#eee",
"fontWeight": "",
"background-color": "#eee",
"border-top": "3px solid #b1b1b1"
}
}
]
}
]
},
{
"type": "Column",
"separator": false,
"width": "175px",
"horizontalAlignment": "center",
"style": {
"backgroundColor": "",
"margin-left": "0px",
"margin-bottom": "0px",
"border": "2px solid #b3b3b3"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "COUNT",
"size": "",
"style": {
"padding": "10px",
"color": "#fff",
"fontWeight": "",
"background-color": "#09273D"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:E_Count}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:G_Count}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:F_Count}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:P_Count}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:Total_Count}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"color": "#666",
"fontWeight": "",
"background-color": "#eee",
"border-top": "3px solid #b1b1b1"
}
}
]
}
]
},
{
"type": "Column",
"separator": false,
"width": "170px",
"horizontalAlignment": "center",
"style": {
"backgroundColor": "",
"margin-left": "0px",
"margin-bottom": "0px",
"border": "2px solid #b3b3b3",
"border-left": "1px"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "left",
"text": "PERCENT",
"size": "",
"style": {
"padding": "10px",
"color": "#fff",
"fontWeight": "",
"background-color": "#09273D"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:E_Percent}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:G_Percent}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:F_Percent}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:P_Percent}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "c",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"color": "#eee",
"fontWeight": "",
"background-color": "#eee",
"border-top": "3px solid #b1b1b1"
}
}
]
}
]
}
]
}
]
}Table with Checkbox
Copy
{
"style": " .blox-slides:first-child .blox-pivot-title{display:block; !important;} .blox-slides:last-child .blox-pivot-footer{display:block; !important;}",
"script": "$('.blox-slides').parent().eq(0).attr('class', 'blox-container')",
"title": "",
"showCarousel": false,
"carouselAnimation": {
"showButtons": false
},
"body": [
{
"type": "ColumnSet",
"class": ".blox-titles",
"separator": true,
"horizontalAlignment": "center",
"style": {
"padding": "",
"margin-top": "5px",
"margin-bottom": "5px",
"justify-content": "center"
},
"columns": [
{
"type": "Column",
"separator": false,
"width": "200px",
"horizontalAlignment": "center",
"style": {
"backgroundColor": "",
"margin-left": "0px",
"margin-bottom": "0px",
"border": "2px solid #b3b3b3",
"border-right": "1px"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"class": "blox-pivot-title",
"hidden": "true",
"horizontalAlignment": "left",
"text": "Name",
"size": "",
"style": {
"padding": "10px",
"color": "#fff",
"fontWeight": "",
"background-color": "#09273D"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
},
{
"type": "Input.ChoiceSet",
"id": "checkboxVal",
"class": "",
"layout": "vertical",
"separator": true,
"isMultiSelect": true,
"value": "1,3",
"choices": [
{
"title": "{panel:name}",
"value": ""
}
]
}
]
}
]
},
{
"type": "Column",
"separator": false,
"width": "175px",
"horizontalAlignment": "center",
"style": {
"backgroundColor": "",
"margin-left": "0px",
"margin-bottom": "0px",
"border": "2px solid #b3b3b3"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"class": "blox-pivot-title",
"hidden": "true",
"horizontalAlignment": "left",
"text": "Sales",
"size": "",
"style": {
"padding": "10px",
"color": "#fff",
"fontWeight": "",
"background-color": "#09273D"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:revenue}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
}
]
}
]
},
{
"type": "Column",
"separator": false,
"width": "170px",
"horizontalAlignment": "center",
"style": {
"backgroundColor": "",
"margin-left": "0px",
"margin-bottom": "0px",
"border": "2px solid #b3b3b3",
"border-left": "1px"
},
"items": [
{
"type": "Container",
"items": [
{
"type": "TextBlock",
"class": "blox-pivot-title",
"hidden": "true",
"horizontalAlignment": "left",
"text": "Orders Filled",
"size": "",
"style": {
"padding": "10px",
"color": "#fff",
"fontWeight": "",
"background-color": "#09273D"
}
},
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "{panel:quantity}",
"separator": true,
"size": "15px",
"style": {
"padding": "10px",
"fontWeight": ""
}
}
]
}
]
}
]
},
{
"type": "ColumnSet",
"horizontalAlignment": "center",
"spacing": "large",
"columns": [
{},
{
"type": "TextBlock",
"class": "blox-pivot-footer",
"hidden": "true",
"horizontalAlignment": "center",
"text": "Take Action",
"size": "small",
"style": {
"padding": "5px",
"width": "100px",
"border-radius": "5px",
"color": "#111",
"fontWeight": "",
"background-color": "#F2B900"
},
"selectAction": {
"type": "Action.Submit",
"action": "post",
"url": "https://hooks.zapier.com/hooks/catch/14501551/3yz47dn/",
"data": {}
}
},
{}
]
}
],
"actions": []
}