Add presets to a Blox date filter widget

We have some dashboards that have widgets as filters. One of these is a Blox widget that functions as a date filter, which I created with help from the community here. I recently added presets to the date filter to make it easier and faster to apply date filtering.

Create a Blox Widget

Paste the script below in the script editor section.

{
    "style": ".blox-slides button:hover{background-color:#014E66 !important;} .date-input-container { position: relative; } .date-input-container input[type='date'] { cursor: pointer; } .date-input-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; cursor: pointer; } .date-input-container input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 10px; width: 20px; height: 20px; cursor: pointer; z-index: 2; }",
    "title": "",
    "showCarousel": true,
    "carouselAnimation": {
        "showButtons": false
    },
    "script": "setTimeout(function() { const fromInput = document.getElementById('SelectVal_from'); const toInput = document.getElementById('SelectVal_to'); function formatDate(date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return year + '-' + month + '-' + day; } function setDates(fromDate, toDate) { if (fromInput) fromInput.value = formatDate(fromDate); if (toInput) toInput.value = formatDate(toDate); } function getDateRanges() { const today = new Date(); const currentYear = today.getFullYear(); const currentMonth = today.getMonth(); const currentQuarter = Math.floor(currentMonth / 3); return { last30days: { from: new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000), to: today }, quarter: { from: new Date(currentYear, currentQuarter * 3, 1), to: new Date(currentYear, (currentQuarter + 1) * 3, 0) }, ytd: { from: new Date(currentYear, 0, 1), to: today }, lastyear: { from: new Date(currentYear - 1, 0, 1), to: new Date(currentYear - 1, 11, 31) } }; } const ranges = getDateRanges(); document.querySelectorAll('[data-filter-type]').forEach(function(btn) { btn.addEventListener('click', function() { const filterType = this.getAttribute('data-filter-type'); if (ranges[filterType]) { setDates(ranges[filterType].from, ranges[filterType].to); } }); }); if (fromInput) { fromInput.addEventListener('click', function(e) { if (e.target.tagName === 'INPUT') { e.target.showPicker ? e.target.showPicker() : e.target.click(); } }); fromInput.style.cursor = 'pointer'; } if (toInput) { toInput.addEventListener('click', function(e) { if (e.target.tagName === 'INPUT') { e.target.showPicker ? e.target.showPicker() : e.target.click(); } }); toInput.style.cursor = 'pointer'; } }, 1000);",
    "body": [
        {
            "type": "Container",
            "width": "90%",
            "style": {
                "margin": "0 auto"
            },
            "items": [
                {
                    "type": "ActionSet",
                    "actions": [
                        {
                            "type": "date-preset",
                            "title": "Last 30 Days",
                            "style": {
                                "color": "white",
                                "background-color": "#007FAA"
                            },
                            "data": {
                                "FilterType": "last30days",
                                "FilterFields": [
                                    "[Dm_dates.date_data (Calendar)]"
                                ]
                            }
                        },
                        {
                            "type": "date-preset",
                            "title": "This Quarter",
                            "style": {
                                "color": "white",
                                "background-color": "#007FAA"
                            },
                            "data": {
                                "FilterType": "quarter",
                                "FilterFields": [
                                    "[Dm_dates.date_data (Calendar)]"
                                ]
                            }
                        },
                        {
                            "type": "date-preset",
                            "title": "Year to Date",
                            "style": {
                                "color": "white",
                                "background-color": "#007FAA"
                            },
                            "data": {
                                "FilterType": "ytd",
                                "FilterFields": [
                                    "[Dm_dates.date_data (Calendar)]"
                                ]
                            }
                        },
                        {
                            "type": "date-preset",
                            "title": "Last Year",
                            "style": {
                                "color": "white",
                                "background-color": "#007FAA"
                            },
                            "data": {
                                "FilterType": "lastyear",
                                "FilterFields": [
                                    "[Dm_dates.date_data (Calendar)]"
                                ]
                            }
                        }
                    ]
                },
                {
                    "type": "Container",
                    "style": {
                        "display": "flex",
                        "flexDirection": "row",
                        "justifyContent": "space-between",
                        "marginTop": "20px",
                        "gap": "10px"
                    },
                    "items": [
                        {
                            "type": "Container",
                            "style": {
                                "width": "48%"
                            },
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "From",
                                    "weight": "lighter",
                                    "color": "black"
                                },
                                {
                                    "type": "Container",
                                    "style": {
                                        "position": "relative"
                                    },
                                    "items": [
                                        {
                                            "type": "Input.Date",
                                            "id": "SelectVal_from",
                                            "placeholder": "mm/dd/yyyy",
                                            "calendar": true,
                                            "style": {
                                                "width": "100%",
                                                "padding": "14px",
                                                "background-color": "#F4F4F8",
                                                "border-radius": "8px",
                                                "border": "1px solid #ccc",
                                                "font-size": "16px",
                                                "cursor": "pointer"
                                            }
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "type": "Container",
                            "style": {
                                "width": "48%"
                            },
                            "items": [
                                {
                                    "type": "TextBlock",
                                    "text": "To",
                                    "weight": "lighter",
                                    "color": "black"
                                },
                                {
                                    "type": "Container",
                                    "style": {
                                        "position": "relative"
                                    },
                                    "items": [
                                        {
                                            "type": "Input.Date",
                                            "id": "SelectVal_to",
                                            "placeholder": "mm/dd/yyyy",
                                            "calendar": true,
                                            "style": {
                                                "width": "100%",
                                                "padding": "14px",
                                                "background-color": "#F4F4F8",
                                                "border-radius": "8px",
                                                "border": "1px solid #ccc",
                                                "font-size": "16px",
                                                "cursor": "pointer"
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "type": "ActionSet",
                    "style": {
                        "marginTop": "20px",
                        "text-align": "center"
                    },
                    "actions": [
                        {
                            "type": "DateX",
                            "id": "submit_btn",
                            "title": "Apply",
                            "style": {
                                "color": "white",
                                "background-color": "#007FAA"
                            },
                            "data": {
                                "FilterFields": [
                                    "[Dm_dates.date_data (Calendar)]"
                                ]
                            }
                        },
                        {
                            "type": "filter-date-clear",
                            "title": "Clear",
                            "style": {
                                "color": "white",
                                "background-color": "#007FAA"
                            },
                            "data": {
                                "FilterFields": [
                                    "[Dm_dates.date_data (Calendar)]"
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

Create the necessary actions for the buttons to work:

date-preset

const filterType = payload.data.FilterType;
const filterDims = payload.data.FilterFields;
const dash = payload.widget.dashboard;
const now = new Date();
const yyyy = now.getFullYear();
const mm = String(now.getMonth() + 1).padStart(2, '0');
const dd = String(now.getDate()).padStart(2, '0');
const today = `${yyyy}-${mm}-${dd}`;

let fromDate = '';
let toDate = today;
	//Year to date
if (filterType === 'ytd') {
    fromDate = `${yyyy}-01-01`;
 	 //Quarter
} else if (filterType === 'quarter') {
    const q = Math.floor(now.getMonth() / 3);
    const startMonth = q * 3 + 1;
    fromDate = `${yyyy}-${String(startMonth).padStart(2, '0')}-01`;
  	//Last Year
} else if (filterType === 'lastyear') {
    fromDate = `${yyyy - 1}-01-01`;
    toDate = `${yyyy - 1}-12-31`;
  	// Last 30 days: from 30 days ago to today 
} else if (filterType === 'last30days') {
    const pastDate = new Date(now);
    pastDate.setDate(pastDate.getDate() - 30);
    const pastY = pastDate.getFullYear();
    const pastM = String(pastDate.getMonth() + 1).padStart(2, '0');
    const pastD = String(pastDate.getDate()).padStart(2, '0');
    fromDate = `${pastY}-${pastM}-${pastD}`;
} else {
    console.log('Unknown FilterType:', filterType);
    if (typeof sendResponse === 'function') sendResponse(false);
    return;
}

let newFilter = {};
$('#SelectVal_from').val(fromDate);
$('#SelectVal_to').val(toDate);
newFilter = {
    jaql: {
        dim: "",
        filter: {
            from: fromDate,
            to: toDate
        }
    }
};
filterDims.forEach(function(dim) {
    newFilter.jaql.dim = dim;
    dash.filters.update(newFilter, {
        refresh: true,
        save: true
    });
});

Datex -- Apply button

var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = yyyy + '-' + mm + '-' + dd;

const filVal_from = payload.data.SelectVal_from == '' ? '1800-01-01' : payload.data.SelectVal_from;
const filVal_to = payload.data.SelectVal_to == '' ? '2100-01-01' : payload.data.SelectVal_to;
const filterDims = payload.data.FilterFields;

const dash = payload.widget.dashboard;

let newFilter = {};

console.log(filVal_from);
console.log(filVal_to);

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 })
})

Clear dates

var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = yyyy + '-' + mm + '-' + dd;

const filVal_from = "1800-01-01"
const filVal_to = '2100-01-01'
const filterDims = payload.data.FilterFields;

const dash = payload.widget.dashboard;
let newFilter = {};

newFilter = {
    jaql: {
        dim: "",
        filter: {
            from: filVal_from,
            to: filVal_to
        }
    }
};
$('#SelectVal_from').val('');
$('#SelectVal_to').val('');


filterDims.forEach(function (dim) {
    newFilter.jaql.dim = dim;
    dash.filters.update(newFilter, { refresh: true, save: true })
})

Save everything and try it out.

Zach Williams

Posted 11 months ago

0 comments