BloX

Installing BloX

Download and install Sisense BloX. Once the installation is complete, the BloX widget is added to your list of widgets.

How it Works

After installing BloX, the first step is to create a new widget or edit an existing widget and choosing the widget type BloX.

This transforms the Widget Editor into the BloX Design Panel, which contains the following features and functionality:

Layout: Displays the current state of your visualization as defined in the BloX Editor and Configuration Editor.

Templates: Contains a list of predefined templates Sisense has designed that you can edit to fit your use case. The easiest way to design BloX is to choose the template closest to your use case and modify it. However, you can create one by deleting the content from the editor, use the code snippets and save your own templates.

Layout Editor: Contains the HTML JSON objects that determine the content of your BloX, including text and interactive actions such as buttons. This is where you provide the content of your BloX and describe what actions your BloX can do.

Configuration Editor: Contains CSS JSON objects that determine the look and feel of your cards.

Snippets: Contains predefined code snippets for Blox elements that you can copy into the editor to add those elements to your widget.

From the BloX Design Panel, you can create your own cards by customizing predefined templates created by Sisense or creating your own templates from scratch.

BloX Widgets

In the Layout Editor, you define the content of your BloX widgets. BloX widgets re built on schemas that have the following basic structure:

• AdaptiveCard: The root object that describes your BloX, including its elements, actions, and the schema version required to render it.
• Body: The body of your BloX is made up of building-blocks known as elements. Elements can be composed in a variety of arrangements to create many types of BloX.
• Actions: Many BloX have a set of actions that you can take on it. This property describes the actions that typically get rendered in an “action button” at the bottom of your widget.

In the Layout Editor, you can customize the content of your BloX widgets based on the structure as described above.

The example below illustrates the JSON structure common to all BloX:

{
"type": "AdaptiveCard",
"version": "1.0",
"style": "",
"script": "",
"body": [
{
"type": "TextBlock",
"text": "This is my Sisense InfoCard"
},
{
"type": "Image",
"Url": "https://cdn.sisense.com/dotcom/images/sisense-logo.png"
}
]
}

Beneath the type and version metadata are two keys style and script for referring to JavaScript libraries and CSS files for using custom classes in your BloX widgets.

Below your metadata is the body element that behaves just as a body element does in a typical webpage. Within the body element, each element has a type property that determines what type of object it is. In the example above, there are two elements a TextBlock and an Image:

• TextBlock: Adds a block of text with properties to control what the text looks like.
• Image: Adds an image with properties to control what the image looks like.

In addition, there are a few more elements that you can use to help organize your content and make more interactive widgets.

As in web pages, in BloX widgets, every element stacks vertically and expands to the width of its parent. You can use containers, columns, and column sets to add multiple elements side-by-side. Containers act as HTML divs where you can define a collection of elements. Column Sets contain columns. Within a Column Set, each column can be placed next to another column to allow you to add multiple elements on the same row instead of stacking them one on top of the other.

Other elements you may use are Input and Action elements for collecting and submitting data. These elements and more are described in the Reference section on this page.

Customizing your widget’s look and feel

The Configuration Editor contains a JSON structure that renders the key:value pairs as CSS in your card. From the Configuration Editor, you can define the look and feel of your template.

Each template has its own JSON structure and elements. Some of these elements can be referenced from the Card Editor, but most can be set in the Configuration Editor.

For example, the color key inside the Card Editor of the multiple_indicators card refers to the “attention” object. This object defines the font color of the text displayed in the card and is located in the Configuration Editor.

Layout Editor

"type": "Column",
"items": [
{
"type": "TextBlock",
"spacing": "small",
"text": "42%",
"color": "attention",
"size": "extralarge",
"horizontalAlignment": "center",
"weight": "bolder"
},

Configuration Editor

},
"emphasis": {
"foregroundColors": {
"default": {
"normal": "#333333",
"subtle": "#EE333333"
},
"accent": {
"normal": "#2E89FC",
"subtle": "#882E89FC"
},
"good": {
"normal": "#54a254",
"subtle": "#DD54a254"
},
"warning": {
"normal": "#e69500",
"subtle": "#DDe69500"
},
"attention": {
"normal": "#cc3300",
"subtle": "#DDcc3300"
}
},
"backgroundColor": "#08000000"
}
},

