want to show content on same page in service portal

[Sagar_pawar]

Hello All,

I have created side menus in the side menus I have given links to. when I click on an incident item inside the side menu I want to show all incident lists on the same page beside the side menu how can I achieve this functionality? please guide me on this.

Thank You.

---------------------------------------------------------------------------------------

HTML Template Code:

<div class="wrapper">
<div>




</div>
<div>


<div class="project-sidebar">


<a class="filter-links" href="?id=list&table=incident"
target="_parent"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Incident</a>
<a class="filter-links" href="javascript&colon;void(0)"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">Change Request</a>
<a class="filter-links" href="javascript&colon;void(0)"
ng-class="{'active': c.selectedFilter == 'my-votes'}"
ng-click="c.applyFilter('my-votes')">My Request</a>

</div>
</div>

-----------------------------------------------------------------------------

CSS:

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

.wrapper{
position:fixed;
width:15%;
background-color:black;
height:100vh;
top:-3;
left:0; /*This would be right:0; for you, if you want it to be on the right side of the page. */
border-right:solid gray .1px;
}

.logo{

text-align:center;
padding-bottom:10px;
}

.project-sidebar {

padding: 5px 0px;
background-color: black;
width:100%;
left:0;


.new-idea {
padding: 15px 20px;
width: 50%;
margin-bottom: 20px;
background-color:#d9534f;
color: white;
display: block;
margin-left: auto;
font-size: 18px;
text-transform: uppercase;

}
.filter-links {
font-family: 'Oswald', sans-serif;
color: white;
display: block;
border-bottom:1px solid gray;
height: 100%;
font-size: 17px;
font-weight: 80px;
padding-top: 10px;
padding-left: 50px;
position: relative;
width: 100%;
padding-bottom: 5px;
}
.filter-links:hover {
background-color: white;
color:black;
font-weight: normal;



}
}

[jaheerhattiwale · Accepted solution]

@Sagar_pawar Tried and tested solution.

You can try below code.

HTML:

<div class="main-container">
<div class="project-sidebar">
<a class="filter-links" ng-click="c.applyFilter('?id=list&table=incident')">Incident</a>
<a class="filter-links" ng-click="c.applyFilter('?id=list&table=change_request')">Change Request</a>
<a class="filter-links" ng-click="c.applyFilter('?id=list&table=sc_request&filter=opened_by='+data.me)">My Request</a>
</div>
<iframe id="content-screen"></iframe>
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

.main-container{
display: flex;
flex-direction: row;
position:fixed;
width:100%;
height:85vh;
left:0; /*This would be right:0; for you, if you want it to be on the right side of the page. */
border-right:solid gray .1px;
}

.logo{
text-align:center;
padding-bottom:10px;
}

.project-sidebar {
padding: 5px 0px;
background-color: black;
width:200px;
left:0;
height: 100%;
}

.new-idea {
padding: 15px 20px;
width: 50%;
margin-bottom: 20px;
background-color:#d9534f;
color: white;
display: block;
margin-left: auto;
font-size: 18px;
text-transform: uppercase;

}

.filter-links {
font-family: 'Oswald', sans-serif;
color: white;
display: block;
border-bottom:1px solid gray;
font-size: 17px;
font-weight: 80px;
position: relative;
width: 100%;
padding: 10px;
cursor: pointer;
}

.filter-links:hover {
background-color: white;
color:black;
font-weight: normal;
}

#content-screen{
height: 100%;
width: calc(100% - 200px);
border: none;
}

Client script:

api.controller=function() {
/* widget controller */
var c = this;

c.applyFilter = function(link){
document.getElementById("content-screen").src=link;
}
};

Server script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

data.me = gs.getUserID();
})();

Result:

Please mark as correct answer if this solves your issue.

[-O-]

Also, all this is not so much ServiceNow Portal related, but AngularJS related.

Generally speaking, since ServiceNow Portal is based on AngularJS, one should 1st familiarize himself with AngularJS - if the intention is to develop for Portal.

[Sagar_pawar]

hello @-O- I am not able upload that XML file to my PDI

[jaheerhattiwale · Accepted solution]

@Sagar_pawar Tried and tested solution.

You can try below code.

HTML:

<div class="main-container">
<div class="project-sidebar">
<a class="filter-links" ng-click="c.applyFilter('?id=list&table=incident')">Incident</a>
<a class="filter-links" ng-click="c.applyFilter('?id=list&table=change_request')">Change Request</a>
<a class="filter-links" ng-click="c.applyFilter('?id=list&table=sc_request&filter=opened_by='+data.me)">My Request</a>
</div>
<iframe id="content-screen"></iframe>
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

.main-container{
display: flex;
flex-direction: row;
position:fixed;
width:100%;
height:85vh;
left:0; /*This would be right:0; for you, if you want it to be on the right side of the page. */
border-right:solid gray .1px;
}

.logo{
text-align:center;
padding-bottom:10px;
}

.project-sidebar {
padding: 5px 0px;
background-color: black;
width:200px;
left:0;
height: 100%;
}

.new-idea {
padding: 15px 20px;
width: 50%;
margin-bottom: 20px;
background-color:#d9534f;
color: white;
display: block;
margin-left: auto;
font-size: 18px;
text-transform: uppercase;

}

.filter-links {
font-family: 'Oswald', sans-serif;
color: white;
display: block;
border-bottom:1px solid gray;
font-size: 17px;
font-weight: 80px;
position: relative;
width: 100%;
padding: 10px;
cursor: pointer;
}

.filter-links:hover {
background-color: white;
color:black;
font-weight: normal;
}

#content-screen{
height: 100%;
width: calc(100% - 200px);
border: none;
}

Client script:

api.controller=function() {
/* widget controller */
var c = this;

c.applyFilter = function(link){
document.getElementById("content-screen").src=link;
}
};

Server script:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

data.me = gs.getUserID();
})();

Result:

Please mark as correct answer if this solves your issue.

[jaheerhattiwale]

@Sagar_pawar Have you tried this? If yes then can you please mark as correct answer if this solves your issue.

[Sagar_pawar]

Hello @jaheerhattiwale Thanks it's working properly I have the same requirement for the dashboard on click I want to show the dashboard on the same page.in the dashboard I want to show open and closed incidents at the same time when we click on that link .how can we achieve this functionality please guide me on this.

Thank You once again.