With every major release of Oracle Applications in recent years there has been a new look and feel for OAF pages. BLAF (11i), Swan (R12.1) and finally Skyros (R12.2). One would imagine that once R12.3 comes out (or even the latter end of R12.2) it will be with the Alta skin – R12.2 already has some nods towards this.
Customer response to the E-Business Suite look and feel certainly is a mixed bag. Many dislike the washed out feel of Swan, some feel BLAF is far too dated and others simply want their ERP system to match their corporate branding.
The Oracle Forms modules are pretty much how they come – there are number of different colour themes you can apply such as red, blue, purple and green, however there isn’t really a great deal to change. OAF pages however are somewhat different. They do have a very distinct look and feel. Fortunately, it is possible to customise these to great lengths, however unfortunately it’s not all that intuitive. Hopefully this blog will help get you started. I will be using an E-Business Suite 12.2.4 vision instance, simply because it’s what I have to hand as a pre-built VM on my laptop. The same applies to all releases though.
First you need to give yourself the Customising Look and Feel Administrator responsibility. It only has one option.
Once we enter the responsibility we will choose Create Look and Feel
Depending on the version of EBS you’re using, the options you’ll see for the base look and feel will vary. I’d suggest choosing simple-desktop to begin with.
Clicking Next takes us to the page where everything is done. However before I jump into that (we’ll come back to it shortly) we will click through and save the look and feel so we can demonstrate the starting point.
Ignore the preview options and click finish.
On 12.2 we get a nice message telling us what to do next – which is to set the profile value Oracle Applications Look and Feel.
So let’s go and do that for our user.
We then log out and back in again. You may need to clear the mid-tier caches although I have never found the need to. I have found though that I sometimes need to clear my browser cache. Now we’re in… But wait a minute… Eeeuuurrggghhhh – what has happened here??
That I’m afraid is the simple theme! By default it’s erm… green… and it doesn’t have many of the icons used in the original Skyros theme. Let’s start making that look a little prettier. Back to the Customising Look and Feel Administrator responsibility, but this time we choose to Update the Look and Feel we saved previously. You will see we have a list of components and then some styles below. Note – At this point I would recommend switching back to the original look and feel until you have your own a bit further developed as it can be a bit hard on your eyes using the default colours.
This is where the complications arise. I’ll try to explain with a few simple examples here, however the key is absolutely to plan your theme out beforehand. Don’t think in terms of colours, i.e. I want my text white and my background red, instead you need to think in Styles, such as I have a dark corporate colour and I will use that as my background, and I will use my lighter corporate colour as my text. That way we can reuse styles, and change management becomes a lot easier. you will see there are three sections on this screen.
- Named Styles – A set of properties/attributes. A style can either contain base attributes (CSS style) or reference other styles; or a mixture of the two.
- Selectors – These are what the items in the page reference – like CSS classes but instead of referring to attributes such as colour they can refer to your Named Styles
- Icons – Kind of self-explanatory – they are… icons!
The Components are generally self-explanatory too, where we have specific types of object and also general (global) styles applied across the board.
Ok, so let’s make some changes. Suppose we want our default heading colour to be a nice shade of blue. There’s two ways I can do this. The first would be to modify the named style, meaning any existing references to that style would pick up the new value. The second is to create a new named style, and change my selectors to point to that new style. The latter is the more “pure” way of doing it, because we are not modifying seeded styles. However given that the seeded style is being applied only to our custom look and feel, that isn’t too much of a worry. So we’ll just go ahead and do that. 🙂
The difficult bit here is working out what styles are applied to what objects on a page. You might spot a style that looks like it will do just what you want, however upon trying you are disappointed to find it hasn’t had the desired effect. Unfortunately that’s just the way it is – there’s a lot of trial and error involved!
First I pick the component header – I can now see that there is a style HeaderText that is inheriting values from a global style Dark Foreground. The Selectors tab show there are multiple usages:
We can see that each header selector is using both the header text style and a different one for font size – because we want different sized headers of course. Back to our two options then – do we modify the Dark Foreground style or do we modify the header text style. This is back to the point I made earlier of thinking in styles and not individual colours. However as this is just a demo I’ll modify the header text style. Note that a style can be modified to inherit the properties of one or more other styles (best practice) or they can have any valid CSS attributes applied directly to them.
If we click the Refresh button we now see the effect this will have.
Next let’s make our tables look a bit different. I want to set the heading titles to be the same colour as the previous headings. There are a number of different selectors depending on the type of table heading, however by selecting the table component and then the selectors tab we can choose those appropriately. You can see that the current style in use for colour is DarkForeground. Let’s change that. Did you recognise that in the example we used earlier, the default style was in fact DarkForeground? And so if we had planned it all correctly and thought in styles then we would have just changed then then instead? 🙂
Now we see that those have changed, and possibly a few other components too (as we have changed the base level DarkForeground style rather than explicitly setting the colour of our headings).
So as you can see, there’s a LOT to do to get everything looking as you wish, however it can be done with time and patience. It’s also worth pointing out here a rather cool feature which is offsetting another style by Hex amount. So if we have a style say “xxDarkText” and we want another called “xxLightText” then we don’t need to specifically state the colour of the xxLightText style – we can just say “It’s this much lighter than the xxDarkText style”. That is done by using the following: +#555555 where #555555 is the hex code we wish to offset by and we apply the xxDarkText style. So if xxDarkText has colour #AA3300 then our offset of +#555555 will give a colour of #FF8855. This works really well for where you want to have lighter/darker versions of a particular colour because it minimizes maintenance and make the style far more adaptable.
It does actually get a lot more complicated than this – you can write customer renderers to alter how the components are actually rendered on a page. For further in-depth information, see The Oracle Documentations.
So clearly there’s a lot more to do to get something workable that the quick few changes in this demo, but if we visit an OAF page we can see it’s already starting to take some shape.
If anyone does anything really nice looking (or has already) then it’d be great to know – drop a message in the comments. 🙂