Tabbed Table Widget

[Sam Ogden]

Hi All,

On our Service Portal Homepage we have 2 simple list widgets (1 for incidents and 1 for Requests):

When you select the view all button it takes you to another table view :

This view all shows all the active incidents for the logged in users companies or any child companies associated to them.

We have a new requirement where we need customers to be ale to see their closed logs for the last 4 months.   I would like for them to click the view all button and get to this tabled list view, but for it to have 2 tabs - Open which shows them what they currently see and closed which shows them their closed logs for the last 4 months.   How would I amend the widget for it to do this?

I believe that when you click view all it then uses the Data table from URL definition widget.

Any help is greatly appreciated.

[shanjith]

HI sam,

You can use two widget

        1.which shows only the open incidents

        2.which shows the closed incidents.

for separating the widget you can use filter conditions

you can use the data table widget.

Thanks,

shanjith joy

PS: Hit like, Helpful or Correct depending on the impact of the response

[Sam Ogden]

Hi Shanjith,

Thanks for the above.   I would prefer it if I could have it display as 1 table with a tab at the top to change between open and closed.   I would like this to look similar to the 'My Issues' section looks on the Hi Portal:

With the tabs at the top being 'Open' & 'Closed'

Thanks

[shanjith]

HI Sam,

          you can create a custom widget look similar to your requirement. In the new widget repeat the data table code twice with tab options in the design view and use the filter option to differentiate the open and closed records.

Thanks,

shanjith joy

PS: Hit like, Helpful or Correct depending on the impact of the response

[Sam Ogden]

Hi Shanjith,

I am only fairly new to the coding side in ServiceNow.   I believe that this table currently uses the Data Table from URL Definition Widget.

This currently has the following code:

HTML

<div>

  <div ng-if="data.invalid_table">

      <div class="alert alert-info">

          <span ng-if="data.table_label">${Table not defined} '{{data.table_label}}'</span>

          <span ng-if="!data.table_label">${Select table on field below or specify on URL} ?id=list&amp;table=table_name</span>

      </div>

      <sn-record-picker field="selectedTable" table="'sys_db_object'"

                                          display-field="'label'"

                                          value-field="'name'"

                                          display-fields="'name'"

                                          search-fields="'label,name'" page-size="100" on-change="onChange()" ></sn-record-picker>

  </div>

  <div ng-if="data.dataTableWidget && !data.invalid_table">

    <sp-widget widget="data.dataTableWidget"></sp-widget>

  </div>  

</div>

CSS

.widget-data-table .clearfix{

display: none;

}

Server Script

(function() {
deleteOptions(['table','field_list','filter','order_by', 'order_direction','order']);
if (input) {
  data.table = input.table;
  data.view = input.view;
} else {
  data.table = $sp.getParameter('table') || $sp.getParameter('t');
  data.view = $sp.getParameter('view');
}

if (!data.table) {
  data.invalid_table = true;
  data.table_label = "";
  return;
}

var gr = new GlideRecordSecure(data.table);
if (!gr.isValid()) {
  data.invalid_table = true;
  data.table_label = data.table;
  return;
}

// 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();
}

// widget parameters
data.table_label = gr.getLabel();
data.fields = $sp.getListColumns(data.table, data.view);
data.title = gr.getPlural();
copyParameters(data, ['p', 'o', 'd', 'filter']);
copyParameters(data, ['relationship_id', 'apply_to', 'apply_to_sys_id']);
data.show_new = true;
data.show_keywords   = true;
data.show_breadcrumbs = true;
data.fromUrl = true;

data.dataTableWidget = $sp.getWidget('widget-data-table', data);

function copyParameters(to, names) {
  names.forEach(function(name) {
    data[name] = $sp.getParameter(name);
  })
}

// in case this widget is tied to the wrong instance type
function deleteOptions(names) {
  names.forEach(function(name) {
    delete options[name];
  })
}
})()

Client Controller

function($scope, $rootScope, $location, spUtil, $timeout) {
if ($scope.data.dataTableWidget)
  angular.extend($scope.data.dataTableWidget.options, $scope.options);

$scope.$on('data_table.click', function(e, parms) {
  var oid = $location.search().id;
  var p = $scope.data.page_id || 'cdl_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);
  }
 
  $location.search(s);
});

$scope.$on('select2.ready', function(e, $el){
  if ($scope.data.invalid_table){
    e.stopPropagation();
    $el.select2('open');
  }
})

$scope.selectedTable = {
  displayValue: $scope.data.table,
  value: $scope.data.table
}

function resetParams(){
  delete $scope.data.p;
  delete $scope.data.o;
  delete $scope.data.d;
  delete $scope.data.q;
  delete $scope.data.table;
}

$scope.onChange = function() {
  resetParams();
  $scope.data.table = $scope.selectedTable.value;
  $scope.data.fields = "";   // reset
  $scope.data.invalid_table = false;
  getData(true);
}

function getData(updateUrl) {
  var f = $scope.data;
  spUtil.update($scope).then(function(data) {
      $scope.data.dataTableWidget = null;
      $timeout(function(){
        $scope.data.dataTableWidget = data.dataTableWidget;
        angular.extend($scope.data.dataTableWidget.options, $scope.options);
        if (updateUrl)
          setPermalink(f.table);
      });
  });
}

function setPermalink(table) {
  $scope.ignoreLocationChange = true;
  var searchParms = $location.search();
  var search = {
    spa: 1,
    table: table,
    id: searchParms.id
  };
  $location.search(search);
}
}

Can you advise on what changes would need to be made to this code in order to achieve our requirement of a tabbed view so Active logs are on the first tab and closed logs on the second tab.

Any help is greatly appreciated.

Thanks

Sam