CheckBox using Blox without Action Button

Hi MikeGre​ 

Below is a general example widget script demonstrating this functionality. Some modification may be required to match with the specific Blox template, including updating the dashboard filter title variable and the CSS selectors variable to match the widget's Blox structure and HTML.

Console logging can be enabled or disable via the enableDebugLogging variable.

This script updates the dashboard filter based on checkbox selections. Additional customizations, such as modifying how the selected choice text is processed beyond the full text, can be implemented if needed directly within the script.

The provided solution is self-contained and does not use any external Blox actions or Blox action buttons.

/*
 * Script to modify dashboard filters via Blox checkbox without using a Blox action button
 * 
 * This script uses a JS event listener for checkbox changes and updates a specified
 * dashboard filter to match the currently selected checkboxes.
 * 
 * Some modification may be required based on your widget's Blox and HTML structure.
 */

widget.on('ready', function() {

    // Configuration variables (adjust selectors as needed)
    const checkboxRowSelector = '.checkbox-label';
    const checkboxInputSelector = 'input[type="checkbox"]';
    const checkboxLabelSelector = '.input-text';
    const dashboardFilterTitle = 'Example'; // Change to match your filter title
    const enableDebugLogging = false; // enable to view console statements throughout script
  
    // Find the dashboard filter object
    const dashboardFilterObject = prism.activeDashboard.filters.$$items.find(
      filter => filter.jaql.title === dashboardFilterTitle
    );
  
    // Exit if dashboard filter is not found
    if (!dashboardFilterObject) {
      if (enableDebugLogging) {
        console.log(`Dashboard filter titled '${dashboardFilterTitle}' was not found.`);
      }
      return;
    }
  
    // Find all checkbox input elements
    const checkboxInputs = document.querySelectorAll(`${checkboxRowSelector} ${checkboxInputSelector}`);
  
    // Attach event listener to each checkbox input
    checkboxInputs.forEach(checkboxInput => {
      checkboxInput.addEventListener('change', function () {
  
        // Get all currently checked checkboxes
        const checkedCheckboxInputs = Array.from(
          document.querySelectorAll(`${checkboxRowSelector} ${checkboxInputSelector}:checked`)
        );
  
        // Extract labels from checked checkboxes
        const selectedLabels = checkedCheckboxInputs.map(inputElement => {
          const rowElement = inputElement.closest(checkboxRowSelector);
          const labelElement = rowElement ? rowElement.querySelector(checkboxLabelSelector) : null;
          return labelElement ? labelElement.textContent.trim() : null;
        }).filter(label => label !== null); // Remove any null entries
  
        // Deduplicate selected labels
        const uniqueSelectedLabels = [...new Set(selectedLabels)];
  
        // If there are selected labels, update dashboard filter
        if (uniqueSelectedLabels.length > 0) {
          const updatedFilter = {
            explicit: true, // Explicitly select provided members
            multiSelection: true, // Allow multiple selections
            members: uniqueSelectedLabels // Members to include in filter
          };
  
          const filterOptions = {
            save: true, // Save filter state
            refresh: true // Refresh dashboard widgets
          };
  
          // Apply updated filter settings to dashboard
          dashboardFilterObject.jaql.filter = updatedFilter;
          prism.activeDashboard.filters.update(dashboardFilterObject, filterOptions);
  
          // Optional debug logging
          if (enableDebugLogging) {
            console.log("Dashboard filter updated with selected values:", uniqueSelectedLabels);
          }
        } else {
          // No checkboxes selected, do not update filter
          if (enableDebugLogging) {
            console.log("No checkboxes selected. Filter was not updated.");
          }
        }
      });
    });
  
  });