1 5 6 7 8 9 25 Previous Next

SAP Enterprise Portal

375 Posts



Please note in this scenario I have shown from the POWL example. This OBN configuration is applicable to all OBN configuration in Portal.


We have copied the standard iViews into our custom folder and created a role to launch a Maintenance Tasks iview.


We are able to display it fine. however, when we select any notification and click on the buttons such as change notification/display notification, it doesn't display the respective iView’s in new window, as it generally does in the standard role/iview.


It displays an error message saying "There is no iView available for system "SAP_ERP_Manufacturing": object "notification". For more information, contact your administrator."


In the below example on POWL screen select notification created by User link (Called Query).

10-21-2013 5-08-26 PM.png


Select any notification(in table row) and click on say, Display Notification button, below error messages pops up.


10-21-2013 5-09-40 PM.png


scenario may vary based on our requirements. Another exmample navigating from one webdynpro application to another webdynpro application. 


Root Cause


Even though we copied the standard iview to our custom folder, the iview doesn’t have the OBN properties copied and configured. We have to manually add the business operation to the OBN Business object.


10-21-2013 5-10-19 PM.png


Step by step procedure


Process Flow of Business Object and Business Operation in OBN


10-21-2013 5-11-01 PM.png


  1. User Logins in to Portal with User ID and access the assigned Role
  2. Access the assigned Application(In this case POWL application).
  3. Click on the appropriate action Button on Application (POWL)
  4. iView/ Page linked to BO Operation is triggered


Procedure to add the iView as Source and Targets in OBN:


  1. Adding Application as OBN Source:


Add business object operations that this iView activates at runtime. You can add operations automatically, if you check the iView runtime by choosing Check Source iView; or you can add operations manually from the Portal Catalog.


Here, we have the iview/application(POWL), which is the OBN source. From this iview, we would launch other iViews upon Action/Button.


10-21-2013 5-11-54 PM.png

  1. Adding Application as OBN Target


Current iView/page opens upon activation of the following business object operations


Here we create the Business Operation, by selecting the Business Object, Operation it would perform and System Alias defined.


Above fields selected are from standard Operations that we have under ERP Common Parts folder, in manufacturing folder


PCD path: Business Objects – ERP Common Parts – Maintenance Management – Maintenance Notification – select the operation that you want to activate.


10-21-2013 5-13-16 PM.png


We use standard business object that’s in the ERP Common parts folder as per the iview we want to launch, as the Business Object of Target iview.


This business object and operations we need to read from feeder classes or from ECC where ever you required.


Code Snippet of reading BO from ECC:


           ls_powl_follow_up-bo_system  = <system alias>.

           ls_powl_follow_up-bo_name    = 'maintenance_order'.

           ls_powl_follow_up-bo_op_name = 'change'.

           ls_powl_follow_up-parameters = <Passing Parameters to target iview>.


Please comment if any further clarifications.





What is it all about?

Recently we were requested to develop a very unusual consumption experience for exploring Fiori business content, enriched with context aware services (you can find here more information about it). While this is still in development, we thought some of you would be interested in learning about some of our considerations in selecting the technology for the UI.

Nir and I are developers in the SAP Portal group, in SAP Labs Israel, and we just love to bring Web UI to the extreme.

So what was on our plate? Complex shapes, dynamic graphics, multiple layers, complex and simultaneous animations, and, needless to say, mobile-friendly and absolutely smooth performance.

We also wanted: minimal learning curve, usage of a technology which is common in the industry, accessibility & text extraction, ability to embed external HTML content.

The good part: we were free to support a limited product-availability matrix, with only the most up-to-date Webkit browsers on PC and the retina iPad.

After a long investigation and numerous POC’s, we decided to go with CSS Transformations over HTML DOM elements with a pinch of Canvas. We were surprised to find out that the technology we had known for so long would fit us best, and while on this quest we learned to improve our skills using it.

Here are the technologies we investigated in order to find which best suit our requirements:

  • HTML5 Canvas
  • SVG
  • CSS Transform



First Option: HTML5 Canvas

According to the HTML5 specification, the CANVAS element is:

“a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.”

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript.

In order to leverage the HTML5 Canvas, we need to place the <canvas> tag somewhere inside the HTML document, access the <canvas> tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

The canvas element is the actual DOM node that is embedded in the HTML page.

The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element. The context can be 2D or webgl (3D).

For example, let’s draw a rectangle with HTML5 Canvas:

     <canvas id="myCanvas" width="578" height="200"></canvas>
          var canvas = document.getElementById('myCanvas');
          var context = canvas.getContext('2d');
          context.rect(188, 50, 200, 100);
          context.fillStyle = 'yellow';
          context.lineWidth = 7;
          context.strokeStyle = 'black';


The result:


HTML5 Canvas Advantages:

  1. High-performance 2D surface for drawing anything you want
  2. You can save the resulting image as a .png or .jpg
  3. Best-suited for generating raster graphics (for example in games, fractals, etc.), editing of images, and operations requiring pixel-level manipulation


HTML5 Canvas Disadvantages:

  1. Poor text rendering capabilities. Might not be the best choice for cases where accessibility is crucial

  2. Events are binding to <canvas> tag and not on specific Web element, so in order to handle events for a specific Web element, you may need to do a lot of hard work or to rely on a Javascript library like KineticJS

  3. Poor debug tools



Second Option: SVG

SVG literally means Scalable Vector Graphics. It is a language for describing two-dimensional graphics in XML.

SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images, and text.

Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. SVG also supports embedded or external CSS rules.

Example of SVG shapes:


<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="#000"/>
<rect x="250" y="250" width="200" height="200" fill="rgb(234,234,234)" 
     stroke-width="1" stroke="rgb(0,0,0)"/>

SVG Advantages:

  1. Vector graphics: people are now using high-resolution iPads and monitors
  2. Accessibility: Humans and machines can understand SVG code even if they can’t render it
  3. DOM Handling: SVGs have a DOM so it’s easy to attach event handlers and manipulate elements like you would for other HTML elements. To move an item, you simply change its coordinates


