Saturday, September 30, 2017

Drilldown on Hyperlink / Detail tabs in Siebel OpenUI

Siebel OpenUI Product behaviour:

In Open UI ,whenever a User drills down in a list applet or clicks on detail tabs, destination view is automatically scrolled down to the middle of the page which is as per the expected behaviour of the product. 
If User drills down on more info,the application will focus on more Info Applet.


Business Concern

When a User tries to drill down on customer entity or clicks on detail tabs, it always navigates to the bottom page or lower applet in siebel openUI. Business has raised the concern that they have to scroll up to see who is the customer and against which customer they are creating activity or service request. It is adding extra clicks also it is time consuming and frustrating . Many people has raised this concern in oracle community.



HI Activex application behaviour

In previous HI application ,drill down always resulted in user being navigated to the upper side of the page. Business/user is used to with this functionality and wanted it to be present in the New Application also .

One of the solution to achieve the expected focus on applet can be achieved with view user property.
View User Property: DefaultAppletFocus
Value:Your Applet Name

but setting this view user property for each and every view is tedious and impossible job .

Javascript solution to scroll the page UP



We may use scroll for view set to top to always set top applet visibility. Extending postload event to set the scroll , we can achieve the focus on upper applet.

Below piece of code has actually made it possible in our project to scroll the page up with default focus on upper applet always without any manual intervention. in Siebel OpenUI.


$('_swecontent > div').removeAttr('style');
$('_sweview').animate({scrolltop: 0}, 'fast');
$('_swecontent > div').css('height', '100%);

Hope this will help business and save lot of time in your projects as well :)



Wednesday, September 13, 2017

Automate minification of JS and CSS in one click

Minification of JS and CSS files is one of the important performance improvement parameter which Oracle recommends. Also by web standards, all the files (JS/CSS) deployed on production servers should be minified.

First of all, we can start with basics. What is minification? 
Minify or Minification of files means removing extra spaces, tab spaces, gaps, comments and redudant code lines. By removing lines of code which are added only for readibility purposes, we decrease the overall size of the files.

With size being decreased of all files, it decreases total load on network. Which in turn improves server performance and loads application faster.

Siebel OpenUI comes with lot of javascripts. Javascripts provided by siebel are already minified. However, for all the custom javascripts ( PR/PM/Third party plugins) created by developers of Siebel OpenUI for their clients needs to be minified.

There are few options to minify files:
1. Use online tools which can minify files. However, there is a risk involved. The files are uploaded on third party servers and the business logic written exclusively for your clients can be shared on online portals. There is huge business risk. To avoid it, there is another option as mentioned in point

2. Manually minify all files on your local PC: Removing comments, spaces, gaps and redundant code lines manually - each file is huge amount of task. Also with manual intervention, the chance of mistakes increases drastically. Developers can by mistake remove lines which can break functionality.

Hence, We would like to present you a better option - It combines both the points: Automatic minification of all JS and CSS files in just one click. It happens in your local windows machine OR in your Linux/UNIX servers. Hence there is no risk of deploying codebase on external 3rd party servers.

Here's the step by step Tutorial :

Step 1: Download YUICompressor Jar file. 
To Download the file, Click here
This is again Oracle recommended tool and hence you can use it without giving it another thought.

Step 2: Create Batch Script OR Shell script:

=> Batch Script:
If you are using Windows machine in your local or server, you can write batch script which will help you run one click minification.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
set yui="<Location of YUI Jar File downloaded above>"
set css=<Location of CSS files present:Example: D:\Siebel\Minify\CSS>
set js=<Location of CSS files present:Example: D:\Siebel\Minify\JS>
set css_min=<Location where Minified files will be stored after Minification:Example: D:\Siebel\Minify\CSS_min>
set js_min=<Location where Minified files will be stored after Minification: Example: D:\Siebel\Minify\JS_Min>
set jsext=.js
set cssext=.css

pushd %css%

for %%b in (*%cssext%) do java -jar %yui% --type css %%b > %css_min%\%%b

pushd %js%

for %%a in (*%jsext%) do java -jar %yui% --type js  --nomunge --preserve-semi  --disable-optimizations %%a > %js_min%\%%a

Store this code in .bat file and Run this file from any location. In one click of this batch script, all the JS and CSS files will be minified and store in location mentioned by you.

This Code will go through all the CSS and JS files one by one and minify it. The process is fast too and it takes less than 5 seconds to minify 10 JS files.

To know more about --nomunge --preserve-semi  --disable-optimizations parameters used, you can check YUICompressor Documentation here

