Home Analyst Portal

Hide "Filter Services"

Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
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

Best Answer

Answers

  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    (($('.sc-filter')).find('input')).hide();

  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    That looks like the right logic but it is not working (at least for my environment) Control box still appears.
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    Just tried it again, and it works here.

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


  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    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_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    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_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    @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.
Sign In or Register to comment.