Forum Discussion

Samantha_O's avatar
Samantha_O
Champion
10 years ago
Solved

Custom Search Component, do I need one?

We want to move the search bar from the main panel to the side rail in one section of our Community.  When we move the component around in Studio, the drop-down causes the Search widget to take up extra space, and is not a desired look. 

 

It seems that if we want to modify the search bar, I would need a custom component to do this.  Does this sound right? 

Here is what I am looking to do: 

 - I want the search bar & button to take up just 1 line and not drop to multiple lines (like the Lithium component does)

 - In order to accomplish this I (think I) need to hide the search drop down just in this one area (it is on a specific page type, so it would be universal across the page type, but not affect the rest of the Community). 

 

Any recommendations or suggestions are welcome. 

  • VarunGrazitti's avatar
    VarunGrazitti
    10 years ago
    Ok, another way of achieving this. Create a custom component(don't worry, we will still use the default search component) and include the search component in it and hide the drop down in this one from the parameter. Add a condition to this custom component so this renders only when the page is the one you want. Add the css inside the condition as well. Should get you what you're looking for.

5 Replies

Sort By
  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    10 years ago

    Samantha_O  You can hide the drop down from the xml tab in studio, there is a parameter to hide it which you can find when you hover on the specified component in studio.
    Moreover, to fit the search bar in the side rail, you can then reduce the width of the text box using CSS and make the search button an icon which would take relatively less space, like the one lithium has in their top black bar.

    I hope this helps.

  • Samantha_O's avatar
    Samantha_O
    Champion
    10 years ago

    Thanks for the quick reply.  From what I was seeing it looked/sounded like if I choose to hide the drop-down in the search component it would affect the Community as a whole.  If I update the XML with this, would it be just for one page (or is there a way to make it just for one page, or if it is in the smaller column) or throughout the whole Community? 

     

    Thanks for the idea on the search icon instead of the button, that sounds like it will definitely help.  Then the same question above applies here, would this be for the Community as a whole? 

  • VarunGrazitti's avatar
    VarunGrazitti
    Boss
    10 years ago
    Ok, another way of achieving this. Create a custom component(don't worry, we will still use the default search component) and include the search component in it and hide the drop down in this one from the parameter. Add a condition to this custom component so this renders only when the page is the one you want. Add the css inside the condition as well. Should get you what you're looking for.
  • fleonyleon's avatar
    fleonyleon
    Guide
    6 years ago

    Hello Varun,

    We have created a custom search component for similar reasons: better design, and it is working perfectly.

    The problem we now have is that the searches are not being captured by Analytics, so the LSI report on number of searches shows zero.

    One of the objectives of the custom component was to make it more user friendly and increase searches and now we don't have a way to measure it.

    We were told by Support to include the following query parameter to API call for them to be captured by Analytics:

    api.for_ui_search=true

    Problem is the change was done yesterday and we still don't see the results of quantity of searches in Analytics.

    Any advise you can give us? There is no documentation on this parameter that we can use as a reference so we might be using it incorrectly...or maybe we just need to wait for Analytics a while longer?

    Regards,

    Fico