How to open an Incident present in list view to a form view in another new tab in chrome in service portal?

Sindhu45 · ‎08-23-2018

Hi All,

I've developed a widget called "My Active Tickets" in Service Portal. For that, I've used a widget called Simple List widget.

This widget is used to display the current logged in users related(Incident, Problem, Change, and Service requests) tickets.

When the user clicks on this widget the users will be navigated to another page. There I've included a menu list for(Incidents, Problems, Changes and Service requests). The user can select any of them and can view the related list of tickets using the simple list on the same page under the menu list.

Here, in the list when I use cntrl+click, I'm getting an option "open link in a new tab", but when I click on that, a new tab is getting opened in my chrome and I'm not getting the form view of that ticket. I'm getting a blank page in the new tab.

Please provide your inputs, on how to open the Incident from the list view to form view in a chrome new tab.

Thanks in advance!

Stewe Lundin · ‎08-23-2018

Use javascript ?

<div onclick="newTab('www.google.com');">Open in new tab</div>

function newTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

Sindhu45 · ‎08-28-2018

Hi Stewe Lundin,

Thank you for the response. Below is my code for Simple List Widget.

Please let me know where to add this code.

HTML:

<div><sp-widget widget="data.listMenu"></sp-widget></div>
<div class="panel panel-{{::c.options.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)">
<div class="panel-heading" ng-if="::!c.options.hide_header">
<h2 class="h4 panel-title">
<span ng-if="c.options.glyph">
<fa name="{{::c.options.glyph}}" />
</span>{{::c.options.title}}</h2>
<div ng-show="c.showFilter">
<input aria-label="${Filter}" ng-model="c.data.filterText" ng-model-options="{debounce: 300}" sn-focus="c.showFilter" placeholder="{{::data.filterMsg}}" ng-change="c.update()" class="form-control input-sm filter-box"></div>
</div>
<ul class="list-group hide-x-overflow" style="max-height: {{::c.options.panel_body_height || 'none'}}; overflow-y: auto;">
<li ng-if="c.data.list.length > 0" ng-repeat="item in c.data.list track by item.sys_id" class="list-group-item">
<a ng-click="c.onClick($event, item, item.url, {})" href="javascript:void(0)">
<span ng-repeat="action in c.data.actions" href="" ng-click="c.onClick($event, item, action.url, action)" ng-if="action.glyph"
class="list-action l-h-40 pull-right">

<fa name="{{action.glyph}}" ng-class="c.getActionColor(action)" />
</span>
<span ng-if="c.options.image_field" class="pull-left m-r"
ng-class="{'avatar': c.options.rounded_images, 'thumb-sm': c.options.rounded_images}">
<img ng-src="{{item.image_field}}" alt="..." class="img-sm" ng-class="{'img-circle': c.options.rounded_images}">
</span>
<div>
<div ng-switch on="item.display_field.type" ng-class="{'l-h-40': !item.secondary_fields.length}">
<span class="translated-html" ng-switch-when="translated_html" ng-bind-html="item.display_field.value"></span>
<div ng-switch-default>{{item.display_field.display_value}}</div>
</div>
<small class="text-muted" ng-repeat="f in item.secondary_fields" aria-live="polite">
<span ng-if="!$first"> • </span>
<span ng-switch="f.type" title="{{::f.label}}">
<span ng-switch-when="glide_date"><sn-time-ago timestamp="::f.value" /></span>
<span ng-switch-when="glide_date_time"><sn-time-ago timestamp="::f.value" /></span>
<span ng-switch-default="">{{f.display_value}}</span>
</span>
</small>
</div>
</a>
</li>
<div ng-if="!c.data.list.length" class="list-group-item">
${No records found}
</div>
</ul>
<div class="panel-footer" ng-if="!c.options.hide_footer && c.options.maximum_entries && c.data.count > c.options.maximum_entries">
<div class="h4 number-shown-label">{{c.getMaxShownLabel(c.options.maximum_entries, c.data.count)}}</div>
<a class="pull-right" ng-href="?id={{c.seeAllPage}}&table={{c.options.table}}&filter={{c.options.filter}}{{c.targetPageID}}">${View all}</a>
</div>
</div>

Client controller:

