1 5 6 7 8 9 27 Previous Next

SAP Enterprise Portal

405 Posts

Part 2 of more to come :-)


One of the features that is missing right now is a functionality to select the proper class. In Chrome or IE you can use the Developer Toolbar to inspect an element. In the UI Theme Designer this functionality is not present (yet?).


This blog will explain how to select the correct elements. First find out which CSS class you would like to change by selecting the Developer Toolbar (F12) in Chrome or IE. In my case I have selected the title (urPgHTTxtSmall).




If you search in the UI Theme Designer you will not find anything. Open Notepad++ (or any text editor that can search in files as well) and press CTRL+F, select Find in Files and search for urPgHTTxtSmall. Select as source two directories (download the applications from the server):

- com.sap.portal.design.portaldesigndataless

- com.sap.portal.design.urdesigndataless


I have placed the two applications in directory c:\nwds\sap less (see below):




There are 62 hits:







IE6 is for IE, NN7 for chrome and so on. But the most important thing is that we can look at the definition:


.urPgHTTxtSmall {

  width: @sapUrPgHTTxtWdth;

  color: @sapUrPgHTTxtColor;

  font-size: @sapUrPgHTTxtFSSmall;





@sapURPgHTtxtWdth is a LESS variable. In the UI Theme Designer go to your theme and select Expert mode. Search for sapURPgHTtxtWdth and there is the element!




Please note this is undocumented! Use it at your own risk!!!


Happy branding!




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 Universal Work list (UWL) provides Portal users unified and centralized way to (single point of) access their work and the relevant information in the SAP Enterprise Portal. It collects tasks and notifications from multiple provider (ECC, SRM, CRM etc...) systems in one list for single access. We can call it as portal inbox for all work items. Configuration of UWL in portal is easy task but issues encounter during implementation and support phase is tough always. I always had good experience in each project and issues are unique in nature. I would like to share my recent experience to my peer group in SAP Community so that it would be helpful for their next implementations. This blog is not a guide on UWL configuration but it contains the knowledge I gained while trouble shooting the issue.


I know lot of information available on SCN portal forums and SAP help for UWL configuration .However issue resolution approach and similar issue I did not find any where in SAP community web sites. So I cannot stop myself to write this blog and hope it will be helpful to my fellow consultants.


EHSM team reported one issue, when user click on work item in portal UWL he / she should get text box to write comment in it before taking any action. It is working fine in Portal box and Portal DEV but not in Portal QAS, PRD


1)     User not getting “User decision text box in Portal UWL.



2)   When User selects work item in UWL then he is expecting   “User decision text box” before taking any action. Following screen shot  captured from development portal


3)     To analyze issue I asked my workflow consultant to verify SWFVISU transaction in ECC system .There you can find list of task and it holds key information in task visualization. For example Task Number, visualization type, application, dynamic parameters, namespace, system alias etc…Every time any change in backend it should reflect in portal UWL. My workflow consultant verified and confirmed that it was same as ECC Dev which is working fine in portal Dev.


4)     Then I started my analysis in portal side, First verified system object and alias then reregistered system object. Downloaded xml file from “Click to Manage Item Types and View Definitions”


5)     Verified my xml code with my task number and manually added user decision code in xml file 


<Property name="UserDecisionNote" Value="mandatory"/>

<Property name="decisionKey" value="1"/>




6)     After uploading xml file into portal still issue is not resolved.



7)     I checked portal server version in both development and quality then realized that there is version mismatch between dev and quality server. Referred note “1564566 - User decision note not visible”. Note says “If the value of the decisionKey property in the Actions section in UWL configuration XML starts with leading zeroes then the UserDecisionNote property in the XML configuration is disregarded”.Note also says portal upgrade is required from SP6 to SP9



8)     While updating patch on portal server we caught with error and not allowed to proceed further. The UWLJWF component will fail on upgrade when this table contains data. You remove the data before upgrading from Table KMC_WF_SUBSTITUTE. Also take back up and deleted existing data. After the upgrade is finished, re-import the data into the respective tables from backup table which you have taken earlier.


9)     After successful UWL patching our issues is resolved.


10)   The conclusion is, we need to check the version difference across the systems. If there is any difference in support pack then we need to bring it to same level. However the above said issue resolved by upgrading UWL patch alone.

How to  Deploy  a SAP UI5 Application Project using Netweaver Developer Studio on SAP AS Java

As an initial step to proceed with deployment, create a Enterprise Application Project.

      Goto File-> New -> Enterprise Application Project



Provide a name to this EAR project.e.g SalesOrder

Select UI5 application project to be deployed from the list below. Click Finish.

Verify the EAR project created in this project Explorer View.

