Siebel CRM IP2014: Custom Theme Reborn

Siebel IP2014 didn’t only introduce a new Open UI theme; it also introduced a new way to deploy custom changes - Manifest Administration.

As you know Oracle released the new Siebel IP2014 last November with a range of new enhancements including new redesigned User Interfaces and a responsive Web Design framework (https://blogs.oracle.com/emeapartnercrmod/entry/siebel_crm_innovation_pack_2014). One of the first things anyone notices when they install Siebel IP2014 though is the brand new Aurora theme. Aurora is the new global theme for Siebel Open UI designed to be fully responsive across all devices. The new Aurora theme is very sharp and minimalistic and it provides an enhanced user experience.

Siebel IP2014 Aurora Theme

Fig 1 – Siebel IP2014 Aurora theme

The previous ‘Gray’ and ‘Tangerine’ themes are no longer included in IP2014 and from our experience of upgrading Siebel to IP2014 we have also found some issues with custom themes not fully working due to the way the custom theme files are referenced as well as some changes in the HTML definitions.  In this blog, we look at an example of the issues and an approach to resolve them, taking a custom theme that we at Boxfusion created in IP2013:

Boxfusion Siebel Open UI Custom Theme Before Upgrade

Fig 2 - Siebel 8.1.1.11 Boxfusion custom theme

Having a completely custom theme is fully supported by Oracle but reinstating a previously used custom theme can turn out to be quite a challenge.

Selecting a custom, or Siebel 8.1.1.11 theme, via the User Preferences – Behavior view in IP2014 will result in the Aurora theme being rendered as the default theme. This is due to the fact that there is no reference to the themes’ files and thus they cannot be loaded.

Let’s look at the changes that need to be made to get our custom theme working in IP2014.

Fixing the Custom Theme

There are two main tasks we need to perform in order to get our custom theme back up and running:

1. Create the Manifest Definitions

In IP2014 the theme.js file is no longer used to specify your custom theme and css files. This is now done via the Manifest Administration Screen. The first step is to migrate all our custom files to the correct folders and ensure that our theme is added to the OUI_THEME_SELECTION list of values.

Next we have to navigate to Site Map > Administration Application > Manifest Files view and add our custom files. After we have added all the files we need we go to the Manifest Expressions view and add an expression to make our custom theme the default theme for the application. Make sure in this step that your expression includes the following information:

Name: Internal Service Expression: LookupName (OUI_THEME_SELECTION, Preference ("Behavior","DefaultTheme")) = "BCL_WHITE_ACCORDION"

After we created our expression we can move to the Manifest Administration view and create our UI Object Definition. We have to create a new record of [Type] = ’Application’, [Usage Type] = ’Theme’ and [Name] = ’PLATFORM DEPENDENT’. In the Object Expression list we add a subexpression using the expression we created earlier and a subexpression that has its expression blank. In the Files list we then add our custom files for our theme. Our Manifest definition now looks like this:

Siebel IP2014 Manifest Definition View

Fig 3 - Manifest Administration view - Manifest Definition

Finally we can now pick our custom theme by navigating to Tools > User Preferences > Behavior and selecting the desired values for the ‘Navigation Control’ and ‘Theme’ fields. We saved our changes, logged out from the application and then logged back in to find our custom theme now back in place:

Siebel IP2014 Boxfusion Custom Open UI Theme After Upgrade

Fig 4 - Siebel IP2014 Boxfusion custom theme migrated from 8.1.1.11

2. Update the Cascade Style Sheets

Now that our custom theme is back in place you might have noticed that it doesn’t look quite like it used to. This is due to the changes in the HTML definitions after the IP2014 upgrade. Lots of the elements we are referencing in our custom css files are no longer caught by our scripts due to changes in their class or other parameters that might have been modified by the upgrade. The next step is to start resolving all of these issues.

All modern browsers include some tools to support development and debugging. We are using Chrome here and we can access the Developer’s Tools by pressing F12 or right clicking on an element and selecting the inspect element option. For example, to look at the applets’ titles, right click the title of an applet and inspect the element. This will show us the element’s definition. Here are the definitions for the same element for 8.1.1.11 and IP2014:

oldClass

Fig 5 - Applet Title element definition on Siebel 8.1.1.11

newClass

Fig 6 - Applet Title element definition on Siebel IP2014

As you can see the class of the td element has changed in IP2014. The class of the element is referenced in our custom css file to modify the way this element looks. Since the class has changed, but our css definition has not, this element is no longer modified by our theme. That is the very reason that our custom theme, even though it is reinstated, no longer looks as it used to in 8.1.1.11.

In order to make the applet titles look like they did in 8.1.1.11 we have to find the class reference in the theme css file and replace it with the new class ‘siebui-applet-title’. New elements that previously did not exist have also been introduced with IP2014 (the Communications and Settings Icons on the top menu bar for example). For these elements you will need to add brand new definitions in your custom theme’s css file in order to alter them.

CustomThemeBeforeUpgrade

Fig 7 - Siebel IP2014 Boxfusion custom theme after CSS changes

Finding and correcting all those references will bring our custom theme back to its original state. The time and effort it will take will vary depending on the level of customizations you have introduced with your theme.

Summary

IP2014 introduced a new way to deploy custom changes - this is now done via the Manifest Administration view - providing a much clearer and easier process. Using this process we can reinstate custom themes but certain steps do need to be followed to make sure that the theme will be fully functional.  The level of customization your old custom theme is introducing will determine the level of effort involved in making it fully functional again. Therefore whether it is easier to use an existing theme and amend it to be functional in IP2014 or design a new theme based on the IP2014 Aurora theme can only be answered  on a case by case basis.

Learn More

Look out for our future blog posts about Siebel and IP2014 or explore our other Open UI blog posts to gain an understanding of how else you are able to exploit the enefits of Open UI.

Alternatively, you can read more about our OpenUI Services here or contact us for further information!