Manage IM Dashboard

Initiative Management (IM) Dashboard is the customizable front end of the Initiative Management module.

IM Dashboard

Initiatives Dashboard can contain:

  • Dashboard Tabs, which contain
    IM Dashboard Sept 8 2017 dashboard tabs
  • Widgets (also called Sections or Blocks), which contain
    IM Dashboard Sept 8 2017 section widget
  • Section (or Widget or Block) tabs, which contain
    IM Dashboard Sept 8 2017 widget tabs
  • Customizable HTML, CSS, and JS forming the widget content.

To manage dashboard tabs:

  1. Add a dashboard tab:
    1. Click + new.
      IM Dashboard tabs
  2. Rename a dashboard tab:
    1. Click to select the dashboard tab.
    2. Click the change tab name Blue pen tab button button.
      Change tab name
    3. Type the new tab name.
    4. Click Close.
  3. Delete a dashboard tab:
    1. Click to select the dashboard tab.
    2. Click the delete X button.
      Change tab name delete button
    3. Click Yes to confirm.

To manage widgets (sections):

  1. Add a widget:
    1. Click + Add new widget.
      IM Dashboard Sept 8 2017 add new widget
  2. Rename the widget:
    1. Click the pen-shaped settings Stryka Pencil button.
      IM Dashboard Sept 8 2017 rename button
    2. Type the Widget name.
    3. Click Close.
  3. Delete a widget:
    1. Click the delete X button.
      IM Dashboard Sept 8 2017 delete
    2. Click Yes to confirm.

To manage Section (Widget) tabs:

  1. Add a Section tab:
    1. Click the add + button:
      • When no tabs have been added, the add tab button is beside the settings buttons.
        Widget tab button when there are no tabs yet
      • When tabs have been added, the add tab button is next to the tabs.
        Widget tab button when there are tabs
  2. Rename a Section tab:
    1. Click to select the Section tab.
    2. Click the pen-shaped settings Stryka Pencil button.
      Widget tab button rename
    3. Type the tab name in Widget name.
    4. Click Close.
  3. Delete a Section tab:
    1. Click to select the Section tab.
    2. Click the delete X button.
      Widget tab button delete button
    3. Click Yes to confirm.

To manage widget content:

  1. Click to select the widget’s Section tab.
  2. Click the pen-shaped settings Stryka Pencil button.

    For help with creating widgets, contact Plutora Support.
  3. Type the HTML, which is responsible for page structure.
  4. Type the CSS, which is responsible for page styling.
  5. Type the JS, which is responsible for dynamic page content. AngularJS:
    • Is a Javascript framework which extends HTML attributes with Directives and binds data to HTML with Expressions.
    • Is distributed as a JavaScript file, and is added to our dynamic web pages automatically.
    • Extends HTML with ng-directives:
      • The ng-app directive defines an AngularJS application.
      • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
      • The ng-bind directive binds application data to the HTML view.
      • For more see https://www.w3schools.com/angular/default.asp.
  6. Select a Data Source.
  7. Click Close.

Use the following code examples to create an IM Dashboard that looks like this:

 

 

Header Widget

HTML

<link href="https://fonts.googleapis.com/css?family=Oswald:400" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
<div class="company-promo" ng-controller="companyWidgetPromo">
  <h3 class="company-osw">Plutora <span style="color:#3EB1DC">Release Portal</span></h3>
  <div class="strap-black company-osw">Let's get started</div>
<!-- list links to any url you'd like -->  
  <div class="strap-white company-osw"><a href="#" target="blank">First Link<i class="pull-right glyphicon glyphicon-menu-right"></i></a></div>
  <div class="clear"></div>
  <div class="strap-white company-osw"><a href="#">Second Link<i class="pull-right glyphicon glyphicon-menu-right"></i></a></div>
  <div class="clear"></div>
  <div class="strap-white company-osw"><a href="#" target="blank">Third Link<i class="pull-right glyphicon glyphicon-menu-right"></i></a></div>
  <div class="clear"></div>
