Data table from instance definition - multiple widgets on single page

[Sin]

Guys I know that we can add multiple "data table from instance definition" widget one by one in a single page(service portal). But I would like to show multiple "data table from instance definition" widgets on a same page using tab view(bootstrap).like this..

I need to use 2 "data table from instance definition" widgets here. One is for "My incident" and another one is for "My requests".

How can I get this.Please advice!

Thanks in advance

Sana

[Deepak Ingale1]

Hello,

You can create a widget with two TABs and each tab, you can call the "data table" widget in HTML code. ( embeded widget)

https://docs.servicenow.com/bundle/london-servicenow-platform/page/build/service-portal/concept/c_Ne...

Note: Please mark reply as correct / helpful if it answers your question.

[Sin]

yes I did that

<div>

<div class="panel with-nav-tabs panel-warning">
<div class="panel-heading">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1warning" data-toggle="tab">Incidents</a></li>
<li><a href="#tab2warning" data-toggle="tab">Requests</a></li>
<li><a href="#tab3warning" data-toggle="tab">Action required</a></li>

</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1warning">
<sp-widget widget="data.incidentTableWidget"></sp-widget>
</div>
<div class="tab-pane fade" id="tab2warning">
<sp-widget widget="data.requestTableWidget"></sp-widget>
</div>

</div>
</div>
</div>

</div>

But when I use "data table" widget.. I don't get form view of incidents/request right? when I click on incident/request i should get form view.

[Sin · Accepted solution]

Got solution

we can you bootstrap tabs as I mentioned above.Just pass the following client script on your widgets where you are passing parameters for "data table".(this client script copied from "data table from instance definition" widget).

Client script:

function ($scope, spUtil, $location, spAriaFocusManager) {
$scope.$on('data_table.click', function(e, parms){
var p = $scope.data.page_id || 'form';
var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: 'sp'};
var newURL = $location.search(s);
spAriaFocusManager.navigateToLink(newURL.url());
});
}

[Ken24]

Hi Sana, can you clarify a few things for me?  

The referenced widget incidentTableWidget in "<sp-widget widget="data.incidentTableWidget"></sp-widget>"  is a clone of Data Table widget (widget_data_table)?

The HTML above that contains the line "<sp-widget widget="data.incidentTableWidget"></sp-widget>" is placed in another widget I call "tabbed_data_tables" for example?

And you used the client script above in the same widget I call "tabbed_data_tables"?

We stack multiple "data table from instance definition" widgets today and we really like the tabbed solution, but cant seem to make it work.

Thanks a lot.

Ken