SVG Disadvantages:

  1. Slow rendering when document complexity increases; frequent use of the DOM impacts performance
  2. Steep learning curve
  3. Longer application loading, especially with detailed graphics


Third Option: CSS Transform


Modern browsers (Safari, Chrome, Opera, Firefox, IE9+) provide Web developers with CSS animations capabilities.

The effect of CSS Transform is to modify the appearance of an element in the browser by translation, rotation, scaling or other means.

While CSS Transformation in itself is a powerful tool, the ability to animate the transformations using webkit-transition makes it even better, so you can define animation properties like duration, delay, easing etc.

For example:


.element { 


In addition, you can combine multiple transform animations to a single element by listing them one after the other, so you can create complex animations easily.


You can predefine animation for an element and control the timing by @-webkit-keyframes. A keyframe defines the style that is applied for that moment within the animation. The animation engine smoothly interpolate styles between the keyframes.


Here is an example of a keyframe animation that changes the element size:


@-webkit-keyframes item-animation { 
     0% {
           -webkit-transform: scale(0.2, 0.2);
     45% { 
          -webkit-transform: scale(1.1, 1.1);
     100% {
          -webkit-transform: scale(1, 1);


In the same CSS file you can attach the keyframe animation to an element:

.element {
     -webkit-animation: item-animation 0.5s; 
     -webkit-animation-fill-mode: both;


Furthermore, from a performance perspective, it is better to use CSS Transform in comparison to changing an object position and size by plain CSS properties (top, left, width, height).

Changing CSS properties by Javascript causes the browser to paint each frame, which result in a flickering transition. The CSS Transform version gets the screen element elevated onto its own layer on the GPU (called a RenderLayer). Now that it sits on its own layer, any 2D transform, 3D transform, or opacity changes, can happen purely on the GPU, which will stay extremely fast and still get us quick frame rates.


CSS Transform Advantages:

  1. Performance – uses GPU and not CPU
  2. CSS is a common technology, which doesn’t require much learning, and is easy to use – just a few more CSS properties and values
  3. Animations are made on the HTML DOM objects


CSS Transform Disadvantages:

  1. Bitmap graphics only - we have to take into consideration different screen resolutions
  2. Dynamic animations are made using Javascript and are slower (for example, items which should be moved to a calculated location)
  3. Creation of complex shapes are limited - we can draw circles, but more complex shapes might require images


Which one to pick?

It is quite hard to declare one technology as the optimal one, since the decision, like always, depends on your needs.

After investigating each technology and doing some POCs, we found out which of our requirements are answered by each UI technology:


HTML5 Canvas


CSS Transform

Draw complex shapes



Sufficient (for required implementation)

Dynamic graphics




Complex animations




Good performance


Partially (CPU costly)






Minimal learning curve




Common in industry




Accessibility & text extraction




Embed external HTML content


Partially (foreignObject)



The ability to embed HTML content is an important requirement since we must make sure our solution will support integration with other UI libraries like UI5.

In addition to technical pros and cons for each UI technology, we also took into consideration our team’s wide experience in using HTML and CSS, which could help us provide a good solution in minimal time and learning curve.

In conclusion, our main choice is CSS Transform for animations, complex Web elements with embedded HTML, and simple event-handling for each element.

Additionally, we chose to use HTML5 Canvas for animations of non-Web elements like background scenery elements.


Hope you enjoyed this post,

Nir and Yotam.















For making your sites easily accessible on mobile and attractive to mobile users, the Mobile Portal offers you a role based aggregation layer to integrate both your web and native applications with unstructured content from various sources. There are already lots of blogs out there on SCN describing SAP Mobile Portal capabilities and how to best use them. I recommend reading

For this blog, I built a very small example including a PSM Page. My portal was already configured for mobile (HTML5 support, filtering enabled, device groups configured), so I just did the following steps:

  1. In the Master Rule collection, I checked which Smartphone Desktop was assigned to Device Group Smartphone – it was the Default Smartphone Portal Desktop.
  2. Then I checked in this Portal Desktop which filterID was assigned. Result: the default com.sap.portal.smartphone.
  3. Next I created a copy of the Every User Mobile Role which comes with the standard delivery and made sure that the Filter IDs assigned to the Launcher and other pages contained com.sap.portal.smartphone.
  4. Now, the next step is adding some PSM pages to this role. This is really easy, as it is done using the Navigation Manager (before SP3: Navigation Assistant).  You just need to select a folder in a portal role on the left side and a node in the PSM project structure on the right side and click Add.
    As an example, I built a simple structure with PSM and published it:
  5. There are two possible locations where PSM pages can be added to a portal role:

    a. In the launcher: In Navigation Manager, you simply select the launcher folder in the mobile role on the right side and the top page of the PSM page structure on the left side and click Add Link. In the pop-up window, the Mobile checkbox needs to be checked, which in most cases is already done by the system. All other settings can just be used as they are, if you do not want to restrict the depth of the page sturcture. Mobile links always need to be static.

    The PSM pages are added as folder structure below the launcher. They inherit the filter ID from the launcher and mobile users can easily navigate through them to find the relevant content.

    b. In Portal Explorer:  The Portal Explorer gives users access to all items in their mobile roles that are entry points but not assigned to a mobile perspective like launcher or home page.  Therefore, you just need to add the PSM pages to any folder except launcher, e.g. to the role itself, using Navigation Manager; then it will be accessible from the Portal Explorer in the Toolbox.

    To define the types of devices on which the pages should be visible, you have to enter a filterID, when creating the link.

        6-Add PEx.png 


Now I am done. That is how the page structure looks like in the Portal role:

6-Role Ende.png


And in the smartphone:

Launcher_s.jpg   PortEx_s.jpg  


You can now click to open the Travel Information page or navigate to the sub-pages.



By the way, for sharing documents on mobile, SAP Portal Content Management by OpenText offers mobile UIs both for tablets and smartphones. These are the PCM smartphone UIs:

MobileBrowse.jpg   MobilePulse.jpg



Hope that blog was helpful. If you are interested in reading more about creating sites with SAP NetWeaver Portal, check out the other blogs in my blog series.




Applies to:


This article applies to SAP Enterprise Portal 7.0.




This document explains the procedure to add our predefined properties in the Search Options Screen of SAP Enterprise Portal.


Author(s):    Sreeram Kasturi


Company:    Infosys Technologies Limited


Created on: 16th September 2013


Author Bio



Sreeram Kasturi is working as Senior Technical Architect in Infosys Technologies Limited, Bangalore.  He has worked on SAP MDM, SAP BPM, EP, KMC and Java/J2ee Technologies. He has conducted trainings on behalf of SAP Education Center on EP KMC




1. Introduction


SAP Enterprise Portal comes with a set of standard predefined properties for each resource for example: created by, modified by. Sometimes we might require creating our own properties also. This blog explains how to add the new predefined properties to appear in the Search Options Screen of SAP Enterprise Portal.


Two main sections of this document are “Creating New Properties” and “Adding Predefined Properties to Search Option Screen” as shown below.


2. Creating New Properties


This section “Create New Properties” is already explained in my previous article published on SDN - Creating Predefined Properties in Knowledge Management - Step by Step Guide” .


3. Adding Predefined Properties to Search Option Screen


This section explains how to add predefined Properties to Search Option Screen in SAP Enterprise Portal

Go to System Administrator --> System Configuration --> Knowledge Management --> Content Management --> User Interface


Click on Show Advanced Options in “User Interface”


Click on Search +.



Click on “Search Options Set”



Select the 'UISearch' and click on Edit Button


Click on ‘Show All Object’ link to display all the properties under ‘Allowed Predefined Properties’


Select the newly created / required properties from the list shown in the above image.


Click on ‘OK’ button.


The newly added properties like approved, reviewed, printed are visible in the Search Option screen as shown below.



4. References






With Netweaver Portal 7.30 SP10 or 7.31 SP09 SAP launched the new UI Theme Designer. By default the old editor is still loaded, so here are the tips:



1) Enable UI Theme Designer in the portal

In Netweaver Administrator (/nwa) go to Configuration > Infrastructure > Application Modules;

Select the web module "com.sap.portal.themes.lafservice" in the Module List;

Now in the Portal Service Details the Properties are loaded. Change "Determine what will be the theme runtime provider" to LESS.

Save it and restart the portal.



2) By enabling the LESS functionality the portal has added a new menu option under Content Administration > Portal Display > Portal Themes. It is called UI Theme Designer.




If you launch the UI Theme Designer, be sure you are running a modern browser (e.g. CSS3 support -> IE9 or higher, Firefox and Chrome).

Otherwise it won't start / work correctly.




3) Check out the following: Note 1839261 - Application displayed without theme (UI Theme Designer). In our case we needed a patch for SAP_BASIS (SAPKB73108).



4) Now you can run the UI Theme Designer from the portal.




Some interesting information (thanks Shani and Itzik again )

OSS note 1890375




Noël Hendrikx - SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.


UI Theming blog series

Portal theming - also waited a couple of years?

How to... UI Theme Designer - Installation

How to... UI Theme Designer - Migration

How to... UI Theme Designer - Locating elements

How to... UI Theme Designer - Transportation



Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend - Autoresponder FTW


Hi SAP Portal Community,

Today, I would like to introduce myself to you and invite you to follow a series of blogs that I intend to start in the next days. My name is Sibylle Brehm and I have been part of the portal Product Management team since the very beginnings of SAP Portal, although at that time my focus area was Knowledge Management. In the last years, I took over the responsibility for planning, setting up, and configuring our SAP NetWeaver Portal demo scenarios, for customer events like Sapphire and TechEd, for our standard demo landscape and also for specific customer meetings.

Here you can see some of the portals that I worked on:



Since the portal management team decided in 2010 to further enhance and enlarge the portal offering with the best-of-breed Content Management and Web Site Management solutions of our partner OpenText, these new capabilities also needed to be reflected in our demo scenarios. Thus, I had the opportunity to build up a lot of experience on the integration of SAP Portal Content and Site Management of OpenText with SAP NetWeaver portal, on the benefits of using these add-ons to the portal, on configuration and administration.

This has been quite a fascinating time to get to know these new products in detail with long hours and some ups and downs, lots of learning by doing and help from our colleagues in the Portal development team and at OpenText. And it is this experience that I would like to share with you in a blog series on creating sites with SAP NetWeaver Portal. These are the topics that I am going to tackle in my first blogs:


  1. Leveraging SAP Portal Site Management by OpenText for building external sites
  2. Accessing sites built with SAP Netweaver Portal and PSM on mobile
  3. Anonymous logon for external sites
  4. What to consider when changing the portal look and feel with a custom framework page


If you have any additional ideas and points of interest around this topic, please feel free to provide your suggestions by writing a comment on this blog. I promise to take a close look at your ideas and provide some details wherever possible.

So, stay tuned! The first blog is already available and the second one just around the corner.


Hi SAP Portal Community,


Creating external facing portals is quite an important topic for many companies and there are lots of things to consider regarding architecture, security, user access etc. Today, I would like to take a closer look at how you can use SAP Portal Site Management by Opentext (PSM) with the SAP NetWeaver Portal to create even better, more appealing sites with a maximum of flexibility.

PSM provides customers with a rich set of features and functions to enable non-technical business experts to easily manage their content within the SAP Portal. To benefit from the close integration between Portal and OpenText Web Site Management and the advanced Site Management features of the product, you first need to install the OpenText Services and deploy the PSM Portal components.

From the Portal side of the solution, you get lots of functionality for providing an external facing site out of the box like navigation via short URLs or quicklinks, a navigation cache, a light framework page, and a resource-sensitive page builder. You can find more about this topic in the SAP help portal at http://help.sap.com/saphelp_nw73ehp1/helpdata/en/48/1d0555a4ef4e6fe10000000a42189c/content.htm?frameset=/en/48/1d054fa4ef4e6fe10000000a42189c/frameset.htm. For general information on SAP NetWeaver Portal, please take a look at the SAP NetWeaver Portal space in SCN where you can find for example a Getting Started blog and a roadmap presentation, or watch the portfolio video.

With the usage of PSM, you gain all features of a best-of-breed web site management solution for administrators and an easy-to-handle, quick editing tool for site editors in addition. Besides, PSM offers Asset Management to manage images you used on your web-sites, support for the whole content process and, very importantly, lots of options for building dynamic sites. For more detailed information on PSM in general, take a look at this presentation.

Well, how do PSM and Portal work together when building up an external site? Let’s take a look at different important decisions you have to make, when building up your site:

  1. Access: The OpenText Delivery Server, the powerful, XML-based tool for dynamic delivery of web site content to the Portal, has its own anonymous user. SAP Portal Site Management by OpenText automatically recognizes if the portal user is an anonymous user and then maps it the Delivery Server anonymous user without any configuration needed.
  2. Navigation: Since your external site will be first of all a portal, you can use the normal SAP NetWeaver portal concept to provide a role-based navigation structure. With PSM you can complement the role navigation by adding either single pages or complete navigation trees to a portal role and very easily link between pages. In addition, you can choose between static and dynamic links when adding pages or page structures to a role, so that in the second case, even after having connected the page to a role, all changes to the page structures will be automatically visible in the portal once they are published. You can see how to add pages to a role in this video.
  3. Look and Feel: In many cases, SAP Portal customers will create their own portal desktops and framework pages based on the Ajax framework page to shape the portal design according to their needs. You can easily integrate the same css and if needed js file both in the OpenText Management Server as part of the portal framework to attain a seamless experience both in your External Facing site and in your editing environment.
    To ensure a consistent look of Portal/PSM pages, the OpenText Management Server (the part of the solution where the actual page creation, editing and publishing workflow is handled) offers also a clear separation of content and layout and helps to enforce strict adherence to a predefined design, even when content creation is delegated to content experts in the LOB. To reach this, the whole content creation process heavily on templates that can be created in a way to fit seamlessly into your portal environment.
  4. Portal Content: In many cases, you will decide to bring together structured and unstructured content on the same page. In fact, this can be done easily by using the Application Integration feature of PSM. Thus, PSM pages are not just nice web pages created using cool templates and based on a stylish css, but they can also contain any application that is available in your portal as an iView, so that you can for example display the list of current purchase orders next to some information on the purchasing process in your supplier portal. The application integration is done in the template, so power users can provide a set of templates including different applications and add red dots to the template to modify iView properties of the application, e.g. root node and display options for a document list or transaction code for an SAP transaction.
  5. You can easily provide a mobile version of your external facing site, but that will be the topic of my next blog. To see an overview of the complete series about creating sites with SAP NetWeaver Portal, go the introductory blog.

Stay tuned!


Steps to remove tabs from UWL


By default we get below tabs in uwl.

  1. Alerts
  2. Tasks
  3. Notifications
  4. Tracking


If we need
to remove any tab, we can do it by following below given steps:



  1. Go to iview properties and check the
    property useNavigationId, as shown in fig below:




Note down the value ‘’com.sap.pct.erp.mss.Main”, this is nothing but an xml file.



2. Go to System Administration -> System Configuration -> Universal Worklist



Click on Click to Manage Item Types and View Definitions under Universal
Worklist Content Configuration

As shown below:




3.After that select the xml file, go to end of the page and download the file.3rd-step.JPG


4. Save it to your desktop and make a copy to preserve the original file.


5. Open the file with any XML editor or word pad and do the below changes,


      5.1To hide the Alert tab: change the visibility to no as shown below:5th1-step.JPG


    5.2  To Hide Notification Tab: Change the below given visibility to no.




   5.3  To hide Tracking Tab, change the visibility to no, as shown below:






6) Save the file after doing above changes. 


7) Go to the next tab in portal “Upload new configuration”.7th-step.jpg



