Hi Francesco,
I have a solution, unfortunately more an ugly hack that a nice integration (I am still working on that).
My solution:
A widget that calls a UI Page that integrates the GlideV2ChartingIncludes library from ServiceNow.
There is even a documentation for this great library: LINK
As the documentation already suggests, it requires Jelly, so no Widgets. (Trying to integrate the library as a dependency doesnt work either)
So what you need:
1. A new Widget:
Name: Show UI Page
ID: show-ui-page
Body HTML Template:
<div>
<iframe ng-src="{{data.report}}" scrolling="no" frameborder="0" height="{{data.height}}" width="100%"></iframe>
</div>
Server Script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.report = "show_report.do?report="+options.report;
if (options.height) {
data.height = options.height +"px";
} else {
data.height = "300px";
}
})();
Client Controller can be left the default.
Option schema:
[{"displayValue":"Report","name":"report","label":"Report","type":"reference","value":"sys_report","ed":{"reference":"sys_report"}},{"name":"height","label":"Height","type":"string"}]
----------------------------------------------------
2. UI Page:
Name: show_report
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"></link>
<g:requires name="scripts/GlideV2ChartingIncludes.js" includes="true"/>
<g2:evaluate>
var report = RP.getParameterValue('report');
</g2:evaluate>
<input type="hidden" id="report_sys_id" name="report_sys_id" value="$[report]" />
<span id="report"/>
<style>
#img_company_loader {
display:none;
position:absolute;
z-index:1000;
color: white;
}
#div_company_loader {
display:none;
position:fixed;
background:#000;
z-index:999;
}
</style>
<div id="div_company_loader">
<i id="img_company_loader" class="fa fa-spinner fa-pulse fa-4x"></i>
</div>
</j:jelly>
Client Script:
displayLoader(true);
embedReportByParams(jQuery("span[id=report]"), {jvar_report_id:gel("report_sys_id").value});
setTimeout(function(){displayLoader(false);},2000);
function displayLoader(show) {
var winH = $j(window).height();
var winW = $j(window).width();
$j("#div_company_loader").css({
opacity: 0.5,
top: 0,
left: 0,
width: "100%",
height: "100%"
});
$j("#img_company_loader").css({
top: winH/2,
left: winW/2
});
if (show) {
$j("#div_company_loader").show();
$j("#img_company_loader").show();
} else {
$j("#div_company_loader").hide();
$j("#img_company_loader").hide();
}
}
----------------------------------------------------
3. Add the Widget to any page in the service portal. Open the options and select the report you want to show. Depending on where you add it, supply your own height.
Loading the page should now display a "spinning loader" for 2 seconds while in the background the report is loaded.
GlideV2ChartingIncludes is great as it also lets you generate new reports on the fly without any existing report. You only need to supply the table and the filter.
So I got this far, it would be great to work without the horrible iframe.
