Siebel 15 – Simplified UI… Where Did The Application Menu Go?

The “Simplified UI” introduced along with Siebel 15 about which quite a bit has been already written and said lacks out-of-the-box the traditional Application Menu. The Simplified UI has been introduced to, well, simply the UI. More specifically as an effort to make the application easier to use and create a consistent user experience with other Oracle applications which leverage the same “simplified” design.

The obvious target are tablet deployments. The bigger icons and less clutter definitely makes it easier to navigate the UI. The Simplified UI boulders on the “traditional” Aurora UI introduced a bit more than 6 months back. Time flies. I kind of like the look and feel. But came to the conclusion that the UI has been simplified possible a bit too much for me. I really started missing the application menu.

SUIApplicationMenu2

As you might have guessed, the application menu in reality hasn’t gone. Why? Well, because any Siebel UI theme is just a style sheet and will work against exactly the same DOM. So surely, the application menu would still fly around in the DOM.

But technically speaking, this could change if you’d dive into the CRM Composer. CRM Composer allows you to use expressions on Web Templates, and hence the DOM could be presented differently depending on a selected theme. Think of it like this: with CRM Composer if the “Simplified UI” theme is selected, a web template’s expression such could use e.g. GetProfileAttr(“OUI_THEME_SELECTION”) = “THEME_SUI”) to dynamically filters items such as the application menu from the DOM, making it lighter and more agile.

SUIApplicationMenu1

And yes, there it is. The triggering CSS rule is “display: none;”. Life can be easy. Overriding the CSS rule and positioning it nicely is enough to get back a fully functional application menu. And it doesn’t look that bad neither if you ask me.

.applicationMenu {
display: inline-block;
padding-left: 50px;
}

And here you go.

SUIApplicationMenu3

Of course this override would need to be administered correctly as overriding stylesheet e.g. sui-theme-custom.css, stored in /files/custom/. Will spent a bit more time on this topic in a following post, since I have some troubles in Siebel 15 creating a custom theme. Following the usual practice, it downloaded my theme-sui-custom.css. But along with that also theme-aurora.css got downloaded which messed things up. Anyways, a quick hack would be to modify the theme-sui.css… Fair enough for prototyping!

– Jeroen

Advertisements

5 thoughts on “Siebel 15 – Simplified UI… Where Did The Application Menu Go?

  1. Hi…I was wondering if you noticed that the custom screen bar icons are available for only important screens. Many screen just display a generic icon. Is there any way we can have custom icon for each screen tab? Specifically for the custom screens.

  2. Hi,
    We wanted to have the Application menu only for Admins and Developers. So, I created a Profile attribute as an manifest expression to restrict the application menu to show up for Admins and Developers which is working fine.
    However, when I place my ‘XXX_theme-sui.css’ custome file in custom folder, I see application menu but the home pages screen Icons/ Images are missing. If replaced the file to regular folder (Files/’XXX_theme-sui.css’) , I see application menu as well as Icons/Images.
    Can you guide me whats missing?

    -Eswar

    • Most likely in your XXX_theme_sui.css you have included fonts and and images being referenced with inappropriate relative path. You custom theme is in the files\custom folder, so your path in the .css should be updated accordingly. For example:

      @font-face {
      font-family: ‘CorpoSRegular’;
      src: url(‘../../fonts/custom/corporates_regular_webfont.woff’) format(‘woff’); /* Modern Browsers */
      font-weight: normal;
      font-style: normal;
      text-rendering: optimizeLegibility;
      }

      Hope this helps.

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