[Idea] Filters - show selected values

[mklahorst]

When using the dropdown filter, it highlights the filter box when active, but would like to see the actual value that is selected so I know what the current filter is.

Is there a snippet to add to do this?

[OwenMelbz]

When you click the dropdown filter, it shows you which filter is currently active

If you're wanting to add it inline - then you can publish the filter views, and add overwrite them to show the selected one inline.

--

As this is a question rather than a bug (questions should be asked on stackoverflow) I'll close this ticket to keep the place tidy, however people can still contribute to the thread.

[mklahorst]

@owenmelbz Thanks for the info! Yes, I ran the publish commands and have those files.

Slightly new to Laravel - your package is amazing!

I am trying to understand best methodology for customizing vendor published files, like in this case the filter view partials in resources directory. Generally, if I customize this file, and then your package has a new update, do I run publish again and manually merge my customizations?

Sorry about asking such a general question here, but as the package developer, you might have some information to set me on the right path!

[lloy0076]

If you want to overwrite published files, you pass the --force command line option to php artisan vendor:publish (and the rest of that command).

[o15a3d4l11s2]

To resurrect this thread slightly - I did a small modification on the dropdown filter field to achieve this. Here is a demo. I find it easier when the selected value is displayed. I have to think of a better UI, though 🤫

[tabacitu]

I love it, great work @o15a3d4l11s2 .

I see one problem with this - if we do this for dropdown we should do it for all filters. I guess in most cases we can strip to 10 characters or so, so it doesn't get too long. But in other cases like select2_from_ajax... where you can select multiple items... showing the selected items could get pretty long...

This is a design problem - let me check with a designer friend, see what she thinks. If you guys have any ideas, let me know.

Cheers!

[o15a3d4l11s2]

Hey, @tabacitu, I had the same doubts when multi-select is involved, that's why I did not want to open too much of a discussion on it :) The thought I had was a "block" where the filter values go under the filter itself (maybe also for single-select?)? Something like this:

[jrbecart]

