Tabbed Table Widget for Portal

[Sam Ogden]

Hi All,

We use a couple of simple list widgets on our portal.   When you click the view all link it takes you to a new page with a full table view.   This the 'Data table from URL definition' widget.

We would like to either amend this widget or create a widget that displays the table but has a tab at the top to change the filter that is used on the table.   We would like one tab to show incidents where active = true and the other tab to show incidents where active = false.

Any help on this would be greatly appreciated.

Thanks

[Rohith Sabbinen]

Hi Sam,

Please Refer the below link.

Service Portal Tabbed Catalog Widget

This might help you.

Thanks,

Rohith.

[Rohith Sabbinen]

Please Refer this Link also Re: Free Service Portal Widget: Related Lists

[Nia McCash]

I've never tried it but there is a Tabbed Table Interface widget on the Share site ServiceNow Share

[Sam Ogden]

Hi Nia,

Thanks for pointing me in the direction of this.   I think this should work with some tweaks, but I am not very used to the coding side of widgets.   I appreciate you said you have not used this widget, but I was wondering if you knew what changes needed to be made to display the tables I wanted on the tabs?

HTML code

<div class="clearfix"></div>
<div id="table-tabs">
<ul class="nav nav-tabs nav-justified">
<!-- If you prefer to have pills instead of tabs, simply comment out the above <ul> element and uncomment the below <ul> element -->
<!--ul class="nav nav-tabs nav-pills"-->

<!-- use the ng-show directive to display or hide tabs based on conditions such as by Role -->
  <li ng-show="data.your_condition_here" role="presentation" id="tickets-tab-incident" class="active"><a href="#">Incident</a></li>
  <li ng-show="data.your_condition_here" role="presentation" id="tickets-tab-problem"><a href="#">Problem</a></li>
  <li ng-show="data.your_condition_here" role="presentation" id="tickets-tab-change"><a href="#">Change</a></li>
  <li ng-show="data.your_condition_here" role="presentation" id="tickets-tab-enhancement"><a href="#">Enhancement</a></li>
</ul>
</div>

Server Script

(function () {

/*

  Add any condition you may need. Example could be to check if the user has a specific Role: data.isItilAgent (below)

*/

data.your_condition_here = true;

//data.isItilAgent = gs.getUser().hasRole('itil');

})();

Client Controller

function ($scope, $sce) {

/**
  * This jQuery 'click' action selects the active tab and displays
  * the table to be displayed. It also sets the tab as "active" for
  * Bootstrap styling.
  *
  * @param None.
  * @return Nothing.
  */
$("#table-tabs ul li").click(function (e) {
  e.preventDefault();

  // Set the "active" tab for Bootstrap styling
  $("#table-tabs ul li").removeClass("active");
  $(this).addClass("active");

  // Select which table to display
  var id = $(this).attr("id");
  switch (id) {
    // the ID of a table
    case "table-id-1":
      hideTables("#table-to-display");
      break;
      // the ID of a table
    case "table-id-2":
      hideTables("#table-to-display");
      break;
      // the ID of a table
    case "table-id-3":
      hideTables("#table-to-display");
      break;
      // repeat for as many tables as you need, using the ID for each case
  }

  return false;
});

/**
    * This method hides all tables of the specified class,
    * and then displays the table that is passed in as
    * the parameter.
    *
    * @param option the name of the table that you want to display,
    *       as a string. It should be the ID of the table,
              e.g. "table-name"
    * @return Nothing.
    */
function hideTables(option) {
  $(".table-class").hide();

  if (option) {
    $(option).show();
  }
}

}

It looks like the code needs amending in the client controller for the table, but I'm not sure what ID it requires and where in the code this needs adding.

Any help is greatly appreciated.

Thanks