Monday, December 17, 2012

WebCenter Content Interface Branding for 11g - Part 1


This component is not much in terms of complexity but it is called for by nearly every client I have ever worked with. The primary objective: Can you change the Oracle logo to our logo?
Long ago it also occurred to me that there is another thing that would be handy as well: tell the user what instance they are logged into. Typically this is not an issues because most users will be in the production instance, and in truth, most of them are not aware of the development and testing instances. But after seeing a team member get confused on the instance and begin to test in production, I decided that the component needed to also state the instance name as well.

Requirements

So the requirements of this component are two:
1.       Change the logo to the customer’s logo
2.       Add the instance name to the heading
Static Home Page


Login Page


Dynamic Pages


Analysis of the requirements

By heading we mean to change this part of the interface that is common to both the top menus and the trays layouts:

The Oracle logo needs to change and the product name (“WebCenter Content”) will be extended to add the value of the environment variable InstanceName to it. The result will be the following heading:

Obviously we need to have the new logo image. But we also need to know where the other parts of the puzzle are.

Pages to change

The logo and heading appear on three pages:

·         The static home page

·         The login page



·         The dynamic page

On the dynamic page the heading is the same for the trays layout and the top menus layout.

Location of the images

By viewing the image information (in FireFox this is a right click – View Image Info) on the three pages we see that the images are as follows:
·         The static home page
o   http://dev:16200/cs/images/stellent/mailheadinglogo.gif
·         The login page
o   http://dev:16200/cs/resources/layouts/Trays/Oracle/oracle_logo.png
o   http://dev:16200/cs/resources/layouts/Top%20Menus/Oracle/oracle_logo.png
·         The dynamic page
o   http://dev:16200/cs/resources/layouts/Trays/Oracle/oracle_logo.png
o   http://dev:16200/cs/resources/layouts/Top%20Menus/Oracle/oracle_logo.png

Instance Description

Lastly, the Instance Description is an environment variable in the config.cfg file for the instance and can be set by manually editing the file or by using the SystemPropertiesapplet for the instance.
o   InstanceDescription=Development instance for CS

System changes needed

In order to accomplish the requirements for this component we will need to research and locate the templates, resources, queries, services and other parts of the system that require change.
My method is to start with what we know and go from there. What we know is the image names. So the first thing is to search the templates and idoc resources for the image file names. In 10g these were in the …/shared/config directory. In 11g, these have moved and are now in the WebCenter Content Home (typically Oracle_ECM1) under the …/ucm/idc/resources/core directory. My development instance in installed in a linux OS, so I can open a terminal to that directory and use grep to locate the files containing these image file names.

stellent/mailheadinglogo.gif

This image is called out in the following templates
·         ./templates/reviewer_mail.htm
·         ./templates/subscription_mail.htm
·         ./templates/contributor_mail.htm
·         ./templates/pr_publisher_mail.htm
·         ./templates/clbra_mail.htm
·         ./templates/query_notification_mail.htm
·         ./templates/reject_mail.htm
·         ./templates/error_page.htm
·         ./templates/pr_contributor_mail.htm
It is also referred to in the home_page_static_content resource in the ./idoc/std_page.idoc file.
This actually presents a small question that I would validate with the client. The requirement is the heading logo in the web pages. There is no mention of the logos in the various mail templates. So if they wish these to change then I would amend the requirement to include them. For this component we will leave these template changes to the reader as an exercise to extend the component. This article will only change the resource in the std_page.idoc file.

oracle_logo.png

This image is referred to in two templates:
·         ./templates/top_menus_layout.js
·         ./templates/trays_layout.js
In these templates, a variable (logoImage) is set to the image name. So we grep for the logoImage variable and find that it is in the std_nav.idoc file in thestd_navigation_header_top_row resource.
I also noticed that this same resource sets up the entire header row, including the description we want to adjust. It is in a variable called headerDescription.  Greping for this locates it in the std_javascript_header_functions resource of the std_page.idoc file.

What about the admin server?

The Oracle logo obviously appears in the admin server pages as well. But I have never had a client that wanted these pages to be changed since only the administrators would ever see them. But for completeness of this analysis we will include this as well. Using the same logic as the main interface analysis, the image used is the casbanner.png. And using grep to locate it, we find it in the admin_page_begin resource of the ./idoc/admin_page.idoc file.
Like the mail templates above, this change will be left to the reader as another exercise to extend the component.

New image considerations

When we replace the logo images we need to consider the shape of the image being replaced. The original images are
Image
width
height
mailheadinglogo.gif
133
19
oracle_logo.png
119
25
casbanner.png
119
25

When we consider replacing these with our new logo, it would be convenient if the new logo matches these dimensions but that is not always the case so we will need to keep that in mind when we make the component so that we maintain the aspect ratio of our new image.
We could also consider a component that would simply overwrite these images with our new image.  That would work as well but it would require that aspect ratios match exactly in order for layouts to be maintained properly.

Our new image, , is 200 x 100 in a file named sena.gif.

Design of the component

The analysis above indicates that our design is relatively simple. There will be three primary parts to the component:
1.       Templates – the top_menus_layout.js and the trays_layout.js templates will be overridden to use the new image.
2.       Resources
a.        the the home_page_static_content resource will be overridden to include the new image and its size as well as the page description
b.      std_navigation_header_top_row will be overridden to adjust the logo image size
c.       std_javascript_header_functions will be overridden to adjust the description
3.       Publish – the new images will be published to the weblayout directory structure to support the templates.
It is possible that during the creation and testing of the component that other templates or resources may be impacted.

Testing Considerations

As with any component, any time an oPatch is applied or the software is upgraded, this component should be tested. For this component it is relatively simple to regression test. Simply pull up the overwritten templates and resources and make sure that they are the same with exception of the change made.
Other than that, the standard testing is sufficient: no errors in the Content Server logs or in the Server Output.

To be Continued in part 2...