Skip to main content

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 )

Comments

Popular posts from this blog

Get URL Parameter - server side script (portal or classic UI)

Classic UI : var sURL_editparam = gs . action . getGlideURI (). getMap (). get ( ' sysparm_aparameter ' ); if ( sURL_editparam == 'true' ) { gs . addInfoMessage ( 'parameter passed ); } Portal : var sURL_editparam = $sp . getParameter ( " sysparm_aparameter " ); if ( sURL_editparam == 'true' ) { gs . addInfoMessage ( 'parameter passed ); }

ServiceNow - script include: build up the results as a JSON object (array) - example 2

function call var sCurrentGroupMembers = new <script_include> (). getGroupMembers ( group_sysid ); gs . print ( 'sCurrentGroupMembers:' + sCurrentGroupMembers ); var oGroupMembers = JSON . parse ( sCurrentGroupMembers ); gs . print ( JSON . stringify ( oGroupMembers . users )); oNewGroupMember = JSON . parse ( group_members ); var oGroupConfig = getGroupDeltas ( oGroupMembers . users , oNewGroupMember ); gs . print ( JSON . stringify ( oGroupConfig . remove )); gs . print ( JSON . stringify ( oGroupConfig . add )) output : *** Script: sCurrentGroupMembers: {"manager":"3b2649efdb0f8c10cc0652f3f39xxxxx", "email":"", "type":"33a2226edb99c340edfc7cbdae96xxxx", "description":"Created for xyz", "users":[{"user":"3b2649efdb0f8c10cc0652f3f396xxxx"},{"user":"856a8f71db3d73041b4ffc45ae96196a"},{"user":"3752771