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 buttons and popups.

Prerequisites

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

• JavaScript: for writing custom actions and handling logic

• CSS: for styling and customizing widget appearance

• HTML: for understanding the DOM structure and templates

Creating a BloX Template

1. From the dashboard, create a widget using any chart (such as a basic indicator or bar chart).

2. From the sidebar, click Advanced Configuration.

   

3. Change the widget type to BloX. 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.

  • Writing 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 environment 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 an alert 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 within a drop-down field.

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
            }
          }
        ]
      }
    }
  ]
}

The following screenshots highlight the section of code that defines the drop-down list content and how it appears: