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>
<html>
<head>
<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.
Results
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. :smile:
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.
- SAP Managed Tags:
9 Comments
