Problems using LSAPI for navigation entries "Invisible in navigation"

[renejurmann]

Hi experts,

we have following scenario:

We implemented a custom framework page based on the AJAX framework page using the LSAPI to set up the navigation.

For rendering the top-level navigation nodes we use the function:

LSAPI.AFPPlugin.model.getNavigationSubTree(null, renderTLN);

This works fine - we get all navigation entries as expected.

But we have a problem highlighting the currently launched navigation node in a very special case. The landing page (home page) is configured as follows within the users role:

• Home (role folder -> entry point -> visible in navigation)
  • Home (page -> INVISIBLE in navigation -> default entry for folder)

When launching this role the TLN is rendered and the home page is displayed correctly but the TLN entry is not highlighted!

For highlighting the navigation entries we check the currently selected path retrieved from LSAPI:

LSAPI.AFPPlugin.model.getCurrentSelectedPath()

But in our scenario the currentSelectedPath contains a navigation node linked to the invisible home PAGE whereas the TLN (getNavigationSubTree) contains the home folder. The currentSelectedPath DOES NOT contation the home folder. Furthermore the home page node within the currentSelectedPath return no parent node using getParent().

So, as the rendered TLN contains the home folder but this is not contained in currentSelectedPath the navigation entry is not highlighted in TLN.

Can you please help me how to highlight?

I also did not found out any other option to get invisible entries in LSAPI to create a workaround...

regards

René

P.S.:We are working with SAP Netweaver Portal 7.4

[Former Member]

taglibs stuff like <nav:ifNavNodeInSelectedPath> should work actually

cheers

[renejurmann]

We're using the SAP LSAPI to render the navigation which is actually a JavaScript library. We are not using JSP! Thus the tag library does not help us.

[rohit_singhal]

Hi Renee,

Could you post the logic that you are using to highlight the nodes?

Best Regards,

Rohit Singhal

[renejurmann]

var selectedPath;

var initNavigation = function(){

  //Register navigation render method to be executed with every navigation event

  LSAPI.AFPPlugin.controller.registerOnNavigate(renderNavigation, true);

};

var renderNavigation = function(curNode, launchNode){

  //Get currently selected navigation path

  selectedPath = LSAPI.AFPPlugin.model.getCurrentSelectedPath();

  //Render Top Level Navigation (TLN)

  LSAPI.AFPPlugin.model.getNavigationSubTree(null, renderTLN);

};

var renderNavigationNodes = function(nodes, parentElem, navLevel, iterate) {

  var navUL = $("<ul></ul>");

  navUL.addClass(navUlClass);

  //Add navigation nodes

  for (var i = 0; i < nodes.length; i++) {

  var node = nodes[i];

  //Create a LI element for each navigation node

  var navLI = $("<li></li>");

  navLI.attr("id", "LI" + node.getName());

  //Create an A element for the actual navigation link

  var navA = $("<a></a>");

  //Add generic attributes to the A element

  prepareNavNode(navA, node, navLevel);

  navLI.append(navA);

  navUL.append(navLI);

  parentElem.append(navUL);

  //render children for selected path if navigation level is greater than 2 (in order to render hover menu)

  if(iterate && (isNodeInSelectedPath(node) || navLevel > 2) && node.hasChildren()){

  node.getChildren(renderDTN, {level:(navLevel+1), parentNode:node, subNavTitle: node.getTitle()});

  }

  }

}

var prepareNavNode = function(nodeElem, node, navLevel){

  //Set ID

  nodeElem.attr("id", node.getName());

  //Set CSS classes

  if(isNodeInSelectedPath(node)){

  nodeElem.addClass("selected");

  }

  //Set attributes for navigation

  nodeElem.attr("node", node.getName());

  nodeElem.attr("showType", node.getShowType());

  nodeElem.attr("alt", node.getTitle());

  nodeElem.attr("title", node.getTitle());

  nodeElem.attr("navLevel", navLevel);

  if(node.hasChildren()){

  nodeElem.attr("hasChildren", "true");

  }else{

  nodeElem.attr("hasChildren", "false");

  }

  //Set displayed node title and icon if needed

  var titleSpan = $("<span></span>");

  titleSpan.html(node.getTitle());

  nodeElem.append(titleSpan);

  return nodeElem;

};

var isNodeInSelectedPath = function(node) {

  //If selected path is empty return false

  if(selectedPath || selectedPath.length || selectedPath.length < 1){

  return false;

  }

  //TODO: In following scenario the currently selected navigation entry is NOT included in selected path (SAP bug)

  //in portal role a folder has only one child (page or iview) which is invisible in navigation but default entry for folder

  //in this case the selected path contains the child (page or iview) but the rendered navigation (TLN/DTN) contains the folder only which does not match

  //@see: http://scn.sap.com/thread/3758278

  var nodeName = node.getName();

  var nodeTitle = node.getTitle();

  for(var i = 0; i < selectedPath.length; i++){

  var selPathName = selectedPath[i].getName();

  var selPathTitle = selectedPath[i].getTitle();

  if(nodeName == selPathName){

  return true;

  }

  }

  return false;

};

var renderTLN = function (nodes) {

  if (!nodes) return;

  //Render navigation nodes

  renderNavigationNodes(nodes, $("#tln"), 1, true);

};

var renderDTN = function(nodes, args){

  if (!nodes) {

  return;

  }

  //TODO: Check why this is necessary

  //Due to any reasons, for most TLN entries the retrieved children is a single

  //entry containing the selected TLN entry. Same for selected path. That's why the navigation entries

  //in selected path might be duplicated...

  var secondLevelNode = selectedPath[1];

  if(secondLevelNode.getName() == selectedPath[0].getName()){

  secondLevelNode = selectedPath[2];

  }

  if(nodes.length == 1){

  var nodeName = nodes[0].getName();

  var parentName = args.parentNode.getName();

  if(nodeName == parentName){

  nodes[0].getChildren(renderDTN, {level:2, parentNode:nodes[0], subNavTitle:nodes[0].getTitle()});

  return;

  }

  }

  //Attach rendered navigation level to DOM tree

  //Thereby, navigation level 3 is directly rendered to DTN whereas level 4++ will be rendered as hover menu

  //Thus, levels 4++ must be attached to according parent navigation LI element

  var parentNodeId = "#LI" + args.parentNode.getName();

  var parentElem = $(parentNodeId);

  //Render navigation nodes

  renderNavigationNodes(nodes, parentElem, args.level, true);

};