Adding search bar to the header menu on the service portal

[Rahul Raja Sami]

How can I add search bar in the header menu list of my portal ?

[SwarnadeepNandy]

Hello @Rahul Raja Sami,

There are different ways to add a search bar in the header menu list of your portal in ServiceNow, depending on your preference and use case. Here are some general steps for one possible approach:

1. Navigate to Service Portal > Service Portal Configuration.
2. Select Portal Tables > Instance with Menu and then select the menu that you want to add the search bar to. If you do not have a menu yet, you can create one by clicking New and entering a name and a widget for the menu.
3. In the menu form, click Menu Items from the related lists and then click New to create a new menu item for the search bar.
4. In the menu item form, enter a name and a label for the search bar, such as “Search”.
5. In the widget field, select a widget that can provide the search functionality, such as “Typeahead Search”. This is an out-of-the-box widget that allows users to type keywords and see suggestions from different sources, such as catalog items, knowledge articles, etc.
6. In the order field, enter a number that determines the position of the search bar in the header menu list. For example, if you want the search bar to be the first item in the list, enter 1.
7. Click Submit to save the menu item.
8. Navigate to Service Portal > Portals and then select the portal that you want to add the header menu to. If you do not have a portal yet, you can create one by clicking New and entering a name and a URL suffix for the portal.
9. In the portal form, select a theme that contains a header widget. A theme is a set of styles and layouts that define the appearance of your portal pages. A header widget is a widget that displays the header menu in your portal.
10. In the header menu field, select the menu that contains the search bar menu item that you created earlier.
11. Click Submit to save the portal.

You can also customize and configure the search bar widget and menu item according to your needs by using some options and scripts. Options are parameters that control how a widget behaves or displays data. Scripts are sets of instructions that can manipulate data or perform actions in ServiceNo.

Hope this helps.

Kind Regards,

Swarnadeep Nandy

[Rahul Raja Sami]

Hi Swarnadeep,
I have already done the same thing as you have mentioned above using typeahead search widget, but it looks like this

and when clicks on Help Search menu item then it displays this

but I want this seach bar on the header itself, how can I achieve that?

[Rahul Raja Sami · Accepted solution]

Find the Widget header menu under SP Header Menu 
and clone it 
add the 

<li class="search-widget header-menu-item">
   <widget id="typeahead-search"></widget>
</li>

as the first li to the HTML and add the ag templates as we have for the OOTB header menu.
everything works now.