Sisense BloX Reference

The following tables describe the properties for the JSON objects that are used or can be used in Sisense BloX.

To view this reference information in an interactive dashboard, see Sisense BloX Reference Dash File Library.

For hands-on learning and to explore the possibilities that BloX has to offer, see the Sisense Developer's Experience Embedded BloX Playground: https://sisense.dev/playground/blox.

Snippets

Containers

Blox Main

Card schema for BloX.

Property	Type	Required	Description
style	string	No	Space to enter your own internal CSS stylesheet.
script	string	No	Space to enter your own custom JavaScript, similar to <script> </script> tags in an HTML header.
title	string	No	Name displayed as the title of the widget.
body	array[]	Yes	The Card elements to show in the primary card region.
actions	Action[]	No	The Actions to show in the BloX's action bar.
showCarousel	boolean	No	Indicates if an element should be displayed as a carousel instead of a list.

Container

Containers group items together.

Property	Type	Required	Description
type	"Container"	Yes	Must be Container.
style	string	No	Style hint for Container.
items	array[]	Yes	The Card Elements to include in the Column.

ColumnSet

ColumnSetdivides a region into Columns allowing elements to sit side-by-side.

Property	Type	Required	Description
type	"ColumnSet"	Yes	Must be ColumnSet.
columns	Column[]	No	The array of Columns to divide the region into.

Column

Defines a container that is part of a ColumnSet.

Property	Type	Required	Description
type	"Column"	Yes	Must be Column.
items	array[]	Yes	The Card Elements to include in the Column.

Attributes

Click here to expand

Property	Type	Required	Description
backgroundColor	string	No	Determines the background color of a widget.
backgroundImage	string	No	Adds a background image to the widget. For more information, see Creating Interactive Dashboards
horizontalAlignment	string	No	Controls how Items are horizontally positioned within their container.
verticalContentAlignment	string	No	Controls how Items are vertically positioned within their container.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No	The Separator object type describes the look and feel of a separation line between two elements.
carousel	object	No	Converts your list into a carousel. See the section "Adding Carousels" in Creating Interactive Dashboards.
conditional range	string	No	Allows you to create thresholds that trigger events in your widgets when met. For more information see the section "Using Conditionals" in Creating Interactive Dashboards.
conditional text	string	No
conditional formatting	string	No
conditional formatting target	string	No
widget title style	object	No	Defines how widget titles are displayed.
hide widget title style	string	No	If you want to display a background image that covers the title area of your widget as well, set display to "none".

Text Styling

Click here to expand.

Items	Type	Required	Element
Font Size	string	No	Controls the size of the text.
Font Color	string	No	Controls the color of TextBlock Items.
Font Weight	string	No	Controls the weight of TextBlock Items.
Text Wrap	boolean	No	True if text is allowed to wrap.

Components

Sparkline Charts

Sparklines allow you to add a tiny simple graph over a widget that conveys the basic shape of your data in a meaningful, but compact way. Sparklines are useful for showing trends in your data.
You can add sparklines to any BloX widget by defining the values of the sparkline.

Property	Type	Required	Description
type	"TextBlock"	Yes	Must be "TextBlock".
id	string	No	A unique ID associated with the element.
class	object	No
text	object	Yes	Span with the class 'sparklines' that defines the dimensions and values of your sparkline. You can use a placeholder as the values of your sparkline, {spark:Data}, or enter each value hardcoded separated by a comma, 3, 15, 32, 75.

iFrame

You can embed iFrames into your widgets. This is useful for display websites, social media feeds, or streaming videos. To display content in an iFrame, you add a Text block with the value of the text field the URL you want to display in an iFrame element.

Note:

Each attributes included in the value of iframe src must be wrapped with single quotation marks 'x'. See the example below for more information.

Property	Type	Required	Description
type	"TextBlock"	Yes	Must be TextBlock.
text	string	Yes	The URL of the iFrame you want to open.

Image

