Analytical Need

Attached below is a BloX template.

A common request is to have a 'From To' input at the top of the dashboard to affect a calendar range selection of dates.

To achieve this need we can utilize BloX's form capabilities.

Picking a date range in a calendar of a 'Date' filter and looking into the jaql created by it shows the following:

We can use input fields to change the date range values selected in the from:to keys.

Solution

We will use the skeleton that creates an action that affects the selected filters:

Make sure to change the "filterName" to the right filter column name.
Also, make sure to use the right jaql that needs to be populated.

Example:

{
"type": "ActionSet",
"actions": [
{
"type": "Filters",
"title": "Submit",
"data": {
"filters": [
{
"filterName": "Days in Date",
"filterJaql": {
"from": "",
"to": "",
"custom": true
}
}
]
}
}
]
}

Then, make sure to create the required Input field to pass on the input value and populate the from/to:

{
"type": "Input.Date",
"id": "data.filters[0].filterJaql.from",
"placeholder": "yyyy-mm-dd",
"defaultValue": "",
"style": {
"width": "100%"
},
"borderRadius": "4px",
"borderStyle": "none",
"backgroundColor": "#F4F4F8"
}

The "id" should hold the entire path of the key that needs to be populated with the value.

If you prefer you can use this JSON template file for the full script:

json script

{

"card": {

"style": "",

"script": "",

"title": "",

"showCarousel": true,

"body": [

{

"type": "Container",

"width": "90%",

"style": {

"margin": "0 auto"

"items": [

{

"spacing": "large",

"type": "TextBlock",

"text": "From Date",

"weight": "light",

"color": "black"

{

"type": "Input.Date",

"id": "data.filters[0].filterJaql.from",

"placeholder": "yyyy-mm-dd",

"defaultValue": "",

"style": {

"width": "100%"

"borderRadius": "4px",

"borderStyle": "none",

"backgroundColor": "#F4F4F8"

{

"spacing": "medium",

"type": "TextBlock",

"text": "To Date",

"color": "black"

{

"type": "Input.Date",

"id": "data.filters[0].filterJaql.to",

"placeholder": "yyyy-mm-dd",

"defaultValue": "",

"style": {

"width": "100%"

"borderRadius": "4px",

"borderStyle": "none",

"backgroundColor": "#F4F4F8"

{

"type": "ActionSet",

"actions": [

{

"type": "Filters",

"title": "Submit",

"data": {

"filters": [

{

"filterName": "Days in Date",

"filterJaql": {

"from": "",

"to": "",

"custom": true

}

]

}

]

}

]

}

]

"config": {

"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

}