=> Shell Script:
If you wish to use this on linux/UNIX servers, here's the code you can write in shell scripting -> .sh files.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
yui="/application/siebel/Minify/yuicompressor-2.4.8.jar"
css=/application/siebel/Minify/CSS_Custom
js=/application/siebel/Minify/PM_PR_PW_CUST
css_min=/application/siebel/Minify/CSS_Custom_MIN
js_min=/application/siebel/Minify/PM_PR_PW_CUST_MIN
minify_path=/application/siebel/Minify
jsext=.js
cssext=.css

cd $css
 
for filename in $css/*; do
file=$(basename "$filename") 
java -jar $yui --type css $file> $css_min/$file
done

cd $js

for filename in $js/*.js; do 
file=$(basename "$filename")
java -jar $yui --type js --nomunge --preserve-semi  --disable-optimizations $file> $js_min/$file
done

cd $minify_path

This is just sample code base. You can obviously improve the shell or batch script as per your coding requirements.

Also, you can set the variables like yui,css,js above as per the location in your server where your files are stored. You can also automate this with your cron jobs and run on regular intervals. Or just run on demand and it will minify all the files in one GO.


Benefits: 
=> It happens automatically. No Manual Intervention needed. Just one click and all your custom CSS and JS files will be minified quickly.
=> Not OS dependent. You can run the code in Windows or Linux or UNIX environments.
=> Completely safe and No Risk. It happens in your client network and their environment hence, code is not exposed in third party online websites.
=> Fast and Secure. Oracle Recommended Tool.
=> Possibilities to automate this batch or shell script during deployments via Jenkins or other pipeline automation tools.

Hope this saves lot of time in your project for some other productive work!

Thursday, September 7, 2017

Performance fixes for Apache Web server in Siebel OpenUI

Major challenges which customers generally face when deploying OpenUI is performance. Below tips can help solve performance issues from web server side.

If you are on Apache web server, you can follow the below settings which you need to do in httpd.conf file. Generally it is placed in /etc/httpd/conf  in your server but the path can vary as per your architecture.

1. GZip Compression:

GZip compression compresses all the files sent to browser from server which reduces the size of total request and hence, decreasing the loading time.

  • Step 1: Load the modules

You will be required to load the deflate module as this module is not compiled by default. Following code must be there in httpd.conf file :

1
LoadModule deflate_module modules/mod_deflate.so


  • Step 2: Once the module is loaded, add the following code in below httpd.conf file: 


1
2
3
4
5
6
7
8
#Set to gzip all output
SetOutputFilter DEFLATE

#exclude the following file types
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|iso|tar|bz2|sit|rar|png|jpg|gif|jpeg|flv|swf|mp3)$ no-gzip dont-vary

#set compression level
DeflateCompressionLevel 9


This code will compress all the files except it will exclude all the files types mentioned above. These files are already compressed and hence, need not be required to compress again.

We have set to compression level 9. But you can select the compression level between 1-9.



2. Disable Entity Tags

Entity tags are responsible to check whether the version of a particular file on browser matches with the same file on server. If we disable the entity tags, it will stop checking server everytime session loads. This saves lot of http request on server.

To disable entity tags, place the following line of code in your httpd.conf file

1
FileETag None

3. Expires Headers:

If we disable entity tags then it will stop the sync between server and browser and any new changes on server will not be synced with browser cache. Hence, we will expire headers which will expire the cache stored in the browser and it will fetch the latest files from server cache to browser.

To enable this feature, first two apache modules needs to be loaded. Add the below code in httpd.conf file:


1
2
LoadModule headers_module modules/mod_headers.so
LoadModule expires_module modules/mod_expires.so

Once the modules are loaded, add the below code in your httpd.conf file


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
ExpiresActive On
<IfModule mod_expires.c>
ExpiresByType text/css "access plus 5 days"
ExpiresByType text/javascript "access plus 5 days"
ExpiresByType image/gif "access plus 5 days"
ExpiresByType image/jpg "access plus 5 days"
ExpiresByType image/png "access plus 5 days"
ExpiresByType application/x-shockwave-flash "access plus 5 days"
ExpiresByType application/x-javascript "access plus 5 days"
AddType image/x-icon .ico
ExpiresByType image/x-icon "access plus 5 days"
</IfModule>

You would require to bounce the web-server once changes are done and perform clear cache in your browser. Once that is done, it will start taking these changes.

However to check if these settings are running fine, you need to run a free Google Chrome/Firefox extension : YSlow analyzes web pages and why they're slow based on Yahoo!'s rules for high performance web sites.


Hope the above settings increase your performance for your Siebel OpenUI Application

.