CheckBox using Blox without Action Button

Hello everyone,

I have created a Blox widget which shows a list of values with checkboxes.

I am trying to make the check boxes "actionable", meaning that when a checkbox is ticked, then my dashboard filter adjusts.

I have tried to utilize this widget script, but it doesn't seem to work:

widget.on('processresult', function(se, ev){
	ev.result.unshift(allObject)
})

widget.on('ready', function(se, ev){
	
	var filterName = 'Chain Name'
	
	var select = document.getElementById(`data.filters[2].filterJaql.members[0]`);
	
	dashboardFilter = prism.activeDashboard.filters.$$items.find(el => el.jaql.title == filterName)
	
	if(dashboardFilter && dashboardFilter.jaql.filter && dashboardFilter.jaql.filter.members)
	{
		select.value = dashboardFilter.jaql.filter.members[0]
	}
	
	select.addEventListener("change", function(e){ 
		if(e.target.value == "All")
		{
			filter = {
				"explicit": false,
				"multiSelection": true,
				"all": true
			}
		}else
		{
			filter = {
				"explicit": true,
				"multiSelection": true,
				"members": [
					e.target.value
				]
			}
		}

		dashboardFilter = prism.activeDashboard.filters.$$items.find(el => el.jaql.title == filterName)
		var filterOptions = {
			save: true,
			refresh: true,
		}
		dashboardFilter.jaql.filter = filter
		prism.activeDashboard.filters.update(dashboardFilter, filterOptions)
	});

})

Can anyone help me with this?

Michalis Gregoriou

Posted 1 year ago·Last reply 1 year ago

6 comments

Michalis Gregoriou

OP1 year ago

Hey JeremyFriedel ,

Thank you for getting back with this wonderful script!

It looks like it's working properly!

The only feedback that I noticed is, when de-selecting all the checkboxes. In the "target" filter it doesn't "return" to the Include all mode.

Is there a way to fine-tune this scenario?

Jeremy Friedel

·1 year ago

No problem Mike, great to hear!

As noted in the first comment this might need some modification to match the specific widget, but this general code example shows how the "Include All" functionality for no boxes checked can be set.

/*
 * 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, set filter to "Include All"
        const includeAllFilter = {
          explicit: false,
          multiSelection: true,
          all: true
        };

        const filterOptionsIncludeAll = {
          save: true, // Save filter state
          refresh: true // Refresh dashboard widgets
        };

        dashboardFilterObject.jaql.filter = includeAllFilter;
        prism.activeDashboard.filters.update(dashboardFilterObject, filterOptionsIncludeAll);

        // Optional debug logging
        if (enableDebugLogging) {
          console.log("No checkboxes selected. Filter set to include all.");
        }
      }
    });
  });

});

Jeremy Friedel

·1 year ago

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

DRay

·1 year ago

JeremyFriedel, are you able to help here?

DRay

·1 year ago

Hi MikeGre.

Thank you for reaching out. I see your question hasn't gotten a response yet, so I'm asking internally to try and get you an answer.

Michalis Gregoriou

OP1 year ago

Thank you DRay !