The Image Item allows for the inclusion of images in BloX.

Property	Type	Required	Description
type	"Image"	Yes	Must be Image.
id	string	No	A unique ID associated with the element.
class	string	No
url	string	Yes	The URL to the image.
altText	string	No	Alternate text for the image for accessibility.
size	string	No, default: auto	Controls the approximate size of the image. The physical dimensions will vary per host. Specify "auto" for true image dimension or "stretch" to force it to fill the container.
Additional Properties
horizontalAlignment	string	No	Controls how Items are horizontally positioned within their container.
opacity	object	No	Controls how much opacity (0-1 in %) to apply to images.“type”: “image”,“opacity”:0.7
selectAction	object	No	An Action that will be invoked when the Image is tapped or selected.
style	string	No	Controls the way Images are displayed.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Text Block

The TextBlock Item allows for the inclusion of text with various font sizes, weight and color, in BloX.

Property	Type	Required	Description
type	"TextBlock"	Yes	Must be TextBlock.
id	string	No	A unique ID associated with the element.
class	string	No
text	string	Yes	The actual text to display.
Additional Properties
color	string	No	Controls the color of TextBlock Items.
horizontalAlignment	string	No	Controls how Items are horizontally positioned within their container.
size	string	No	Controls the size of the text.
weight	string	No	Controls the weight of TextBlock Items.
wrap	boolean	No	True if text is allowed to wrap.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

2-Column List

The FactSet Item makes it simple to display a series of facts (e.g. name/value pairs) in a tabular form.

Property	Type	Required	Description
facts	Fact[]	Yes	The array of Facts.
type	"FactSet"	No	Must be FactSet.
id	string	No	A unique Id associated with the element.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Fact

Describes a Fact in a FactSet as a key/value pair.

Property	Type	Required	Description
type	"Fact"	Yes	Must be Fact.
title	string	Yes	The title of the fact.
value	string	Yes	The value of the fact.

HTML Text Block

The TextBlock Item allows for the inclusion of text with various font sizes, weight and color, in BloX.

Property	Type	Required	Description
type	"TextBlock"	Yes	Must be TextBlock.
id	string	No	A unique ID associated with the element.
class	string	No
text	string	Yes	The actual text to display.
Additional Properties
color	string	No	Controls the color of TextBlock Items.
horizontalAlignment	string	No	Controls how Items are horizontally positioned within their container.
isSubtle	boolean	No	Indicates whether the color of the text should be slightly toned down to appear less prominent.
maxLines	number	No	When Wrap is true, you can specify the maximum number of lines to allow the textBlock to use.
size	string	No	Controls the size of the text.
weight	string	No	Controls the weight of TextBlock Items.
wrap	boolean	No	True if text is allowed to wrap.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Input Fields

Text Input

Input.Text collects text from the user.

Property	Type	Required	Description
type	"Input.Text"	Yes	Must be Input.Text.
id	string	Yes	ID for the value (will be used to identify collected input when SUBMIT is clicked).
class	string	No
title	string	No	Title of the button.
placeholder	string	No	Title Description of the input desired.
Additional Properties
isMultiline	boolean	No	Do you want to allow multiple lines of input.
maxLength	number	No	Hint of maximum length characters to collect (may be ignored by some clients).
style	string	No	Style hint for Input.Text.
value	string	No	The initial value for a field.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Date Input

Input.Date collects a date from the user.

Property	Type	Required	Description
type	"Input.Date"	Yes	The type must be Input.Date.
id	string	Yes	ID for the value (will be used to identify collected input when SUBMIT is clicked).
class	string	No
Additional Properties
max	string	No	Hint of maximum value expressed in ISO-8601 format (may be ignored by some clients).
min	string	No	Hint of minimum value expressed in ISO-8601 format (may be ignored by some clients).
placeholder	string	No	Title Description of the input desired.
value	string	No	The initial value for a field expressed in ISO-8601 format.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Time Input

