Home Analyst Portal

Portal Tip - Modifying the Search Dropdown Menu

Dakota_GreenDakota_Green Member Advanced IT Monkey ✭✭✭
edited October 2016 in Analyst Portal
Hello community!

Just wanted to share with Portal users a way to modify, or even remove functions of the search drop-down menu that you see at the top of the page.

Say, you want to remove the dropdown altogether, and have users only be able to search for Work Items (the default search option), you can add this line of code within the custom.js file (for most users, it will be in C:\inetpub\CiresonPortal\CustomSpace. Otherwise, defer to your install path and locate the CustomSpace folder within):
/* Hide Search Options */
 .input-group-btn {
display: none;
}
If you are interested in removing a single option, say, Knowledge Base, you can put in the following code into the custom.css file. The same can be done with the Service Catalog.
$(document).ready(function () {
$('.dropdown-menu [href="#KnowledgeBase"]').parent().remove();
});
However, if you only want to have a single searchable option. For example, if you want to have just the Knowledge Base to be searchable, you would put in the following code in the custom.js file in your CustomSpace folder.
$(document).ready(function () {
    $(".navbar__search--dropdown > ul").html('<li><a href="#KnowledgeBase">Knowledge Base</a></li>');
    var searchParam = $("input[name=search_param]"); //the hidden field which holds the search type id
    var searchConcept = $("span[id=search_concept]"); //the span field which displays the search type value
    var searchInput = $("input[name=searchText]"); //the input field which takes the input from the user
    searchParam.val("KnowledgeBase");
    searchConcept.html(localization.KnowledgeBase);
    searchInput.attr('placeholder', localization.SearchKnowledgeBase);
});
Please note that changes would affect all users that access the Portal.

Comments

  • Adrian_ProbstAdrian_Probst Premier Partner IT Monkey ✭
    Hi Dakota
    Thanks for this helpful code snippets!

    For the second one, there is a little fault in your text:
    "If you are interested in removing a single option, say, Knowledge Base, you can put in the following code into the custom.css file. The same can be done with the Service Catalog."
    --> this should be added in the custom.js file

    Best wishes,
    Adrian

  • Cory_BoweCory_Bowe Customer Adept IT Monkey ✭✭
    @Dakota_Green -

    I've been looking at defaulting our search dropdown to work items. I'm wondering why in your snippet you call out the 3 individual components of the dropdown instead of addressing it though the kendo object?

    Thank you!
  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    Hi @Dakota_Green, is it possible to hide the top nav search pane entirely for end users only?
  • Dakota_GreenDakota_Green Member Advanced IT Monkey ✭✭✭
    edited February 2017
    @Jonathan_Boles We have a KB on how you can remove the bar altogether:

    https://support.cireson.com/KnowledgeBase/View/43#/

    As for hiding it just for end users, I haven't done any testing on this specifically and honestly, I am not sure if it can be done without some sort of modification of the internal code itself.
  • Martin_BlomgrenMartin_Blomgren Customer Ninja IT Monkey ✭✭✭✭
    @Jonathan_Boles, there is a class added to the body tag depending on user role.

    body.end-user .navbar__search {<br>&nbsp;&nbsp;&nbsp; display: none;<br>}

  • Cory_BoweCory_Bowe Customer Adept IT Monkey ✭✭
    @Jonathan_Boles If you wanted to do it in custom js you could do:

    if (session.user.IsAdmin === false) {

    $(".navbar__search").hide()

    };

    The above CSS from @Martin_Blomgren is way better though, and super awesome.

  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    Thanks a ton @Martin_Blomgren and @Cory_Bowe!!!! I was way overthinking this it seems :)
  • Jonathan_BolesJonathan_Boles Customer Ninja IT Monkey ✭✭✭✭
    @Martin_Blomgren and @Cory_Bowe, for some reason neither of these are working with my environment - Using v7.3. I've cleared cached and tried from different computers.

    The only thing I have been able to use to hide the header nav search bar so far is the below but it of course hides from both analyst and end users: 
    div.navbar__search.col-sm-6.col-md-4.top_links.col-xs-offset-2.hidden-xs {
        display: none;
    }
    
  • Cory_BoweCory_Bowe Customer Adept IT Monkey ✭✭
    I haven't done much with CSS yet, but for the JS you could put a timer on it, maybe the element isn't there yet:

    $(document).ready(function() {
        _.delay(function ()
    {
    if (session.user.IsAdmin === false) {
    $(".navbar__search").css('display','none');
    }
    }, 500);
    });
  • Cory_BoweCory_Bowe Customer Adept IT Monkey ✭✭
    So most everyone in our org is an analyst, we weren't able to use the end-user tag. This worked for me to hide it though:

    .navbar__search {
        visibility: hidden;
    }
    body.admin-user .navbar__search {
        visibility: visible;
    }

    A variation of that may work.  You just need to figure out what your admins have in common vs your standard users.
Sign In or Register to comment.