<!-- this opens a new change window -->
  <div class="strap-white company-osw"><a ng-click="displayNewChangesModal()">Create a New Change<i class="pull-right glyphicon glyphicon-menu-right"></i></a></div>
  <div class="clear"></div>
</div>

CSS

/*de-gridster styles*/
@media (max-width: 100px) {
imdashboard .gridster-item {
height: auto !important;
position: relative !important;
float: none !important;
display: block !important;
top: inherit !important;
left: inherit !important;
margin: 0 auto !important;
}
}
imdashboard .company-osw, .company-osw {
font-family: 'Roboto' sans-serif;
}
imdashboard .company-promo-panel {
font-family: 'Roboto' sans-serif;
background-color: #888;
border-color: #888;
/*Customize your background image here*/
background: transparent url("https://help.plutora.com/wp-content/uploads/2018/03/internal_bg.jpg") no-repeat center;
background-size: cover;
}
imdashboard .company-promo-panel .panel-heading {
border-color: transparent;
}
imdashboard .company-promo-panel .panel-heading h2 {
color: #fff;
}
imdashboard .company-promo-panel .panel-heading h4 {
display: none;
}
imdashboard .company-promo {
padding: 5px 70px 10px 59px;
}
imdashboard .company-promo img {
width: 300px;
margin-left: -8px;
}
imdashboard .company-promo h3 {
font-size: 40px;
font-weight: 600;
letter-spacing:1px;
height: 130px;
line-height: 100px;
padding-right: 21px;
margin-top:-20px;
color: #fff;
width: fit-content;
}
imdashboard .company-promo .strap-black {
font-size: 10px;
text-transform: uppercase;
font-weight:bold;
height: 34px;
line-height: 35px;
padding-right: 20px;
padding-left: 12px;
color: #fff;
width: fit-content;
margin-top: -40px;
margin-bottom:-10px;
}
imdashboard .company-promo .strap-white {
font-family:'Roboto',sans-serif;
font-size: 13px;
font-weight:bold;
height: 35px;
line-height: 35px;
color: #343F47;
background-color: #F3F4F5;
margin-top:5px;
margin-left:10px;
display: inline-block;
vertical-align: middle;
cursor: pointer;
box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
}
imdashboard .company-promo .strap-white a {
color: inherit;
text-decoration: inherit;
display: block;
padding-left: 15px;
}
imdashboard .company-promo .strap-white a:hover {
color:#9DC23C;
-webkit-transition: color 0.15s ease-in-out;
-moz-transition: color 0.15s ease-in-out;
-o-transition: color 0.15s ease-in-out;
transition: color 0.15s ease-in-out;
}
imdashboard .company-promo .strap-white i {
vertical-align: middle;
line-height: 35px;
margin-left: 35px;
margin-right: 15px;
color: #9DC72D;
}

 

JS

angular.module('plutora.core').controller('companyWidgetPromo',['$scope', '$rootScope', 'imdashboardService', function($scope, $rootScope, imdashboardService) {

$('.company-promo').closest('.panel').addClass('company-promo-panel');

$scope.displayNewReleaseModal = function() {
var controller = PlutoraApp.getApplication().getController("PlutoraApp.controller.releases.releasesController");
controller.addNewEnterpriseRelease();
};
$scope.displayNewTebrModal = function() {
var controller = PlutoraApp.getApplication().getController("PlutoraApp.controller.requests.bookingRequestController");
controller.newBookingRequest();
};
$scope.displayNewChangesModal = function() {
var controller = PlutoraApp.getApplication().getController("PlutoraApp.controller.changes.changesController");
controller.addChangeButtonClick();
};

}]);

 

 

Links Widget

Title the widget Release Management Tools.

HTML