Input.Time collects the time from the user.

Property	Type	Required	Description
type	"Input.Date"	Yes	The type must be Input.Date.
id	string	Yes	ID for the value (will be used to identify collected input when SUBMIT is clicked).
class	string	No	class
Additional Properties
max	string	No	Hint of maximum value expressed in ISO-8601 format (may be ignored by some clients).
min	string	No	Hint of minimum value expressed in ISO-8601 format (may be ignored by some clients).
placeholder	string	No	Title Description of the input desired.
value	string	No	The initial value for a field expressed in ISO-8601 format.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Number Input

Input.Number collects a number from the user.

Property	Type	Required	Description
type	"Input.Number"	Yes	The type must be Input.Number.
id	string	Yes	ID for the value (will be used to identify collected input when SUBMIT is clicked).
class	string	No
placeholder	string	No	Title Description of the input desired.
Additional Properties
max	number	No	Hint of maximum value (may be ignored by some clients).
min	number	No	Hint of minimum value (may be ignored by some clients).
value	number	No	The initial value for a field.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Radio Buttons

Allows a user to input a Choice.

Property	Type	Required	Description
type	"Input.ChoiceSet"	Yes	The type must be Input.ChoiceSet.
id	string	Yes	Must be radiotVal.
class	string	No
style	style	No, default: "compact"	Style hint for Input.ChoiceSet.
placeholder	string	No	Title Description of the input desired.
choices	Input.Choice[]	Yes	Choice options.
Additional Properties
isMultiSelect	boolean	No, default: false	Allow multiple choices to be selected.
value	number	No	The initial choice (or set of choices) that should be selected. For multi-select, specify a comma-separated string of values.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Checkbox

Allows a user to input a Choice.

Property	Type	Required	Description
type	"Input.ChoiceSet"	Yes	The type must be Input.ChoiceSet.
id	string	Yes	Must be checkboxVal.
class	string	No
style	style	No, default: "compact"	Style hint for Input.ChoiceSet.
placeholder	string	No	Title Description of the input desired.
choices	Input.Choice[]	Yes	Choice options.
Additional Properties
isMultiSelect	boolean	No, default: false	Allow multiple choices to be selected.
value	number	No	The initial choice (or set of choices) that should be selected. For multi-select, specify a comma-separated string of values.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Dropdown

Property	Type	Required	Description
type	"Input.ChoiceSet"	Yes	The type must be Input.ChoiceSet.
id	string	Yes	Must be selectVal.
class	string	No
style	style	No, default: "compact"	Style hint for Input.ChoiceSet.
placeholder	string	No	Title Description of the input desired.
choices	Input.Choice[]	Yes	Choice options.
Additional Properties
isMultiSelect	boolean	No, default: false	Allow multiple choices to be selected.
value	number	No	The initial choice (or set of choices) that should be selected. For multi-select, specify a comma-separated string of values.
spacing	string	No	Controls the amount of spacing between this element and the previous element.
separator	boolean	No, default: false	The Separator object type describes the look and feel of a separation line between two elements.

Dynamic Inputs

Dynamic inputs allow you to display dynamic options for dropdowns, radio buttons, and checkbox inputs. The Dynamic Input snippet displays a dropdown list and when you change the value of “choices” to match your Items, a list of values based on your data is displayed. The default value included in the snippet is choices:Title,Value where title is the name of the option displayed and Value is the ID of the option selected that is input when selected.

{
  "type": "Input.ChoiceSet",
  "id": "selectVal", 
  "class": "",
  "displayType": "compact",
  "value": "1",
  "choices": "{choices:Category,Id}"
}

For example, if your Items display Brand as a list of strings, these can be displayed in a dropdown by changing the value of “choices” to “{choices:Brand}” where Brand equals the title of the options to be displayed.

While a dropdown list is the default option for the Dynamic Inputs snippet, you can use the same functionality for radio buttons and checkboxes.
For example, by changing the value of choices in the Checkbox or Radio Button snippets from an array to a string, you can display input options based on your data.

