SAP NetWeaver Portal is vital to business transactions, and these transactions must be completed without error. This requires fetching a large amount of data from the back end, sorting it correctly, performing correct selection, and finally rendering it with a user interface (UI) technology or programming model in the SAP system, such as Web Dynpro for Java, Visual Composer, or SAP NetWeaver Portal development. However, these tools are primarily focused on data, rather than on designing a visually compelling UI. Fetching a large amount of data and performing different actions on it slows down your application. There are optimization techniques available, but they contribute little to the faster execution of applications developed in these tools. 

With the latest UI development frameworks and new scripting methods, it is possible to significantly reduce execution time of portal applications and still maintain the business-centric approach. You must understand how to intertwine SAP NetWeaver Portal applications and the latest Web development methodologies to take advantage of SAP’s strong business-oriented process mapping and the slew of features that the latest UI technologies offer (e.g., user-friendliness, faster execution, and built-in optimization methodologies).

I’ll start by explaining some of these latest technologies, as well as some development changes over time before getting into jQuery. I’ll discuss the as-is condition of the existing portal development as well as pain point and improvement areas. The later sections will take you through to-be scenarios, as well as performance management and efficiency achieved after using jQuery.

A Quick Glance at the Latest UI and Web Development Trends

Apart from the emergence of standards such as HTML5, a few technologies change the way applications are designed. Some of them are Yahoo! queries in SQL to retrieve the data in JavaScript Object Notation (JSON) format, which eliminates the cross-domain data fetching problems. This is important when your SAP NetWeaver Portal is in one domain and you’re fetching the data in a portlet from a different domain. Some of the latest scripting technologies that could replace standard Java scripting and HTMLB developments in the portal are jQuery, jQuery UI, and Ajax. These libraries are lightweight and eliminate the parsing issue (i.e., links and buttons not functioning when JavaScript stops working) that traditional JavaScript has. With the ramp-up release of SAP NetWeaver 7.3, there is a major change in the portal framework. Ajax framework and portlet design is one of the major features on the SAP NetWeaver 7.3 roadmap.

The list of these latest technologies is nearly endless. Not all of them are seamlessly compatible with SAP NetWeaver Portal developments. However, jQuery and Ajax are some of those technologies that need no compatibility adjustments. Your portal application can do wonders if you intertwine them with traditional portal development methodology.

Traditional Portal Development

Since Enterprise Portal 5.0, portal developments are done in HTMLB, JSP, and JavaScripts. Standard components such as the logon page, masthead, top-level navigation, details navigation, page layouts, and framework are all delivered in two types: HTMLB and HTML. HTML components are used when your portal is externally facing. Although you can use HTMLB elements in this scenario, it’s not recommended because of their heavy bandwidth consumption. JavaScript is often used in JSPDynpage development. However, there is a major drawback associated with JavaScript. If anything goes wrong with the Document Object Model (DOM) element reference, JavaScript simply gives up. Functionalities such as hover, button-click, and accordion menu then do not work. Yet another problem with JavaScript is its inability to compress the code for production use. You also need to use a large number of lines of code — for example, JavaScript takes around 15 lines of code to write mouse-hover functionality, while jQuery takes just three lines of code.

What about Browser Compatibility?

Browser compatibility hasn’t been a big focus of SAP. There are several instances of custom logon pages falling apart in Mozilla Firefox or Microsoft Internet Explorer (IE) 8, but the same design works fine in IE 6 or IE 7. Even browser incompatibilities of JavaScript can drive you crazy. UI effects, such as an accumulator, working well in Firefox would just fall apart in IE. Now can you imagine the kind of impact these irregularities may have on your portal development. The answer is simple: There is no surety of your portal application working without a glitch in any browser, under any rendering situation, and in limited Internet bandwidth. However, using jQuery for scripting or perhaps designing UI elements can change this case from uncertainty to absolute surety.

Brief Overview of jQuery

jQuery was released in January 2006 by John Resig. jQuery is an open-source library and is filed under general public license (GNU). It is a quicker and slimmer version of JavaScript that has innovative syntax and scripting, allowing you to write less but do more. jQuery makes DOM element manipulation extremely effective and easy. At the same time, it helps in making Ajax requests where a traditional JavaScript falls short. 

jQuery is shipped in .js files and is available in two types: uncompressed and compressed. When you want your developers to have a quick reference to standard functions shipped in jQuery .js files, you can use the uncompressed version. You can use this version in the sandbox or development server. However, when your application goes into production, its sturdiness is critical. This is when you can use the compressed version of jQuery. The compressed version of a jQuery file is only about 19 kb.

When compared with JavaScript, jQuery is best at DOM manipulation, making Ajax requests, and adding sophisticated interaction effects. You can even add a drag-and-drop effect into your portal components using jQuery.

Types of jQuery Libraries and How to Include Them in SAP NetWeaver Portal Components