<div class="company-widget5 row" ng-controller="COMPANYWidget5">

  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="section">
      <img class="tool1" src="/Content/images/1px.png" />
      <div class="wrap">
        <div class="caption company-osw">Release Schedule</div>
        <div class="company-body">Veiw the full schedule of all releases</div>
        <button type="button" class="btn btn-danger pull-right registernow company-osw" ng-click="gotoRSheduler()">Go to Release Schedule</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="section">
      <img class="tool2" src="/Content/images/1px.png" />
      <div class="wrap">
        <div class="caption company-osw">Environment Schedule</div>
        <div class="company-body">View which environments are booked and when</div>
        <button type="button" class="btn btn-danger pull-right registernow company-osw" ng-click="gotoESheduler()">Go to Environment Schedule</button>
      </div>
    </div>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4">
    <div class="section">
      <img class="tool3" src="/Content/images/1px.png" />
      <div class="wrap">
        <div class="caption company-osw">System Impact Matrix</div>
        <div class="company-body">View the impact of releases against systems</div>
        <button type="button" class="btn btn-danger pull-right registernow company-osw" ng-click="gotoImpactMatrix()">Go to System Impact Matrix</button>
      </div>
    </div>
  </div>

</div>

 

CSS

imdashboard .panel.panel-default.company-widget5-panel {
 font-family: 'Roboto', sans-serif;
 border-radius: 0;
 background-color: transparent;
 border-width: 0;
 box-shadow: none;
 overflow:visible;
}
imdashboard .company-widget5-panel .panel-heading {
 border-color: #064C7B;
 background-color: #064C7B;
 font-size: 16px;
 color: #fff;
 border-width: 0;
 margin-bottom: 0px;
 border-radius: none;
 height: 40px;
 line-height: 40px;
}
imdashboard .company-widget5-panel .panel-heading h4 {
 font-size: 18px;
 line-height: 32px;
 font-weight: normal;
}
imdashboard .company-widget5 .section {
 background-color: rgba(0,0,0,0.2);
 position: relative;
 height: 180px;
 overflow: hidden;
}
imdashboard .company-widget5 .section .wrap {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 overflow: hidden;
 color: #fff;
 padding: 10px 15px;
}
imdashboard .company-widget5 .caption {
 font-size: 18px;
 margin-top: 10px;
 margin-bottom: 15px;
 font-weight:bold;
}
imdashboard .company-widget5 .company-body {
 margin-bottom: 48px;
 font-weight:400;
}
imdashboard .company-widget5 .learnmore {
 border-radius: 2px;
 font-size: 12px;
 color: #fff;
 background-color: transparent;
}
imdashboard .company-widget5 .registernow {
 border-radius: 2px;
 border:none;
 font-weight:500;
 background-color: #9DC82D;
 color: #fff;
 font-size: 13px;
 position: absolute;
 right: 10px;
 bottom: 10px;
}
 
imdashboard .company-widget5 .registernow:hover {
 font-weight:500;
 background-color: #84AB1F;
 color: #fff;
}
imdashboard .company-widget5 img {
 width: 100%;
 opacity: .9;
 height: 100%;
 background: url("https://www.plutora.com/mailing/nab/1a.png") no-repeat center center;
 background-size: cover;
}
imdashboard .company-widget5 img.tool2 {
 background-image: url("https://www.plutora.com/mailing/nab/2a.png");
}
imdashboard .company-widget5 img.tool3 {
 background-image: url("https://www.plutora.com/mailing/nab/3a.png");
}

 

JS

angular.module('plutora.core').controller('COMPANYWidget5',['$scope', '$rootScope', 'imdashboardService', function($scope, $rootScope, imdashboardService) {
 
 $('.company-widget5').closest('.panel').addClass('company-widget5-panel');
 
 
 $scope.gotoRSheduler = function() {
 navMenuItemClick('rSheduler');
 };
 $scope.gotoESheduler = function() {
 navMenuItemClick('eSheduler');
 };
 $scope.gotoImpactMatrix = function() {
 navMenuItemClick('impactMatrix');
 };
}]);

 

Release Widget

Title the widget Upcoming Releases.

HTML

