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

[geoffluk]

Just to confirm, have you configured the jQuery widget as well? What does it look like right now?

[Sam Ogden]

Hi Geoff,

I have the JQuery a the bottom of the container on the page - currently though only the tabs display and not the tables:

I've setup the following page to hold the tables that I want to appear in the tabs:

Thanks once again for your help

Sam

[geoffluk]

HI Sam,

It looks like you don't have your Data Table widgets on the same page as the tabs+jQuery.

Your Container should look something like

• CDL Tables - Container 1
  • Row 1
    • Column 1
      • Instance: (Table Tabs)
      • Instance with Table: Open Incidents (Data Table)
      • Instance with Table: Closed Incidents (Data Table)
  • Row 2
    • Column 1
      • Instance: (jQuery)

The reason why you're not seeing the tables below the tab widget is because you have placed them on a different page. This tab widget can only show/hide tables that belong on the same page as it!

And just FYI, I personally put the jQuery widget into a separate container just so it was easier to pick it out of the crowd (so to speak) of the data tables. In our portal, our Records page has many widgets on it (tables, selectors, etc.) so putting it at the very bottom on its own just made it easier to keep track of it. Might be something to consider if you believe your Tickets page will also eventually contain many tables.

[Sam Ogden]

Hi Geoff,

Thanks for the above, this was a misunderstanding on my part.   I have changed my page and added in the 2 data tables to the page.   I have just tried this, but both data tables appear at the same time and the tabs don not change the view.   Not sure what part I am missing now - Again sorry for all the questions, I appreciated your help.

Current View:

1st data table:

2nd data table:

Table tabs code:

HTML:

<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" id="cdl-open-incidents" class="active"><a href="#cdl-open-incidents">Open</a></li>
  <li ng-show="data.your_condition_here" id="cdl-closed-incidents"><a href="#cdl-closed-incidents">Closed</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.active=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 "cdl-open-incidents":
      hideTables("#cdl-open-incidents");
      break;
      // the ID of a table
    case "cdl-closed-incidents":
      hideTables("#cdl-closed-incidents");
      break;
  }

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

}

Thanks

Sam

[geoffluk]

Hi Sam,

Sorry for the late response, was away on vacation for the long weekend.

Looking at your post, I think there are 2 things outstanding still:

(1) you need to set a class for all of your data tables so that the hideTables() function can target them. Right now, that function cannot do anything because it has no tables to target and then hide (when you click on a tab). In this case, please set the "Bootstrap class name" to "table-class" or anything else you'd prefer to use. Just make sure that the class names match in the "Bootstrap class name" field on   the data table and the jQuery call in the hideTables() function - don't forget that the jQuery requires you to use CSS notation, so the leading "." must be there.

(2) the jQuery widget needs to be modified so that it also targets the class used in the "Bootstrap class name". In the jQuery widget look for the line "$(".your-ticket-class-name").hide();" and modify the class selector to look for your own class name. You must do the same thing with the other jQuery selector because it targets your data tables by class name, and selects the first child to display once the page loads.

Remember that the tabbed widget is two-parts: the main widget does the actual tab building and handling. The second part, the jQuery, really just sets things up on page load, however it still needs to be modified to target your data tables.