logo

NJP

Service Portal: Search and Fill a text field similar to suggestions/contextual search

Import · Apr 12, 2018 · article

Hello Everyone,

A few days back I came around a question in the community about having a functionality similar to the short description of Incident as below.

image

I suggested the user with contextual search.

https://docs.servicenow.com/bundle/jakarta-platform-administration/page/administer/contextual-search...

But for the user, it was not a record producer but a custom widget with input text fields and above configuration was of no help to the user.

Just wanted to share the simple widget example suggested to the developer for searching KB arcticle short descriptions. Here it goes,

End result:

image

TO CREATE THE SAME,

HTML

<div>
<!-- your widget template -->
  <div id="content" ng-controller="MainCtrl">
<label for="searchText">Search Knowledge SD:</label>
        <input type='text' ng-change="c.server.update();" ng-model= "c.data.searchText" placeholder="Enter the text here.."/>


            <ul >
              <li  ng-repeat='x in c.data.sd | filter:c.data.searchText' style="list-style:none;">
                <a ng-click="c.data.searchText = x"> {{x}}</a>
              </li>
            </ul>

    </div>

</div>

CSS

input,select{
    width: 100%;
    border: medium none;
    height: 30px;
    margin-top: 10px;
    padding-left: 5px;
    border-radius: 5px;
}
hr{
    color: #eee;
}

Server Script:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */

var sd=[];

    console.log("sadf"+[input.searchText]);
    if([input.searchText] != ""){

        var gr= new GlideRecord("kb_knowledge");
        gr.addQuery("workflow_state","published");
        var a = "short_descriptionLIKE"+[input.searchText];
        gr.addEncodedQuery(a);
        //Enable/Disable Wireless Laptop Connections        
        gr.query();


        while(gr.next()){

            sd.push(gr.getValue('short_description'));
        }
    }   
data.sd = sd;


})();

Client Script

function($scope) {
  /* widget controller */
  var c = this;

}

The widget is great because it searches the knowledge articles only for a user input not slowing down the loading of the page.

I am attaching the widget for the above scripts to the article.

Let me know your suggestions in the comments section, share it if someone needs it and bookmarking this article is the best way to do it. image

Thanks and Regards,

Vidyasagar Patro

View original source

https://www.servicenow.com/community/developer-articles/service-portal-search-and-fill-a-text-field-similar-to/ta-p/2330374