<div class="company-carousel" ng-controller="companyWidgetCarousel">

  <div class="carousel slide media-carousel" id="media">
    <div class="carousel-inner">

      <div class="item" ng-repeat="oReleaseGrp in model.generalDatasource['e-releases'] track by $index" ng-class="{ active: $index == 0 }">
        <div class="row">

          <div class="col-md-3" ng-repeat="oRelease in oReleaseGrp track by $index">
            <div ng-if="oRelease['ID']" class="section">
			  <h5 class="company-osw">{{oRelease['Name']}}</h5>
			  <br />
      <!-- Choose a highlighted phase to show -->
			  <p>RT-UAT Start<span class="pull-right">{{oRelease['rtuatStart']}}</span></p>
        <p>RT-UAT End<span class="pull-right">{{oRelease['rtuatEnd']}}</span></p>
			  <p><strong>Go Live</strong> <strong class="pull-right text-bold" ng-bind="UtcToLocalTime(oRelease['ImplementationDate'])"></strong></p>
			  
        <button type="button" class="btn btn-default learnmore company-osw" ng-click="displayReleaseDetails(oRelease['ID'], oRelease['Name'])">View All Phases &amp; Gates</button>
            
            </div>
          </div>

        </div>
      </div>

    </div>
    <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
    <a data-slide="next" href="#media" class="right carousel-control">›</a>
  </div>

</div>

 

CSS

imdashboard .panel.panel-default.company-carousel-panel {
 font-family: 'Roboto', sans-serif;
 border-radius: 0;
 background-color: transparent;
 border-width: 0;
 box-shadow: none;
 overflow: visible;
}
imdashboard .company-carousel-panel .panel-heading {
 border-color: #064C7B;
 background-color: #064C7B;
 font-size: 16px;
 color: #fff;
 border-width: 0;
 margin-bottom: 10px;
 border-radius: none;
 height: 40px;
 line-height: 40px;
}
imdashboard .company-carousel-panel .panel-body {
 padding: 0;
}
imdashboard .company-carousel-panel .panel-heading h4 {
 font-size: 17px;
 line-height: 32px;
 font-family: 'Roboto',sans-serif;
 font-weight: normal;
}
imdashboard .company-carousel .carousel .item .section {
 box-shadow: 1px 1px 5px rgba(0,0,0,.5);
 -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
 -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
 background-color: #fff;
 padding: 16px 25px 15px;
}
imdashboard .company-carousel .section h5 {
 font-size: 17px;
 margin-top: 10px;
 margin-bottom: 16px;
}
imdashboard .company-carousel .section p {
 margin: 0 0 8px 0;
 font-size: 13px;
}
 
imdashboard .company-carousel .section p a {
 color:#064C7B;
 text-decoration:underline;
}
imdashboard .company-carousel .section p a:hover {
 text-decoration:none;
}
 
imdashboard .company-carousel .section p img {
 width: 20px;
 display: inline-block;
 margin-right: 12px;
 vertical-align: bottom;
}
imdashboard .company-carousel .media-carousel {
 padding: 0 19px;
}
imdashboard .company-carousel .media-carousel .carousel-inner {
 overflow: visible;
}
imdashboard .company-carousel .media-carousel .carousel-control.left {
 left: -5px;
 background-image: none;
 background: none repeat scroll 0 0 #000;
 border-radius: 50%;
 height: 25px;
 width: 25px;
 margin-top: 90px;
 opacity: 0.7;
 text-decoration: none;
 line-height: 20px;
 font-size: 30px;
}
imdashboard .company-carousel .media-carousel .carousel-control.right {
 right: -5px;
 background-image: none;
 background: none repeat scroll 0 0 #000;
 border-radius: 50%;
 height: 25px;
 width: 25px;
 margin-top: 90px;
 opacity: 0.7;
 text-decoration: none;
 line-height: 20px;
 font-size: 30px;
}
imdashboard .company-carousel .carousel .item .col-md-3 {
 padding-left: 5px;
 padding-right: 5px;
}
imdashboard .company-carousel .learnmore {
 color:#064C7B;
 border:none;
 font-size: 12px;
 margin-bottom:10px;
 margin-left:-12px;
 text-decoration:none;
 
}
imdashboard .company-carousel .learnmore:hover {
 color:#064C7B;
 background-color:white;
 border:none;
 text-decoration:underline;
}
imdashboard .company-carousel .registernow {
 border-radius: 2px;
 border:none;
 font-weight:500;
 background-color: #9DC82D;
 color: #fff;
 font-size: 13px;
}
imdashboard .company-carousel .registernow:hover {
 font-weight:500;
 background-color: #84AB1F;
 color: #fff;
}
 
