Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

How to Customize the TypeHead Search

Aditya02
Tera Guru

I want to customize the home page search widget to get like this:

 

Aditya02_1-1728650739821.png

 

As of now I am getting like this, anyone help which things I need to do to get this done.

 

Aditya02_0-1728652103240.png

 

 

14 REPLIES 14

Hi @Moin Kazi ,

 

Actually, while I am importing these XML files in sp_widget table I am getting this error.

 

Aditya02_0-1728890823572.png

 

Hi @Aditya02 ,

 

I hope you are using below method to import -

 

- Right Click On column Header > Import XML > attached file > Click OK

- Please also check your application scope should also be same while import.

MoinKazi_0-1728891452528.png

 

Regards

Moin

Hi @Moin Kazi ,

 

Again it was coming like the same. I don't know why.Is there any issue with the calling of that widget? Once check it here I am providing the code where this widget has been called.

 

HTML:

 

<div id="homepage-search" class="hidden-xs wrapper-xl">
<div class="wrapper-xl">
<h1 class="text-3x m-b-lg sp-tagline-color">Hello {{::data.userName}}, <br></h1>
<h3 class="text-x m-b-lg sp-tagline-color">
Welcome to the <strong>iSolve Portal</strong> How can we help <br>you today?
</h3>
<div ng-if="options.short_description" class="text-center h4 m-b-lg sp-tagline-color" ng-bind="options.short_description"></div>

<!-- Replace the widget reference with isolve_typehead_search -->
<sp-widget widget="data.isolveTypeAheadSearch"></sp-widget>
</div>
</div>

 

CSS:

.sp-tagline-color {
color: $sp-tagline-color;
  
}
 
#homepage-search {
  .aisearch {
    --classicsponlydonotuse--rem-multipy: 1.6;
  }
}
 
Client Script:
api.controller=function($scope, $http) {
/* widget controller */
var c = this;
};
 
Server script:

var aisEnabled = $sp.isAISearchEnabled();

if (aisEnabled)
// Use the new widget name isolve_typehead_search
data.isolveTypeAheadSearch = $sp.getWidget('briliance-typeaheadsearch', options);
else
data.isolveTypeAheadSearch = $sp.getWidget('briliance-typeaheadsearch', options);

data.userName = gs.getUser().getFirstName();

  

Please check the brilliance typeaheadsearch widget in your widget table.

Could you provide the code for the "brilliance-typeaheadsearch" widget here?

 

Regards

Moin 

Hi @Moin Kazi ,

 

Sure i am attaching file check it once.