Beginner's Guide to Sisense BloX with Actions

Sisense supports building custom interactive widgets for your dashboard using Sisense BloX. This section describes the components of a BloX widget, illustrating how to add interactive elements such as popups and dropdowns.

Prerequisites

Before proceeding, a working knowledge of the following is recommended:

• JavaScript: for implementing custom actions and controlling widget logic

• CSS: for defining styles and modifying widget appearance

• HTML: for understanding the DOM structure and working with widget templates

Creating a BloX Template

1. From the dashboard, click > Advanced Configuration. The widget editor opens.

   

2. Change the widget type to BloX (top left-hand corner). The template editor opens and displays the JSON structure.

   

The Sisense BloX Template Editor contains the following key elements:

• Editor: Used to write and modify the JSON structure that defines the layout and behavior of the widget.

  • Creating widget layout (components)

  • Adding styles

  • Referring to actions

  • Using data via {{value}} syntax

• Configuration: Create custom, reusable input fields (like drop-downs, text boxes) to customize a BloX widget without editing code. This includes:

  • Making BloX reusable with custom settings

  • Enabling users to change text, color, or fields without modifying the code

  • Dynamic customization

• Snippets: A collection of pre-built mini templates or code blocks (e.g. JSON) that can be inserted into the Editor. They allow UI components to be built quickly while reducing syntax errors.

• Actions: Define custom action handlers (JavaScript functions that can be called from the widget). They are used to create buttons and logic, call APIs, and apply filters. These include:

  • Alert popups

  • HTTP requests

  • Dynamic interaction logic

  • Accessing $context for filters and metadata

BloX Widget Components

Debugging the Full BloX Editor Session

The BloX editor can be used to debug BloX code when configuring custom actions, data input mappings, or dynamic template conditions.

To debug BloX code:

1. Enable Chrome DevTools:

   1. Open the BloX widget in the BloX editor.

   2. Press F12 or right-click and select Inspect to launch Chrome DevTools.

   3. Open the Console tab.

2. Insert debugging statements:

   To inspect values or pause execution, add console.log() or debugger; statements in the following areas:

   • My Actions: to track custom JavaScript behavior.

   • Data Input Mappings: to verify incoming values and context.

   • Dynamic Template Conditions: to log or break on logic that controls visibility or styling.

3. Preview and interact:

   • Use the Live Preview in the BloX editor (or test via a dashboard).

   • Interact with the widget to trigger your custom logic.

   • Monitor the Console tab for real-time logs or execution pauses if debugger; is used.

Additional Resources

For deeper insights and examples, refer to the Mastering Custom Actions in Sisense.

BloX Code Examples

Alert Button: Display Popup Message

To create a button that triggers a popup alert:

1. In the Editor section of BloX, enter the following code.

{
   "title": "Button Test",
   "body": [
       {
           "type": "TextBlock",
           "text": "❤️ Welcome to Blox ❤️",
           "style": {
               "text-align": "center",
               "font-size": "22px",
               "margin": "30px"
           }
       }
   ],
   "actions": [
       {
           "type": "showMessage",
           "title": "Click me!",
           "opts": {
               "message": "❤️ I think you are ❤️"
           }
       }
   ]
}

2. From the Actions tab, click > Edit Action.

   

3. Update the action snippet as follows:

   Copy

   const { message } = payload.opts;
   alert(message)

4. Click Next.

   

5. Click Create.

   

6. In the BloX widget, click Apply.

   

7. Click Are you having fun? to test your widget.

   

   The following message appears:

   

Dynamic Drop-down Filter

Use the Dynamic Drop-down Filter to filter results using a drop-down menu.

The filter creates a drop-down list using values from a specified field, allowing users to refine the dashboard data. It can be used to filter by categories such as brand or region.

Add the following code to the Editor section of BloX:

{
  "showCarousel": true,
  "carouselAnimation": {
    "delay": 0,
    "showButtons": false
  },
  "body": [
    {
      "type": "Container",
      "style": {
        "justify-items": "center",
        "align-items": "center"
      },
      "items": [
        {
          "type": "TextBlock",
          "spacing": "medium",
          "size": "large",
          "text": "Select a Specialty",
          "style": {
            "text-align": "center",
            "font-weight": "600"
          }
        },
        {
          "type": "Container",
          "spacing": "small",
          "items": [
            {
              "type": "Input.ChoiceSet",
              "id": "data.filters[0].filterJaql.members[0]",
              "displayType": "compact",
              "style": {
                "align-self": "center"
              },
              "choices": "{choices:Specialty}"
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
    "type": "Filters",
      "title": "Apply",
      "data": {
        "filters": [
          {
            "panelName": "Specialty",
            "filterJaql": {
              "explicit": true,
              "members": [""]
            }
          }
        ]
      }
    },
    {
      "type": "Filters",
      "title": "Clear",
      "data": {
        "filters": [
          {
            "panelName": "Specialty",
            "filterJaql": {
              "explicit": true,
              "all": true
            }
          }
        ]
      }
    }
  ]
}

To select the dataset to be used for the dropdown menu:

In the lefthand panel, click the plus icon and add the field or fields to be used to populate the dropdown menu.

At the top of the editor, click Apply. The new widget appears on the dashboard.