function ($scope, $location, $rootScope, spUtil, $interpolate) {
var c = this;

this.data.filterText = "";
this.showFilter = false;

this.onClick = function($event, item, url, action) {
$event.stopPropagation();
$event.preventDefault();
if (typeof url == "string") {
var urlExp = $interpolate(url);
url = urlExp(item);
$location.url(url);

} else if (url && typeof url == "object")
$location.search(url);
else {
var evt = {};
evt.url = url;
evt.table = item.className;
evt.sys_id = item.sys_id;
evt.record = item;
evt.rectangle_id = c.options.sys_id;
evt.action = action;
// put out the selection with simple list "sl_" prefix
$location.search('sl_sys_id', evt.sys_id);
$location.search('sl_table', evt.table);
$location.search('spa', 1); // spa means "I've got this"
$rootScope.$broadcast('$sp.list.click', evt);
}
};

if (c.options.table)
spUtil.recordWatch($scope, c.options.table, c.options.filter);

this.getMaxShownLabel = function(maxEntries, totalCount) {
if (totalCount == c.data.maxCount)
return "${First [0] of more than [1]}".replace('[0]', maxEntries).replace('[1]', totalCount);

return "${First [0] of [1]}".replace('[0]', maxEntries).replace('[1]', totalCount);
};

this.seeAllPage = c.options.list_page_dv || 'list';
//var window_name= _blank ;
this.targetPageID = (c.options.sp_page) ? "&target_page_id=" + c.options.sp_page : "";

c.getActionColor = function(action) {
return "text-" + action.color;
};

c.update = function update() {
c.server.update();
};

c.toggleFilter = function() {
c.showFilter = !c.showFilter;
};
function newTab(url) {
var win = window.open(url, '_blank');
win.focus();
}

}

Server script:

(function () {
data.filterMsg = gs.getMessage("Filter...");
if(gs.nil(options.hide_footer))
options.hide_footer = false;
options.hide_footer = (options.hide_footer == "true" || options.hide_footer == true);
options.table = $sp.getParameter('t') || options.table;
if (!options.table)
return;

var gr = new GlideRecordSecure(options.table); // does ACL checking for us
if(!gr.isValid()) {
data.isValid = false;
return;
} else
data.isValid = true;
// grTemp is used to check isValidField since using GlideRecordSecure fails for date/time fields
var grTemp = new GlideRecord(options.table);
gr.addEncodedQuery(options.filter);
options.title = options.title || gr.getPlural();
options.display_field = $sp.getParameter('f') || options.display_field;
if (!options.display_field || !grTemp.isValidField(options.display_field))
options.display_field = gr.getDisplayName();

if (input && input.filterText) {
gr.addEncodedQuery(options.display_field + "LIKE" + input.filterText)
}

options.title = options.title || gr.getPlural();
options.secondary_fields = options.secondary_fields || "";
options.secondary_fields = options.secondary_fields.split(",");
if (!options.order_by || !grTemp.isValidField(options.order_by))
options.order_by = options.display_field;

// Set ID of sp_page from option schema
if (options.list_page) {
var sp_page = GlideRecord('sp_page');
if (sp_page.get(options.list_page))
options.list_page_dv = sp_page.getDisplayValue('id');
}

// redo query with limit
if (options.order_direction == "asc")
gr.orderBy(options.order_by);
else
gr.orderByDesc(options.order_by);

data.maxCount = 500;
gr.setLimit(data.maxCount);
gr.query();

data.count = gr.getRowCount();
data.actions = getActions();
data.list = [];
var recordIdx = 0;
while (gr.next()) {
if (options.maximum_entries && recordIdx == options.maximum_entries)
break;

record.sys_id = gr.getValue('sys_id');
record.className = gr.getRecordClassName();
if (options.image_field) {
record.image_field = gr.getDisplayValue(options.image_field);
if (!record.image_field)
record.image_field = "noimage.pngx";
}

if (options.display_field)
record.display_field = getField(gr, options.display_field);

record.secondary_fields = [];
options.secondary_fields.forEach(function(f) {
record.secondary_fields.push(getField(gr, f));
});

if (options.sp_page) {
var view = "sp";
if (options.view) {
var viewGR = new GlideRecord("sys_ui_view");
viewGR.get(options.view);
view = viewGR.getValue("name");
}
record.url = {id: options.sp_page, table: record.className, sys_id: record.sys_id, view: view};
} else if (options.url != ''){
record.url = options.url;
$window =_blank;
}
else
record.url = null;

data.list.push(record);
recordIdx++;
}

function getField(gr, name) {
var f = {};
f.display_value = gr.getDisplayValue(name);
f.value = gr.getValue(name);
var ge = gr.getElement(name);
if (ge == null)
return f;

f.type = ge.getED().getInternalType();
f.label = ge.getLabel();
return f;
}

Thanks in advance!