Blog Post

Use Case Gallery
6 MIN READ

Add presets to a Blox date filter widget

zach_myt's avatar
zach_myt
Data Pipeline
08-15-2025

Adding presets to allow for faster date filtering.

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.

  1. Create a Blox Widget
  2. 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)]"
                                    ]
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }

     

  3. Create the necessary actions for the buttons to work:

    1. 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
          });
      });

       

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

       

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

       

    4. Save everything and try it out. 
Updated 08-19-2025
Version 2.0
No CommentsBe the first to comment

Related Content

Related Content