I think this feature will be nice. To manage this I did something slightly more complicated :frowning_face: (but I don't have to deal with stripped string :wink: )

I added a placeholder in list.php that is hosting all my filters placeholder.

  @if (!empty($crud->filters_placeholder))
  <div class="row mb-0">
    <div class="col-12">
      <div class="hidden-print" id="filters_placeholder">{!! $crud->filters_placeholder !!}</div>    
    </div>
  </div>
  @endif

Then I my CRUD controller I have:

$this->crud->filters_placeholder = '<div class="hidden-print" id="filters_values_year"></div>';  // filter 1
$this->crud->filters_placeholder .= '<div class="hidden-print" id="filters_values_semester"></div>';  // filter 2

Then in select2_multiple.blade.php (as an example, to do if wanted in dropdown, select2_from_ajax, etc.)

in ready function:

// initialize filters values placeholder
if (Array.isArray($(this).val())) {
  var values = $(this).val().filter(function(e){ return e === 0 || e });
  if (values.length)
    $('#filters_values_' + filterName ).html("<strong>" + filterName + "</strong>: " + values.join(" , ")); 
}

in change function: (in first if statement)

// update filters values placeholder
if (values.length)
  $('#filters_values_' + filterName ).html("<strong>" + filterName + "</strong>: " + values.join(" , ")); 
else
  $('#filters_values_' + filterName ).html("");

Finally, in event on 'filter:clear':

$('#filters_values_' + filterName ).html("");

[tabacitu]

That's cool @jrbecart - and how does it look in the end? Can you share a screenshot please?

[jrbecart]

@tabacitu, I have other texts around, but it's the idea:

[jrbecart]

Also in my case I always have default values, so I needed to force the value to be re-added by select2_multiple logic when the filter is cleared (or all items are removed)

First in your CRUD add:

$filters = $this->crud->filters();
foreach($filters as $filter)
{
  if($filter->name === "year") // replace by your own filter name
    $filter->myDefaultValue = "2022"; // example
  // add more if you need
}

Then in select2_multiple.blade.php (for my case) before var new_url = addOrUpdateUriParameter(current_url, parameter, value);

var defaultValue = '{!! !empty($filter->myDefaultValue) ? $filter->myDefaultValue : '' !!}';
if (!value && defaultValue)
{
  // inject default value from your CRUD
  value = JSON.stringify([defaultValue]);
  $('#filters_values_' + filterName ).html("<strong>" + filterName + "</strong>: " + defaultValue); 
}

So now:

[o15a3d4l11s2]

@jrbecart I like how you approached this, I will definitely give it a try.

[tabacitu]

Ok guys sooo... I think we've reached a point where the ideas all catalize towards a solution that is good for everyone. Thanks a lot @jrbecart ! Looking through the old (and I mean... old! like 2016 old! 😅) threads about filters, I found this UI suggestion, which I think:

• looks excellent;
• is super-intuitive;
• might be achievable without modifying existing filters code (or require minimal changes);
• can be made optional;
• can easily be integrated into the current UI;

So... it could look and work something like this:

So what if... we create a Widget or separate blade file, where we use JS to

• look at the URL parameters of the DataTables AJAX calls
• when that URL changes, insert / remove tags in a div?

After all, all the information is there in the URL - both the name of the filter and the value. Wait, no... this component itself might need to look at the currently selected filter label and value, to show the "user-friendly" version of them (eg. show category not category_id, show Italy not 31), but that could be made easy by modifying all filters, to set those as data attributes somewhere. So that this filter_tags component only looks in one place. Alternatively, we could make all filters trigger an event (backpack:filter.changed) with all information about it (filter name, filter value, parameter name, parameter value), so that the tags component knows what to show.

Wouldn't this work for everybody? Do you foresee any problems in doing this? (rephrased... basically what @jrbecart did - excellent work, but shown as tags 😅)

[jrbecart]

I don't see any problems and your approach to looking at the URL is absolutely right. Combined with a filter_tags component or a trigger for all filters, it will be more readable/expandable than my POC 😉

Also, the display of tags with the close icon is much better (fewer clicks for deselecting 😃 )

When it's a multi-value filter, do you want to show each value separately or grouped together? IE: x color: green x color: blue or x color: green, blue

If grouped, it can also be: x color: x green, x blue for faster deselection. (it's my favorite but at the end it's not a big deal) (it can be confusing if there is only one value and if handle in code it will require more logic)

[realtebo]

I encourage to give priority to this because already a few customers asked us to modify the behaviours of filters to show what is selected.

[gn0rt0n]

Is this feature on the Roadmap for any time soon?

[tabacitu]

Update: Just added this to the roadmap 🎉 We expect it'll be ready in Sep-Oct 2022!

Thank you for your patience, everyone 🙏

[Mte90]

I see that the issue is still there after all those years.

[pxpm]

I see that the issue is still there after all those years.

Hey @Mte90 it's not an issue, it's a feature request 👍

It had been postponed because filters need a "major" rework, and when that happen I am pretty sure this is one of the scenarios that will be unblocked without having to write a bunch of "javascript patches" to workaround the current limitations.

Since you replied to the thread you are now probably subscribed, so you will be getting updated when we work on this 👍

Cheers

[Mte90]

I resolved with a bunch of JS in filters_navbar.php:

 if ($('#filter_utente').find(':selected').text() !== '-') {
            $('li[filter-name="utente"] a.nav-link').text("Utente: " + $('#filter_utente').find(':selected').text().trim());
        }

        if ($('#text-filter-anno').val() !== '') {
            $('li[filter-name="anno"] a.nav-link').text("Anno: " + $('#text-filter-anno').val().trim());
        }

An example of a select2 and a text field in the updateDatatablesOnFilterChange function, also before the $("#remove_filters_button").click(function(e) { and in that event just a code to reset the label. In this way no php code required.