(Service Portal Design ServiceNow)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
</style>
</head>
<body>
<h2 style="text-align:center">Welcome to Workincode.in</h2>
<div class="slideshow-container">
<div class="mySlides1">
<img src="wc.png" style="width:100%;height:450px">
</div>
<div class="mySlides1">
<img src="wc2.png" style="width:100%;height:450px">
</div>
<div class="mySlides1">
<img src="wc3.png" style="width:100%;height:450px">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<script>
let slideIndex = [1,1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
Widget 1 : Code
HTML:
<br> <br> <div class=box style="float: right;"> <br> <br> <h2 class="ng-binding" style=" text-align: center;background-color: #333579; color:white; ">Request Something</h2> </div> <br> <br>
Common CSS for all boxes:
div{
height: 150px;
width: 252px;
background: #fff;
border-radius: 20px;
}
.box{
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
background-color: #333579;
}
Widget Box: 2
HTML
<br>
<br>
<div class=box style="margin-left: 80px;">
<br> <br>
<h2 class="ng-binding" style="
text-align: center;background-color: #333579; color:white;
">Get Help</h2>
</div>
<br>
<br>
Widget Box: 3
HTML
<br> <br> <div class=box> <br> <br> <h2 class="ng-binding" style=" text-align: center; color:white; ">Knowledge Base</h2> </div> <br> <br>
Widget:
<br>
<br>
<div style=" width: 90%;
margin-left: 60px;">
<div class="box" style="
text-align: center;
height: 63px;
color: white;
padding: 10px;
font-size: 26px;
font-weight: 500;
">
My Open Tickets
</div>
<div>
<div><label>Search</label><input type="text" ng-model="searchText" class="form-control"></div>
<table style="width: 100%;">
<tr><th><button ng-click="changesort('number')">Number</button></th>
<th><button ng-click="changesort('short_description')">Short Description</button></th>
<th><button ng-click="changesort('sys_updated_on')">Date</button></th>
</tr>
<tr ng-repeat="incident in data.incidents | orderBy:orderField | filter:searchText">
<td>
{{incident.number}}
</td>
<td>
{{incident.short_description}}
</td>
<td>
{{incident.sys_updated_on}}
</td>
</tr>
</table>
</div>
<div>
<br>
<br>
CSS:
div{
height: 100px;
width: 100%;
background: #fff;
border-radius: 20px;
}
.box{
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
background-color: #333579;
}
button
{box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
background-color: #333579;
color:white;
border-radius: 7px;
}
td, th {
border: 1px solid #ffffff;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #333579;
color:white;
}
.v854bc0c4474031101438690cd36d433c div {
height: 10rem;
width: 100%;
background: none!important;
border-radius: 2rem;
}
.v854bc0c4474031101438690cd36d433c div {
height: 5rem;}
Server Script:
(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */
data.incidents=[];
var gr=new GlideRecord("incident");
gr.addActiveQuery();
gr.setLimit(10);
gr.orderByDesc("sys_updated_on");
gr.query()
while(gr.next())
{
var incident={};
incident.number=gr.getDisplayValue('number');
incident.short_description=gr.getDisplayValue('short_description');
incident.sys_id=gr.getUniqueValue();
incident.sys_updated_on=gr.getValue('sys_updated_on');
data.incidents.push(incident);
}
})();
Client Controller:
function($scope, spUtil) {
/* widget controller */
var c = this;
$scope.orderField="number";
$scope.changesort=function(field){
$scope.orderField=field;
spUtil.recordWatch($scope,"incident","", function(name,data){
spUtil.update($scope);
});
};
}
