ServiceNow's OOTB solution for the service portal main page search capabilities works wonderfully, however it tends to eat up a significant amount of real-estate unless modified. If your company asks you to resize the search widget appearance, we created a new widget to do so (Homepage Search Resized):
HTML:
<div>
<div id="homepage-search" class="hidden-xs whatever">
<!--<h1 class="text-center font-thin hidden-xs text-4x m-b-lg sp-tagline-color">Hi {{::user.first_name}} {{options.title}}</h1>-->
<h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>
<h4 ng-if="options.short_description" class="text-center m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4>
<sp-widget widget="data.typeAheadSearch"/>
</div>
</div>CSS:
.sp-tagline-color {
color: $sp-tagline-color;
}
.whatever {
padding-bottom: 30px !this adds some of the background under the search field, add padding-top if you want to add size to the top;
}Client Side:
function() {
/* widget controller */
var c = this;
}Server Side:
data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.sysUserID = gs.getUserID();
if (!data.sysUserID)
data.sysUserID = gs.getUser().getID();
var sysUserGR = new GlideRecord("sys_user");
data.userExists = sysUserGR.get(data.sysUserID);
if (data.userExists) {
data.name = sysUserGR.getValue("first_name");
} else {
data.name = "User"
}
})();Simply replace the OOTB widget on the service portal index page with this one...
Also, notice line 2 of the HTML allows for a feature that some may have seen in another thread. Remove the comments to add a greeting or leave the script as-is and have a "tight" search bar.
NOTE: This also required resizing the background image used in the container to a much shorter image, so be prepared to resize your background image if required !
BEFORE:
AFTER (Line 2 of HTML commented):
AFTER (line 2 of HTML used):
Special thanks to diegosantiago, Chandra Prakash, kammu and Sanjiv Meher for some of the ideas.
Please like or comment if this helps you !
Cheers !
John
You can always drop your Typeahead Search widget into a custom sized container...