Now, Right click on UI5 Applictaion Project name in the Package Explorer view and click Export.

Locate for Java EE - > EAR File option.Click Next

Select 'Overwrite existing file'check box just in case you want to use same EAR project name for multiple times you do this export

Now locate the EAR in Destinationfolder in your respective file system.

In case Destinationfolder provided by you is same every time then make sure it is updated/ overwritten with latest EAR created based on timestamp

Go back to Netweaver Developer Studio and open the Deployment Perspective.

In the Deployment List section, click on Import

Now in Deployment List section, the EAR file will be populated

click Start.

Confirmation dialog will be displayed as shown. Click OK

Finally , deploy success dialog will be shown

Now, you can run UI5 Application Project developed using URL format shown below:       http://<Server_Host_Name>:50000/<UI5_Application_Project_Name>/<filename>.html


Changes Have to Do -

  1. 1. In Index.html


changes to


  1. 2. In salesorderController.js
  • oTable.bindRows("SalesOrders");

changes to


Issuses  -

For Localhost (Tomacat Server) :

In the connectivity.js file

var serviceUrl = "https://sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/";

changed to

var serviceUrl = "proxy/https/sapes1.sapdevcenter.com/sap/opu/odata/sap/ZCD204_EPM_DEMO_SRV/";

This is because of Same-Origin Policy .

For Portal :

There is no need to change the service URL in connectivity.js file (Cross Origin Policy)

As you probably know, attendees of TechEd 2013 will also have access to the Virtual Teched program which will be available for almost 11 weeks starting January 14th. To take part, just access the Virtual TechEd website https://saptechedhandson.sap.com/ to reserve your own system for completing the exercise of a hands-on session that you missed at TechEd or that you would like to take more time to experience. Andreas Wiedemann posted a nice detailed Virtual TechEd User Guide with everything you need to know about accessing your Virtual TechEd system.


From our Portal hands-on sessions, we made session POP263 Experience SAP NetWeaver Portal 7.4 in Action available on Virtual TechEd for you. I described this session in some more detail already in another blog that I published before the beginning of TechEd Bangalore. The exercise of this session shows various aspects of the portal (like end user experience, Mobile Portal configuration, general administration, or Portal Site Management) in different sections and while we asked users in the regular TechEd sessions to select those parts they were most interested in, you will probably have more time for exploring everything at Virtual TechEd.


Besides POP263, there is also another virtual hands-on session available that focuses a topic related to the portal: CD167 New User Interface Theme Designer. This session offers lots of information for those who are interested in customizing the look and feel of their portal installation. It introduces the new UI theme designer which allows theming and branding of SAP's key user interfaces with just one tool supporting various platforms and UI technologies including SAP NetWeaver Portal and includes different exercises from easy basic theme settings via quick theming to SAP UI5 theming and using custom themes, e.g. in your Portal desktop.


Hope you have some interesting Virtual Hands-On sessions and happy new year to everyone,


SAP NetWeaver Portal enables the creation of iViews based on remotely located systems. In case of connection failure, an exception will be raised. This blog was written in order to assist with troubleshooting the root cause of the connection failure.

In addition the following documentation page provides full description about this feature:


and recently new traces have been added (see note number 1940155).



While creating new content using the "content admin" role, you can choose to create "iView From Remote Source"


There are 4 different types of iViews from remote source available:

  1. SAP Portal Component iView - iView is based on a remote portal component
  2. Transaction - iView is based on a transaction from SAP back end system
  3. Web Dynpro ABAP - iView is based on content from SAP Web Dynpro ABAP from remote system
  4. Web Dynpro Java - iView is based on content from SAP Web Dynpro JAVA from remote system


The values filled in the wizard fields must be valid according to the type of remote iView being generated.



Before using the iView from remote source feature the following Prerequisite must be filled:

  • The relevant system must be defined under portal system landscape. Click here for more information about 'system landscapes'.
  • Make sure to create alias to the relevant system. Click here for more information about 'Managing System Aliases'.
  • Use the test connection feature while creating the system: Check the "Run connection test after clicking next". (make sure you type valid user and password)


The connection test should pass successfully





As previously mentioned, it is highly important to fill the values in the iView generation wizard according to the type of remote iView chosen.

The table below provides information about the relevant fields and values that should be used for each iView type


Web Dynpro Java

Web Dynpro ABAP


SAP Portal Component iView

Filling the wizard fields


select the alias of the SAP system from which you want to take the iView

select the alias of the SAP portal system from which you want to take the iView

'Search In' Field


type a string for filtering the transactions you are interest in, you can type '*' for no filter at all

type a string for filtering the available iViews, you can type '*' for no filter at all

'Search For' field

choose "Web Dynpro Java"

