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. 

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.

[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.

[Astroraf]

@Liliia_DevX @DRay also asking on this thread if there is any solution to keep the dates to stay when we filter from-to?

[Liliia_DevX]

@Astroraf please clarify what you mean to keep the dates? I'll check if we have any alternatives

[Astroraf]

Hi @Liliia_DevX 

When I choose a timeframe, so SelectVal_from and SelectVal_to, and click submit, these dates disappear. I am trying to have these dates stay or show so that a user knows what dates they have chosen when the data is displayed with the charts. When I click Clear, do the dates reset, and then I pick another set of new dates. 

[Liliia_DevX]

@Astroraf thanks for the clarification. Please try to use the action code below. It worked for me and the dates did not reset with the page refresh. 

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

And also add this script to the widget:

widget.on('ready', function() {
	
	// replace with filter name
	var filterName = "Days in Date";

	// ----------Find date filter----------
    let dateFilter = dashboard.filters.$$items.find((item) => {
        if (item.jaql && item.jaql.title.indexOf(filterName) !== -1) {
            return true
        }
    })
	
	
	// ----------Set selected 'from' value as placeholder for input field----------
	var checkInvalid_from = typeof dateFilter.jaql.filter.from == 'undefined' || dateFilter.disabled== true;
	//console.log(dateFilter.jaql.filter.from)
	var filterValue_from = (checkInvalid_from) ? 'date' : dateFilter.jaql.filter.from;

	
	//Set selected 'from' value as placeholder and default value for input field
	//$('#SelectVal_from', element).attr('placeholder', filterValue_from);
	$('#SelectVal_from', element).attr('value', filterValue_from);
	
	
	// ----------Set selected 'to' value as placeholder for input field----------
	var checkInvalid_to = typeof dateFilter.jaql.filter.to == 'undefined' || dateFilter.disabled== true;
	//console.log(dateFilter.jaql.filter.to)
	var filterValue_to = (checkInvalid_to) ? 'date' : dateFilter.jaql.filter.to;
	
	//Set selected 'to' value as placeholder and default value for input field
	//$('#SelectVal_to', element).attr('placeholder', filterValue_to);
	$('#SelectVal_to', element).attr('value', filterValue_to);	
	
	
	
});

Best Regards, Lily

[Astroraf]

@Liliia_DevX it worked! I didn't see your script editor code. For anyone else trying this, make sure your filter name on the Dashboard level matches the filter name in the script editor!