cancel
Showing results for 
Search instead for 
Did you mean: 
Anonymous
Not applicable

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. 

DRay_0-1707856581735.png

 

Rate this article:
Comments
Astroraf
10 - ETL
10 - ETL

Hi @DRay ,

I am also trying to replicate this but all the graphs I have for this example says "The dimensions, Sample ECommerce. [Commerce.Date (Calendar)], was not found". Do I need create a calender column in this sample model or is there another solution to this?

 

 

DRay
Community Team Member
Community Team Member

Hi @Astroraf,

If the dimension is not in the data model it will need to be created.

Astroraf
10 - ETL
10 - ETL

@DRay , there is a Commerce.Date option but not specifically a Commerce.Date (Calendar) option in the data model. I am just wondering if putting the Calendar option at the end is just telling it to give it in a calendar option. 

Liliia_DevX
Sisense Team Member
Sisense Team Member

@Astroraf hi!

Please review the "dim" you need to use in the Blox script in the web browser console. To do so, please open the Developers Tools (for example, in Chrome press F12) -> navigate to Network and modify the date filter you want to be used in the Blox template. Then click on the "Payload" of the jaql request for your filter and check "dim". 

Liliia_DevX_0-1726558383930.png

The part (Calendar) is not a part of the title so that you need to make sure the column "Date" exists in the "Commerce" table and has a Date-Time data type.

Liliia_DevX_1-1726558543436.png

Best Regards, Lily

Astroraf
10 - ETL
10 - ETL

Hi @Liliia_DevX 

 

What made the filter apply was removing the Commerce.Date (Calendar) filter on each widget to have an effect. Could you explain to me why this made the filter work?

Liliia_DevX
Sisense Team Member
Sisense Team Member

@Astroraf if you had a filter named "Commerce.Date (Calendar)," it was likely searching for a dimension resembling "Commerce.Date (Calendar) (Calendar)." The "(Calendar)" portion is part of the metadata.

Best,

Lily

yob
7 - Data Storage
7 - Data Storage

Hi @Liliia_DevX and @DRay !

Thank you for for sharing your insights on this. Just wanted to ask currently, when I use the code above whenever I click submit, the dates are being cleared as shown here in this video. 

Is there a way for the dates not to be cleared when the user clicks the submit button? It will only be cleared once the clear button is clicked.

 

Version history
Last update:
‎02-13-2024 12:36 PM
Updated by:
Contributors