choose "Web Dynpro ABAP"

choose "Transaction"

choose "SAP Portal Component iView"

'Application Type' field



[optional] you can limit your search to a specific role

'Search in Role'

choose According to the described in this link



'Implementation' field

Web Dynpro JavaWeb Dynpro ABAPTransactionSAP Portal Component





In case of connection failure the following message will appear in the portal: "Connection to SAP component system failed; check the system settings"

The table below provides tips for troubleshooting according to the relevant iView type:


Web Dynpro Java

Web Dynpro ABAP


SAP Portal Component iView


Recheck the values you entered into the wizard fields, make sure they are valid


  1. Go to 'System Administration à System Landscape', Click on the system you are trying to connect to, and click on test connection button, if the test connection fails check the system configuration


Make sure the user you are connected with has access to the remote portal you are trying to connect







Make sure the user you are connected with has access to the remote portal you are trying to connect





Verify that "user mapping for system access" is defined for your user (under identity management – see

Appendix Screenshot





Check the recent trace file for more information





The screenshots below shows the process for the different iView types:


1. SAP Portal Component iView



The result should be a list of all the available iViews:


In case the operation fails, the following message appears on the screen:



2. Transaction


The result should be a list of all the relevant transactions:


In case the operation fails, the following message appears on the screen:



3. Web Dynpro ABAP



The result should be a list of all the relevant content:



In case the operation fails, the following message appears on the screen:





4. Web Dynpro Java


The result should be a list of all the relevant content:


In case the operation fails, the following message appears on the screen:






5. Appendix Screenshot

    How to verify that "user mapping for system access" is defined for your user?

    Check under: User Administration -> identity management -> User mapping for system access:


Dear portal fans,


As we approach the end of 2013 and get ready for some much needed rest, I would like to thank you all on behalf of the entire SAP portal team. The level of engagement here as well as in the HANA Cloud Portal space have reached new heights this year and your participation, engagement and contributions are much appreciated.

Our final news blog for 2013 was just released by Vera Gutbrod our chief editor. Be sure to continue and follow these news blogs in 2014.

Our 2013 blog of the year contest is ending soon but you still have a chance to cast your vote and influence.

Happy holidays!



Introduction :


Piwik is an open analytics platform currently used by individuals, companies and governments all over the world.Piwik is a downloadable, Free (GPL licensed) web analytics software platform. It provides detailed reports on your website and its visitors, including the search engines and keywords they used, the language they speak, which pages they like, the files they download and so much more.


In today’s analytics world, SAP Enterprise portal website can use analytic tool like PIWIK to track site usage.

Many times, we need to have information on atleast one of the following for our SAP EP Website:

•         Measure site activity

•         Analyze User behavior

•         Visitors' tracking.

•         Analysis of the contents visited (pages, files).

•         Information of the visitors (Browsers, Operating System).



PIWIK provides us with the tag to be used for hitting their server. This tag needs to be on all the pages , we need to track in SAP Portal. Since SAP Portal has many pages/iViews, the script needs to be added to a common place.


In SAP Portal versions 7.0 , we can add the code to Desktop innerpage . If you want to use analytics tool in this version refer my Document : http://scn.sap.com/docs/DOC-39121


However in SAP Portal 7.3 and above, the default framework page is Ajax framework page and there is no concept of Desktop innerpage for it.Hence we need to change the com.sap.portal.navigation.contentarea.war file and add the piwik code in this war file.


Implementation Steps :


1)       We need to get the PIWIK tag for each Portal URL. This will be provided by PIWIK team.

<!-- Piwik -->

<script type="text/javascript">

var pkBaseURL = "<PIWIK server URL>”;

document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));

</script><script type="text/javascript">

try {

var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 764);

var csusername = 'anonymous';

piwikTracker.setCustomData({'csusername': csusername});



} catch( err ) {}

</script> <!-- End Piwik Tracking Code -->


2)       Download the com.sap.portal.navigation.contentarea.war from your portal and create a custom project on NWDS. It will also create ear file in NWDS.

3)       Rename the project as contentarea.war

4)       In this war file there will be a jar  file “com.sap.portal.navigation.contentarea_core.jar At this path ” contentarea\WebContent\WEB-INF\private\lib

5)       Unjar this file from command prompt ( Start-Run-CMD) . Go toi the directory where this jar file exists and give command jar –xvf com.sap.portal.navigation.contentarea_core.jar

6)       Two folders will be created COM and meta-inf . we need to change the code in this class file :



7)       Download the JDdecompiler from internet site to get the source code for this class file.

8)       Once you get java file: add the PIWIK code to this file and recompile the file.

9)       Now replace the new class file in folder \WebContent\WEB-INF\private\lib\com\sapportals\portal\navigation