In addition to there being two versions of jQuery libraries, there are two build types of jQuery libraries regardless of what version you are using. One is a nightly build library, which is updated every midnight. The other is subversion, which is updated the moment anybody from the jQuery development team releases a change. Subversion is generally considered to be unstable and is therefore untested. In this article, I’ll be referring to compressed nightly build libraries of jQuery.

Syntax in Brief

In C/C++, there is main();, in jQuery, there is jquery();. You can access each function available in the jQuery library with this function. However, for the sake of simplicity and to keep code shortened, you can write $();. $ is a short name for function jQuery. 

A typical function has the following format:

$(‘selector’).event/function or CSS Class

With this, you are all set to integrate jQuery in portal components. The rest of the jQuery syntax is similar to JavaScript.

jQuery in SAP NetWeaver Portal Development

Now let’s see how you can use jQuery in portal development. The standard components in which you can integrate jQuery are:

• Landing page — for validation and designing an intuitive logon process
• Masthead — for dynamic branding
• Top-level navigation — for designing a lightweight header menu in portal
• Detail navigation — for designing tree UI and animated effects
• Layout and portal page — for designing drag-and-drop components, reusable add-ons, and lightweight UI

Nevertheless, you can integrate jQuery with any portal component where you wish to use standard scripting. Let’s now look at some of the benefits you can see with jQuery as well as some of the major components where jQuery can be used seamlessly:

• Top-level navigation
• Rendering
• Performance measurements
• Portal logon page

• Ajax Portal framework

Integrate jQuery in Top-Level Navigation

Standard top-level navigation works in the following sequence:

• Calling navigation tag library for fetching navigation nodes
• Using navigation tags to fetch parent nodes followed by fetching of child nodes

This procedure remains the same whether you’re using HTMLB, HTML, or JavaScript. However, instead of using regular HTML tags and JavaScript directly, you can use jQuery’s progressive enhancement to design HTML elements and render the effect only if the user’s browser has JavaScript support enabled. Otherwise, the browser simply goes on to render the code written for non-compatibility with JavaScript or jQuery. With this, you can make sure that regardless of the user’s browser settings, the top-level navigation (TLN) continues to function properly. The code I show you renders mouse hover or any other animation effect only when JavaScript support is enabled. Otherwise, it shows standard top-level navigation. In jQuery, this is called progressive enhancement.

First, write a CSS followed by code to fetch the navigation nodes. After that, you write code to render the TLN in jQuery as well as HTML.

Figure 1 shows the typical structure of DOM objects when TLN is rendered. This helps you visualize the code with elements on screen.

Figure 1

TLN navigation schema

Figure 2 shows the CSS code.

Figure 2

CSS code

The code shown in Figure 3 fetches navigation nodes, which are rendered in HTML.

Figure 3

Code for fetching navigation nodes

Finally, write the code in Figure 4 to create a mouse hover action with jQuery. 

Figure 4

Coding a mouse hover

Parent nodes of the TLN are fetched and can be accessed using a pnode div. When you hover on any parent node of the TLN, $(this) is used to identify the element that fired the event. For example, $(this).parent.find(“ul.subnav”) finds the element that triggered the hover event and once that element is found, it moves on to find if there are any child-level elements present. If they are present, it assigns a standard jQuery action slideDown or slideUp. You can set the speed of the animation by changing the value, which in this case is slow.

I’ve showed you how to integrate jQuery for creating a hover effect, but this was standard HTML rendering, not progressive enhancement. Now let’s see how you can write the same code but with progressive enhancement.

Rendering Using jQuery

Now let’s render the HTML elements by declaring them inside the $(‘’); function. For example, progressive enhancement for rendering the <div id=”navigation”> would be the following:

$(‘<div id=”navigation”>’);

Here, navigation div is rendered only if the browser supports JavaScript or jQuery. Otherwise, it simply goes on to render standard code. To make this work with the TLN code mentioned above, all you have to do is put the HTML code inside the <table></table> tags and call this table inside jQuery function (Figure 5).

Figure 5

TLN code using jQuery

This code checks if JavaScript or jQuery is enabled or not using its $(‘’); method. The browser supports the jQuery function only if the required support is enabled. Once it detects the JavaScript support, it goes on to render the <table = jtable> and the entire code within. Only then is the following line of code executed, which creates an empty <span> dynamically.

("ul.subnav").parent().append("<span></span>");

If you have a close look at jQuery code, you observe that the hover effect is created only if <span> is rendered. Using the CSS class, you have also added a background image inside this newly created empty <span> so the hover effect is generated when you move the mouse over the image.

In short, adding a <span>, adding a background image inside this <span>, and finally generating the hover effect are done dynamically only if the user’s browser supports JavaScript or jQuery.

Performance Measurements 

The work you’ve performed is not only for enhancing the user experience but also for improving the performance and reducing the execution time of the portal component. The top-level navigation component designed in jQuery is executed in 0.66 seconds. This time is for the initial execution — once cached, your TLN does not take more than 0.2 seconds to render completely.

Figure 6 shows the HttpWatch Studio screenshot taken for the measurement of the jQuery TLN component.

Figure 6

Measure the jQuery TLN component

It is clear from the time taken to render the component that you can reduce the execution and request time by a great margin if you integrate jQuery inside portal components. All you need is the proper approach and an understanding of where jQuery can help you achieve it.

Now let’s look at how jQuery can help you with the portal logon page. The most common scenario is the jQuery-enabled user input form validation.

jQuery in Portal Logon Page

Form validation is one of the most important aspects of the logon process. The number of logon attempts is limited though configuration. However, it is possible to use a quick validation technique if the user mistakenly forgot to enter the user ID or password. In this case, if the user enters the wrong user ID or password, then after a few attempts his or her account is locked. You are not interfering with the security process here, just making sure that the case where the user forgets to enter either of the required fields it should not be considered a failed attempt. Instead, it should never execute the logon module if either field is left blank. This allows you to create a client-side validation model and to avoid the server-side round trips simultaneously. With jQuery, you can achieve this easily. Let’s see how to do that.

Let’s start by looking at the HTML code of the portal logon page.

The default logon form ID is logonForm. Inside this form you have a number of fields such as a self-registration link option, input field for user ID and password, a default hidden logon scheme drop-down menu, logon help, and a submit button. What you are trying to achieve here is to apply the .validate(); function available in the jQuery to the form with ID logonForm.

Insert the code in Figure 7 before the submit button in the standard logon form.

Figure 7

Form validation using jQuery

“Rules” is a key value pair used to define custom rules. Here you can mark any field as required. Logonuidfield and Logonpassfield are IDs of the user ID and password input fields. Using messages, you can decide what validation error message you want to display when the corresponding field is left blank. You are making sure that when either user ID or password is not entered, the logon module is not executed. This saves the unnecessary execution of logon process, server round trips, and reduces the server load. 

Ajax is yet another technology that can help you speed up execution time and create lean components. jQuery can help make Ajax requests and enhance Ajax’s existing framework. Let’s take a detailed look at jQuery and Ajax interaction.

Ajax Portal Framework and jQuery

SAP’s roadmap of SAP NetWeaver portal includes the Ajax framework page in SAP NetWeaver 7.3. However, the Ajax framework page is available from SAP NetWeaver 7.0 with enhancement package 2. The portlet or widgets library available in the enterprise workspace with SAP NetWeaver 7.3 is yet another area where jQuery can help you immensely. With enterprise workspace, users can choose with which portlet or widget they want to work, add it to the page from the standard portlet library, and start working with it. However, if you are pulling data in one of the portlets, you’d want only a part of the page to be refreshed and not the entire page. This is achieved by making Ajax requests. However, there is a small glitch in the way browsers react to Ajax requests. Different browsers react differently to Ajax requests. For example, IE always caches all the Ajax requests. Caching Ajax could be considered a bug because the main purpose of Ajax is to update content dynamically. You’d never want Ajax requests to be cached. This is where jQuery comes to rescue. Writing a simple function can tell the browser not to cache Ajax calls. You can accomplish this simply by writing the following code into your portal component:

$.ajaxSetup ({cache: false});

You can install a free tool called Firebug to inspect the Ajax request made. Figure 8 confirms that Ajax calls are not cached in the browser.

Figure 8

Firebug showing details of the browser request and unique parameter is assignment for each request

$.ajaxSetup is used to set default settings globally. As you can see in Figure 8, it assigns a unique parameter ID to every Ajax request, thereby making the browser consider each request unique.

To check this yourself, in Firebug open the Net tab and navigate to XHR. XHR is a request generated from an Ajax call. You can inspect everything about the browser request in this tab.

jQuery makes complex Ajax calls as simple as possible. A common use of Ajax is to load a remote HTML content and inject it into DOM at a place you want. This is achieved by writing mere one line of code using jQuery:

$('#divid').load('somepage.php');

divid is a <div> where you’re inserting remote content that is fetched using an Ajax request. jQuery provides the .load(); function, which injects the data from a remote page, which is returned by an Ajax request into the area you want. Here the Ajax request fetches the data from somepage.php and injects it in the div ID specified. This is all achieved with a single line of code. 

Ameya Pimpalgaonkar

Ameya Pimpalgaonkar is a senior SAP architect. He specializes in SAP Netweaver Portal, SAP BPM, BRM, MDM, and SAP Mobile. His interests include UI and front-end technologies, SAPUI5, Responsive Design, and integration of modern technologies with SAP UI. He has also worked on HTML5, CSS3, and jQuery. Ameya is also a certified usability analyst from HFI, USA.

You may contact the author at ameya85@gmail.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.