.company-release-info {
 width: 80%;
}
.company-release-info .modal-content {
 border-radius: 0;
}
.company-release-info .modal-header {
 font-family: 'Roboto', sans-serif;
 font-weight: bold;
 color: #000;
 font-size: 21px;
}
.company-release-info .row {
 float: none;
}
.company-release-info table tr th {
 color: #999;
 border-top-width: 0;
}
.company-release-info tr.phases td {
 background-color: #3EB1DC;
 color: #fff;
 border-color: #3EB1DC;
}
.company-release-info tr.gates td {
 background-color: #3EB1DC;
 color: #fff;
 border-color: #3EB1DC;
}
.company-release-info tr td .glyphicon {
 margin-left: 2px;
 margin-right: 5px;
}
.company-release-info .modal-footer .btn-sm {
 float: right !important;
}
.num-features {
 font-family: "Roboto", sans-serif;
 font-size: 13px;
 font-weight:normal;
 padding-top:5px;
}
.num-features a{
 color:#064C7B;
 text-decoration:none;
}
.num-features a:hover{
 text-decoration:underline;
}

 

JS

angular.module('plutora.core').controller('companyWidgetCarousel',['$scope', '$rootScope', 'imdashboardService', function($scope, $rootScope, imdashboardService) {
 
 $('.company-carousel').closest('.panel').addClass('company-carousel-panel');
 
 $('#media').carousel({
 pause: true,
 interval: false,
 });
 
 $scope.UtcToLocalTime = function(time) {
 return moment.utc(time)/*.local()*/.format('D MMM YYYY');
 };
 $scope.isBeforeNowTime = function(time) {
 return moment.utc(time).isBefore();
 };
 $scope.isAfterNowTime = function(time) {
 return moment.utc(time).isAfter();
 };
 
 
 $scope.displayReleaseDetails = function(id, releaseTitle) {
 loadingIndicator(1);
 
 var urlPhases = '/Releases/GetReleaseWorkItemsForActivity?releaseID='+id+'&workItemType=1';
 var urlGates = '/Releases/GetReleaseWorkItemsForActivity?releaseID='+id+'&workItemType=2';
 $.get(urlPhases, function (phasesData, phasesSuccess) {
 if (phasesSuccess) {
 
 var phases = '';
 phasesData.data.forEach(function(phase) {
 phases += '<tr><td>'+phase.Name+'</td><td>'+$scope.UtcToLocalTime(phase.StartDate)+'</td><td>'+$scope.UtcToLocalTime(phase.EndDate)+'</td></tr>';
 });
 var phasesTable = '<div class="col-md-6 col-sm-12 col-xs-12"><table class="table table-responsive table-condensed"><tr><th>NAME</th><th>START</th><th>END</th></tr><tr class="phases"><td colspan="3"><span class="glyphicon glyphicon-align-left"></span> PHASES</td></tr>'+phases+'</table></div>';
 
 $.get(urlGates, function (gatesData, gatesSuccess) {
 if (gatesSuccess) {
 var gates = '';
 gatesData.data.forEach(function(phase) {
 gates += '<tr><td>'+phase.Name+'</td><td>'+$scope.UtcToLocalTime(phase.StartDate)+'</td><td>'+$scope.UtcToLocalTime(phase.EndDate)+'</td></tr>';
 });
 var gatesTable = '<div class="col-md-6 col-sm-12 col-xs-12"><table class="table table-responsive table-condensed"><tr><th>NAME</th><th>START</th><th>END</th></tr><tr class="gates"><td colspan="3"><span class="glyphicon glyphicon-bell"></span> GATES</td></tr>'+gates+'</table></div>';
 displayModalWindow(releaseTitle, '<div class="row company-osw">' + phasesTable + gatesTable + '</div>', '', 'company-release-info');
 
 loadingIndicator(0);
 } else {
 highlight('Server error - can not retrieve release gates');
 loadingIndicator(0);
 }
 });
 
 } else {
 highlight('Server error - can not retrieve release phases');
 loadingIndicator(0);
 }
 });
 };
 
 
 // $scope.openCurrentRelease = function() {
 // var controller = PlutoraApp.getApplication().getController("PlutoraApp.controller.releases.releaseController");
 // controller.releasesGrid dataview();
 // };
 
 
 $scope.updateDatasourceValue = function(data, type) {
 // only future releases
 data = data.filter(item => $scope.isAfterNowTime(item['ImplementationDate']));
 // data = data.filter(item => $scope.isBeforeNowTime(item['ImplementationDate']));
 // data = data.filter(item => item.Organization == 'Bank');
 
 // sort by date
 data.sort(function(a, b){
 //return new Date(b['ImplementationDate']) - new Date(a['ImplementationDate']); // ASC
 return new Date(a['ImplementationDate']) - new Date(b['ImplementationDate']); // DESC
 });
 
 // limit to 8
 data = data.slice(0, 8);
 
 // combine three
 var newArray = [];
 while (data.length) {
 newArray.push([data.shift(), data.shift(), data.shift(), data.shift()]);
 }
 $scope.model.generalDatasource[type] = newArray;
 };
 
 $scope.getEnterpriseReleases = function(widgetId, type, loadingTo) {
 var bLoading = (typeof loadingTo !== 'undefined');
 if (bLoading) {
 loadingIndicator(1);
 }
 var url = '/Releases/GetCompanyReleases';
 $.post(url, {isEnterprise:true, releaseName:'', IsFirstLoad:false, filterGrid: 'All'}, function (data, success) {
 if (success) {
 $scope.updateDatasourceValue(data.data.Root.children, type);
 $scope.$apply();
 
 //debugger;
 $scope.model.generalDatasource['e-releases'].forEach(function(releaseGrp) {
 if (releaseGrp) {
 releaseGrp.forEach(function(release) {
 if (release) {
 console.log(release.ID);
 release.rtuatStart = '';
 release.rtuatEnd = '';
 
 var urlPhases = '/Releases/GetReleaseWorkItemsForActivity?releaseID='+release.ID+'&workItemType=1';
 var urlGates = '/Releases/GetReleaseWorkItemsForActivity?releaseID='+id+'&workItemType=2';
 $.get(urlPhases, function (phasesData, phasesSuccess) {
 if (phasesSuccess) {
 var phases = '';
 phasesData.data.forEach(function(phase) {
 if (phase.Name == 'RT-UAT.') {
 release.rtuatStart = $scope.UtcToLocalTime(phase.StartDate);
 release.rtuatEnd = $scope.UtcToLocalTime(phase.EndDate);
 $scope.$apply();
 }
 });
 }
 });
 }
 });
 }
 //$scope.$apply();
 });
 
 if (bLoading) {
 loadingIndicator(0);
 $(loadingTo).children().fadeIn(1000);
 }
 } else {
 highlight('Server error');
 }
 });
 };
 
 var widgetId = $('.company-carousel').parent().attr('widget-id');
 $scope.getEnterpriseReleases(widgetId, 'e-releases', '.company-carousel');
 
}]);

 

 

Weather widget

To add a weather widget paste the following code into a new widget.

Data source should be Initiative Summary.

HTML

<div class="user-info-tooltip">
 <div class="user-info-wrapper">
 <div class="user-info-top">
 <div class="user-location"><span>Sydney, Australia</span></div>
 <div class="user-weather"><span class="icon-weather"></span><span class="degree"></span><span class="unit">℃</span></div>
 </div>
 </div>
</div>

CSS

None required.

JS

Replace “Sydney” in the code below with your city.

<script>
$(document).ready(function() {
 setTimeout(function () {
 _formBuilder.getWeatherInfo('Sydney');
 }, 500);
});
</script>

 


Back to the top arrow

Was this article helpful?

0 found this helpful.