Sisense BloX

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

In the Card Editor, you define the content of your BloX. BloX are 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.

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

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

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

Each element with within the JSON structure 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.

Supported Elements

In addition to TextBlock and Image, Sisense supports the following elements that you can use or will see in BloX templates:

Container

Every element stacks vertically and expands to the width of its parent, however, you can use a ColumnSet to create side-by-side columns of containers.

Containers are used to arrange a collection of child elements.

• Container: Defines a collection of elements.
• ColumnSet/Column: Defines a collection of columns, each column is a container.
• FactSet: Container of Facts. See Facts for more information.
• ImageSet: Container of Images so that UI can show appropriate photo gallery experience for a collection of images.

Input

Input elements that allow you to add simple forms within your BloX:

• Input.Text: Displays a text field for the user to complete.
• Input.Date: Displays a date field for the user to complete.
• Input.Time: Displays a time field for the user to complete.
• Input.Number: Displays a number field for the user to complete.
• Input.ChoiceSet: Displays a set of choices for the user to select.
• Input.Toggle: Displays a single choice between two items for the user to pick.

Actions

Actions add buttons to the card. These buttons can perform a variety of actions, like opening a URL or submitting some data.

Action.OpenUrl: Displays a button that opens an external URL.

Action.ShowCard: Displays a sub-card to the user.

Action.Submit: Displays a Submit button that collects all input elements into an object and sends the object to the defined location.

For more information, see Adding Actions to Your BloX.

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 change the example in the multiple_indicators template from revenue in 2016 vs revenue in 2017, without using static text, you could use a placeholder.

"items": [
	{
	"type": "TextBlock",
	"spacing": "small",
	"text": "58%",
	"color": "attention",
	"size": "extralarge",
	"horizontalAlignment": "center",
	"weight": "bolder"
	},
	{
	"type": "TextBlock",
	"spacing": "small",
	"text": "Men",
	"color": "good",
	"size": "large",
	"horizontalAlignment": "center",
	"weight": "light"
}

By changing the value of the “text” key from 58% to {panel:Revenue}, you can display the Revenue.

"items": [
	{
	"type": "TextBlock",
	"spacing": "small",
	"text": "{panel:Revenue}",
	"color": "attention",
	"size": "extralarge",
	"horizontalAlignment": "center",
	"weight": "bolder"
	},	
	{
	"type": "TextBlock",
	"spacing": "small",
	"text": "2017",
	"color": "good",
	"size": "large",
	"horizontalAlignment": "center",
	"weight": "light"
	}

You can refer to dimensions and measures by adding {panel:ItemAlias} to the value of a key where ItemAlias is the string representing the dimension or measure on the panel. For example:

“text”: “{panel:Revenue}”,

Sisense currently supports up to 10 dimensions or measures in a panel. The values displayed are the first row of than dimension or measure.

If you have implemented a carousel, you can view additional rows by clicking the arrows on the left or right side of your widget.

If you have a list of items, and “showCarousel” has been set to false, a list of values will be displayed.

See Advanced Functions for more information.

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.

Card 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 Card 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 ‘Baseball’ template:

The ‘Baseball’ template has a white background color by default.

You can change this to pink by modifying the value of the backgroundColor key.

“backgroundColor”: “#FFFFFF”

To

“backgroundColor”: “#f18973”

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.

Actions turn your BloX into interactive business applications by letting your users perform certain actions inside a widget.

Sisense supports the following actions:

Action.OpenUrl

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

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

Action.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.

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

Action.ShowCard

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

"selectAction": {
	"type": "Action.ShowCard",
	"title": "Widget.ShowCard",
	"isWidget": "true",
	"card": {
	  "type": "AdaptiveCard",
	  "backgroundImage": "https://image.ibb.co/f8rOpc/5.png",	
	  "body": [
	   {
		"type": "TextBlock",
		"text": "Yearly Revenue?"}
	   ],
	"actions": [
	{
	"type": "Action.OpenUrl",
	"title": "Go to dashboard",
	"url": "https://sisense.com/app/main#/dashboards/5ab21jhkja7047cbffa23/widgets/5alijo8b1a3d4125a846076s?embed=true"e
	}
      ]
     }
   }

Advanced Functions

In many cases, there is more than one item in the result set. If you want to show them all, you can display them as a list as shown below:

Note: Due to performance concerns there is a limit of 100 list items.

Another option is to display your data in a carousel that your users can scroll through as shown in the example below:

In the Card Editor, you can change the value of the boolean key “showCarousel to true, to display a single set of items that users can toggle through or false to display a list.

{
"type": "AdaptiveCard",
"title": "Multi Purpose Card",
"showCarousel": true,
"panels": [
{

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

AdaptiveCard

Card schema for BloX.

Card Elements

TextBlock

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

Image

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

Containers

Container

Containers group items together.

ColumnSet

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

Column

Defines a container that is part of a ColumnSet.

FactSet

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

Fact

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

ImageSet

The ImageSet allows for the inclusion of a collection images like a photogallery.

Inputs

Input.Text

Input.Text collects text from the user.

Input.Number

Input.Number collects a number from the user.

Input.Date

Input.Date collects a date from the user.

Input.Time

Input.Time collects the time from the user.

Input.Toggle

Input.Toggle collects a true/false response from the user.

Input.ChoiceSet

Shows an array of Choice objects.

Input.Choice

Describes a Choice input. The value should be a simple string without a “,”.