How to Create BloX Custom 'From-To' Filter -- All Dates with “Clear” Button
How to Create BloX Custom 'From-To' Filter -- All Dates with “Clear” Button We will create a Blox widget to have date filters with the 'From and To' fields and the button Clear. Actually, this button will add a whole range of dates to the filter. Create a new BloX widget and copy-paste the next code to the Editor window: { "style": "", "script": "", "title": "", "showCarousel": true, "carouselAnimation": { "showButtons": false }, "body": [ { "type": "Container", "width": "20%", "style": { "margin": "0 auto" }, "items": [ { "spacing": "large", "type": "TextBlock", "text": "From Date", "weight": "light", "color": "black" }, { "type": "Input.Date", "id": "SelectVal_from", "placeholder": "", "defaultValue": "", "style": { "width": "100%" }, "borderRadius": "4px", "borderStyle": "none", "backgroundColor": "#F4F4F8" }, { "spacing": "medium", "type": "TextBlock", "text": "To Date", "color": "black" }, { "type": "Input.Date", "id": "SelectVal_to", "placeholder": "", "defaultValue": "", "style": { "width": "100%" }, "borderRadius": "4px", "borderStyle": "none", "backgroundColor": "#F4F4F8" }, { "type": "ActionSet", "actions": [ { "type": "filter-date", "title": "Submit", "data": { "FilterFields": [ "[Commerce.Date (Calendar)]" ] } }, { "type": "filter-datecls", "title": "Clear", "data": { "FilterFields": [ "[Commerce.Date (Calendar)]" ] } } ] } ] } ] } Next code please copy to the Configuration tab { "fontFamily": "Open Sans", "fontSizes": { "default": 16, "small": 14, "medium": 22, "large": 32, "extraLarge": 50 }, "fontWeights": { "default": 400, "light": 100, "bold": 800 }, "containerStyles": { "default": { "backgroundColor": "#ffffff", "foregroundColors": { "default": { "normal": "#3A4356" }, "white": { "normal": "#ffffff" }, "grey": { "normal": "#9EA2AB" }, "orange": { "normal": "#f2B900" }, "yellow": { "normal": "#ffcb05" }, "black": { "normal": "#000000" }, "lightGreen": { "normal": "#93c0c0" }, "green": { "normal": "#2BCC7F" }, "red": { "normal": "#FA5656" }, "accent": { "normal": "#2E89FC" }, "good": { "normal": "#54a254" }, "warning": { "normal": "#e69500" }, "attention": { "normal": "#cc3300" } } } }, "imageSizes": { "default": 40, "small": 40, "medium": 80, "large": 120 }, "imageSet": { "imageSize": "medium", "maxImageHeight": 100 }, "actions": { "color": "", "backgroundColor": "", "maxActions": 5, "spacing": "large", "buttonSpacing": 20, "actionsOrientation": "horizontal", "actionAlignment": "right", "margin": "0", "showCard": { "actionMode": "inline", "inlineTopMargin": 16, "style": "default" } }, "spacing": { "default": 5, "small": 5, "medium": 10, "large": 20, "extraLarge": 40, "padding": 0 }, "separator": { "lineThickness": 1, "lineColor": "#D8D8D8" }, "factSet": { "title": { "size": "default", "color": "default", "weight": "bold", "warp": true }, "value": { "size": "default", "color": "default", "weight": "default", "warp": true }, "spacing": 20 }, "supportsInteractivity": true, "imageBaseUrl": "", "height": 197 } Now we need to add 2 Actions - 'filter-date' (for the filter) and 'filter-datecls' (for “clear” button). So, go to the Actions tab and create the first Action with name - filter-date const filVal_from = payload.data.SelectVal_from const filVal_to = payload.data.SelectVal_to const filterDims = payload.data.FilterFields; const dash = payload.widget.dashboard; let newFilter = {}; newFilter = { jaql: { dim: "", filter: { from: filVal_from, to: filVal_to } } }; filterDims.forEach(function (dim) { newFilter.jaql.dim = dim; dash.filters.update(newFilter, { refresh: true, save: true }) }) After this press Next and Create buttons. And now we will add the second Action with name - 'filter-datecls' const filVal_from = "1980-03-04T00:00:00" const filVal_to = "2063-03-04T00:00:00" const filterDims = payload.data.FilterFields; const dash = payload.widget.dashboard; let newFilter = {}; newFilter = { jaql: { dim: "", filter: { from: filVal_from, to: filVal_to } } }; filterDims.forEach(function (dim) { newFilter.jaql.dim = dim; dash.filters.update(newFilter, { refresh: true, save: true }) }) After this press Next and Create buttons. Here we found how to create a nice-looking BloX widget with dates filters and a "clear" button. You can add some new options that will better fit your needs. ALT text: A user interface displaying a data management tool. On the left side, there is an area labeled "Add Rows" with entries from different years (2000 to 2022). On the right side, there are options for selecting "Single" or "Multiple" items, along with a button to "Submit" or "Clear." The overall layout is organized and features dropdown menus and buttons for user interaction.Interactive Time Period Comparison with BloX & Custom Actions
Here is a use case on how to leverage BloX widgets in Sisense to create an interactive dashboard for comparing any KPI between two different time periods. This solution allows users to select two months (or any two time periods) and dynamically calculates the percentage change in the KPI between these selected months.Quickly Add Unique Identifier to Blox Action Buttons Without Modifying Blox Template
A customer recently had the unusual request for a method to select and distinguish, via a CSS selector used within a custom Javascript action, for a specific Blox buttons in a existing Blox widget that contained multiple identical buttons, identical in inner text and all other parameters, without adding any new lines to the Blox template to add unique identifiers.How to embed an image from an external drive in the Sisense widget (a Blox template)
This article explains how you can embed images from an external drive (Google Drive) to the Sisense widget. Note: The solution is implemented with the help of the Blox plugin and on the L2023.3 Sisense version. In order to embed an image into the Blox widget, you need to make sure that the Blox plugin is enabled on your instance. To do so: 1. Open the Admin tab. 2. Navigate to Add-ons page (Server & Hardware). 3. Toggle the Blox plugin on. Make sure it's triggered the plugins rebuild. Once the Blox plugin is enabled, navigate to Analytics tab -> create a new Blox widget and import the template attached by clicking 3 dots menu in the Blox edit mode: Once it's done, you need to update the following part of the template: <img src='URL to the image'></img> In our case, the image is hosted on the Google Drive so that we put the URL to the image on the Google Drive. It's displayed in a widget as on the screenshot below: The Blox template is attached to this guide. Feel free to use this template as an example to create your own widgets using the Blox plugin. Note: If your Google Drive URL gives a 403 error https://drive.google.com/uc?export=view&id={img-ID} change it to https://lh3.google.com/u/0/d/{img-ID} Additional Resources: Sisense Blox Tutorials Sisense Developer's Experience Embedded BloX Playground 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 own 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 not covered by Sisense warranty and support services.Migrating Blox Custom Actions
When relocating Sisense resources from one server to another, the Sisense Rest API is a possible method for transferring Sisense components and objects like dashboards, users, groups, and datasources. Similarly, Blox Custom Actions can be migrated through Sisense Rest API endpoints.Sync Blox Input Element with Current Filter State
When creating a Blox widget altering a filter within a dashboard or widget, it is sometimes advantageous to modify the default behavior, that upon activating a Blox action , the Blox widget input or inputs retain the recently entered values instead of reverting to the default Blox inputs set in the Blox template. Additionally, when a user has the permission to directly modify the relevant filter, bypassing Blox widget actions, and subsequently makes changes to the filter that the Blox widget is designed to manipulate, the default Blox input values may no longer match with the current state of the filter.