10)   Create a zip file in path \WebContent\WEB-INF\private\lib\. This zip file should have com and Meta-inf folder . Rename this zip file to com.sap.portal.navigation.contentarea_core.jar 

11)   Deploy the war file and ear file on server.

12)   Now create a contentArea iView from the contentarea.war default component.

13)   Go to content admin -> your framework page and open properties. Modify the property URL for contentarea to point to your new Contentarea iView. And save the page

14)   Now when you navigate on any portal page, the hits will be captured by PIWIK code.


PIWIK Output

     Once PIWIK is configured to run on SAP Enterprise portal, all the user hits will be captured by PIWIK server. Below are some of the graphs we can get :






Conclusion :


Thus we can configure our Portal to track Portal hits and get the usage statistics .

Welcome to the last edition of the SAP Portal News Blog for this year. This news blog is packed with the December news, announcements and information about our portfolio:


  • Events (SAP TechEd and ASUG 2014)
  • HANA Cloud Portal
  • SAP Portal Top Blog of the Year 2013 Campaign
  • Feedback to SAP Notes
  • Blogs of the Community - Our Recommendations
  • Latest freakin amazing customer testimonial
  • ......what remains to say: Happy Holidays




ASUG Annual Conference - Call for Presentations is Now Open

ASUG has just announced the call for presentations for the upcoming ASUG Annual Conference 2014. This year, we have aligned the portal sub-topics areas to reflect the feedback we got from our customers in previous events and based on the latest SAP UI strategy. We would like to invite you all to submit your abstracts and share your experience with other customers about on-premise and cloud, desktop and mobile, intranet and extranet, best practices for implementation, and any other experience you can share with your fellow event participants. More informaton in this blog by Aviad Rivlin.



We sent 3 of our top experts (Itay Sagiv, Yariv Zur and Ohad Levy) to SAP TechEd Bangalore, and there were also four SAP Portal expert colleagues from SAP India added to the team. They spent 3 busy and effective days fully packed with lectures, hands-on sessions, theatre/lounge Q&A sessions and LIVE TV interviews. Watch this recorded live session with Ohad and Itay (Chandramohan Sankaran as the moderator) talking this year on "SAP Screen Personas and the Overall User Experience Go-to-Market Strategy":



Did you miss SAP TechEd this year? Have a look at the recordings of some of our session recordings from SAP TechEd Las Vegas and Amsterdam:
POP106 SAP HANA Cloud Portal Overview

POP205 SAP NetWeaver Portal 7.4 – What’s New  and Recommendations for Upgrade
POP206 SAP NetWeaver Portal Mobile Edition – Overview
POP207 SAP HANA Cloud Portal Deep Dive

POP208 Next Generation Content Management in SAP NetWeaver Portal



HANA Cloud Portal


SuccessFactors is Live With The New Self-Service Support Site powered by SAP HANA Cloud Portal
The new "support site option" capability for Cloud for Service offers an additional interaction channel which gives customers cost-effective, 24/7 self-services and a flexible extension platform for their solution. Via the support site customers can view and create tickets, access a knowledge base, and interact with service agents all via a company-branded website. SuccessFactors is now offering support for its 4,000+ customers via this solution. Read all about it in the blog by Thomas Hensel.


Cloud for Servie - Support Portal 2.png


New Learning Center

There is a new learning center for HANA Cloud Portal. Have a look here.  The learning center provides comprehensive learning materials to all Cloud Portal potential users (developers, partners, customers etc.) who want to learn about our product.


#SAPPortalTopBlog of the Year 2013


The "SAP Portal Top Blog" campaign is at the moment running on Facebook and on our Twitter handle @Portal_SAP: from December 1 - December 24 we are announcing 24 of the best performing SAP Portal and HANA Cloud Portal blogs on SCN in 2013. Maybe your blog was also chosen to be part of the campaign!
You can participate in the campaign by voting for your top blog in 2013. We will have 3 polls to identify the 3 finalists for the final voting. We have already identified the first finalist among blogs 1-8 which is How to Connect HANA Cloud Portal to a Backend System.
You can just now decide on the second finalist between blogs 9-16 by voting in this poll, which will be closed on December 26. The third poll will be activated on December 26 and the final voting (betweet the 3 finalists) will be done beginning of January.


We would also like to thank all SAP Portal and HANA Cloud Portal SCN community members for your valuable contributions this year in blogs, discussions and comments and by liking and rating the content of other members.


Give Your Feedback to SAP Portal Notes


Until now there was no organized way for providing feedback or remarks on SAP Portal customer notes. From now on you can help us to improve our notes by opening a thread in the SAP Portal space discussion forum. We have created for that purpose a special forum category. Read this new blog by Tal Haviv to get familiar with the process of giving feedback.


