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.