Fill the Configuration name :  com.sap.pct.erp.mss.Main

Check the high priority.

Browse the file. And upload.




8) Next, message would be displayed that the file already exists. Choose yes to overwrite and save.


Now, check the uwl iview for the result.






if you are checking by any role. Then please ensure that the same iview is linked
to the role for which you checked the property in step 1.


Hope this document helps people.



Welcome to the September edition of the SAP Portal News Blog in 2013. We have news for you around the following areas:

  • SAP TechEd
  • Cloud Portal
  • Mobile Portal
  • Blogs from the Portal Community




We already informed you some time ago in our SAP TechEd blog on the set of educational sessions and hands-on exercises planned for SAP TechEd this year.


Meet now also some of our SAP TechEd speakers!


Tamas Szirtes who is working for Intenzz, one of our partner companies. He is speaker for the session POP114 Using a Mobile Portal to Monitor SAP HANA ASUG TechEd Session in Las Vegas. Read Tammy Powlas blog introducing Tamas and giving you more information on his session.


Aviad Rivlin "SAP Portal Product Manager" who is giving you a short preview of his planned activities at SAP TechEd this year: he is going to share with you all information on SAP NetWeaver Portal, mobile edition and on the integration between SAP Fiori and Mobile Portal.



Ifat Shwartz "HANA Cloud Portal Product Manager" who is giving you a preview on the latest innovations and capabilities of HANA Cloud Portal which she will present you this year at SAP TechEd in Amsterdam.



