[Added] Browse Filter (nuBuilder 4.9)

[admin]

As of nuBuilder version 4.8.x (work in progress), a new browse filter capability has been introduced.
Instead of using a select field to filter a column, a filter symbol is now displayed next to the browse title.

Clicking on the filter icon opens a popup with filter options and a search field.

The advantages of this new approach are:

• Search functionality included
• Better mobile experience
• More compact design (no select element below the title)

The traditional select filter is still available and can be used if preferred.

Try the feature in action! Preview it now using our online demo:
https://demo.nubuilder.cloud/


More improvements are on the way — stay tuned!

[kev1n]

Added a new option called multiSelect to filter for multiple items.
As of Files Version: V.4.9.1-2025.08.15.00

popup_multi.png

Code: Select all

// Usage Example

// Define your items in the format you requested
var filterItems = [
    ["-1", "(blank)"],
    ["0", "None"],
    ["1", "No Blanks"],
    ["2", "No Duplicates"],
    ["3", "No Duplicates/Blanks"]
];

nuAddBrowseFilter('nu5fdb67accbbfa6d').nuSearchablePopup({
    title: "Select Validation Types",
    items: filterItems,
    searchPlaceholder: "Search...",
    applyText: "Apply Filter",
    cancelText: "Cancel",
    multiSelect: true,
    clearText: "Clear All",
    selectText: "Select All",
    checked: [], // or provide pre-selected values like ['0', '1']
    onSelected: function(selectedItems) {
        console.log('Selected items:', selectedItems);
    },
    onClear: function() {
        console.log('Filter cleared');
    }
});

Alternatively, initialise it with nuSearchableMultiPopup(), which automatically enables multi-select, so you don’t need to pass the multiSelect: true, option.


SQL WHERE example:

Code: Select all

WHERE (
      sob_all_label = '#nu5bad6cb375bd72e_filter#'
      OR left('#nu5bad6cb375bd72e_filter#', 1) IN ('#', '')
      OR LOCATE(sob_all_label, '#nu5bad6cb375bd72e_filter#') > 0
    )