Show TOC

Procedure documentationWriting the JSP Code Locate this document in the navigation structure

Procedure

Add the following code fragments to the QuickLaunch.jsp file:

  1. Create an input text box element named auto_text_box within a <table> element. Set the OnKeyPress event to the quickLaunchNavigate function call that performs navigation to the node specified in the text box.

    Syntax Syntax

    1. <%@ page import="com.sapportals.portal.prt.component.IPortalComponentRequest" %>
      <table>
      <tr> 
      	<td width=15px> 
      	</td>
      	<td style='font-family:Arial;width:150px;font-size:11px;color:white;font-weight:bold'>
      	  Quick Launch
      	</td>
      </tr>
      <tr>
      	<td>
      	</td>
      	<td nowrap="nowrap" id ="auto_complete">
      		<input type='text' style='font-family:Arial;width:150px;font-size:11px' id='auto_text_box' value='' onKeyPress='quickLaunchNavigate(this,event)'/>
      	</td>
      </tr>
      </table>
      
    End of the code.
  2. Declare and initialize the global variables needed to store the navigation tree nodes, and add the quickLaunchInit function. This function wraps the EPCM.getSAPTop().LSAPI.AFPPlugin.model.getNavigationSubTree method call that retrieves the initial nodes of the user's navigation tree and passes the results to the parseNavigationNodes callback function.

    Syntax Syntax

    1. var arrayIndex = 0;
      var navigationNodesArray = [];
      var navigationNodesHash = [];
      var quickLaunchInit = function() 
       {// get all the initial nodes
       EPCM.getSAPTop().LSAPI.AFPPlugin.model.getNavigationSubTree(null, parseNavigationNodes);
       }
      
    End of the code.
  3. Add the parseNavigationNodes callback function that receives the initial nodes and then parses all nodes to retrieve the entire navigation tree and store the data locally in two arrays. One of the arrays stores the titles of the nodes for the autoComplete function, and the other stores the URLs for actual navigation to the selected nodes.

    Syntax Syntax

    1. var parseNavigationNodes = function(nodes, args){
      if (!nodes) return;	
      for (var i = 0; i < nodes.length; i++)
      {
      	var node, title, nodeUri, hasChildren;
      	node = nodes[i];
      	nodeUri = node.getNodeURI();
      	hasChildren = node.hasChildren();
      	title = node.getTitle();
      	if (navigationNodesHash[title] == null)
      	{
      	navigationNodesArray[arrayIndex++] = title;
      	navigationNodesHash[title] = nodeUri;
      	}
      	// add the node to the array
      	// if the node has children, perform recursive call
      	if (hasChildren)
      	{
      	node.getChildren(parseNavigationNodes);
      	}
      }
      var obj = autoComplete(document.getElementById('auto_text_box'),navigationNodesArray);	
      }
      
    End of the code.
  4. Add the autoComplete function that completes input of the text box element with the valid values from the array of the node titles.

    Syntax Syntax

    1. var autoComplete = function(textBoxElm, validValues) 
      {
      textBoxElm.onkeyup = function(e)
      {
      var evt = e || window.event;			
      var match = false;
      validValues.selectedIndex = -;1
      
      for (var i = 0; i < validValues.length; i++) 
      {
      	if (validValues[i].toUpperCase().indexOf(textBoxElm.value.toUpperCase()) == 0) 
      	{
      	match=true; 
       validValues.selectedIndex = i
      	break;
      	}
      }
      if (textBoxElm.createTextRange()) 
      	{
      	if (!match) 
      		{textBoxElm.value=textBoxElm.value.substring(0,textBoxElm.value.length-1); 
      		return;
      		}
      var ignoredKeys ="8;46;37;38;39;40;33;34;35;36;45;";
      if (ignoredKeys.indexOf(evt.keyCode+";") == -1) 
      	{
      	var curMatchedText = textBoxElm.createTextRange();
      	var oldValue = curMatchedText.text;
      	var newValue = match ? validValues[i] : oldValue;
      	if (newValue != textBoxElm.value) 
      		{textBoxElm.value = newValue;						
      		var addedChars = textBoxElm.createTextRange();
      		addedChars.moveStart('character', oldValue.length) ;
      		addedChars.select();
      		}
      	}
      }
      }
      }
      
    End of the code.
  5. Add the quickLaunchNavigate function that performs navigation to the specified node title using the navigate method of the LSAPI.

    Syntax Syntax

    1. var quickLaunchNavigate = function()
      {
      var keycode;
      if (window.event) keycode = window.event.keyCode;
      if (keycode == 13) 
      	{
      	var title = document.getElementById('auto_text_box').value;
      	var nodeURI = navigationNodesHash[title];
      	// performing the navigation
      	if (nodeURI != null)
      	EPCM.getSAPTop().LSAPI.AFPPlugin.service.navigate(nodeURI);
      	}
      }
      
    End of the code.
  6. Add the clearLaunchedURL function to clear the input text box after navigation.

    Syntax Syntax

    1. var clearLaunchedURL = function()
      {
      document.getElementById('auto_text_box').value = '';
      }
      
    End of the code.
  7. Use the registerOnNavigate method of LSAPI to call the clearLaunchedURL function after each navigation event.

    Syntax Syntax

    1. EPCM.getSAPTop().LSAPI.AFPPlugin.controller.registerOnNavigate(clearLaunchedURL);
    End of the code.
  8. Subscribe to the browser load event that triggers the quickLaunchInit function.

    Syntax Syntax

    1. EPCM.subscribeEvent("urn:com.sapportals.portal:browser","load",quickLaunchInit);
    End of the code.
  9. Call the notifyPanelIfHasContent method of LSAPI to ensure that the iView created from your portal component is displayed in the Left Navigation Panel Container.

    Syntax Syntax

    1. EPCM.getSAPTop().AFPLayoutAPI.notifyPanelIfHasContent(true);
    End of the code.