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.

populate multiple field values from Type ahead search widget -service portal

Go to solution
Sin
Giga Expert

‎03-19-2019 10:45 PM

Hi all, Guys am using "Typeahead search" widget for global search on homepage of service portal.

Generally if we type something (eg:incident number) on search box ,related results will be auto populated at the bottom of the search box like this..

find_real_file.png

Here my requirement is ,customer is asking to populate short description field also next to the incident number, like this

Incident number - short description

I found a code for this ,its coming under,

Typeahead Search widget--> Angular ng-templates -->sp-typeahead.html

here we have code for auto populating incident numbers

 

<a class="ta-item" ng-href="{{match.model.target != '_blank' ? match.model.url : ''}}" target="{{match.model.target}}">
<div ng-if="!match.model.templateID">
<i class="ta-icon fa fa-{{match.model.glyph}}" ng-if="match.model.glyph"></i>
<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
</div>
<div ng-if="match.model.templateID" ng-include="match.model.templateID"></div>
</a>

 

I have added one more <span></span>element for short description field as mentioned below

<span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>

-<span ng-bind-html="match.short_description | uibTypeaheadHighlight:query"></span> 

my bad luck am getting undefined at the short_description span element.

Can anyone help me on this?

 

Thanks in Advance!

 

 

Preview file
19 KB
0 Helpfuls
  • 1,674 Views
1 ACCEPTED SOLUTION
3 REPLIES 3

Go to solution
Harish Murikina
Tera Guru

‎03-20-2019 02:36 AM

Hi Sana,

Can you paste server script , client script and HTML . the values which your trying access using match object might not be included. i will look the code .

Regards,

Harish Murikinati.

0 Helpfuls

Go to solution
Sin
Giga Expert
In response to Harish Murikina

‎03-20-2019 11:22 PM

Typeahead Search widget code :

HTML

 

(function() {
if (options.title) {
options.title = gs.getMessage(options.title);
}

if (options.refresh_page_on_search_submission == undefined)
data.refreshPageOnSearch = true;
else
data.refreshPageOnSearch = options.refresh_page_on_search_submission;

data.resultMsg = gs.getMessage("Search results");
data.navigationMsg = gs.getMessage("To navigate, use up and down arrow keys while holding ");
data.portalID = $sp.getPortalRecord().getUniqueValue();
data.searchMsg = gs.getMessage("Search");
data.q = $sp.getParameter('q');

var searchSources;
data.searchType = null;
data.searchSources = [];
if ($sp.getParameter("id") == "search" && $sp.getParameter("t")) {
data.searchType = $sp.getParameter("t");
searchSources = $sp.getSearchSources(data.portalID);
} else {
var contextualSearchSourceIDs = options.contextual_search_sources || null;
searchSources = $sp.getSearchSources(data.portalID, contextualSearchSourceIDs);
if (searchSources.length == 1) {
data.searchType = searchSources[0].id;
}
}

data.typeaheadTemplates = {};
data.searchSourceConfiguration = {};
searchSources.forEach(function(source) {
if (source.isTypeaheadEnabled) {
data.searchSources.push(source.id);
}
var sourceTemplateConfiguration = {};
if (source.isAdvancedTypeaheadConfig) {
sourceTemplateConfiguration.type = "ADVANCED";
sourceTemplateConfiguration.template = "sp-typeahead-" + source.id + ".html";
data.typeaheadTemplates["sp-typeahead-" + source.id + ".html"] = $sp.translateTemplate(source.typeaheadTemplate);
} else {
sourceTemplateConfiguration.type = "SIMPLE";
sourceTemplateConfiguration.glyph = source.typeaheadGlyph;
sourceTemplateConfiguration.linkToPage = source.typeaheadPage;
if (!sourceTemplateConfiguration.linkToPage)
console.log("Warning: No typeahead page or URL provided for search source " + source.name);
}
data.searchSourceConfiguration[source.id] = sourceTemplateConfiguration;
});
})();

 

 

Client Script:

 

