How do I create tabs for out of the box widgets on a portal page

[matthew_hughes]

I'm using two OOTB widgets on my employee centre page - Your Favorites and Relevant for you:

One requirement is for those two widgets to appear side by side as separate tabs. Can somebody explain what I need to create two tabs for those different widgets like the below screenshot:

[Rajesh Chopade1]

Hi @matthew_hughes 

First, you need to create a custom widget that will handle the tabbed interface.

Add HTML for tabs:

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <!-- Add more tabs as needed -->
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab-content-item active">
      <div data-widget="widget_1_id"></div>
    </div>
    <div id="tab2" class="tab-content-item">
      <div data-widget="widget_2_id"></div>
    </div>
    <!-- Add more tab content sections as needed -->
  </div>
</div>

CSS:

.tabs {
  border: 1px solid #ddd;
  padding: 10px;
}
.tab-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tab-links li {
  display: inline-block;
  margin-right: 10px;
}
.tab-content-item {
  display: none;
}
.tab-content-item.active {
  display: block;
}
.tab-links li.active a {
  font-weight: bold;
}

Javascript:

function($scope) {
  $scope.activateTab = function(tabId) {
    // Hide all tab content and remove active class from all tab-links
    $('.tab-content-item').removeClass('active');
    $('.tab-links li').removeClass('active');
    
    // Show the selected tab content and add active class to the respective tab-link
    $(tabId).addClass('active');
    $('.tab-links li a[href="' + tabId + '"]').parent().addClass('active');
  };
  
  // Initialize the first tab as active
  $scope.activateTab('#tab1');
}

Save the widget.

Add the Custom Widget to a Portal Page

1. Navigate to Service Portal Pages:
• Go to Service Portal > Pages.
• Select or create a page where you want to add the tabs.
2. Edit the Page Layout:
• Open the page and go to the Page Layout tab.
• Add a new widget and select your Tabbed Container widget.
3. Configure Widget Settings:
• Make sure the widget is configured to use the appropriate HTML, CSS, and JavaScript that you have set up.
4. Replace Placeholder Widget IDs:
• Ensure that widget_1_id and widget_2_id in the HTML code are replaced with the actual sys_ids of the out-of-the-box widgets you want to display in each tab.
• To find the sys_id of a widget:
• Go to Service Portal > Widgets.
• Open the widget and note its sys_id from the widget record.

i hope my answer helps you to resolve your issue, if yes please mark my answer helpful and correct.

THANK YOU

rajesh chopade

[matthew_hughes]

Hi @Rajesh Chopade1  I've added the widget and replaced the SYS IDs in the tabbed widget, but it's not showing anything:

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Your favorites</a></li>
<li><a href="#tab2">Relevant for you</a></li>
<!-- Add more tabs as needed -->
</ul>
<div class="tab-content">
<div id="tab1" class="tab-content-item active">
<div data-widget="b43545e2436fe1108c5d43d488b8f2a5"></div>
</div>
<div id="tab2" class="tab-content-item">
<div data-widget="6cc836d0dbf700500c209493db961914"></div>
</div>
<!-- Add more tab content sections as needed -->
</div>
</div>

[Rajesh Chopade1]

hi @matthew_hughes 

Are you getting any error?

You can refer following link for detail explanations:

https://developer.servicenow.com/connect.do#!/share/contents/6265234_tabbed_table_widget?v=2.2&t=RAT...

[matthew_hughes]

Hi @Rajesh Chopade1  On my portal page, with that code, I'm getting the below:

When I click on either of those tabs, it's not showing the content of those widgets even though I've specified the Sys IDs. The end of URL shows #tab1 or #tab2

The Body HTML template is:

<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">Your favorites</a></li>
<li><a href="#tab2">Relevant for you</a></li>
<!-- Add more tabs as needed -->
</ul>
<div class="tab-content">
<div id="tab1" class="tab-content-item active">
<div data-widget="b43545e2436fe1108c5d43d488b8f2a5"></div>
</div>
<div id="tab2" class="tab-content-item">
<div data-widget="6cc836d0dbf700500c209493db961914"></div>
</div>
<!-- Add more tab content sections as needed -->
</div>
</div>

The Server Script is:

function($scope) {

  $scope.activateTab = function(tabId) {

    // Hide all tab content and remove active class from all tab-links

    $('.tab-content-item').removeClass('active');

    $('.tab-links li').removeClass('active');

    // Show the selected tab content and add active class to the respective tab-link

    $(tabId).addClass('active');

    $('.tab-links li a[href="' + tabId + '"]').parent().addClass('active');

  };

  // Initialize the first tab as active

  $scope.activateTab('#tab1');

}

The Client Controller is:

api.controller=function() {

  /* widget controller */

  var c = this;

};

Are you able to explain why it's not showing the contents of the existing widgets?