Modifying Data Table from URL Definition Widget?

matt v_
Mega Expert

Hi All,

I know this widget has been brought up many times before, but I haven't found an answer to what I'm trying to do.

We have updated the My Requests page with multiple instances of a modified Simple List widget, one each for the different applications that users could submit tickets for:   HR Case, Incident, SC Request, Legal Request, Facilities Request, etc.   The idea is to make the data table widget more dynamic, as we have different ticket form pages for certain types.   For instance, HR cases load a page called 'hr_case_form' which looks similar to the 'ticket' page, but includes related lists for approvals/tasks.   The Requests header menu and the simple list widgets themselves all redirect to the appropriate pages already.

For each of the simple lists, clicking View All will load the mysteriously-hidden "List" page (no idea why 'internal' is checked on that page; just makes it harder to edit) which has nothing but the 'Data Table from URL Definition' widget loaded.   There are instance options, but they are set to Incident table with some default fields/columns which seem to be ignored.

Issues

  1. changing the landing page within the widget code provides inconsistent results
  2. fields/columns on data table seem to be static, regardless of options chosen

By default, there's a line in the client script for this widget which redirects to the 'form' page when any record is clicked, but there's more to it (line 3 below):

$scope.$on('data_table.click', function(e, parms) {

var oid = $location.search().id;

var p = $scope.data.page_id || 'form';

var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: $scope.data.view};

if (oid == p) {

s.spa = 1;

var t = $location.search();

s = angular.extend(t, s);

$rootScope.$broadcast('$sp.list.click', s);

}

And here's the associated server script for data.page_id.   I have no idea what the purpose of this is.

// page is where the record URLs go

var sp_page = $sp.getValue('sp_page');

if (sp_page) {

var pageGR = new GlideRecord('sp_page');

pageGR.get(sp_page);

data.page_id = pageGR.id.getDisplayValue();

}

My Attempts

1.   I tried to make this conditional in the server script, but even so, I will still sometimes get the 'form' page when clicking a record.   Sometimes the page I want loads just fine.   I can't figure out why this isn't consistent.   When I used var p='ticket' it seemed to work each time, but I need this to be dynamic.   The workaround solution that I'm thinking of is to create new pages for each ticket type and configure a separate instance of this widget for each, so that it can all be hard-coded.   I would like to avoid this if possible, mainly because I don't want this to be a need every time we add a new ticket/request type that will need its own landing page for the list/form.

Client script changes:

$scope.$on('data_table.click', function(e, parms) {

var oid = $location.search().id;

//var p = $scope.data.page_id || $scope.data.formPage;

var p = $scope.data.formPage;

Server script addition:

var fp = "";

if ($sp.getParameter('table') == 'hr_case') {

fp = 'hr_case_form';

} else if ($sp.getParameter('table') == 'sc_req_item') {

fp = 'sc_request';

} else {

fp = 'ticket';

}

data.formPage = fp;

2.   For the issue with the columns, I tested by creating a new view called 'Portal' and set this in the widget instance, but it did not make any difference.   I also added fields directly to the widget instance, but I did not expect any changes there, since the different tables will not all have common fields.   Regardless, I still only ever see 4 columns.

find_real_file.png

find_real_file.png

Thoughts, experiences, words of wisdom?

8 REPLIES 8

User166992
Tera Guru

Hello,

 

I have also done similar configurations for one of my customer. To achieve this, I have updated couple of things which are as follows:

1) create copy of data table widget

2) update server side code after line 143 add below

record.u_sys_class_name = gr.getValue('sys_class_name');

3) Update ng-click function on HTML code to include additional parameter

ng-click="go(data.table, item, item.u_sys_class_name)"

4) Update client side code to get the parameter

$scope.go = function(table, item, task_type) {
spNavStateManager.onRecordChange(table).then(function() {
var parms = {};
parms.table = table;
parms.sys_id = item.sys_id;
parms.record = item;
parms.task_type = task_type;
$scope.ignoreLocationChange = true;
for (var x in c.data.list) {
c.data.list[x].selected = false;
}
item.selected = true;
$scope.$emit(eventNames.click, parms);
}, function() {
// do nothing in case of closing the modal by clicking on x
});
};

5) Clone existing widget Data table from URL Definition

6) Update Client Script function as below

function callDataClick(e, parms) {
var oid = $location.search().id;
var p = $scope.data.page_id || 'form';

if(parms.task_type == 'incident')

p = 'ticket';


var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: $scope.data.view};
if (oid == p) {
s.spa = 1;
var t = $location.search();
s = angular.extend(t, s);
$rootScope.$broadcast('$sp.list.click', s);
}

var newURL = $location.search(s);
spAriaFocusManager.navigateToLink(newURL.url());
}

Try above, let me know if that works for you 🙂

Best Regards,

Jaikumar

Sumanth16
Kilo Patron

Hi Matt,

 

Have you configured more fields on this form?I have got same requirement,could you help me with this 

 

Thanks

sumanth 

Hi Sumanth,

I did not get that far, unfortunately.  Other issues came up and we are now in the middle of an upgrade, so it might be a while before I can get back to it.

Sumanth16
Kilo Patron

Can you guide me for this task,I am new to service portal

 

Thanks in advance