function ($http, $filter, $location,spAriaUtil, $window, $scope, spAriaFocusManager) {
var c = this;
c.options.glyph = c.options.glyph || 'search';
c.options.title = c.options.title || c.data.searchMsg;
c.options.color = c.options.color || "default";
c.searchTerm = c.data.q;

c.onSelect = function($item, $model, $label) {
c.searchTerm = ""; // prevents unexpected result if user quickly clicks search button after selecting
if ($item.target)
window.open($item.url, $item.target);
else {
var newUrl = $location.url($item.url);
spAriaFocusManager.navigateToLink(newUrl.url());
}
};

c.getResults = function(query) {
var payload = {
"query": query,
"portal": c.data.portalID,
"source": c.data.searchSources,
"include_facets": false,
"isTypeahead": true
};
if (c.options.limit || c.options.limit == 0)
payload.count = c.options.limit;

return $http.post("/api/now/sp/search", payload).then(function(response) {
var result = response.data.result;
spAriaUtil.sendLiveMessage(result.results.length + " " +
c.data.resultMsg + " " +
c.data.navigationMsg +
getNavigationKeys());
return result.results.map(function(item) {
var config = c.data.searchSourceConfiguration[item.__search_source_id__];
if (config.type == "ADVANCED") {
item.templateID = config.template;
} else {
item.glyph = config.glyph;
if (!item.url && config.linkToPage) {
item.url = "?id=" + config.linkToPage;
if (item.sys_id)
item.url += "&sys_id=" + item.sys_id;
if (item.table)
item.url += "&table=" + item.table
}
}
return item;
});
});
}

c.searchType = c.data.searchType;
$scope.$on('$locationChangeSuccess', onLocationChangeSuccess);

function onLocationChangeSuccess(event, newUrl, oldUrl) {
if(searchSourceChanged(newUrl, oldUrl)) {
var newUrlParams = newUrl.match(/t=.+/);
if(!newUrlParams) {
c.searchType = null;
} else {
c.searchType = newUrlParams[0].split("&")[0].substring(2);
}
}
}

function searchSourceChanged(newUrl, oldUrl) {
var newUrlParams = newUrl.match(/t=.+/),
oldUrlParams = oldUrl.match(/t=.+/);

if(!newUrlParams && !oldUrlParams) {
return false;
}

if((!newUrlParams && oldUrlParams) || (newUrlParams && !oldUrlParams)) {
return true;
}

return newUrlParams[0].split("&")[0] !== oldUrlParams[0].split("&")[0];
}

c.submitSearch = function() {
var shouldReloadPage = c.data.refreshPageOnSearch && $location.search().id === 'search';

if (c.searchTerm) {
var newUrl = $location.search({
id: 'search',
spa: '1',
t: c.searchType,
q: c.searchTerm
});

if (shouldReloadPage)
$scope.$emit("sp.page.reload");

spAriaFocusManager.navigateToLink(newUrl.url());
}
}

function getNavigationKeys() {
if($window.navigator.userAgent.indexOf("Mac OS X") > -1)
return '⌘';
return 'Control';
}
}

 

 

Server Script:

(function() {
if (options.title) {
options.title = gs.getMessage(options.title);
}

if (options.refresh_page_on_search_submission == undefined)
data.refreshPageOnSearch = true;
else
data.refreshPageOnSearch = options.refresh_page_on_search_submission;

data.resultMsg = gs.getMessage("Search results");
data.navigationMsg = gs.getMessage("To navigate, use up and down arrow keys while holding ");
data.portalID = $sp.getPortalRecord().getUniqueValue();
data.searchMsg = gs.getMessage("Search");
data.q = $sp.getParameter('q');

var searchSources;
data.searchType = null;
data.searchSources = [];
if ($sp.getParameter("id") == "search" && $sp.getParameter("t")) {
data.searchType = $sp.getParameter("t");
searchSources = $sp.getSearchSources(data.portalID);
} else {
var contextualSearchSourceIDs = options.contextual_search_sources || null;
searchSources = $sp.getSearchSources(data.portalID, contextualSearchSourceIDs);
if (searchSources.length == 1) {
data.searchType = searchSources[0].id;
}
}

data.typeaheadTemplates = {};
data.searchSourceConfiguration = {};
searchSources.forEach(function(source) {
if (source.isTypeaheadEnabled) {
data.searchSources.push(source.id);
}
var sourceTemplateConfiguration = {};
if (source.isAdvancedTypeaheadConfig) {
sourceTemplateConfiguration.type = "ADVANCED";
sourceTemplateConfiguration.template = "sp-typeahead-" + source.id + ".html";
data.typeaheadTemplates["sp-typeahead-" + source.id + ".html"] = $sp.translateTemplate(source.typeaheadTemplate);
} else {
sourceTemplateConfiguration.type = "SIMPLE";
sourceTemplateConfiguration.glyph = source.typeaheadGlyph;
sourceTemplateConfiguration.linkToPage = source.typeaheadPage;
if (!sourceTemplateConfiguration.linkToPage)
console.log("Warning: No typeahead page or URL provided for search source " + source.name);
}
data.searchSourceConfiguration[source.id] = sourceTemplateConfiguration;
});
})();

0 Helpfuls