How to Create Windows-8-like animations with CSS3 and jQuery in Siebel OpenUI

Read my previous post before going through this..

What we want to achieve?

Login to Siebel 2015 or 2016 Synergy Theme. When we mouse over on View Tabs in Home Screen, these tabs should get tilted on sides.
This should work for View Tabs on all screens.

Mouse-Hover from left -> left tilted
Mouse-Hover from right -> right tilted
Mouse-Hover from top -> top tilted
Mouse-Hover from bottom -> bottom tilted
Mouse-Hover in middle -> Push the tile down

Inspiration:

This is inspired by this jQuery plugin. You can find its complete documentation here..
I have made few changes in this plugin file to add this feature in Siebel.

How it works?

– add our class in target objects
– get all target objects at the time of page load
– call plugin function for all objects
– it uses CSS3 webkit-transform property
– find more on this.. http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

Installation

1.) Add tilting feature on hover on View Tabs on Home & other screens in Synergy Theme

Register TileJs file on application level

– go to Administration-Application -> Manifest Files
– add siebel/custom/TileJs as a new entry and make sure that file present at this location
– go to Administration-Application -> Manifest Administartion
– query for Type=’Application’
– copy entry with name= ‘PLATFORM INDEPENDENT’
– add our JS file with this entry

Note:-
Its very important!! You will not be able to view your newly added files in Source of Chrome Inspect element. So, don’t get confused because I did and wasted my time. Then, how can we make sure that our file loaded successfully ??
Well, just do console logging in your JS file so that you can track its loading.

Add new class in target tiles to make tilting

In this case, target tiles are the static View Tabs which we want to make tilting on hover. So, we have to add our class= ‘askmesiebel-tile’ in these view tabs.
Now, the big question is how we can add class in tabs after its get loaded but before TileJs file loading ??
– Plus we want this code to run on all screens
– Postload.js is the file what we are looking for… 🙂
– lets find out common Id/class in between all view tabs to identify
– add class in each view tabs

$('#s_sctrl_tabScreen').find('li').each(function(){
$(this).addClass('askmesiebel-tile');
});

Call Plugin JS file from postload.js
– get all objects containing our class= “askmesiebel-tile”
– call TileJs file for each object to add tilting effect
– add delay for few seconds else you will not able to find your class in any object

2.) Add tilting feature on hover on Contact Tiles in Contact Screen in Synergy Theme

Register TileJs file on application level
– you need not register twice
– same file will work for this feature as well

Add new class in target tiles to make tilting

– open Postload.js after above modifications
– lets find out common Id/class in between all contact tiles to identify
– add class in each contact tiles

$('.siebui-tile').each(function(){
$(this).addClass('askmesiebel-tile');
});

Call Plugin JS file from postload.js

– same code will work for this as well

Here is the sample Postload.js file:

Sample Postload.js file with changes required

I am looking for suggestions to further improve this feature and you guys can also share your ideas here.

You can download complete solution from here..
But you have to subscribe or share your email ids below in the comment section.

[su_divider style=”dotted”]

@skmeSiebel