How to show Timeline page and Calender in service Portal?

saptashwa_chakr
Kilo Expert

Hi All,

I had faced some troubles while doing some service Portal Design works. Those are the followings:

  • I want to show the Timeline page in a Service Portal page.
  • I want to show a calendar view in Service Portal. (Like On Call schedule).

                          I have created an application which is used for loan purpose. Now I want to show the Loan Requests in calendar format, i.e on which day how many requests are submitted on which day. I want a calendar like page to show.

Please Help me out and share your reviews.

4 REPLIES 4

rgm276
Mega Guru

I was able to create a new page and widget to show reports in an iFrame on the service portal


here is a simple example of how I was able to do that



==============================


Create a new report view widget


find_real_file.png


HTML


<div class ="container-fluid" id="iframeDiv" style="padding:0;margin:0" >


  <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12" style="width: 100%; height: 100%;overflow: hidden;padding:0;margin:0">


 


    <iframe width="100%" id="main" ng-src="{{url}}" frameBorder="0"   style="position: relative;"></iframe>


  <div id="loader" style="position: absolute; font-size: 14px; color: #4286f4; display: none">


          <img src="Loading.gif" width="30" height="30"/>     L O A D I N G...


      </div>


  </div>


<script>


        $(document).ready(function() {


            $('#main').css('height', ($(window).height()+10)+'px');


            $("#iframeDiv").closest('.col-md-8').toggleClass('col-md-8 col-md-offset-4 col-md-8');          


        });


</script>


</div>


CLIENT SCRIPT


function($scope,$rootScope) {


  /* widget controller */


  var c = this;


$scope.url="sys_report_template.do?jvar_report_id=4875b140c611227b0182454ee743c7d7";



var myIframe = document.getElementById('main');


myIframe.addEventListener("load", function() {


  this.contentWindow.document.getElementById("reportform_control").style.display='none';   // hide report controls from users


});


}



*note* ideally you could make the url an instance property for long-term usability  


==================================


next create a new page called 'report viewer' and add the report viewer widget to the page



find_real_file.png


========================


Then you can add a link anywhere to call your new page and display your report in service portal


for example if I added a new link to the OOB header to call my new report page like this


find_real_file.png




Resulting in output that looks like this


find_real_file.png



I presume that you can do this w/ the timeline page once you know the URL you want to display in the iFrame


hope this helps you


Thanks Robert,



Thanks for sharing. This is really a nice done by you. I will let you know if I will face some problems.



Thanks,


Saptashwa


were you able achieve the timelines in SP?

Hello,

is it possible to show outages in the calendar view? I´ve tried to use "cmdb_ci_outage_list.do" but it shows a table even if I try "this.contentWindow.document.getElementById("outagesform_control").style.display='none'; ".

Thx!

 Edit: I created a new outage report and Im able to get it on SP! But outages are not visible due to security constraints... I can handle it but the report is static and doesnt show a new outages.

Edit 2: It works with new outages just PDI is too slow 🙂 So I have to try it on our DEV.