Blogs From the SCN Community


We recommend reading the following blogs:


SAP Portal 7.4 available on HANA Enterprise Cloud by Dick Hirsch


Use PIE in SAP Portal Logon Page for rendering CSS3 properties in older browsers by Ameya Pimpalgaonkar


Modeling a winning Git and Tests Automation Duet by Nir Koren



Latest Freakin Amazing Customer Testimonial


Watch our new customer testimonial and see how an intern can easily create an event site with HANA Cloud Portal :-)



...What Remains to Say: Happy Holidays for You and Your Families and Friends


I have given new SAP Portal system on NW 7.3 and back end SAP ECC 6.0 ehp 5 for configuration of ESS and MSS as part of HR Renewal 1.0 Feature pack 04 as POC project.In SCN I did not find any step by step procedure document hence this blog could be helpful for new bees

Initially I have started configuration of SSO between NW portal 7.3 and ECC 6 Ehp 5. Later I found ESS and MSS business packages are already installed by basis guy in portal system. But it was not working as expected then I started exploring various options to achieve this.


To maintain JCO parameters I did not find webdynpro path in 7.3 portals as it was there in portal 7. Then I came to know that WDA BP is best suitable for my scenario because performance wise ABAP webdynpro are much better than Java webdynpro.


Following steps were implemented to configure ESS and MSS on SAP Portal 7.3


A) Configure SSO between Portal and ECC

B) Configure SLD on portal

C) Deploy ESS, MSS and Common parts business package on SAP Portal

D) Add ESS and MSS Alias on system object

E) Activate webdynpro Services in SICF

F) Create RFC destination IGS in SM59

G) Activation of Business Function in ECC server


A) Configure SSO between Portal and ECC


Single sign-on (SSO) is a method of access control that enables a portal user to log in once and gain access to the resources of multiple back end systems without being prompted to log in again (enter Id and password). Lot of discussion threads will be available in http://scn.sap.com so here I am not discussing about configuration procedure and process


B) Configure SLD on portal


The SLD in SAP Portal is the central source of system landscape information relevant for the management of your software life-cycle.

SLD configuration documents are available in in http://scn.sap.com


C) Deploy ESS, MSS and Common parts business package on SAP Portal

You have to download ESS, MSS and Common parts Business packages from service market place.






1)      Common parts download path


2)     ESS Business Package download path

ESS downlaod path.GIF

3)     ESS Business Package for ABAP

ESS ABAP BP download path.GIF

4)     MSS Business Package for ABAP download path. Here you need to select Add on

MSS Business package download path.GIF

5)     Required MSS Business Package

mss abap webdynpro.GIF

D) Add ESS and MSS Alias on system object in SAP portal.

System alias.GIF

system alias1.GIF


E) Activate webdynpro Services in SICF


F) Create RFC destination IGS in SM59

     IGS_RFC_DEST is required for MSS business package. If you use ABAP webdynpro then you have to maintain the RFC destinations in the ECC system to connect the IGS to SAP System. For programe ID you have to maintain IGS.<SID>

RFC destination for MSS.GIF

G) Activation of Business Function in ECC server




Ess business function.GIF

mss business function.GIF

Initially when I wanted to work on SAP Portal 7.3 integration with SAP ECC 6.0 Ehp 6 ,I hardly could find material in SCN. There was a site in http://help.sap.com, but it did not had sufficient useful information with step by step Configuration (work instruction). So I thought to share in detail about the settings required for SSO between portal and ecc systems for this Blog.

In this blog, I am explaining about system object configuration in portal, SSO configuration from portal end. Just for understanding I have taken a Scenario, which I have stated below.


Generally many SAP systems will be there in the landscape like ECC,BW,SRM,CRM and Portal, then a single sign-on (SSO) environment can help to reduce the number of passwords that users have to remember in their daily routine life.

In the portal environment, SSO eases user interaction with the many systems, components, and applications available to the user. Once the user is authenticated to the portal, he or she can use the portal to access the different SAP systems without having to repeatedly enter his or her user information for authentication


1) Creation of System object in SAP Portal


System Object is a set of connection properties to represent an external or SAP systems (SAP ECC/SRM/BW) used to retrieve data into portal iViews.


Create System Object using Template. Choose system object template as per the requirement. In my case, I selected system template- SAP system using dedicated application server.

Enter System Name, System ID, Description


2) Add System alias on system object

System alias.JPG

3) Download certificate of Portal system through NW adminnwa.JPG

4) To dowload certificate you need to select Ticketkeystore


5) Then click on export key button to get required certificate from portal server

certificate file.JPG

