cancel
Showing results for 
Search instead for 
Did you mean: 
Community_Admin
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.

Community_Admin_0-1634624683332.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:

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:

(SQL)

{

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

Community_Admin_0-1634624776088.png

 

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

    }

}

Was this article helpful?

Version history
Last update:
‎10-18-2021 11:28 PM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request