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

Post a Comment

Popular posts from this blog

ServiceNow timeout settings for virtual agent chat

  After connecting to live agent User is connected to live agent and not responding to live agent chat or distracted. The below properties controls the timeout settings, the OOB settings for reminder is [180 sec] and for cancelling the chat is [360 sec]. The job is default configured to 2 min so I believe no tweaking is required here.  Property -   com.glide.cs.idle_chat_reminder_timeout                  com.glide.cs.idle_chat_cancel_timeout Scheduled job   - Idle Chat Timer Task   https://community.servicenow.com/community?id=community_article&sys_id=1453b03bdbaad0109e691ea668961929   (ServiceNow ) 
Post a Comment
Read more

ServiceNow check for null or nil or empty (or not)

Haven't tested these all recently within global/local scopes, so feel free to have a play! option 1 use an encoded query embedded in the GlideRecord , e.g.  var grProf = new GlideRecord ( 'x_cls_clear_skye_i_profile' ); grProf . addQuery ( 'status=1^ owner=NULL ' ); grProf . query (); even better use the glideRecord  addNotNullQuery or addNullQuery option 2 JSUtil.nil / notNil (this might be the most powerful. See this link ) example: if ( current . operation () == 'insert' && JSUtil . notNil ( current . parent ) && ! current . work_effort . nil ())  option 3 there might be times when you need to get inside the GlideRecord and perform the check there, for example if the code goes down 2 optional routes depending on null / not null can use gs.nil : var grAppr = new GlideRecord ( 'sysapproval_approver' ); var grUser = new GlideRecord ( 'sys_user' ); if ( grUser . get ( 'sys_id' , current . approver )){...
Post a Comment
Read more