6) You have import portal certificate into ECC server using Transaction -strustsso2. In the certificate area click on import certificate button (green color) then browse the file which you have downloaded earlier from Portal server. Then click on add to certificate list button after that click the button Add to ACL, here you need to provide SID of portal in system ID text field and 000 as client text field.


7) Add profile parameters in ECC server using RZ10, it is

a) login/create_sso2_ticket=2

b) login/accept_sso2_ticket=1

c) icm/host_name_full= <FQDN>

Profile parameters.JPG

8) Check Single Sign-On. Go to http://<server>:<port>/irj/portal

a) System Administration – Support- Application Integration and Session Management- Test and Configuration tools

b) Under Tool, Select Transaction and Click on run.

c) Under System, Select System that you created earlier and Enter any transaction code SU3. And click on Go.

d) It should login to your backend As ABAP system without asking password.


9) Also you can verify it in system administration ,System configuration, System Landscape, then check the status

system status.JPG

Developing browser complaint application is the need of hour. Especially when majority of the platforms such as PhoneGap and SAP promote browser independent, cross platform application development. However, in this post, I am going to discuss more about how can you develop browser complaint logon page for SAP Portal 7.3. Before that, let me take your attention to coding practice you must follow when you take up SAP Portal Logon Page customization.


Logon page is one of the most commonly customized component in SAP Portal landscape. However, it is equally important to understand how logon page is coded in terms if use of <sap> tags, HTML elements, and styling. What I dislike is using inline styling. This is the area you must work on priority before you touch any other part of the code. Simply remove all inline styling and create your custom CSS. This will give you a lot of freedom with respect to application and rendering UI elements on screen.


Let us now see how can you make your logon page browser compliant.


Use browser rendering mode <meta> tags in your logoPage.JSP


Recently I published an entire post about how can you force SAP Portal logon page to render in a specific browser mode. You can read that post here - How to Set Browser Compatibility Mode in SAP Portal Logon Page


Coming back to topic, You can programmatically tell your SAP Portal logon page to render in a compatible mode. This is done by adding a <meta> tag in logonPage.JSP file. Now, add following code immediately after <head> tag.


<!doctype html>



<meta http-equiv=”X-UA-Compatible” content=”IE=8″>


This will make your logon page to render in IE 8 standard mode instead of Quirks mode. In addition, if you do not want to set browser compatibility for any specific browser version, then you suggest you to use following <meta> tag instead of above one.


<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>


This tells your browser to render your page in the latest mode available.


This is especially important as Logon page is an application servlet. Therefore, you cannot set browser compatibility property that you can otherwise set in an iView property editor.


What is PIE.htc and how to use it in your SAP Portal Logon Page?


As per PIE's official description, PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Let us consider for example, you have following piece code in your CSS file that defines border radius for various browsers. PIE is delivered in a number of different modes such as PHP, JavaScript, HTC file and so on. However, HTC is the most commonly use mode and requires very little coding. On the other hand, if you use javaScript version of PIE, you will have to manually select all elements requiring browser compliant styling with jQuery. This adds overhead in your code and needs niche programming skills as well. However, with HTC mode, all you have to do is download PIE.htc and refer this file in your CSS with a bheavior property as shown below.

Note: .myClass is a class, where as #myClass is an ID. Do not confuse between . and # while styling HTML elements.