{
  "type": "Input.ChoiceSet",
  "id": "checkboxVal",
  "class": "",
  "layout": "vertical",
  "isMultiSelect": true,
  "value": "1,3",
  "choices": "{choices:Brand}"
}

Toggle

Property	Type	Required	Description
type	"Input.Toggle"	Yes	Must be Input.Toggle.
title	string	Yes	Text to be displayed alongside the toggle option.
valueOn	string	No	Enter "true" to set the toggle to selected or enabled by default.
valueOff	string	No	Enter "false" to set the toggle to unselected or disabled by default.
value	string	Yes	A value you want to send when the toggle is selected.

Slider

Property	Type	Required	Description
type	"TextBlock"	Yes	Must be TextBlock.
id	string	Yes
class	string	No
text	Slider array	Yes	List of values in the slider. Use 'sliderData' prefix within slider configuration block to connect it to metadata item from 'Items' panel.
Additional Properties
items	array	No	Connection to metadata item.
range	string	No	Enable slider range mode.
point-color	string	No	Changes color of slider draggable button.
line-color	string	No	Changes color of slider (horizontal line).
value	number	No	Default value (for single selection slider mode).
value-start	number	No	Default start value (for range slider).
value-end	number	No	Default end value (for range slider).

Discrete Slider

Property	Type	Required	Description
type	"TextBlock"	Yes	Must be TextBlock.
id	string	Yes
class	string	No
text	Slider array	Yes	List of values in the slider. Use 'sliderData' prefix within slider configuration block to connect it to metadata item from 'Items' panel.
Additional Properties
items	array	No	Connection to metadata item.
range	string	No	Enable slider range mode.
point-color	string	No	Changes color of slider draggable button.
line-color	string	No	Changes color of slider (horizontal line).
value	number	No	Default value (for single selection slider mode).
value-start	number	No	Default start value (for range slider).
value-end	number	No	Default end value (for range slider).

Actions

Actions turn your BloX into interactive business applications by letting your users perform certain actions inside a widget. Actions are located after your body element, unless you add an Action.Set that allows you to place Actions within the body.

{
  "type": "ActionSet",
  "actions": [
        {
                "type": "Action.OpenUrl",
                "action": "lightbox",
                "title": "Share",
                "url": "http://www.sisense.com"
        }
    ]
}

The snippets in this section can be applied to elements to add actions to them. For example, you can convert images into clickable elements with the Clickable Elements snippets.

Action Buttons

Action Buttons are displayed at the bottom of the widget.

Button

You can create a button with the Action Section that when clicked, triggers an action.

{ 
                        "type": "Action.OpenUrl",
                        "title": "View in SalesForce",
                        "url": "https://sisense.salesforce.com/{panel:Id}"
                        }

Property	Type	Required	Description
type	"Action.OpenUrl"	Yes	Must be Action.OpenUrl.
title	string	Yes	Label for button or link that represents this action.
url	string	Yes	The URL to open.

Inline Button

Inline Buttons (also known as "ActionSet") can be placed anywhere in the Blox widget. Like other Blox components, are displayed in the position of your choice. When Action.OpenUrl is invoked, a URL you define is opened in your browser.

{ 
                        "type": "Action.OpenUrl",
                        "title": "View in SalesForce",
                        "url": "https://sisense.salesforce.com/{panel:Id}"
                        }

Property	Type	Required	Description
type	"Action.OpenUrl"	Yes	Must be Action.OpenUrl.
title	string	Yes	Label for button or link that represents this action.
url	string	Yes	The URL to open.

Clickable Element

When Action.OpenUrl is invoked, a URL you define is opened in your browser.

{ 
                        "type": "Action.OpenUrl",
                        "title": "View in SalesForce",
                        "url": "https://sisense.salesforce.com/{panel:Id}"
                        }