Yariv Zur who is a SAP Mentor and Director of Solution Management at SAP. His main focus is on SAP Portal, User Interface and User Productivity in the Enterprise world - Cloud based, On Premise and Mobile. In Yariv's sessions at SAP TechEd 2013 attendees can expect to experience Yariv's interpretation of SAP's UI strategy and gain guidance for their projects:




Reminder: SAP Portal Stars Challenge

We would like to launch another SAP Portal Stars challenge this year just prior to SAP TechEd 2013. This challenge provides you a platform to expose your innovative company to other portal customers and increase your brand visibility as a thought leader in this area. Contact us and share with us your Portal experiences. More information about the initiative and how to participate: see the blog SAP Portal Stars Strike Back by Aviad Rivlin.



SAP HANA Cloud Portal


Register for Partner Test, Palo Alto 19-21 November 2013

You are invited to get your hands on SAP HANA Cloud Portal during a free partner test event hosted in Palo Alto from November 19-21. During this event, you would have the chance to experience the technology of SAP HANA Cloud Portal, running on top of SAP HANA for in-memory computing. You would learn how to quickly and easily create engaging cloud-based business sites, and integrate with other SAP and non-SAP cloud solutions.


Some information on the tester profile:

  • Experience with Java development
  • Experience with developing web applications (HTML, JavaScript)
  • Cloud technology experience