.myClass {

background: #f1b000;

padding: 2px;

-moz-border-radius: 1em;

-webkit-border-radius: 1em;

border-radius: 1em;


If you have above class in CSS file, then any modern age browser will render nice box will rounded borders (corners), except for IE 6, 7, or 8. However, this can be fixed by using a behavior property in CSS. All IE versions, including IE 5 and later support behavior property.

Read more about behavior property -


MSDN official CSS Behavior Property Definition and Behavior shorthand property description


With a just one additional property, you can easily convert your boxed DIVs or elements to have rounded corners.


.myClass {

background: #f1b000;

padding: 2px;

-moz-border-radius: 1em;

-webkit-border-radius: 1em;

border-radius: 1em;

behavior: url(PIE.htc);



With this simple trick, your boxes will render just as you wanted to be. It does not matter what browser your users are using to access SAP Portal, rendering will be unified across browsers. Though there a lot of other properties that old IE versions do not support and I accept there can more to rendering applications across browsers to give unified user experience. However, at this point, I'd like to keep the discussion limited to some of the most important and visible CSS properties that can seriously affect user experience.


How can you use PIE in SAP Portal Logon Page?


As I mentioned in the intro of this post, I expect you to have a separate CSS file instead of inline styling. Let us now see how can you work with PIE in your logon page application.


Open logonPage.JSP in your logon page component and add a referenc to CSS in the header of the logon page as shown below.


<link rel="stylesheet" TYPE="text/css" href="<%=webpath%>assets/styles/LogonForm.css">


This is your custom CSS. From the project navigator, open CSS file in CSS Editor. Following is my CSS code for styling a DIV with class login-from.


.login-form {

  width: 300px;

  margin: 0 auto;

  position: relative;

  text-align: left; /*added for IE fix so that form can center*/

  background: #f3f3f3;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

  box-shadow: 0 1px 3px rgba(0,0,0,0.5);

  border: 1px solid #fff;

  -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;


  behavior: url(/assets/styles/PIE.htc);





Note the last property referring to PIC.htc file in the assests > styles folder of my logon page project. You can add PIC.htc file anywhere in your component but make sure that this property takes a relative URL. That means PIE.htc must be available relatively to your logon page application.


Now deploy your application and launch portal in IE to see the difference in the rendering. You will immediately notice that all boxes are now displayed with rounded corners. This is simple trick but the impact is huge on user experience.






As you can see this is the screen shot of my logon page displayed in Standards mode if IE which is done my adding a <meta> tag as I explained earlier. And take a look at new image after I add reference to PIC.htc in the same application.




Instantly you can notice that my logon form looks pretty good compared to what it was earlier.


Note: Please note the white box at the top is not part of the application. That is a removed content. Do not think why PIE did not rounded the corners of this box.


More on PIE


Behavior is not the only CSS3 property that is recognized with the help if PIE. There are some more properties such as box-shadow and gradient. You can take a look at more properties and their usage here on PIE's official website. You can also download PIE.htc from downloads section on their website here - Download PIE


Alternatives to PIE


PIE is not the only option you have when it comes to CSS3 properties. There is a whole bunch of products available out there for e.g. IE7.JS, Seletivizr, eCSStender, border-radius.htc and so on. It is completely up to you when it comes to selecting a product. However, PIE is most widely used because of its ease of integration and fewer lines of code.You can check how PIE fares compared to other products on this product comparison page of PIE website - Comparing PIE to other CSS3 products.


I hope you find this blog useful enough to read at the first place. If you think CSS3 rendering is petty issue and does not affect you in anyway, you can still read this post for the sake of awareness. If you are someone who is working on a lot of customization project, then this post will be really helpful to you and will open altogether new perspective when it comes to developing application in a right way. Let me know your opinions by commenting below.


ASUG has just announced the “call for presentations” for the upcoming ASUG Annual Conference 2014. This year, we have aligned the portal sub-topics areas to reflect the feedback we got from our customers in previous events and based on the latest SAP UI strategy.


The sub-topics in the portal track this year are:


  • Portals: Portal, Collaboration, Content Management and Search
  • Portals: Portal usability and mobile consumption of the different UI technologies (e.g. Fiori, SAPUI5, Web Dynpro)
  • Portals: Portal Implementation and integration best practices for the different portal deployment options (On-premise and Cloud)



Call for action

I would like to invite you all to submit your abstracts and share your experience with other customers – on-premise and cloud, desktop and mobile, intranet and extranet, best practices for implementation, and any other experience you can share with your fellow event participates.


Guidelines how to write a (catchy and) successful presentation proposal is provided by ASUG in the following link. One personal recommendation, there is nothing like a first impression – you must have a catchy title and share your unique experience with the product.
























How to submit

You can submit your abstract in the following link http://callforpresentations.asug.com. For any question regarding the submission process you can contact Speakers@asug.com. The deadline to submit a proposal for the event is Friday, January 10th.


Why should you submit a presentation? You get complimentary admission, the opportunity to share your knowledge, and showcase yourself and your company


As always, I am happy to help. Comment below or write me an e-mail ( Aviad Rivlin).

the next TechED event, in Bangalore this time, is about to start and I would like to draw your attention to the hands-on sessions about the Enterprise Portal portfolio. I have been working on the preparation of both sessions, so I would like to share with you some insights into the session contents and hopefully, make you curious to go and get your hands on the systems yourself.


The first session is the POP263 - Experience SAP NetWeaver Portal 7.4 in Action. The idea of this session is to enable every participant to get a broad understanding of what SAP NetWeaver Portal is about, what the benefits are and how easy it is to handle. As our experience at the last TechEDs showed that the audience in these hands-on sessions in generally quite heterogeneous, ranging from highly experienced portal experts who are looking for the newest and greatest stuff to complete newbies who want to get a first overview of the SAP portal offering, we decided to use a modular approach for our hands-on session. So that every one will be able to make the most of the 90 minutes hands-on. The session starts with the portal end user experience, showcasing our new demo framework Ozone that shows that the SAP NetWeaver Portal Framework is highly flexible and can be customized to much different user experience than what most people know as the portal standard. Check out this YouTube video to get a first impression of this portal look and feel:

After this end user section which we recommend all users to do, we have different modules to choose from - depending on your focus, e.g. a quick walk through Mobile Portal configuration, a general portal content administration exercise including the creation of RSS feeds iViews and a more detailed exercise about SAP Portal Site Management by OpenText. Ohad Levy, Yogesh Purantharan and Sridevi S will be there to answer your questions.


While POP263 will teach you how to configure your SAP NetWeaver Portal for mobile access, the focus of session POP264 - Experience the Mobile Portal in Action is on how to create content for your mobile portal, e.g. adding native mobile iViews, the Mobile Universal Work List, or mobile Portal Content Management for document access to your mobile Launcher.  In the second part, you will learn more about Mobile Homepage, a standardized single point of access for mobile applications and content. In this part, you will configure Enterprise Feeds and native mobile apps. Finally, you will have the opportunity to learn how to customize the look and feel of your mobile portal. Itay Sagiv and Ohad Levy will guide you through this exercise and give you lots of additional information around Mobile Portal.


So, if you are at TechED Bangalore, don't miss it!

This blog talks about the Portal on device branding, we have certain blogs and SAP help link for creating POD contents, but we don’t have any direct guideline for only implementing POD Branding.

The Branding on POD is not like the Portal Desktop Branding like we can just edit them in Portal Display, this is bit different then PCD theme, theme edit option is not supplied with Theme Editor.

This purely defined in Styles sheet (CSS) and LESS desktop Layout (AJAX framework pages/desktop), which are provided in different option as part of “Web Resource Repository” under Content administration.

Let’s go with actual procedure to do POD Branding.

Refer the below screen shot to locate the CSS & SAP standard layouts in Web Resource Repository.


The “default” folder contains all POD branding source objects, wherein we will need to find the related objects that need to be modified.

Any sort of requirements related the “POD Desktop Background, Logo, any other theme changes” that can be modified in CSS & LESS file as mentioned in screen shots below.


1.    Pod-2.jpg

  2.  Pod-3.jpg  .  

Note: the “Palette.less” file is provided with base color containers for all the POD layout, font & background style.

For an example, if we are changing a POD desktop background pattern, which is actually used as Image file and it’s multiplied into more than one numbers to fill the background (refer the below the following screen to locate the file).



To make the changes in CSS & LESS file, and to add the Custom related theme with Logo, we have to download the “Default” folder then we will have modify the standard them to our custom look and feel.


Eventually, the modified folder name has to be set with “Theme id” (which is currently referring in Smartphone and Tablet Desktops in Portal Content).


By default the Smartphone and Tablet Desktop are using only sap_tradeshow_plus. So, the same name needs to be set as Theme id to the Default folder.


Then upload the modified content to Web resource repository as follows.



Now, you will see a different Look and feel for your background and Logo in smartphone/Tablet Desktops

In order to validate the runtime behavior of you modified content of Smartphone & tablet.

You need to set the master rules in portal under System Administration to bring the smartphone & Tablet desktop to display.


For an optimal way, you need to create a separate User group for smartphone & Tablet.    

User Groups

To differentiate the Mobile/Tablet call, we need to create a Portal user Group for Smartphone & Tablet, so that it would not merge the content which have been created for both

It will be precisely connected if the access is granted through Portal Groups.

Smartphone_grp & Tablet_grp

Role Mapping

Two roles are required to map the Smartphone and Tablet roles, the corresponding role should be mapped with group.


Additional Reference / Links /





Web Resource repository









Hi All,


SAP notes allow customers to get:

  • Important information and updates
  • Recommendations, tips and hints
  • Solutions and workarounds for problems they are facing


Until now, there has been no organized way of providing feedback or remarks for these notes - whether it’s missing additional symptoms, prerequisites, provides a solution that is not clear or any other comment on the note.  Positive feedback is also welcome.


Introducing the Enterprise Portal Notes Feedback Category:

When you want to provide feedback on an SAP note in the NetWeaver Enterprise Portal area (component EP-PIN*), you can open a discussion in the forum.

We will use your discussions about the notes for further review and improvement of the notes.

This will have two advantages:

  • Notes will improve  and get closer to real issues
  • You, as customers, will be able to find notes more easily, understand the notes better and reach problem resolution faster


How to provide feedback on a note:

  1. Create a new discussion in the SAP NetWeaver Portal area (direct link)
  2. Enter the title: “Feedback on EP SAP Note <note number>”
  3. In the Categories area, check the Enterprise Portal Notes checkbox.
  • This is important in order for us to filter other notes and find these posts directly.







Thanks for your cooperation!



Filter Blog

By author:
By date:
By tag: