Portal On Device – A deeper look

As I promised, here I am with the post on Portal on Device and a deeper look into its functionalities. To briefly tell you what portal on device is – mobile version of Portal. Though it is much more than that. we can loosely consider this as a mobile version. Let me clarify this by stating an example. Earlier websites had no separate visual structure for mobile browsers.

No matter how you access, you continue to see on your mobile what you could possible be seeing on your desktop. Later when mobile phones turned into smart phones and PDA into tablets, optimized and shorter version of the website was need of the time.

Now most of the websites maintain two separate version of websites – One for desktop browsers & the other one for mobile browsers.

One for online access and the other one, lighter, efficient & faster version for mobile access.

This blog too have a mobile version which you can see from your mobile.

SAP Portal on Device UI Components

Striking different between desktop version and mobile version is mobile version makes most important content available upfront without wasting up the space by showning images and menus. Mobile version usually have Previous & Next page buttons and so does Portal On Device. They also have a top menu which slide downs upon clicking. There you can find more options for navigation.

SAP Portal on Device Menu

One more difference you would see in the configuration is ability to choose what to show in desktop version and what to show in mobile version. In short, you can choose not to display privacy Policy which is currently displayed on this blog for mobile version. This concept is also adapted in Portal On Device. There is a separate role structure for both desktop and mobile access.

You will have to create different roles for mobile content. This makes sense as screen space available is very less compared to desktop version. You cannot just consume up the space. Why? What do you think is the primary goal of business? – To convert the lead. More sale. That is the primary objective. You want user to see the discision makeing info. right upfront and let him complete the procees without any glitch. Why to scatter unnecessary info that can easily distract user and make him navigate somewhere else? For the same reason, Mobile version of websites, be it Portal On device or Ameyablog, has put up transactional functionality upfront.

PS: Please note that iView content you are adding to Mobile content should have isolation Method as: URL for Portal On Device

Let us now have a deeper look into features of POD.

One thing you will notice immediately about Portal On Device is - HTML 5 and jQuery.

Though portal does not support HTML 5 right now, implementation of Portal On Device needs HTML5 support. What this mean is, Though portal does not support HTML 5 but your Portal On Device components support HTML 5 as majority of the browser now render HTML5 output. By simply adding a JAR file – com.sapconsulting.portal.utils.html_api.jar you can extend portal to support HTML 5 tags. You will also have to add following code in the doContent() method of your component:

EnhancedPortalResponse epResponse = new
EnhancedPortalResponse(request, true, true);
epResponse.setDocTypeToHtml5();

With this, you are just mapping the portal HTML response to an HTML 5 response by initiating class EnhancePortalResponse.

What are the skills needed to develop Portal On Device Components?

In addition to your portal development skills in JSP & JavaScript, you now need to know jQuery. Let aside Portal On Device components, If you have a look into AFP Code samples available on SDN, you will see jQuery everywhere. Ajax requests are invoked by jQuery. Even the masthead component for 7.3 portal controls visibility of various function links by jQuery.

On Page load, masthead now calls LSAPI plugin that initiates Ajax Framework Page.

Also, in case of function links like Favorites, on move over, it calls a JS function mopen() that further passes identifier id ‘favorite’ to another function written in menu.js JavaScript file. If ‘favorite‘ id is passed, it invokes getFavoritesMenu() which gets all the favorites using yet another function drawFavorites() which then gets favorites Node using Ajax LSAPI as follows:

var selectedNode = EPCM.getSAPTop().LSAPI.AFPPlugin.model.getCurrentLaunchNode();
var title = selectedNode.getTitle();
var url = selectedNode.getName();

Masthead components also makes use of jQuery for creating overlay, assigning the CSS at runtime using .css tag of jQuery. It also controls click event for e.g. adding/removing an item to/from favorite list. In short, entire DOM rendering is controlled by AJAX & jQuery. Let us now move on with the core topic – Portal On Device. I will write a separate post on jQuery functionalities in NetWeaver Portal 7.3 components & masthead.

SAP Portal on Device Favorites

How Portal On Device Work?

Portal on Device is an Add-on component for NW 7.3 portal. In case of websites, there are lots of PHP plug-in available that can handle mobile version of your website. Right from detecting the request source, loading either desktop or mobile version to generating the mobile DOM output. On the similar line, Portal On Device is also an add-on that enhance the DOM output of your portal and make it suitable for the mobile version.

Applications like UWL are wrapped by jQuery Mobile to implement a UI that is suitable for mobiles. In the introduction guide to Portal On Device, it is mentioned that every application that is capable of generating HTML5/jQuery output is supported by Portal On Device. Applications like WD ABAP, Portal Componenets & HTMLB, BSP & PRT are compatible on Portal On Device. However, Nothing is mentioned about WD Java Applications compatibility.

I am neither sure if WD Java can generate either HTML5 response or render jQUery scripts. Nor I am aware of any other configuration using which you can run WD Java Applications with HTML5 & jQuery. We have to

wait until SAP answers this question.

Installating and working with contents is pretty easy. If you know how to create URL alias and configure separate Desktop page, you are pretty much there.

• Creare a mobile framework page from installed components
• Configure/add components in Mobile Framework Page
• Add a headerless page
• Create/configure mobile desktop
• Create a theme for mobile desktop
• Create Desktop Rules
• Configure On Device contents like Home Page, Apps Page etc.

To summarize, Portal On Device is not a full installation product. It’s just an Add=on component that can enhance the UI of your portal so that your customers & users can make most from of portal infrastructure. If we have a look at the bigger picture of SAP Mobility Portfolio, you can clearly see that SAP MI, Portal On Device & SUP never overlap with each other. SAP MI allows you to develop and expose WD Java applications both online & offline. Portal On Device take care of rest of the contents of the PCD. SUP is a business scenario specific and hence it also have its own place in the SAP Portfolio.

In short, SAP has divided the mobility solution largely into above mentioned three offerings.

I will come up with a separate post on how to create and configure these contents and how to start with Portal On Device development.