on - edited on by
DRay
{
"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.