You can modify the hex values of these colors in the Configuration Editor, or remove the reference in the BloX Editor and define your own colors specific for each element, such as TextBlocks.

Another example is redefining the background color of your BloX. The following is an example taken from the ‘Sparkline’ template:

The ‘Sparkline’ template has a white background color by default. You can change this to yellow by modifying the value of the backgroundColor key.

“backgroundColor”: “#FFFFFF”

To

“backgroundColor”: “yellow”

The Configuration Editor provides most of the CSS you need to redefine your BloX, but with Sisense BloX, you have complete freedom to customize the look and feel to meet your use-case using CSS written in JSON key:value pairs.

Custom CSS Files

If you have defined your own custom style sheets, you add these to your BloX widgets.

"type": "AdaptiveCard",
"version": "1.0",
"style": "",
"script": "",
"body": [

The value of style should be the location of your CSS file on a remote server. This allows you to refer to objects such as classes from your CSS file in your BloX widgets.

Templates

Sisense provides several pre-defined templates you can use for your widgets.

The easiest way to work with Sisense BloX is to select the template that most suits your use-case, and then edit it. After you finish your changes, you can save the template by clicking “Save as Template”. Saved templates are added to your list of templates from you can select or edit them.

Snippets

Sisense makes it easy to add content to your widgets by providing code snippets for the supported elements described above.

With snippets you can build a complete widget or edit an existing BloX template by inserting the relevant elements.

Each element can be copied and pasted into the BloX Editor and then modified according to your needs.

For example, the TextBlock snippet can be added to your template to add a text object. You can then modify the snippet as required to fit the style of the rest of your BloX.

{
"type": "TextBlock",
"text": "{panel:Date}",
"spacing": "medium",
"horizontalAlignment": "center",
"color": "default",
"size": "medium",
"weight": "light",
"lineColor": "#414241
}

If you want to create a new BloX widget from scratch, you can begin with the Main BloX snippet, and then add additional snippets to it. This snippet contains the mandatory keys for any BloX widget, “type”, “title”, and “version”.

{
"type": "AdaptiveCard",
"title": "BloX",
"version": "1.0",
"showCarousel": true,
"backgroundImage": "",
"body":
[
{ "type": "Container",
"items":
[
{
"type": "TextBlock",
"text": "This is my Sisense BloX Card"
}
]
}
]
}

It’s important to remember that snippets are JSON objects that while they can be added anywhere to your template, they must not break the structure of the template. For example, if you add the text block snippet shown above to an existing template, you need to add a comma as the previous object as you would in any JSON file:

{
"type": "TextBlock",
"size": "light",
"weight": "light",
"horizontalAlignment": "center",
"spacing": "medium",
"color": "default",
"text": "{panel:Google} views
},
{
"type": "TextBlock",
"text": "{panel:Date}",
"spacing": "medium",
"horizontalAlignment": "center",
"color": "default",
"size": "medium",
"weight": "light",
"lineColor": "#414241
}

PlaceHolders

While you can add static content to your widgets through the TextBlock element, you can also use placeholders to display your data in the widget. Placeholders can refer to dimensions or measures listed on the left side of the Card Editor.

For example, if you wanted to refer to dynamic values from your data that changes as your users cycle through them, you could use a placeholder. The Social Media Status template shown below uses a placeholder to refer to the values of Company from the panel on the left.

{
"type": "TextBlock",
"text": "{panel:Company}",
"spacing": "small",
"size": "medium",
"weight": "light",
"horizontalAlignment": "center"
},

By changing the static value of the “text” key to {panel:xxxx}, you can display the different values you have for Company or whatever field you are referring to from your data. The format of the placeholder is always the smae {panel:value} where value is name of the field.

For additional information, click here.

Click here for Terms and Conditions.