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 )
Comments
Post a Comment