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-]

As mentioned in the other thread, you need to use $location service to achieve navigation without leaving the current page.

You need a page where you have at least two widgets plus as many as you have different menu items.

- one widget that shows the menu and calls $location.search(). whenever a menu item is clicked.

- the second widget that "reacts" to the location change, loading the "ordered" widget and embeds that widget into itself.

- the widgets that will be embedded by the 2nd widget.

The idea is that whenever $location.search() is called by any widget on the current page, all widgets will be reloaded.

So when the 1st widget calls $location.search(), the 2nd widget will be reloaded and it will execute its Server script. In it the widget will analyze the URL parameters set by $location.search() and will load the appropriate widget.

Attached are a few XML files containing an example page and 4 example widgets. The "menu" widget (u_cx_app_menu) has two anchors which when clicked execute $location.search() setting/adding URL parameter page. The "canvas" widget (u_cx_app_canvas), depending on what is the value of URL parameter page loads and embeds either no widget (if the parameter is missing) or one of the two widgets u_cx_app_canvas and u_cx_app_canvas_2.

[-O-]

---

... you need to use $location service...

That means that you need to craft the anchors so that they become - say - scripted anchors; e.g:

	<p><a href="javascript&colon;void(0);" ng-click="doSomething()" >Label</a></p>

and have function doSomething call $location.search().

[Sagar_pawar]

hello @-O- ,

whatever have are written I am not getting everything .can you please guide me step by step so I can understand it better.i am new to service portal

Thank You

[-O-]

Have you loaded the attached file (sp_page_56dc82b247a0a110d2689995536d439f.xml) into a PDI? Because if you load the XML into an instance, it will create a page named CX | App (id u_cx_app) which contains two widgets with just the code that exemplifies how to use $location - how to load a widget into a page dynamically, without reloading the whole page.