The default behavior Siebel respond to view navigations seems a bit odd if you look at it closely.
You see more or less the UI destroying the current view while rendering the new view.
Not very nice at all. But… there is a nice and simple solution for it using view transitions.
View transitions? You find these under “User Preferences – Behavior”.
A couple of default transitions are defined (more for fun than for anything else…). But adding one is pretty straight-forward.
What does it require? One LOV and a bit of CSS. That’s all :-)
Just add a LOV as per below. Important is the Language Independant Code. I choose “FADE” as the LIC for a “Fade In Fade Out” transition.
Next, define the transition. You can build on the existing ones if you like.
A “transition” occurs when you leave one view and move to the next. By default, nothing special happens. The new view is loaded into the same div element as the old view. By selecting a transition, some alternative functionality is activated which first copies the existing view content to a temporary div and then loads the new view into the a new div. The way in which the the old div then switches to the new div is called a transition and is something over which you have control using CSS.
The primary view content is always held in a div with the id “_svf0“. Once a transition is in effect, the contents of “_svf0” are copied to “_svf0_temp“. Then a set of CSS classes are applied in the following order:
_svf0_temp
siebui-prev-<trans>-begin
siebui-prev-<trans>-end
_svf0
siebui-next-<trans>-begin
siebui-next-<trans>-end
<trans> is set to the LIC of the selected transition after converting to lower-case.
The CSS to be added to your custom theme:
.siebui-prev-fade-begin {
width: 100%;
height: 100%;
opacity: 1;
position: absolute;
visibility:visible;
}
.siebui-prev-fade-end {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .01s ease-out, visibility 0.01s linear;
visibility: hidden;
}
.siebui-next-fade-begin {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
}
.siebui-next-fade-end {
width: 100%;
height: 100%;
opacity: 1;
transition: opacity .01s ease-in;
Now, make sure you clear your browser cache, activate the new transition (User Preferences) and see the effect. The performance penalty is zero to none in my own testing. I have asked Oracle development to make this default behavior in IP2014, as it benefits all customers. It makes rendering much more appealing to the eye ;-)
Jeroen
