Smoothing Siebel Open UI view navigations

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”.

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.

FadeInFadeOutNext, 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

Advertisements

6 thoughts on “Smoothing Siebel Open UI view navigations

  1. this is very cool stuff!

    I had to increase the transition time slightly to make the effect visible in Chrome. Seems like my Chrome is “too fast” for 0.01s? … but with a little more it works and looks great! Thanks!

  2. Hi Jeroen,

    it looks great. However it breaks some functionality for me. For example the Task Pane (when opened from the Application Toolbar) or the Report Pane are suddenly using 100% display space.
    It seems to be related to the width and height properties of .siebui-next-fade-end.

    Can you confirm this, or is it just me?

    • Hi Ben,

      After some analysis I found the root-cause which is due to CSS:

      /********************** Page Transitions – Start ******************/
      /*********************** FLIP TRANSITION – Start ******************/
      #_sweview > div {
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      -webkit-perspective: 1000;
      perspective: 1000;
      }
      .siebui-next-flip-begin,
      .siebui-prev-flip-begin {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      width: 100%;
      height: 100%;
      }

      By changing simply the “position: absolute” to “position: static” – the vertical scroll-bar appears again in case of overflow of the view. This works fine for IE11.

      However, this does not seem to work completely fine in Firefox, where the scroll bar will remain visible (even if there is no overflow of the view).

      Since IE is corporate browser, that is fine.

      This issue is related with: Issue With Scroll Bar (Doc ID 1627088.1).

  3. Hi Jeroen,

    not sure if we’re talking about the same thing.

    After applying the “Fade In” view transition as described in your article, when I click the reports icon from the Application toolbar, the report menu takes up 100% display space.

    However I was able to fix it by commenting the width and height properties in .sieb-next-fade-end:

    .siebui-next-fade-end {
    /*width: 100%;
    height: 100%;*/
    opacity: 1;
    transition: opacity .2s ease-in;*/
    }

    The view transition still looks the same, but report and task pane do not use more space than usual.
    (tested in IE, Chomr and FF).

    However thanks for the article, it works great now 🙂

    Cheers,
    Ben

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s