Best Answer

How to show the catalog filters persistently?


Userlevel 3
Badge

Hi, we’ve found that the filters trigger that opens up the filters panel is not very apparent to many of our users.

I’m looking for a CSS implementation that makes the filters panel always open. Can this be done?

Regards,

-S

icon

Best answer by nick.tosto 6 August 2021, 15:20

View original

14 replies

Userlevel 6
Badge +1

I’ve tried but never been able to expand the filter option by default with CSS. I’d love to see if anyone has done it successfully.

Instead what I’ve seen people do is leverage the fact that a unique url is generated when a filter is applied. That means that you can curate some filters yourself and include them as links in an HTML widget:

 

When one of those links is clicked, it will reload the page with the filter(s) already applied.

 

Hope this helps!

Userlevel 3
Badge

 @nick.tosto Thank you! This is really helpful.

Userlevel 5
Badge +1

One idea is to draw attention to the Filters button by applying a background color to it. 

Userlevel 3
Badge

We use an HTML widget, and then simple square boxes with the category names.  

 

Luckily, when you select a category, it changes the URL in the address bar. 

We then take these URL’s and create a row of buttons using the HTML widget.  

 

Userlevel 3
Badge

We use an HTML widget, and then simple square boxes with the category names.  

 

Luckily, when you select a category, it changes the URL in the address bar. 

We then take these URL’s and create a row of buttons using the HTML widget.  

 

This is a nice idea that I can explore!

Userlevel 3
Badge

@DustinSmith 

I like that! 

Would it then be possible to hide the built-in filter?
 

 

Userlevel 3
Badge

#doc-page-catalog

div.ui-data-browser-controls-bar-start {

  display: none !important;

}

 

@Holly this CSS code will hide that

If you are new to CSS, I recommend download the Chrome browser extension Stylebot. https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en-US

Userlevel 3
Badge

Thanks!

Userlevel 7
Badge +6

@DustinSmith - that is such a neat implementation - a question though….and I know as we “mess around with CSS” we are already taking on a level of risk. The day that these folks change the way they serve up urls with categories? Your implementation is going to be severely challenged. And so that observation/statement goes towards a type of customer beware with your approach.

But a question for you and other folks that have been playing the game longer - has the platform changed its delivery of urls under your feet before? Is there anyway to avoid that corner? I have been burned by other LMSs upping their technology and functions being taken away from me with a new js library being deployed as well as new styles...I could only imagine that urls would be that much more of a volatile thing that could change.

For example - channels behavior is due to deploy how content is available with them..they will allow for open courses to be served up by them (not only subscribed anymore)...and because I really like they way that Channels are served up? That will force me to touch many pages...but I would imagine “unsupported” url formats that are discovered by inspecting elements can change under your feet and you are only going to know the hard way about it. 

Userlevel 3
Badge

@dklinger Great comments.  Your concerns are quite valid.

I’ve been a Docebo customer for 4 years.  I’ve never had them change URL deliveries (even to its detriment).  And I know there are other customers who utilize the same behavior.  So I’d hope we’d know before they did something that would have that sort of impact.  

Userlevel 4
Badge

We use an HTML widget, and then simple square boxes with the category names.  

 

Luckily, when you select a category, it changes the URL in the address bar. 

We then take these URL’s and create a row of buttons using the HTML widget.  

 

This is a nice idea that I can explore!

Dustin - question for you about this set up.  Are you saying that you are using the link from each catalog to link to the different boxes for your categories and then setting up an html widget for the look you have here with the boxes across the screen?  

Userlevel 4
Badge

We are wanting to do something like what is found in the content library to filter.  Anyone have ideas on a way to do this in the platform?  The current filter options make no sense to our users who are looking for content topics rather than the type of content (e-learning, etc.).

 

Userlevel 7
Badge +5

Bringing this back up - has any one been able to have the filters display by default?

Also - using CSS can we had the “Categories” option but keep the Filter option visible?

Userlevel 7
Badge +5

Bringing this back up - has any one been able to have the filters display by default?

Also - using CSS can we had the “Categories” option but keep the Filter option visible?

NM about the hiding Categories, totally an Advanced setting to turn that off. 

 

Reply