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 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

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 ); }
21 comments
Read more

Service Catalog: variable advanced reference qualifiers

Call a script include to apply a reference qualifier on a catalog item variable: - variable reference qualifier dependent on another variable selection, in this case a variable referencing sys_user (requested_for) On the catalog item form. variable name to apply ref qual filter : retail_equipment variable reference qualifier (on cmdb table ): javascript : new  refqual_functions (). lostStolen_getAssignedCIs (); client-callable script include ( refqual_functions)  function : lostStolen_getAssignedCIs : function (){         //--called from variable set client script, for lost/stolen request (service catalog)     gs . log ( current . variables . requested_for , 'retail_lostStolen_getAssignedCIs' );         return ( 'install_statusNOT IN8,7^owned_by=' + current . variables . requested_for );             //owned_by=1269b79937f1060041c5616043990e41^install_statusNOT IN8,7            },
Post a Comment
Read more