When creating a custom TLN, I went through material available in SCN space, and found quite a lot of documents which were helpful, chief among them being this document: Development of Custom Top Level Navigation -- Horizontal Drop-Down Menu.
I wanted to contribute to this community space, as an example of code logic to use when we want to have different behaviour in terms of scrolling and hovering for each TLN level.
Prerequisites:
- Basic knowledge of SAP NetWeaver 7.4
- Basic knowledge of SAP NWDS 7.3
- Basic knowledge of HTML, Java Script, CSS
- Basic knowledge of SAP NetWeaver Portal Adminstration
- Basic knowledge of LSAPI's
- Basic knowledge of Short URI's, Absolute Paths and Relative Paths along with their correlation with each other
Requirement:
- Level 1 to be displayed and horizontal scrolling to be allowed.
- Level 2 of the selected Level 1 to be displayed, with its L3 elements if any to be displayed on hover as a hover menu.
- No horizontal scrolling for L2 elements, instead overflow to be displayed as a separate drop down box on click of overflow image.
- Drop Down L2 elements should also show L3 elements on hover.
Component Details:
Create a Project in your workspace and then create a JSPDynPage Portal Component. While creating the component, we don't need to create a bean class.
We don't need to make any changes in the generated java class for JSPDynPage, open the TLN.jsp file and make the following changes:
<%-- an include for jquery js version --%>
<script src="/irj/go/km/docs/etc/js/jquery-1.11.1.min.js" type="text/javascript"></script>
<%-- an include for styling file --%>
<link href="https://blogs.sap.com/irj/go/km/docs/etc/css/tln.css" type="text/css" rel="stylesheet" />
<%-- this is the main navigation section --%>
<table id="tabelLevel1">
<tr>
<td>
<div id="navigationLevel1"><%-- start the unordered list --%>
<ul id="tabmenuLevel1" style="overflow:hidden;white-space: nowrap;">
<nav:iterateInitialNavNodes>
<li class='Level1'><nav:navNodeAnchor navigationMethod="byEPCMwithURL" />
<nav:ifNavNodeHasChildren>
<ul >
<nav:iterateNavNodeChildren>
<li class='Level2' style="display:none;"><nav:navNodeAnchor navigationMethod="byEPCMwithURL" />
<nav:ifNavNodeHasChildren>
<ul >
<nav:iterateNavNodeChildren>
<li class='Level3' ><nav:navNodeAnchor navigationMethod="byEPCMwithURL" /></li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateInitialNavNodes>
</ul>
</div>
</td>
<td>
<div id="divL1ScrlBtn">
<img id="leftscroll" src="/irj/go/km/docs/etc/images/Left.png" onclick="customScrollLeft();" onmouseover="hoverscrollLeft();"
onmouseout="mouseoutLeft();" onmousedown="scrollLeftOnMouseDown()"; onmouseup="scrollLeftOnMouseUp();"/>
<img id="rightscroll" src=" /irj/go/km/docs/etc/images/Right.png" onclick="customScrollRight();" onmouseover="hoverscrollRight();"
onmouseout="mouseoutRight();" onmousedown="scrollRightOnMouseDown();" onmouseup="scrollRightOnMouseUp();"/>
</div>
</td>
</tr>
</table>
<table id="tabelLevel1_3">
<tr>
<td>
<div id="navigationLevel3" style="margin-top:3px;margin-right:-3px "><%-- start the unordered list --%>
<ul id="tabmenuLevel3" style="">
<nav:iterateInitialNavNodes>
<li class='Level1'>
<nav:ifNavNodeHasChildren>
<ul id='L2Tabs' >
<nav:iterateNavNodeChildren>
<li class='Level2'>
<nav:navNodeAnchor navigationMethod="byEPCMwithURL" />
<nav:ifNavNodeHasChildren>
<ul id='L3Tabs'>
<nav:iterateNavNodeChildren>
<li class='Level3' ><nav:navNodeAnchor navigationMethod="byEPCMwithURL" /></li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateInitialNavNodes>
</ul>
</div>
</td>
</tr>
</table>
<table id="tabelLevel1_2">
<tr>
<td>
<div id="navigation" style="margin-top:-17px;margin-right:-3px"><%-- start the unordered list --%>
<ul id="tabmenu" style="overflow:hidden;white-space: nowrap;">
<nav:iterateInitialNavNodes>
<li class='Level1'>
<nav:ifNavNodeHasChildren>
<ul id="level3Div3" >
<nav:iterateNavNodeChildren>
<li class='Level2' >
<nav:navNodeAnchor navigationMethod="byEPCMwithURL" />
<nav:ifNavNodeHasChildren>
<ul >
<nav:iterateNavNodeChildren>
<li class='Level3' ><nav:navNodeAnchor navigationMethod="byEPCMwithURL" /></li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateNavNodeChildren>
</ul>
</nav:ifNavNodeHasChildren>
</li>
</nav:iterateInitialNavNodes>
</ul>
</div>
</td>
<td>
<img style="z-index:100;position:relative;margin-top:-7px;height:37px;width:0px;display:none;margin-right:-2px" id="dropDownImageSpace"
src="/irj/go/km/docs/etc/images/spaceImage.png"/>
</td>
<td>
<img style="z-index:100;position:relative;margin-top:-7px;height:37px;width:52px;display:none" id="dropDownImage"
src="/irj/go/km/docs/etc/images/ImageLevelTwo.png" onclick="hoversDropDown();" onmouseout="mouseoutDropDown();" />
</td>
</tr>
</table>
<div id="dropTestDiv">
<ul id="dropDownDiv" style="display:none">
<li id="dropLi" class='Level1 active'> </li>
</ul>
</div>
<script type="text/javascript">
var liEls = document.getElementById("navigation").getElementsByTagName("LI");
var level1Els = document.getElementById("navigationLevel1").getElementsByTagName("LI");
var level3Els = document.getElementById("navigationLevel3").getElementsByTagName("LI");
var hasChildren = false;
var tlnWidth = 0;
tlnWidth = level1Els.length;
var scollPix = 0;
var isWindowResized = false;
var copyLinkFlag = false;
function calculateEffectiveWidth(){
var L = null;
var N = window.top.document.getElementById("frame11TD");
if (N && typeof (N) != "undefined") {
var K = N.parentNode;
var P = K.clientWidth - N.clientWidth;
if (K.scrollWidth > K.clientWidth) {
P = K.scrollWidth - N.clientWidth ;
}
var M = 20;
var O = window.top.document.getElementById("frame01TD");
if (O) {
M += O.offsetWidth;
}
O = window.top.document.getElementById("frame02TD");
if (O) {
M += O.offsetWidth;
}
L = document.documentElement.offsetWidth - P - M - 2;//reducing 2 for horizontal scrollbar
}
return L;
}
var focusE = focusElement();
function focusElement(){
document.write('<a id="link_x" style="opacity:0.001" href="javascript:void(0);" ></a>');
}
var currClientWidth = null ; // cp
var queryStr = "";
var widthOfLevel1;
var tabMenuMarginTop = 0;
var level1_activated = false; //flag for level 1 activation
var level2_activated = false; // flag for level 2 activation
liEls[0].setAttribute ("idValue", 0);
level1Els[0].setAttribute ("idValue", 0);
level3Els[0].setAttribute ("idValue", 0);
if(queryStr == ""){
liEls[0].className += " active";
level1Els[0].className += " active";
level3Els[0].className += " active";
}
for (var i=0; i<level3Els.length; i++)
{
level3Els[i].setAttribute("idValue", i);
level1Els[i].setAttribute("idValue", i);
liEls[i].setAttribute("idValue", i);
/* Level 1 functions*/
level1Els[i].onmouseover = function()
{
this.className += " hover";
};
level1Els[i].onmouseout = function()
{
this.className = this.className.replace(new RegExp(" hover\\b"), "");
};
/* Level 2 functions*/
liEls[i].onmouseover = function()
{
level3Els[this.idValue].className += " hover";
if(this.className == "Level2" || this.className == "Level2 hover")
{
l3Highlights();
}
};
liEls[i].onmouseout = function()
{
level3Els[this.idValue].className = level3Els[this.idValue].className.replace(new RegExp(" hover\\b"), "");
};
liEls[i].onclick = function()
{
level3Els[this.idValue].className = level3Els[this.idValue].className.replace(new RegExp(" hover\\b"), "");
};
/* Level 3 functions*/
level3Els[i].onmouseover = function()
{
this.className += " hover";
};
level3Els[i].onmouseout = function()
{
this.className = this.className.replace(new RegExp(" hover\\b"), "");
};
level3Els[i].onclick = function()
{
this.className = this.className.replace(new RegExp(" hover\\b"), "");
};
}
function scrollRight()
{
document.getElementById("navigation");
};
function scrollLeft()
{
document.getElementById("navigation").scrollLeft = 10;
};
function hoverscrollLeft()
{
document.getElementById("leftscroll").src = '/irj/go/km/docs/etc/images/LeftNavHover.png';
document.getElementById("leftscroll").style.height = '36px';
};
function hoverscrollRight()
{
document.getElementById("rightscroll").src = '/irj/go/km/docs/etc/images/RightNavHover.png';
document.getElementById("rightscroll").style.height = '36px';
};
function mouseoutLeft()
{
document.getElementById("leftscroll").src = '/irj/go/km/docs/etc/images/Left.png';
document.getElementById("leftscroll").style.height = '35px';
};
function mouseoutRight()
{
document.getElementById("rightscroll").src = '/irj/go/km/docs/etc/images/Right.png';
document.getElementById("rightscroll").style.height = '36px';
};
function customScrollRight()
{
if(scollPix < (tlnWidth + 32)){
scollPix += 40;
}
$("#tabmenuLevel1").scrollLeft(scollPix);
};
function customScrollLeft()
{
if(scollPix>0){
scollPix -= 40;
}
$("#tabmenuLevel1").scrollLeft(scollPix);
};
function scrollLeftOnMouseUp() {
window.clearInterval(intervalHandleLeft);
};
function scrollLeftOnMouseDown() {
intervalHandleLeft = window.setInterval("customScrollLeft()", 200);
};
function scrollRightOnMouseUp() {
window.clearInterval(intervalHandleRight);
};
function scrollRightOnMouseDown() {
intervalHandleRight = window.setInterval("customScrollRight()", 200);
};
// dropDownImage Image click event
function hoversDropDown() {
//outer div
document.getElementById("dropTestDiv").style.display = 'block';
//Outer UL
document.getElementById("dropDownDiv").style.display = 'block';
document.getElementById("dropDownImage").src = '/irj/go/km/docs/etc/images/onClickLevelTwo.png';
};
function mouseoutDropDown() {
//Outer UL
document.getElementById("dropDownDiv").style.display = 'none';
document.getElementById("dropDownImage").src = '/irj/go/km/docs/etc/images/ImageLevelTwo.png';
};
function dropDown() {
var liEls = document.getElementById("navigation").getElementsByTagName("LI");
var heightTabMenu = $("#tabmenuLevel3").height();
currClientWidth = calculateEffectiveWidth();
var liWidth = 0;
var ulWidth = 0;
for (var i=0; i<liEls.length; i++){
if(liEls[i].className == "Level1 active"){
document.getElementById("dropLi").innerHTML = liEls[i].innerHTML;
var liActive = liEls[i].getElementsByTagName("LI");
var dropLis = document.getElementById("dropLi").getElementsByTagName("LI");
for (var i=0; i<liActive.length; i++){
liWidth += jQuery(liActive[i]).width();
if(liWidth <=(currClientWidth-68)){
dropLis[i].className += " remove";
ulWidth = liWidth;
}
}
$('.remove').remove();
if(liWidth<(currClientWidth-24)){
$("#tabmenu").width((currClientWidth));
$("#tabmenuLevel3").width((currClientWidth-17));
document.getElementById("dropDownImage").style.display = 'none';
document.getElementById("dropDownImageSpace").style.display = 'block';
$("#dropDownImageSpace").width(0);
if(isWindowResized)
{
$("#dropDownImageSpace").width(30);
}else{
$("#dropDownImageSpace").width(11);
}
}
else{
$("#tabmenu").width((ulWidth));
$("#tabmenuLevel3").width((currClientWidth-17));
document.getElementById("dropDownImage").style.display = 'block';
document.getElementById("dropDownImageSpace").style.display = 'block';
var addSpacewidth = currClientWidth-ulWidth-32;
$("#dropDownImageSpace").width(addSpacewidth);
var width_difference = calculateEffectiveWidth() - ($("#tabmenu").width() + $("#dropDownImage").width());
if(width_difference > 0)
{
if(isWindowResized)
{
$("#dropDownImageSpace").width((width_difference+32));
}
else
{
$("#dropDownImageSpace").width((width_difference)+10);
}
}
else
{
var l2_width = $("#tabmenu").width();
$("#tabmenu").width((l2_width+width_difference));
$("#dropDownImageSpace").width(0);
}
}
break;
}
}
var firstTimeMouseOver = 0 ;
$("#dropTestDiv").width((currClientWidth+11));
var dropLi = document.getElementById("dropLi").getElementsByTagName("LI");
for (var i=0; i<dropLi.length; i++)
{
dropLi[i].onmouseover = function()
{
// On Click Code:Begin
try
{
var l3childs = $(this).find('UL');
// width of A inside Li
var awidth = $(this).find('a').width();
$(this).find('UL').css("display","block");
var x_width = $(this).find('UL').width();
var x_top = $(this).offset().top ;
x_top = x_top + 30 ;
$(this).find('UL').offset().top = x_top ;
var x_NewLeft1 = - (x_width) ;
$(this).find('UL').css("left", x_NewLeft1 + 15 ) ;
$(this).find('UL').css("position","absolute") ;
if(firstTimeMouseOver==0)
{
$(this).find('UL').css("display","none");
firstTimeMouseOver = 1 ;
}
else
{
$(this).find('UL').css("display","block");
}
//On Click Code:End
$(this).find('UL').css("margin-top","-34px") ;
$(this).find('UL').css("margin-left","-15px") ;
}
catch(ex)
{
//console.log("exception came :" + ex);
}
};
dropLi[i].onmouseout = function()
{
$(this).find('UL').css('display','none');
};
dropLi[i].onclick = function()
{
};
}
};
document.getElementById("dropTestDiv").onmouseover = function(){
document.getElementById("dropDownDiv").style.display = 'block';
document.getElementById("dropDownImage").src = '/irj/go/km/docs/etc/images/onClickLevelTwo.png';
};
//function when mouse leaves the dropdown menu
document.getElementById("dropDownDiv").onmouseleave =function(){
document.getElementById("dropDownDiv").style.display = 'none';
$("dropDownDiv").css("display","none");
};
document.getElementById("dropTestDiv").onmouseout = function(){
document.getElementById("dropDownImage").src = '/irj/go/km/docs/etc/images/ImageLevelTwo.png';
};
$( document ).ready(function(){
copyLinkFlag = false;
widthOfLevel1 = $("#tabmenuLevel1").width();
checkLinkUrl(document.location.href);
resizeTLN();
$("ul#tabmenuLevel3 li.active li UL li:last-child").addClass("last-item"); //function to remove dotted line on bottom border of last L3 element
currClientWidth = calculateEffectiveWidth();
var newWidth1 = currClientWidth + 6;
if(copyLinkFlag)
{
if(hasChildren)
{
var newWidth = newWidth1 - 217;
document.getElementById("leftNavPanelTD").style.display = "block";
document.getElementById("leftNavPanelTD").style.paddingLeft = "10px";
document.getElementById("leftNavPanelTD").style.zIndex = "100";
document.getElementById("divLeftNavPanelContent").style.display = "block";
document.getElementById("divLeftNavPanelOpen").style.display = "block";
document.getElementById("divLeftNavPanelContent").style.width = "217px";
document.getElementById("divLeftNavPanelOpen").style.width = "217px";
document.getElementById("divLeftNavPanelOpen").style.paddingLeft = "0px";
document.getElementById("divLeftNavPanelContent").style.paddingLeft = "2px";
document.getElementById("divLeftNavPanelContent").style.zIndex = "100";
document.getElementById("frame11TD").style.width = newWidth1+"px";//setting width for iframe
$("#frame11TD").width(newWidth1);
}
else
{
document.getElementById("frame11TD").style.width = newWidth1+"px";//setting width for iframe
$("#frame11TD").width(newWidth1);
}
}
document.getElementById("link_x").focus(); //added to remove focus
});
function checkLinkUrl(addressUrl)
{
if(addressUrl.indexOf("?") > -1)
{
copyLinkFlag = true;
var newUrl = addressUrl.split("?")[1];
if(newUrl.indexOf("navurl://") > -1)
{
for (i = 0; i < liEls.length; i++)
{
liEls[i].className = liEls[i].className.replace(/ Selected/g, "");
liEls[i].className = liEls[i].className.replace(/ active/g, "");
level1Els[i].className = level1Els[i].className.replace(/ active/g, "");
level3Els[i].className = level3Els[i].className.replace(/ active/g, "");
}
level1_activated = false;
level2_activated = false;
newUrl = newUrl.split("navurl://")[1];
newUrl = "navurl://" + newUrl;
tabActivation(newUrl);
return;
}
}
}
$(window).resize(function(){
resizeTLN();
currClientWidth = calculateEffectiveWidth();
document.getElementById("frame11TD").style.width = currClientWidth;//setting width for iframe
$("#frame11TD").width(currClientWidth);
document.getElementById("link_x").focus(); //for changing focus
});
function resizeTLN(){
isWindowResized = false;
currClientWidth = calculateEffectiveWidth();
if(currClientWidth > widthOfLevel1)
{
$("#tabmenuLevel1").width(widthOfLevel1);
document.getElementById("leftscroll").style.display = "none";
document.getElementById("rightscroll").style.display = "none";
}
else
{
$("#tabmenuLevel1").width(currClientWidth-22);
document.getElementById("leftscroll").style.display = "inline";
document.getElementById("rightscroll").style.display = "inline";
}
$("#tabmenu").width((currClientWidth));
dropDown();
input.setAttribute("value", calculateEffectiveWidth());
document.getElementById("tabelLevel1").appendChild(input);
}
function l3Highlights(){
$("ul#tabmenuLevel3 li.active li UL li").hover(function(){
var maxWidth = $(this).parent().parent().find('ul').width() - 2;
$(this).find('a').width(maxWidth);
});
}
/*Subscribing standard portal event: "Navigate" to call tln refresh functionality*/
EPCM.subscribeEvent("urn:com.sapportals:navigation", "Navigate", refreshTLNTab);
/*this function uses Navigation target and Navigation Context of the link to find the L1 and L2 tabs, where applicable for the navigation event*/
function refreshTLNTab( eventObj )
{
queryStr = "";
var indexNavUrl = eventObj.dataObject.target.indexOf("navurl://");
var indexRoles = eventObj.dataObject.target.indexOf("ROLES://");
var indexPcd = eventObj.dataObject.target.indexOf("pcd://");
if(eventObj.dataObject.target.indexOf("?") > -1 || eventObj.dataObject.target.indexOf("&") > -1)
{
for (i = 0; i < liEls.length; i++)
{
liEls[i].className = liEls[i].className.replace(/ Selected/g, "");
liEls[i].className = liEls[i].className.replace(/ active/g, "");
level1Els[i].className = level1Els[i].className.replace(/ active/g, "");
level3Els[i].className = level3Els[i].className.replace(/ active/g, "");
}
level1_activated = false;
level2_activated = false;
if(indexNavUrl > -1)
{
queryStr = eventObj.dataObject.target.split("?")[0];
if(eventObj.dataObject.target.indexOf("NavigationContext=") > -1)
{
queryStr = (eventObj.dataObject.target.split("NavigationContext=")[1]).split("&")[0];
}
if(eventObj.dataObject.target.indexOf("runtimeURL=") > -1)
{
queryStr = (eventObj.dataObject.target.split("runtimeURL=")[1]).split("&")[0];
}
tabActivation(queryStr);
}
/*If navurl is not present in the Navigate event, then converting Absolute path to its corresponding Short URI*/
else if((indexRoles > -1 || indexPcd > -1) && indexNavUrl == -1)
{
if(indexRoles > -1 && indexPcd == -1)
{
queryStr = eventObj.dataObject.target.split("?")[0].split("ROLES:")[1];
queryStr = "pcd:" + queryStr;
}
else if(indexPcd > -1 && indexRoles == -1)
{
queryStr = eventObj.dataObject.target.split("?")[0];
}
var sessionid = Math.random();
/*The below URL is used in the AJAX call described subsequently. The URL is pointing to a class which will be converting absolute URL to Short URIs.
This class has been described in the latter parts of the document.
*/
var url = "/irj/servlet/prt/portal/prtroot/net.custom.top.level.navigation.ConvertNavUrl";
url = url + "?sessionid="+sessionid+"&navurl="+queryStr;
$.ajax({
url: url,
data: queryStr,
success: function(a,b,c){
tabActivation(a);
}
});
}
else
{
queryStr = "";
tabActivation(queryStr);
}
$("ul#tabmenuLevel3 li.active li UL li:last-child").addClass("last-item"); //function to remove dotted line on bottom border of last L3 element
}
currClientWidth = calculateEffectiveWidth();
var newWidth1 = currClientWidth + 12;
document.getElementById("divContentArea").style.width = newWidth1;
document.getElementById("link_x").focus(); //focus removal
}
function tabActivation(newNav)
{
hasChildren = false;
if(newNav == "")
{
liEls[0].className += " active";
level1Els[0].className += " active";
level3Els[0].className += " active";
level1_activated = true;
}
else
{
for (i = 0; i < liEls.length; i++)
{
var ifound1 = level1Els[i].innerHTML.indexOf(newNav);
if (ifound1 > 0)
{
if (liEls[i].className == "Level1" || liEls[i].className == "Level1 hover")
{
liEls[i].className += " active";
level1Els[i].className += " active";
level3Els[i].className += " active";
level1_activated = true;
if(liEls[i].hasChildNodes())
{
for(j = 0; j < liEls.length; j++)
{
if(liEls[j].className == "Level2" || liEls[j].className == "Level2 hover"){
var check1 = level1Els[j].innerHTML.indexOf(newNav);
if (check1 > 0)
{
liEls[j].className += " Selected";
level1Els[j].className += " Selected";
level2_activated = true;
if(liEls[j].hasChildNodes())
{
hasChildren = true;
}
}
}
}
/*If no level 2 element is selected, then by default first level 2 element of selected Level 1 is selected*/
if(!level2_activated)
{
if(i != 0)
{
liEls[i+1].className += " Selected";
level1Els[i+1].className += " Selected";
}
if(liEls[i].firstChild.hasChildNodes())
{
hasChildren = true;
}
}
}
}
}
}
}
if (!level1_activated) //This means that the short uri is not available in the iterated nodes. In this case, by default showing the first tab has selected
{
liEls[0].className += " active";
level1Els[0].className += " active";
level3Els[0].className += " active";
level1_activated = true;
}
}
</script>
In the above JSP, I have first iterated Level 1 to Level 3 elements for all the roles assigned to the user. Since the requirement is to have different scrolling for all 3 levels, I have separated the 3 levels into 3 tables.
After this, I have defined using inline javascript, behaviour of TLN for following 3 events:
- Initial Load of TLN
- Navigation
- Window Resize
Below is a diagrammatic representation of each process:
Initial Load:
Navigation:
Window Resize:
To convert absolute URL's to short URI, you can refer to the following code snippet:
package net.custom.tln;
import java.util.Hashtable;
import javax.naming.Context;
import javax.servlet.http.HttpServletResponse;
import com.sap.portal.directory.Constants;
import com.sapportals.portal.navigation.INavigationService;
import com.sapportals.portal.pcd.gl.IPcdAttribute;
import com.sapportals.portal.pcd.gl.IPcdContext;
import com.sapportals.portal.prt.component.AbstractPortalComponent;
import com.sapportals.portal.prt.component.IPortalComponentRequest;
import com.sapportals.portal.prt.component.IPortalComponentResponse;
import com.sapportals.portal.prt.runtime.PortalRuntime;
import com.sap.portal.pcm.admin.PcmConstants;
public class ConvertNavUrl extends AbstractPortalComponent
{
public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
{
String path = null;
String pcd = null;
INavigationService navService = null;
try
{
path = request.getParameter("navurl"); //Variable "path" now contains the value of absolute path passed from TLN JSP
navService =(INavigationService)PortalRuntime.getRuntimeResources().getService(INavigationService.KEY);
Hashtable env = new Hashtable();
env.put(Context.INITIAL_CONTEXT_FACTORY,IPcdContext.PCD_INITIAL_CONTEXT_FACTORY);
env.put(IPcdContext.SECURITY_PRINCIPAL, request.getUser());
env.put(Constants.REQUESTED_ASPECT, IPcdAttribute.PERSISTENCY_ASPECT);
env.put(Constants.REQUESTED_ASPECT, PcmConstants.ASPECT_SEMANTICS);
pcd = navService.getNavigationNodeHashedName(env, path); // Variable "pcd" contains the converted Short URI from Absolute Path
HttpServletResponse res = request.getServletResponse(true);
res.getWriter().write(pcd);
}
catch(Exception e)
{
try
{
pcd = "";
HttpServletResponse res = request.getServletResponse(true);
res.getWriter().write(pcd); //sending the converted Short URI back to the JSP
}
catch(Exception ex)
{
//Print exception
}
//Print exception
}
}
}
I have included the css file with this document.
Using the Component:
Once the TLN component has been deployed, and the css file has been uploaded in KM, the component is ready to use.
We need to create an iView from the component and assign the iView in Framework Page in Top Level Navigation Container.
The end result is as below:
Do let me know in case you have any queries regarding the above.
Suggestions on how to improve the content and your feedback is always welcome and appreciated...
- SAP Managed Tags:
2 Comments