Property	Type	Required	Description
type	"Action.OpenUrl"	Yes	Must be Action.OpenUrl.
title	string	Yes	Label for button or link that represents this action.
url	string	Yes	The URL to open.

Action Types

Open URL

When Action.OpenUrl is invoked, a URL you define is opened in your browser.

       { 
                        "type": "Action.OpenUrl",
                        "title": "View in SalesForce",
                        "url": "https://sisense.salesforce.com/{panel:Id}"
                        }

Property	Type	Required	Description
type	"Action.OpenUrl"	Yes	Must be Action.OpenUrl.
title	string	Yes	Label for button or link that represents this action.
url	string	Yes	The URL to open.

Open URL in Popup

When Action.OpenUrl is invoked, a URL you define is opened in a lightbox pop-up.

{ 
                        "type": "Action.OpenUrl",
                        "action": "lightbox",
                        "title": "View in SalesForce",
                        "url": "https://sisense.salesforce.com/{panel:Id}"
                        }

Property	Type	Required	Description
type	"Action.OpenUrl"	Yes	Must be Action.OpenUrl.
action	"lightbox"	Yes	Must be lightbox. Determines that the URL should be opened in a pop-up.
title	string	Yes	Label for button or link that represents this action.
url	string	Yes	The URL to open.

Submit

Submit action takes input fields and merges them with optional data fields. It then generates an event to a client asking for data to be submitted. It is up to the client to determine how that data is processed. For example, the action below submits an ID to a webhook defined as the value of the “url” key.

{
                        "type": "Action.Submit",
                        "action": "post",
                        "title": "Submit",
                        "data": {"id": "007007"}
                        "url": "https://hooks.zapier.com/hooks/catch/171572/kay5ad/
                        }

Property	Type	Required	Description
type	"Action.Submit"	Yes	Must be Action.Submit.
action	"post"	Yes	Must be "post".
title	string	Yes	Label for button or link that represents this action.
data	string,object	No	Initial data that the input fields will be combined with. This is essentially ‘hidden’ properties.
url	string	Yes	The URL where the data is to be sent to.

BloX Popup

Action.ShowCard defines an inline BloX that is shown to the user when it is clicked.

{
 "type": "Action.ShowCard",
 "title": "ShowCard",
 "card": {
        "showCarousel": true,
        "backgroundImage": "",
        "body": []
      }
}

Property	Type	Required	Description
type	"Action.ShowCard"	Yes	Must be Action.ShowCard.
title	string	Yes	The title to be displayed in the pop-up's window.
card	object	Yes	Defines the content to be displayed in the pop-up.

Dashboard Filters (by Panel Name)

You can add dashboard filters to your widget according to their panel name as it appears in the left panel when editing a widget.

For example, your users can apply a filter by its panel name, even if the filter wasn't previously defined in a dashboard, by clicking a button when you add this action.

{
  "type": "Filters",
  "title": "{{category.text}}",
  "data": {
    "filters": [
        {
        "panelName": "Category",
        "filterJaql": {
           "explicit": true,
          "members": [
           "{{category.value}}"
          ]
        }
      }
     ]
   }
}

Property	Type	Required	Description
type	"Filters"	Yes	Must be Filters.
title	string	Yes	Title of the action.
data	object	Yes	Contains the filters to be applied to the dashboard.
filters	object	Yes	Defines the filters to be applied to the dashboard.
panelName	string	Yes	Name of the filter as its displayed in the Panel.
filterJaql	object	No	Add custom advanced filters to your widget. In the filterJaql object, paste the code snippet created under the Advanced filters tab when creating a filter. For more information, see the section "Advanced Filtering Criteria" in Creating Dashboard Filters.

Dashboard Filters (by Filter Name)

You can add dashboard filters to your widget according to their filter name. For example, your users can filter a dashboard by clicking a button when you add this action to that button.