In case you are working for a SAP partner company and you fullfill the tester profile, you can register here. Even though you cannot make it for the event, you can experience how to create cloud-based business sites by registering for a free and unlimited Cloud Portal trial with your SAP ID or SCN credentials.


HR Extensions with SuccessFactors and HANA Cloud Portal

This new screencast shows you how HANA Cloud Portal is integrated into SuccessFactors as an enabler for HR extensions:



Read also this blog by Filip Misovski to get more background information on this topic.


Out of the box sites for Cloud Portal

We launched two new beautiful websites available for free to all cloud portal users. These sample sites designed to give you a jump start on your first steps in setting up a site using SAP HANA Cloud Portal. Both sites were created based on the out-of-the-box content provided with Cloud Portal, therefore you can easily customize their content and branding for a wide range of scenarios.


Cloud Portal Hangout

Watch this new Google Hangout on HANA Cloud Portal with Sonali Mukherjee, SAP Technical Consultant at Ciber in the US. Sonali reports on her experiences with the product and the benefits she sees for partners and customers.



SAP Portal, Mobile Edition


SAP Fiori and Mobile Portal available as RPD Edition

SAP is now offering a new Rapid Deployment Solution (RDS) for SAP Fiori and the mobile portal. This new service will quickly and easily setup the mobile portal on your existing SAP NetWeaver Portal, and integrate the Fiori applications into it - proving you an extendable, role based, single point of access for your mobile apps and content. More information in this blog by Aviad Rivlin.


Creating Dynamic Actions for Your Mobile Framework Page Application

Read this blog by SAP Portal developer Yotam Kadishay, one of the client-side developers who implemented the new mobile framework page. Yotam describes how the SAP NetWeaver Portal mobile framework page gives you the ability to create dynamic actions for your applications, and add them to the framework action bar.



Blogs from the Portal Community on SCN


We recommend reading the following blogs on SCN:


Thanks to Murali, Fouad and Andy for their great contributions.

As you all know portal 7.3 has an ajax framework page which means that not the whole page is reloaded but only the contentarea div. So where do you have to place your google analytic code so that every time a user visits a page/iview the data is send to google?


That’s an easy question: you have to place it somewhere in the contentarea. So the easiest way is to create an iView with your google analytic code in it and to add that iview in every page. But what if you already have a lot of iViews or pages and you do not want to go to every page and add that iView? And in some cases you only have an iView so you have to add you existed iView in a new page and also add your google analytic iview to it => overkill.


Another solution is to download the contentarea war file from your server and change the code and then overwrite SAP code. But that solution I prefer not to use in this case.


So what I did was create an iView and add it to the Ajax framework page/ custom ajax framework page and thats it!
I listen to the event “navigate” and every time that happens the data is send to google. Which means this also works for Web Page Composer(WPC) pages.

First you need to create a portal application. After you deployed it to the server you create an iView of it and then add it to the framework page you use.


