HTML:
<div><b style="
font-size: 42px;
color: darkblue;
">Welcome to the Project Portal</b></div>
<br>
<br>
<div class="row">
<div class="col-xs-4">
<p>This section pulls from the Project Workspace, each card would open that respective project when clicked on. Opens in the new Project Workspace screen</p>
</div>
<div class="col-xs-4">
<p>Pull tasks assigned to the user, no matter what part of SN they are in, need to see what details can be made available to distinguish between them, they should link to the 'entity' that they are related to</p>
</div>
<div class="col-xs-4"></div>
</div>
<br>
<br>
<div class="row">
<div class="col-xs-4" style="text-align: center;border:1px solid black;border-radius: 58px;">
<p style="
margin-top: 30px;
color: darkblue;
font-size: 23px;
">Your Open Project</p>
<br>
<div ng-repeat="incident in data.incidents" class="ng-scope" style="
border-bottom: 1px solid lightgray;
height: 151px;
border-right: 1px solid lightgray;
box-shadow: 3px 1px lightgray;margin-top: 17px;
">
<br><span style="
border: 1px solid green;
background-color: lightgreen;
padding: 5px 5px 5px 5px;
color: green;margin-right: 336px;">* Green<br></span>
<br>
<div class="col-xs-12" style="
text-align: left;
">
<b class="ng-binding">Network storage unavailable</b>
</div>
<div class="col-xs-12" style="
text-align: left;
height: 31px;
">
<img src="10on.png" style="height: 29px;" role="presentation"><b> David Miller</b>
<br>
</div>
<div class="col-xs-6"><b style="margin-right: 53px;">Start Date</b>
<br>{{incident.sys_updated_on}}</div>
<div class="col-xs-6"><b style="margin-right: 53px;">End Date</b>
<br>{{incident.sys_updated_on}}</div>
<br>
<br>
</div>
<br>
<br>
</div>
<div class="col-xs-4" style="border:1px solid black;border-radius: 58px;margin-left:15px">
<p style="
margin-top: 30px;
color: darkblue;
font-size: 23px;
">Overdue Tasks</p>
<br>
<div ng-repeat="incidentUpcomingTask in data.incidentUpcoming" class="ng-scope" style="
border-bottom: 1px solid lightgray;
height: 151px;
border-right: 1px solid lightgray;
box-shadow: 3px 1px lightgray;margin-top: 17px;
">
<br><span style="
border: 1px solid green;
background-color: lightgreen;
padding: 5px 5px 5px 5px;
color: green;margin-right: 336px;">* Green<br></span>
<br>
<div class="col-xs-12" style="
text-align: left;
">
<b class="ng-binding">Network storage unavailable</b>
</div>
<div class="col-xs-12" style="
text-align: left;
height: 31px;
">
<img src="10on.png" style="height: 29px;" role="presentation"><b> David Miller</b>
<br>
</div>
<div class="col-xs-6"><b style="margin-right: 53px;">Start Date</b>
<br>{{incidentUpcomingTask.sys_updated_on}}</div>
<div class="col-xs-6"><b style="margin-right: 53px;">End Date</b>
<br>{{incidentUpcomingTask.sys_updated_on}}</div>
<br>
<br>
</div>
<p style="
margin-top: 30px;
color: darkblue;
font-size: 23px;
">Upcoming Tasks</p>
<div ng-repeat="incidentOverDue in data.incidentOverDue" class="ng-scope" style="
border-bottom: 1px solid lightgray;
height: 151px;
border-right: 1px solid lightgray;
box-shadow: 3px 1px lightgray;margin-top: 17px;
">
<br><span style="
border: 1px solid green;
background-color: lightgreen;
padding: 5px 5px 5px 5px;
color: green;margin-right: 336px;">* Green<br></span>
<br>
<div class="col-xs-12" style="
text-align: left;
">
<b class="ng-binding">Network storage unavailable</b>
</div>
<div class="col-xs-12" style="
text-align: left;
height: 31px;
">
<img src="10on.png" style="height: 29px;" role="presentation"><b> David Miller</b>
<br>
</div>
<div class="col-xs-6"><b style="margin-right: 53px;">Start Date</b>
<br>{{incidentOverDue.sys_updated_on}}</div>
<div class="col-xs-6"><b style="margin-right: 53px;">End Date</b>
<br>{{incidentOverDue.sys_updated_on}}</div>
</div>
<br>
<br>
</div>
<div class="col-xs-3" style="
">
<button type="button" style="
color: white;
background-color: darkblue;
border: 1px solid darkblue;
height: 37px;
width: 104px;
border-radius: 10px;
">New Project</button>
<br>
<br>
<p>This needs to open a popup that let's the user select from the list of active portfolios in SPM Rules for those portfolios need to be applied: ITCI – no new projects without a demand Needs to open a project in the corresponding project template
for that portfolio</p>
</div>
</div>
Server Script:
(function() {
data.incidents = [];
var grOpen = new GlideRecord("incident");
grOpen.addActiveQuery();
grOpen.addEncodedQuery("state=1");
grOpen.setLimit(4);
grOpen.orderByDesc("sys_updated_on");
grOpen.query()
while (grOpen.next()) {
var incident = {};
incident.number = grOpen.getDisplayValue('number');
incident.short_description = grOpen.getDisplayValue('short_description');
incident.sys_id = grOpen.getUniqueValue();
incident.sys_updated_on = grOpen.getValue('sys_updated_on');
data.incidents.push(incident);
}
data.incidentOverDue = [];
var grOverDue = new GlideRecord("incident");
grOverDue.addActiveQuery();
grOverDue.addEncodedQuery("state=2");
grOverDue.setLimit(2);
grOverDue.orderByDesc("sys_updated_on");
grOverDue.query()
while (grOverDue.next()) {
var incidentDueTask = {};
incidentDueTask.number = grOverDue.getDisplayValue('number');
incidentDueTask.short_description = grOverDue.getDisplayValue('short_description');
incidentDueTask.sys_id = grOverDue.getUniqueValue();
incidentDueTask.sys_updated_on = grOverDue.getValue('sys_updated_on');
data.incidentOverDue.push(incidentDueTask);
}
data.incidentUpcoming = [];
var grUpcoming = new GlideRecord("incident");
grUpcoming.addActiveQuery();
grUpcoming.addEncodedQuery("state=3");
grUpcoming.setLimit(2);
grUpcoming.orderByDesc("sys_updated_on");
grUpcoming.query()
while (grUpcoming.next()) {
var incidentUpcomingTask = {};
incidentUpcomingTask.number = grUpcoming.getDisplayValue('number');
incidentUpcomingTask.short_description = grUpcoming.getDisplayValue('short_description');
incidentUpcomingTask.sys_id = grUpcoming.getUniqueValue();
incidentUpcomingTask.sys_updated_on = grUpcoming.getValue('sys_updated_on');
data.incidentUpcoming.push(incidentUpcomingTask);
}
})();
Portal Design to Show Open, OverDue and Upcoming Projects ServiceNow
Working Code Edited question June 3, 2024