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,564 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