How to embed the Report widget inside a Bootstrap Tab Menu ??

[Akshay Palekar1]

My aim here is to embed the Report widget into a Bootstrap Tab Menu in the Service Portal. I have activated the Performance Analytics and Reporting service portal widget, which allows me to drag and drop the report widget into my container. When I drag and drop the report widget and select the report I want, the report is visible on the page, but if I try to embed the same report into the tab menu, I am unable to see the report and I can only see "Select a report in widget options!".

HTML Code:

<div class="tabbable-panel">
  <div class="tabbable-line">
    <ul class="nav nav-tabs ">
      <li class="active">
        <a href="#tab_default_1" data-toggle="tab">
          Comp </a>
      </li>
      <li>
        <a href="#tab_default_2" data-toggle="tab">
           Policy </a>
      </li>
      <li>
        <a href="#tab_default_3" data-toggle="tab">
          Risk </a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane active" id="tab_default_1">
        <sp-widget widget=" c.reportWidget"></sp-widget>
      </div>
      <div class="tab-pane" id="tab_default_2">
        <widget id="report"></widget>
      </div>
      <div class="tab-pane" id="tab_default_3">
        <widget id="report"></widget>
      </div>
    </div>
  </div>
</div>

Client Script:

function(spUtil) {
  /* widget controller */
  var c = this;
	
	spUtil.get("report", {sys_id: "<my-report-id>"}).then(function(response) {
    c.reportWidget = response;
});

}

[ffr]

Hello,

Did  you find the solution ? If yes, will be great to share it here.

I have to deal with the same problem.

Thanks

[Oleg]

You can implement the requirements with respect of uib-tabset and uib-tab supported out of the box in Service Portal. For example, you need to display 10 reports of 3 tabs. The code of Client Controller could be almost empty:

function controller ($scope) {
	var c = this;
}

The code of Body HTML Template could be like the following

<div>
  <uib-tabset class="tabbable" active="activeTab">
    <uib-tab heading="Comp" index=0>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-10">
            <sp-widget widget="c.data.w1"></sp-widget>
          </div>
          <div class="col-md-2">
            <sp-widget widget="c.data.w2"></sp-widget>
            <sp-widget widget="c.data.w3"></sp-widget>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <sp-widget widget="c.data.w4"></sp-widget>
          </div>
          <div class="col-md-6">
            <sp-widget widget="c.data.w5"></sp-widget>
          </div>
        </div>
      </div>
    </uib-tab>
    <uib-tab heading="Policy" index=1>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
            <sp-widget widget="c.data.w6"></sp-widget>
          </div>
          <div class="col-md-6">
            <sp-widget widget="c.data.w7"></sp-widget>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <sp-widget widget="c.data.w8"></sp-widget>
          </div>
          <div class="col-md-6">
            <sp-widget widget="c.data.w9"></sp-widget>
          </div>
        </div>
      </div>
    </uib-tab>
    <uib-tab heading="Risk" index=2>
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <sp-widget widget="c.data.w10"></sp-widget>
          </div>
        </div>
      </div>
    </uib-tab>
  </uib-tabset>
</div>

where one can use containers, rows and columns to place reports like you need.

The code of the server should just initialize the widgets (c.data.w1, c.data.w2, ..., c.data.w10) with the code like below

(function (data) {
    data.w1 = $sp.getWidget("report", {
		report_id: "65e593c6dbab63000868a2364b961947",
		widget_parameters: JSON.stringify({"report_id": {
				"value": "65e593c6dbab63000868a2364b961947",
				"displayValue": "Report 1"
			},
			"show_title": {
				"value": "true",
				"displayValue": "true"
			}
		})
	});
    data.w2 = $sp.getWidget("report", {
		report_id: "71db431edbe3a3000868a2364b961918",
		widget_parameters: JSON.stringify({"report_id": {
				"value": "71db431edbe3a3000868a2364b961918",
				"displayValue": "Report 2"
			},
			"show_title": {
				"value": "true",
				"displayValue": "true"
			}
		})
	});
    // ...
    data.w10 = $sp.getWidget("report", {
		report_id: "2ff36ab9db63670095a810825b961978",
		widget_parameters: JSON.stringify({
			"report_id": {
				"value": "2ff36ab9db63670095a810825b961978",
				"displayValue": "Report 10"
			},
			"show_title": {
				"value": "true",
				"displayValue": "true"
			}
		})
	});
})(data);

You should mostly to fill the correct sys_ids of reports from sys_report table and the corresponding displayValues.

[Alex McDonald]

Is there a way to get this working in the more recent versions of ServiceNow (Paris, Orlando).

It seems like it will load the first result and the other reports will be stuck in a "Building chart, Please wait". 

Looking at the debugging I can see the different values for w1,w2,w3... are correct and present when looking at the console. Any work arounds?

[Joel Lignier]

Hi Alex, did you end up finding a solution that you can share to get this working in the Paris release?