Specify search source for a typeahead search widget (widget options schema), style a typeahead with CSS

several options

1) easy option - configure from the widget instance in designer:

https://docs.servicenow.com/bundle/paris-servicenow-platform/page/build/service-portal/concept/configure-contextual-search.html

[ html to embed the widget - optional

<div id="repissue-search" class="hidden-xs wrapper-md" ng-init="c.trackPage()"> <div class="wrapper-md"> <h1 class="font-thin m-b-lg sp-tagline-color" ng-bind="options.title"></h1> <h4 ng-if="options.short_description" class="m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4> <div class="search-bar"> <sp-widget widget="data.typeAheadSearch"></sp-widget> </div> </div> </div>

server script:

data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);

]

Now go to edit option schema from designer:

then go to the typeahead widget on the portal and click ctrl>right-click and select

this is where you can specify the search source by its sys id:

{title:'Search incidents', size: 'md', color: 'default', contextual_search_sources: 'd12dd5cadb8d6c10f04aad050596195c'}

2) with embedded widget - specify search source in server script:

https://docs.servicenow.com/bundle/paris-servicenow-platform/page/build/service-portal/concept/c_NestedWidgets.html

HTML:

<div> <widget id="typeahead-search" options=data.search_options></widget> </div>

Server script: sys id is the sys id of the search source, display value is its name

data.search_options = '{"contextual_search_sources": { "value": "d12dd5cadb8d6c10f04aad050596195c", "displayValue": "My Incidents" }}';

style the typeahead to add rounded edges and colors etc

CSS:

.sp-tagline-color { color: $brand-primary; } #homepage-search > div > h1 { width: 600px; margin: 0 auto; } .search-bar { width: 600px; margin: 40px auto 0 auto; /* adding margin between search and title */ /* Customising the search bar */ input[name="q"] { border-top-left-radius:$search-border-radius; border-bottom-left-radius:$search-border-radius; color: $input-color !important; } span.input-group-btn { button.btn-default { border-top-right-radius:$search-border-radius; border-bottom-right-radius:$search-border-radius; border-left: none; color: $brand-success; } } }

https://www.cernasolutions.com/post/how-to-manually-configure-widget-options

(example widget by Shahed Shah:

https://developer.servicenow.com/connect.do#!/share/contents/9330051_simple_list_widget_with_new_button2?v=1.0&t=PRODUCT_DETAILS )