BloX Auto Slider

[intapiuser]

Disclaimer: Please note that this blog post contains one possible custom workaround solution for users with similar use cases. We cannot guarantee that the custom code solution described in this post will work in every scenario or with every Sisense software version. As such, we strongly advise users to test solutions in their environment prior to deploying them to ensure that the solutions proffered function as desired in their environment. For the avoidance of doubt, the content of this blog post is provided to you "as-is" and without warranty of any kind, express, implied, or otherwise, including without limitation any warranty of security and or fitness for a particular purpose. The workaround solution described in this post incorporates custom coding, which is outside the Sisense product development environment and is, therefore, not covered by Sisense warranty and support services.

Objective

When using actions in BloX, it is possible to use user input values in actions' payloads.

Unfortunately, the slider element is not considered an input field, and its values cannot be used in actions payloads.

In this post, I will provide a method to create an alternative Slider element in BloX.

This alternative slider will enable the user to:

1. Use a slider value in BloX actions
2. Automatically invoke an action once the slider handle stops
3. Hide the input field and action button (optional)

Method

This method will use the following BloX components:

1. The BloX script tag
2. A text input field
3. An action set containing a single action
4. Element style attributes

HIGH-LEVEL OVERVIEW

In order to compel the slider's value onto the actions, we will have the slider automatically update an input field. Since actions extract values from all input fields when clicked, this input's field will be included in any action.

We will also define the slider's behavior to click the automatically click the relevant action button, thus invoking the action with the new, updated information.

BloX's slider element is based on jQuery's slider. Though this slider is very flexible and powerful, not all of its capabilities have been implemented in the native slider element; for example: setting custom functions that can run when a slider's handle moved or stops.

In order to unlock those powerful capabilities, we will use BloX's script tag and create a customized slider using javascript code.

Implementation

ACTION SETUP

Create an action set similar to the following one:

{
   "type": "ActionSet",
   "class": "action-area",
   "actions": [
       {
         "type": "MyAction",
         "title": "Submit",
         "data": {
             "value": "0"
              }
          }
    ]
}

Make sure to define the attribute you would like to contain the slider value.

We are using an action set because it is a standard bloc element and therefore we can give it a class. This class will be useful later when we automate the click on the action.

INPUT SETUP

Create an input field that your slider can control.

{
   "type": "Input.Text",
   "id": "data.value",
   "class": "dynamic-value-input",
   "defaultValue": "0",
   "width": "100px",
}

In this example, I used a text input even though my slider will use numeric values.

If you have a choice, I recommend using text input as it's easiest to and update.

Make sure to give the input an id that points to the action attribute you would like it to update, as well as a class. We will use the class later to select the appropriate element to update with our slider.

CREATE THE SLIDER

First, create a simple text block element where you would like the slider to be positioned.

{
   "type": "TextBlock",
   "style": {
       "width": "400px"
   },
   "id": "",
   "text": "<div id=\"auto-fire-slider\"></div>"
}

This element's content should be a very simple HTML div tag containing an id. This ID should be unique, as we will use it to find the element that should host the slider.

Also, make sure to assign a significant width to the element, as its dimensions will not be updated once the slider is added into it.

Adding the slider into the card is done using BloX's script tag.

It's little known and underrated, and its job is to execute a JavaScript snippet once BloX is rendered.

(For those interested, it does so by appending an HTML script tag, containing the snippet to the card body).

Since BloX is JSON based, the snippet must fit into a single line, but below, I will post a more readable version.

If you choose to use it, just make sure to remove all line breaks.

bloxJQuery('#auto-fire-slider').slider({value: 0,min: 0,max: 100,step: 10,slide: (event, ui) => {$(event.target).closest('.blox').find('.dynamic-value-input').val(ui.value);},stop: (event, ui) => $(event.target).closest('.blox').find('blox .action-area button').click()}).slider('pips', {first: 'pip',last: 'pip',step: 1});

In this script, we use jQuery to find an element whose id is auto-fire-slider (That’s the div inside our text block) and turn it into a slider. We provide general definitions about its value and style, and we also add 2 functions named slide and stop.

Those functions are the main reason we used code to create the slider rather than the native slider element.

In this example, when the slider handle slides (is dragged to a new value), we find the input element and update its value.

When the slider stops (is dropped), we find the action button and fire a click event on it, invoking the action.

HIDING THE INPUT AND ACTION

Once you automate the slider’s effect on the input and action button, you might like to hide them from the user to create a slicker experience.

This can be easily done by adding the following style attribute to both the input element and the action set:

“style”: {“display”:”none”}

MULTIPLE SLIDERS

You can add multiple sliders.

Just make sure to add respective text blocks to hold them, input fields for them to update, attributes on the action’s payload, and most importantly, another copy of the script.

Make sure to update and adjust all id’s and classes as well, to prevent ambiguity.

bloxJQuery('#age-slider').slider({
value: 0,
min: 0,
max: 150,
step: 1,
slide: (event, ui) => {
$(event.target).closest('.blox').find('.age-input').val(ui.value);
},
stop: (event, ui) => $(event.target).closest('.blox').find('blox .action-area button').click()
}).slider('pips',
{
first: 'pip',
last: 'pip',
step: 1
});


bloxJQuery('#height-cm-slider').slider({
value: 0,
min: 0,
max: 220,
step: 1,
slide: (event, ui) => {
$(event.target).closest('.blox').find('.height-cm-input').val(ui.value);
},
stop: (event, ui) => $(event.target).closest('.blox').find('blox .action-area button').click()
}).slider('pips',
{
first: 'pip',
last: 'pip',
step: 1
});