How to Create BloX Custom 'From-To' Filter -- All Dates with “Clear” Button

[Anonymous]

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. 

[Astroraf]

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]

Hi @Astroraf,

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

[Astroraf]

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

@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". 

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.

Best Regards, Lily

[Astroraf]

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]

@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_worksuite]

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.