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
    }
}
Version history
Last update:
‎03-02-2023 08:30 AM
Updated by:
Contributors
Community Toolbox

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

Product Feedback Forum:

Need additional support?:

Submit a Support Request

Sisense Privacy Policy