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.

[Community Alums]

Hello ,

Can you explain me the code mentioned in client script. and server script. How you called this. explain me each and every step. IT will be helpful to me. 

Thank you. 

[Sagar_pawar]

Hello @-O- and @jaheerhattiwale your solution is 75% correct but does not fulfill the actual requirement.

I don't want that logo and user profile again In the same .its looking weird do you have any solution?

 as I am new to the service portal I spent more than 4 days on this. it would be beneficial if you guide me on this. Thank You.

[-O-]

Please import the solution I posted and ask question about it, if you will not understand something.

I mean you keep asking for explanations and solutions, while it is already all there since a couple of days.

[jaheerhattiwale · Accepted solution]

@Sagar_pawar Tried and tested solution.

Go to "Service Portal > Portals" module

Create a new portal without main menu and theme like below

And update the HTML as below

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

Result:

Please mark as correct answer if this solves your issue.

[Hiteish22]

By using your code, I'm getting  extra headers , when clicking on side menus. but in your result snapshot it not showing extra header, how can i remove it ?

please refer above image