You can find the source code here. After unzippen it you have to import into youre NWDS(Import > General > File system).(Don't forget to change the google analytics id in the iview properties as explained below)


See below for the steps in detail:



- Create a Google Analytics account(https://www.google.com/analytics/web/provision?et=&authuser=#provision/SignUp/)

- Portal Server should be able to access(telnet) to www.google-analytics.com(check this with your basis team)


1) create a portal application



Click Next > Finish.


After the application project is created you have to create an portal application object.


Right click on the portal application project you just created. Follow the next steps:





After clicking Finish the portal object will be created and the googleanalytics.java file will be open in your NWDS.
The only code will put in the doContent method of the AbstractPortalComponent is:


package flexso.com;
import com.sapportals.portal.prt.component.*;
import com.sapportals.portal.prt.resource.IResource;
public class googleanalytics extends AbstractPortalComponent
    public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)
              response.include(request, request.getResource(IResource.JSP,


(Don't forget to add the import statement "import com.sapportals.portal.prt.resource.IResource;")

The above code will load the jsp file that we still need to create.(see next step)


Next step is to create the JSP file where the google analytic code will be placed.

So first drilldown to the folder jsp under dist > PORTAL-INF > jsp and right click.





Attention: the name that you use here has to be the same as the one you used in the doContent method in the java file.

Click Finish to proceed.


<%@ page language="java" contentType="text/html; charset=UTF-8"
<%@ page import = "com.sapportals.portal.prt.component.IPortalComponentRequest" %>
<%@ page import = "com.sapportals.portal.prt.component.IPortalComponentResponse" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- begin part 1 -->
          String googleID = componentRequest.getComponentContext().getProfile().getProperty("googleanalytics.id");
<!-- end part 1 -->
// begin part 4
function callbackGetNodeInfo(currentNode){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    ga('create', '<%=googleID%>', 'flexso.com');
                    ga('set', 'title', currentNode.getTitle());
                    ga('set', 'location', currentNode.getNodeURI());
                    var loggindUser = LSAPI.AFPPlugin.configuration.getUser().FirstName + 
                                                                      ", "          +
                                                                      LSAPI.AFPPlugin.configuration.getUser().LastName +
                                                                      " ("+
                                                                      LSAPI.AFPPlugin.configuration.getUser().LogonUid +
                    ga('set', 'dimension1', loggindUser);
                    ga('send', 'pageview',{
                                'dimension1': loggindUser
// end part 4
// begin part 3
function navigationEventHandler(eventObj) {
   //eventObj.dataObject.target.split("?")[0] this will split the target at "?" and [0] will return the first part of target value which is the navurl
  if(typeof eventObj.dataObject.target === "string"){ 
// end part 3
// begin part 2 
EPCM.subscribeEvent("urn:com.sapportals:navigation", "Navigate", navigationEventHandler);//when you are navigate in the portal
EPCM.subscribeEvent("urn:com.sapportals.portal:browser","load", navigationEventHandler);//when you load the page
// end part 2



The JSP is divided in 4 parts:


Part 1: Is some java code to get the value of our google analytics id.(Which is provided by Google) This property will be maintenable through the iview property of the application. Which makes it easy when you transport the iview to acceptance or production you then only need to change the value of the property.


Part 2: Is the subscribeEvent method. With that piece of code you will run your EventHandler method every time the navigation event is triggered.


Part 3: Is the actual method that will be executed. In that method I use the getNode method of the LSAPI object. For more information about the LSAPI navigation method see the url: http://help.sap.com/saphelp_nw73/helpdata/en/c8/5eacdc37434cfb8ec5e5288b884100/frameset.htm


Part 4: Is the code that you get from google analytics. You only need to change the actual id with <%=googleID%> so it gets the value stored in the iview property. In this part I also added some additional information like user name , firstname and loginid which can be viewed in a custom report.(For more information check google analytics documentation) Attention: do not forget to change 'flexso.com'. You can find the value that you have to put there in your google analytic piece of code that is generated by google.


The last part of the portal object is to add the property googleanalytics in the portalapp.xml.

Replace the part <component-profile/> with:


        <property name="googleanalytics.id" value="UA-XXXXX-Y">
          <property name="category" value="Google Analytics"/>


Now the application is done and you need to deploy it to the server.

Once it deployed on the server the last step is to create an iview of it and add it to the ajax framework page you use.


Steps to follow:


Go to Content Administration > Portal Content Management > Portal Application.


Create an iview from the application by copying it to a folder in the Portal Content.





After you created the iview you must change the property "googleanalyticsid" in the property of the iview.



Click on the button "Modify Properties" and change the value with the id from google.

Do not forget to change the property "authentication scheme" to anonymous if you also want to track anonymous user on your portal.


Now you still need to add this iview to your framework page. If you use the SAP standard ajax framework page it is best to copy that page and change that one.

If you have a custom framework page just add this iview to it. If you don't have a container for "technical/hidden iviews" make sur the iview has no tray or something visible. (Maybe you can set the height to 1px).


In this example I will add the iview to standard framework.

You can find the standard SAP Ajax Framework page under: Portal Content > Portal Users > Standard Portal Users > Ajax Framework Content.



Open the page and select youre google analytic iview and right click on it and select Add iview to page > Delta link.




The last step is to change the container where the iview will be placed.




Now save your changes and go to your google account do some tests.


PS: this is my first blog.


SAP NetWeaver Portal has a component called “Activity Data Collector (ADC)” which traces user and content activity, monitors portal requests and maintains details of each request, such as the logged-on user, processing time and the iView requested and creates a record in a file. More details on activating ADC by Aviad in his blog - SAP NetWeaver Portal 7.3 – Activity Data Collector Enhancements.   SAP NetWeaver Portal does not provide an out-of-the-box capability for reporting on the information collected by the ADC. Hence, it’s left to the customer to analyze the raw information from these files and develop a reporting mechanism.


I recently came across Lumira – a data visualization tool (formerly known as Visual Intelligence) and found it very easy to use. Few months back, SAP made it available on the HANA Cloud and hence there is no need to install a software on your PC. You can create reports from the browser and share it with other users. Since its HTML5 based, users can view it on any device.  I wanted to showcase how you could use this tool to display Portal Activity reports in a more visual manner.


Step 1: Setup ADC and generate a file. The file which I am using is below



Step 2: Login into Lumira Cloud to create a Dataset


Once you upload the file, it will automatically detect the measures and attributes. I have change the measure to aggregate based on Count.


Step 3: Build your report


In the design area, select the type of chart from the visualization tab and select your X/Y axis fields


Save the report. It is now ready to be accessed and shared across.


This is how the report would show up when accessing from Home page. This report shows the top iView being used on the SAP Portal



You can also share the report to other users who can view it with their Lumira Cloud login.



Below is snap shot of the email which is being generated.


You could go and create N number of reports in a very simple fashion. I have just created few reports to give an idea.




The below report shows Top active users on the SAP Portal. I have further filtered it to find top users accessing “Change Orders and Operations” iView using IE Browser.



A simple pie chart to show the user types - Authenticated vs Anonymous access to SAP Portal


Hope you found this informative.

Often I get complaints if the SAP Portal is still running. The portal seems to be slow, pages are empty. I know what is going on, I am developing the custom framework, fixing some bugs or adding new functionality. Deploying the portal application takes some time and you will notice it.



Now most of the intelligence in the custom framework (Ajax) is client side. This means that you can call javascript functions that retrieve information from the backend (LSAPI). Previously I had to change the code in NWDS, deploy it and wait for some seconds to see the result. My collegues yelled at me again: "Noël are you deploying?". With a big smile I did not say anything.



Well... my collegues love me once more. How? I am using Fiddler (and other HTTP watchers) and discovered there's a neat functionality in it. It's called "Autoresponder". http://www.youtube.com/watch?v=h3DWqYXKarA



Ok, here's the deal. Step by step this time to set everything up.



Step 1:

Get the files you will change a lot. In my case they are located in my portal application.

Screenshot - 20-8-2013 , 12_57_08.png


Step 2:

Copy and paste the files into a folder (e.g. d:\noel\fiddler)

Screenshot - 20-8-2013 , 12_58_35.png


Step 3:

Setup fiddler with autoresponder settings:


Screenshot - 20-8-2013 , 13_00_59.png


Go to Autoresponder > Add rule. Now you need to know the location of your css and js files while viewing as an end user:

Screenshot - 20-8-2013 , 13_03_45.png


Copy and paste the url of the css file into the rule definition


Screenshot - 20-8-2013 , 13_07_21.png

When Fiddler sees this file, it will be 'replaced' by the one you defined.



Step 4: Enable it


Screenshot - 20-8-2013 , 13_10_54.png



Step 5:

Change your local files as often as you like. No one will notice it!!!



Step 6:

Don't forget to save your changes back to the origional source (portal project) when you are finished.



Happy developing!




Noël Hendrikx - SAP Portal consultant @ Peppie Portals.

Specialized in Corporate branding SAP Portal / Adobe Interactive Forms.


UI Theming blog series

Portal theming - also waited a couple of years?

How to... UI Theme Designer - Installation

How to... UI Theme Designer - Migration

How to... UI Theme Designer - Locating elements

How to... UI Theme Designer - Transportation



Other blogs:

Tired of zipping / unzipping portal theme?

Tips for the Portal Content Studio

DSM Terminator and popup blockers (or not)

My best development friend - Autoresponder FTW


The SAP NetWeaver Portal, mobile edition is a multichannel role based single point of access to application (SAP and non-SAP, web and native) and content (documents, RSS feeds, and media) accessible to users anytime on multiple devices (desktop, smartphone and tablet).


SAP Fiori is an example of content that can be integrated into the portal seamlessly. It is a collection of applications providing a consistent and enhanced user experience of the most broadly and frequently used SAP software functions that can be accessed from mobile and desktop devices.



To accelerate the implementation of this joint scenario, SAP is now offering a new Rapid Deployment Solution (RDS) for SAP Fiori and the mobile portal. This new service will quickly and easily setup the mobile portal on your existing SAP NetWeaver Portal, and integrate the Fiori applications into it - proving you an extendable, role based, single point of access for your mobile apps and content.


Additional info:


For any question, feel free to comment below.




The Mobile Framework Page (MFP) was developed for "tablet" and "smartphone" devices.

To make using the mobile portal easier for first-time users, we developed a "Quick Guide" that provides a brief explanation about the main UI elements of the MFP.

The "quick guide" openes each time an end user enters the portal via the MFP. To stop displaying the guide, the user can select the "Do not show this again" check box.


By tapping the black arrows, or swiping the screen, users can page through the "quick guide" to learn about the different UI elements. The relevant UI element is highlighted, and a short description about the element is presented.


We also added an entry to the toolbox for opening the "quick guide" manually. This item is part of the "eu_mobile_role".

when opens the "quick guide" from the toolbox,  it openes in a separate tab, the toolbox entry is also available for users who selected the "Do not show this again" check box.



Enabling the Quick Guide for a Specific User


The information about whether to expose the tutorial per user is maintained in the UCD.

If a user selected the "Do not show this again" checkbox and would like to see the tutorial again when opening the MFP, the administrator can expose it again by doing the following:

1. Access the UCD Cleanup Tool using the following URL: http://<server>:<port>/irj/servlet/prt/portal/prteventname/HtmlbEvent/prtroot/com.sap.portal.pcd.admintools.ucdadmin.default

2. Enter a principal name (the user ID) and choose Show. -> A table of UCD users is displayed.

3. Select the user for which you want to enable the "quick guide" and check the "MFP_TUTORIAL" entry -> "Remove" -> "Close"



Disabling the Entire Feature


The "quick guide" is an iView that is part of both Tablet and Smartphone framework pages. If administrators choos not to show the quick guide, they need to do the following:

1. Set the iView "Quick Guide" to "not visible" in the Tablet Framework Page.


2 .Set the iView "Quick Guide" to "not visible" in the Smartphone Framework Page.


3. Set both the Tablet and Smartphone "Quick Guide" iViews to invisible in the "eu_mobile_role".



* If the administrator removes the iViews from the framework pages, and leaves it on the role, tapping the Quick Guide from the toolbox will open a new tab with the framework page without the Quick Guide.


Technical Information




The quick guide is based on a JSON that represents the UI elements to display. Each element in the JSON is represented as a page in the guide.

The JSON is maintained as a property on the "Quick Guide" iVIew. In order to view the JSON, open the iView from within one of the framework pages and look for the property "TabletJsonConfiguration" or "SmartPhoneJsonConfiguration" per requested JSON.

The JSON can be changed according to the administrators decision.

The structure:


All text is taken from a resource bundle (for translations), so text can be changed by changing the properties file of the iView on the server itself.


The attributes:


title                       - the title of the UI element that is displayed, taken from a resource bundle (e.g. the text "Launcher" in the second screenshot)


arrowposition      - as you can see, there is an arrow pointing to the UI element on the screen, the arrow appears as part of the page and could 

                                point to a general position on the screen. The values it gets are 0-12. 0 means no arrow and 1-12 draw an arrow according to a position

                                on a clock face (e.g. 11 is the second screenshot)


text                       - represents the main text of the guide, taken from a resource bundle (e.g. the text "Open applications and ..." in the second screenshot)


headertext           - relevant for the first and last page, taken from a resource bundle (e.g. the text "Welcome to SAP NetWeaver Portal..." in the first screenshot)


helptext                - relevant for the first and last page, taken from a resource bundle (e.g. the text "You can open the Quick..." in the first screenshot)


helpiconcssclas - relevant for the first and last page, represents the image to take from the sprite (e.g. the "light bulb" in the first screenshot)


cssclass              - represents the image to take from the sprite (e.g. the "Launcher icon" in the second screenshot)


idofuielement      - the ID of the UI element that we want to highlight on the framework


func                     - calls a function on the client side, enables to perform necessary actions on the framework (e.g. opening the toolbox to display "search")





All the images are maintained in a sprite file that is maintained in the Web Resource Repository (WRR) and could be replaced by the administrator.

The css and less files are also placed in the WRR and can be replaced as well.

The entry to look for in the WRR is pcd:resource_repository/application_branding/~com.sap.portal.navigation.mobile.apps.tutorial


The properties files are part of the iView. There is a file per language. The administrator can change the text in the properties files as well.

Of course all changes done there will be overwritten in the next upgrade.


Landscape / Portrait


All position calculations are made according to percentages, that way, the guide changes according to the state of the device.

Welcome to this edition of the SAP Portal News Blog. SAP TechEd season is approaching and already in this edition SAP TechEd is playing an important role. On top of this we will inform you about news on:

  • Cloud Portal
  • Mobile Portal
  • Portal Upgrade
  • Blogs from the Portal Community


SAP TechEd 2013


SAP Portal Sessions and Lectures

The SAP Portal team is ready for another exciting SAP TechEd season. We are looking forward to meet our customers and partners in Las Vegas, Amsterdam or Bangalore. We will offer a full set of educational sessions and hands-on exercises focusing on the SAP Portal portfolio:

  • SAP Portal Portfolio - Overview & Roadmap for Portal on Premise, SAP HANA Cloud Portal, Mobile Portal, and HANA UI Integration Services
  • SAP NetWeaver Portal 7.4 - What's new and recommendations for upgrade
  • SAP NetWeaver Portal, Mobile Edition
  • SAP HANA Cloud Portal
  • Next generation content management in SAP NetWeaver Portal

You can find more information in this blog SAP Portal Team at SAP TechEd 2013: Some First Information.


Watch this movie and meet Amir Blich "Head of SAP Portal Go-to-Market team" who is giving you a short preview of SAP Portal's planned activities at SAP TechEd:




SAP Portal Star Challenge for SAP TechEd
Following our last year's very successful SAP Portal Star challenge, we would like to launch another challenge this year just prior to SAP TechEd 2013. We would like to invite you to share your SAP Portal experience and success in a recorded “blog”. How to do that? After accepting our invitation to join the 2013 #sapportalstars challenge, we will "hang-out" together about your topic by using the Google hangouts to share information, discussions and knowledge.

Just prior to SAP TechEd, we will produce a nice summary video of all of the participants talking about their product experiences. Everyone who is running a SAP Portal can participate - customers, partners, SAP Employees. Your participation should be completed by September 13th.

More information about the initiative and how to participate: see the blog SAP Portal Stars Strike Back by Aviad Rivlin and Launching Portal Hangouts by Amir Blich


We can already share with you our first SAP Portal Star hang-out for 2013 with Simon Kemp from PLAUT IT, Australia who - on top of his regular job - is a SAP mentor and very active in the SCN Portal community:




Vote in SAP Portal Poll

Imagine you would attend SAP TechEd 2013 - maybe you also plan to go there. Which Portal sessions and lectures would you plan to attend and what kind of topic would most attract your attention? Vote in this poll and give us your opinion.



Mobile Portal



In case you are working for a SAP partner company, you can register for the following partner webinar: Increase Users’ Productivity on-the-go with SAP NetWeaver Portal, mobile edition on August 27, 2013. You can register for this event here.



SAP HANA Cloud Portal



Some weeks ago we launched the new HR site named SAPlus that was implemented using SAP HANA Cloud Portal. SAPlus is a site of leisure and benefits for SAP employees and their families in Israel. It represents a great collaboration between HR and the Cloud Portal development team that jointly designed and created a website with an engaging user experience, providing unique editing capabilities for online content updates and archiving. With this solution in place, SAP employees in Israel will be able to register to local events, join sport activities, contribute to the community and more. More information in this blog by Ifat Shwartz.

SAP HANA Cloud Challenge 2013

The SAP HANA Cloud Portal team is excited to launch a new challenge for 2013. We invite you to take part in our latest contest: Design and build your unique custom-branded site using a great variety of tools and open standards.

During October 2013 we will announce the top sites coming out of this contest. The winners will be showcased at the SAP TechEd EMEA conference this year. SAP TechEd attendees will be invited to join the Cloud Portal team and have their sites presented at a Customer Showcase session. More information: see in this blog.


How to Connect HANA Cloud Portal to a Backend System

Read this blog written by Cloud Portal developer Tomer Gabbai on one of the most powerful capabilities of this product: easy integration with SAP back-end systems. In his blog Tomer explains how to create a connection between Cloud Portal and SAP CRM back-end system

SAP HANA Cloud Portal Partner Test: Recap
During June 11-13 we conducted a partner test workshop in Walldorf with a big group of 28 partners from various companies and countries representing different business areas. The partners tested our new cloud solution SAP HANA Cloud Portal and gave us their detailed feedback. Several of the partners already had EP experience and were looking for the opportunity to expand their practice knowledge and expertise to the cloud. The partners went through various hands-on sessions and free-style development sessions. All the sessions were conducted using the HANA Cloud Portal free trial. The 3 days concluded with a successful feedback session presented by the partners to the Cloud Portal management team. In the blog by Ifat Shwartz you find a detailed summary of the workshop. You can also read in another blog how Ted Castelijns (one of the partners) experienced the workshop.




Based on customer experience and our own SAP Portal experts, we have collected an exhaustive set of resources, guidelines, important information and known issues that can be helpful before, during and after an upgrade to SAP NetWeaver Portal 7.3. Read this SCN document to get a better idea about the upgrade process.

In addition we recommend reading one of our most popular SCN blogs written by SAP Portal Product Manager Thomas Hensel, who describes in detail how to start a Portal project based on SAP NetWeaver 7.3.



Blogs from the Portal Community


We recommend reading the following helpful and valuable blogs from the SAP Portal and HANA Cloud Portal Community on SCN:



Thanks for your great contributions!


Filter Blog

By author:
By date:
By tag: