Hide "Filter Services"

Brian_Wiest

Many of my users get confused between the very top Service Catalog search and under Browse By Category "Filter Services". They keep trying to use the Filter to find a specific catalog item.
Hoping some of the JS experts out there know if it possible to change the box to match the search catalog box, or just hide it from view. 
Thanks

Konstantin_Slavin-Bo

Or, you should probably wrap it in a check for whether you're on the right page, so this is probably better:

$(document).ready(function (){<br>&nbsp;&nbsp;&nbsp; if (document.URL.indexOf("ServiceCatalog/Listing") === -1) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; <br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; // Hide filter input box<br>&nbsp;&nbsp;&nbsp; (($('.sc-filter')).find('input')).hide();<br><br>});

Konstantin_Slavin-Bo

(($('.sc-filter')).find('input')).hide();

Konstantin_Slavin-Bo

Or, you should probably wrap it in a check for whether you're on the right page, so this is probably better:

$(document).ready(function (){<br>&nbsp;&nbsp;&nbsp; if (document.URL.indexOf("ServiceCatalog/Listing") === -1) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return; <br>&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp; // Hide filter input box<br>&nbsp;&nbsp;&nbsp; (($('.sc-filter')).find('input')).hide();<br><br>});

Brian_Wiest

That looks like the right logic but it is not working (at least for my environment) Control box still appears.

Konstantin_Slavin-Bo

Just tried it again, and it works here.

To confirm, we are taking about this Home page and this box, right?

Brian_Wiest

Yes that box. 
Attempted on my Staging and production environments adding directly in custom.js. It remained in both IE11 and Chrome
Portal version 8.1.0.2012

Konstantin_Slavin-Bo

That's weird. It works here on both test (v8.1.1.2012) and prod (v7.4.2012.9).

Can you try the command directly in Chrome's devtools? Navigate to the page and press F12 to open DevTools, then select the console tab and input this line:

(($('.sc-filter')).find('input')).hide();

Does the box disappear?
What text appears right after?

Does this line return true or false?

document.URL.indexOf("ServiceCatalog/Listing") === -<span>1</span>

Brian_Wiest

Running the Hide works
[input.form-control.sc-text-search.ng-pristine.ng-untouched.ng-valid, prevObject: init(1), context: document, selector: ".sc-filter input"]

Running the True/False is returning false. 

Attempted to remove the condition from the custom.js but still not firing. (non console errors)
Attempted to modify the rule for the indexof and all returned false. 
Weird part if changed to (document.URL.indexOf("ServiceCatalog/RequestOffering") === -1) it returned true.
So modified the custom.js and still did not work. It must be one of environments security rules. Will need to dig. Thanks

Konstantin_Slavin-Bo

The if is supposed to return false, so that's a good thing! The bad thing is, that then I can't explain why it isn't working.

You won't necessarily get any errors in console, if there's an error in custom.js.

You can try to add a console.log("hiding box"); right above the (($('.sc-filter')).find('input')).hide(); line, and then go the page, open devtools and reload the page, and see if you see "hiding box" in the console. If you do, then the if is entered and .hide() should also fire. If you don't then there's a problem.

You could try and just insert the .hide() line somewhere in the "root" of custom.js, so it doesn't do any check before running the function. That absolutely should work, if there's no other errors in your custom.js

Brian_Wiest

Well I figured out why your example was not working. I had some custom CSS that changed the category tree and it impacted the JS from working. I was able to resolve by adding your content into my CSS
.sc-filter > input {display: none !important}
All gone.

Konstantin_Slavin-Bo

@Brian_Wiest
Ah okay, good that you got it working. And right, my initial answer was actually not the best approach; doing it directly in css as you did is much better.