{
 "type": "Filters",
 "title": "Last Month",
 "data": {
        "filters": [
        {
          "filterName": "Months in Date",
          "filterJaql": {
            "last": {
                "count": 1,
                "offset": 1
               },
        },
           "dim": {
                "title": "Year",
                "table": "Lead Generation",
                "column": "Date",
                "datatype": "datetime",
                "level": "Years"
                }
        },
        ]
   }
}

Property	Type	Required	Description
type	"Filters"	Yes	Must be Filters.
title	string	Yes	Title of the filter to be displayed in the right dashboard panel.
data	object	Yes	Contains the filters to be applied to the dashboard.
filters	object	Yes	Defines the filters to be applied to the dashboard.
filterJaql	object	No	Add custom advanced filters to your widget. In the filterJaql object, paste the code snippet created under the Advanced filters tab when creating a filter. For more information, see the section "Advanced Filtering Criteria" in Creating Dashboard Filters.

Dashboard Filters (by Dimension)

You can add dashboard filters to your widget according to dimension (dim). For example, your users can filter a dashboard by clicking a button when you add this action to that button.

{
 "type": "Filters",
 "title": "Filter (by Dimension)",
 "data": {
        "filters": [
        {
        "filterJaql": {
            "last": {
            "count": 1,
            "offset": 0
                }
        },
        "dim": {
              "title": "Year",
              "table": "Lead Generation",
              "column": "Date",
              "datatype": "datetime",
              "level": "Years"
                }
        },
}

Property	Type	Required	Description
type	"Filters"	Yes	Must be Filters.
title	string	Yes	Title of the filter to be displayed in the right dashboard panel.
data	object	Yes	Contains the filters to be applied to the dashboard.
filters	object	Yes	Defines the filters to be applied to the dashboard.
filterJaql	object	No	Add custom advanced filters to your widget. In the filterJaql object, paste the code snippet created under the Advanced filters tab when creating a filter. For more information, see the section "Advanced Filtering Criteria" in Creating Dashboard Filters.

Jump to Dashboard

Adds a an action to an object in your widget that when clicked, opens a dashboard according to the Dashboard ID.

{
  "type": "JTD", 
  "title": "Jump To Dashboard",
  "data": {
    "dashboardId": "",
    "panelsToInclude": [
        {
          "panel": "Category",
          "value": "{{category.text}}"
        }
     ],
   "args": {
        "displayDashboardsPane": false,
        "displayFilterPane": true
        }
    }
}

Property	Type	Required	Description
type	"JTD"	Yes	Must be JTD.
title	string	Yes	Title of the action.
dashboardId	string	Yes	The ID of the dashboard found at the end of the URL of your dashboard. For example, http://localhost:8081/app/main#/dashboards/58184c2f295b2b342b000023 - the set of characters after the last ' / ' is your Dashboard ID.
panelsToInclude	object	No	Enter the any panels you want to add to your dashboard when it is opened.
args	object	No	Add additional arguments and functionality to the action when a dashboard is opened. For a complete list of all the args you can apply, see the Technical Details for the Jump to Dashboard add-on.

Collected Product and Usage Data

User Information

Data	Description
Sisense Owner ID	The email address of the owner of the Sisense account.

Sisense-Related Information

Name	Description
Sisense Version	The version of Sisense installed on the machine.
Sisense Monitoring Version	The version of Sisense’s remote support module (monitoring).

Action Logs

Name	Description
Action	The type of action performed by the user, for example: openURl, LightBox, Post API etc.
Area	The area of the application the action is related to, for example: Setup, Dashboard View, widget
Feature	The name of the feature being used, for example: Plugin Admin, Dev to Production, Pulse, Export to Excel.

Note:

The action log does not include licensee data, and does not attribute actions to identifiable users.

Logs

Parameter	Description
Product Exception Log	Product exception data such as when an exception occurred, which application, the message returned and the error type.
Event Log	Record when an error occurred, in which application, and the error message. The error messages within the event logs may contain information such as IP address, and ElastiCube, dashboard, or widget names.

.r.