cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member

 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.
mceclip3.png
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:
mceclip0.png
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:
mceclip1.png
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
    }
}
Rate this article:
Comments
bpeikes
9 - Travel Pro
9 - Travel Pro

Great article. Was able to use this, one question though, when I click on my Action button, the dates reset to showing mm/dd/yyyy. I was hoping that it would keep the values that were applied.

lori_
7 - Data Storage
7 - Data Storage

Hi @intapiuser , 

Thank you so much for sharing. I have tried this in my dashboard but is not working. Made the following modifications since the column name is Days in DATE.  Appreciate any help.

 

{
"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": "mm/dd/yyyy",
"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": "mm/dd/yyyy",
"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": "01/01/2023",
"to": "07/31/2023",
"custom": true
}
}
]
}
}
]
}
]
}
]
}}

 

 

Version history
Last update:
‎03-02-2023 08:30 AM
Updated by:
Contributors