ServicePortal - Typeahead Search widget CSS query

Ashish Srivast3 · ‎03-05-2019

Good Day Portal Experts,

I am facing a challenge on CSS of Typeahead search widget where the client wants to change the color of the incident ( i.e. red ) and request ( i.e. black) in the search box result. Please refer to the attached image and guide.

my work

=======

search widget of the portal uses typeahead widget internally to bring out the search box results so now when I override the CSS of the typeahead widget CSS it showed all search results in red but not able to specifically apply different colors to incident and request.

Chris Stoll-SN · ‎03-08-2019

So, even better ...

Since you are using a scripted source you have total control of what data you need to retrieve then leverage.

This line ...

$sp.getRecordDisplayValues(item, sc, 'name,short_description,picture,price,sys_id,sys_class_name');

... is getting the data from the Catalog Items. So, if you want to leverage the 'Category' field then you just need to add that field to the code ...

$sp.getRecordDisplayValues(item, sc, 'name,short_description,picture,price,sys_id,sys_class_name,category');

Then you can extend or replace my prior example for the 'sp-typeahead-popup-custom.html' template with ...

 ng-class="{ active: isActive($index), 
             redtext: (match.model.category === 'incident'),
             boldtext: (match.model.category === 'request') }"

So, since there is more control with scripted sources; you can control your outcome.

Also, recommend you add the following to the typeahead widget's client script so you can see the results data in the browser console while you are testing.

30: return $http.post("/api/now/sp/search", payload).then(function(response) {
31:   var result = response.data.result;
32:			
33: console.log(result.results)	//<<ADD THIS to see the results objects returned.

Hope that gets you closer ...

View solution in original post

Chris Stoll-SN · ‎03-07-2019

So some assumptions -

1) You cloned the OOB Typeahead Search widget
2) You created NEW Angular ng-templates for your widget (which could be a copy paste of the OOB Widget templates - important)
3) You created new/additional Search Sources for your Portal
a) Incidents
b) Requests

There are a couple different approaches that could be taken. This approach only requires you to update the POPUP template and add your CSS class.

So for my cloned widget I have the two templates and changed the reference to those templates in the HTML for the Search widget:

typeahead-template-url="sp-typeahead-custom.html"
typeahead-popup-template-url="sp-typeahead-popup-custom.html"

I have added the following to my CSS (for demo purposes):

.redtext{
  a{
     color: red !important;
  }
}
.boldtext{
  a{
     font-weight: bold !important;
  }
}

Then we need to update the template - sp-typeahead-popup-custom.html

I am going to update the ng-class for the <li> element and determine which CSS class get applied.

But first you will notice that the <li> element has an ng-repeat

ng-repeat="match in matches track by $index"

The matches object holds the results of the query and the match item is the individual result item. There are a some key attributes about each item that we could leverage and I will share two. We will update the ng-class statement in order to update the text.

First - change the font based on which Search Source the item belongs to :

ng-class="{ active: isActive($index), 
            redtext: (match.model.__search_source_id__ === 'srch-incident'),
            boldtext: (match.model.__search_source_id__ === 'srch-request') }"

So, when creating the Search sources each one has a unique id that could be created and that can help determine where the item came from.

Second - change the font based on which table the item belongs to :

ng-class="{ active: isActive($index), 
            redtext: (match.model.table === 'incident'), 
            boldtext: (match.model.table === 'change_request') }"

So, each item comes from a unique table (referenced in the creation of the Search Source) and we can use that to determine which text gets what styling.

Hope that helps ....

Ashish Srivast3 · ‎03-08-2019

Hi Chris,

Thanks a ton for the help. I am working on out of the box scripted search source ( Service Portal -> Portal -> Search Source -> Catalog ( scripted search source).

As different colors for Incident & Request form have been requested. As per existing setup in the service catalog, the incident is a category so want to apply the color based on category.

Not sure if it is feasible that if we can directly query the category (software, incident, access and so on)of the scripted search source ( sc) and directly apply the color.

ng-class="{ active: isActive($index),
// how can we query the category of the item to apply the color.

'redtext': (match.model.type=='sc')

}"

something like ( not sure about the code)

'redtext': (match.model.type=='sc' & sc.category=='incident')

Not sure if that makes sense to you.

Thanks!!

Ashish Srivast3 · ‎03-08-2019

Thanks a ton Chris.

I am trying with out of box scripted search options ( Service Portal -> Portal -> Service Portal -> Search Source ( catalog ( id:sc) to establish the segregation between Incident form ( e.g red) or Request form ( e.g. black).

as per existing setup, In Service Catalog, I've categories like incident, request or so on.

is there anyway if we can directly query category from ng-class so that color can be directly applied based on the category of the service catalog.

below code turns all search items of sc into red.

 redtext: (match.model.type === 'sc'),

is there any way that can drill down till category level like below ( not sure about the code - just an hint)

 redtext: (match.model.type === 'sc' && category=='incident'),

Chris Stoll-SN · ‎03-08-2019

Thanks for the image ... but can you post the code block / script for the Search source as well ?