Continuing from part 1 (here) ...

Building the component

Using Component Wizard, we will start a new component.

This component will be named “WCC_Interface_Branding”. The main requirement of a component name is that it be unique to the system. I usually prefix a component with the name of the customer, such that for aurionPro SENA, the component could be named “APS_Interface_Branding”. Using this convention, all custom components created for aurionPro SENA would be prefixed with “APS_” to distinguish them as created for aurionPro SENA.

For this component we will need five resources:

1. Resource – HTML Include

2. Resource – Static Table (HTML Format)

3. Template

4. Resource – default cs_string include

5. Resource – Strings – English cs_strings

Using the Component Wizard, create each of these as follows

Type of Resource	File Name	Load Order
HTML Include/String	resources/wcc_interface_branding_resource.htm	10
Static Table (HTML Format)	resources/wcc_interface_branding_static_tables.htm	10
Template	templates/wcc_interface_branding_template.hda	10
HTML Include/String	resources/lang/cs_strings.htm	10
HTML Include/String	resources/lang/en/cs_strings.htm	10

The first string resource is for the default language strings while the second holds the English version of the strings. Since the default is English, the English file is empty. It is needed only to prevent errors.

Strings

The string we want to add is the component description string. In Component Wizard,

1. Select the resources/lang/cs_strings.htm resource on the left

2. Select the Launch Editor… button on the left.
If you have not configured and editor you will get an error indicating this. If you get the error then select the Options menu and select Set HTML Editor. In Linux I set this to /usr/bin/gedit.

3. When you created the resource, a sample string was added. You can delete that.

4. Add the following within the body tags:

<@string csCompDesc_WCC_Interface_Branding@>

The WCC_Interface_Branding component alters

the web interface to change the out of the

box logo to a custom logo.

<@end@>

5. Save and close the editor

Now edit the English string file to simply state that it is a dummy file.

1. Select the resources/lang/en/cs_strings.htm resource on the left

3. When you created the resource, a sample string was added. You can delete that.

4. Add the following within the body tags:

<@string csCompDesc_WCC_Interface_Branding@>

The WCC_Interface_Branding component alters

the web interface to change the out of the

box logo to a custom logo.

<@end@>

5. Save and close the editor

Templates

Now add the templates. In Component Wizard,

1. Select the template resource on the left,

2. Then select the add button on the right to add a new template.

3. Since the templates we need are out of the box templates that we will modify, we need to select them from the dialog rather than recreate them. So in the AddIntradoc Template dialog, select the Select button.

4. Check the box to Show All.

5. Locate and select the TOP_MENUS_LAYOUT_JS template and then select OK
Note that you can sort this list by selecting the column heading.

Repeat the process to select the TRAYS_LAYOUT_JS template

The next step is to edit the templates. Select the TOP_MENUS_LAYOUT_JS template on the right and select the Launch Editor… button on the right.

It is always a good habit to include notes in your work to help others that come after you. At the top of this file I included a comment of

/* ============================================================================

   Name:        top_menus_layout.js

   Description: template is modified to change the value of the logoImage

                to point to the SENA image

   ----------

   Change History

   Rev  Date        Responsible      Comments

   ---  ----------  ---------------- --------------------------------------

    1   2012-07-05  Steve Hamilton   Original version

============================================================================ */

Locate the line with the oracle_logo.png file called out. It looks like this:

/* Header/menu bar image src values */

var logoImage = httpSkinRoot + "oracle_logo.png";

Change it to

/* Header/menu bar image src values */

/* ============================================================================

       logoImage changed to SENA image

       2012-07-05 - Steve Hamilton

============================================================================ */

//var logoImage = httpSkinRoot + "oracle_logo.png";

var logoImage = httpSkinRoot + "sena.gif";

Save and close the editor.

Repeat this for the TRAYS_LAYOUT_JS template. Add the comment to the top:

/* ============================================================================

   Name:        trays_layout.js

   Description: template is modified to change the value of the logoImage

                to point to the SENA image

   ----------

   Change History

   Rev  Date        Responsible      Comments

   ---  ----------  ---------------- --------------------------------------

    1   2012-07-05  Steve Hamilton   Original version

============================================================================ */

Locate the line with the oracle_logo.png file called out. It looks like this:

/* Header/menu bar image src values */

var logoImage = httpSkinRoot + "oracle_logo.png";

Change it to

/* Header/menu bar image src values */

/* ============================================================================

       logoImage changed to SENA image

       2012-07-05 - Steve Hamilton

============================================================================ */

//var logoImage = httpSkinRoot + "oracle_logo.png";

var logoImage = httpSkinRoot + "sena.gif";

Save and close the editor.

Resources

The next step is the resources. In Component Wizard,

1. Select the resource file (resources/wcc_interface_branding_resource.htm) on the left,

2. Then select the add button on the right to add a new resource.

3. Since the resource we need is out of the box that we will modify, we need to select it from the dialog rather than recreate it. So in the Add HTML Resource Include dialog, select the Select button.

4. Check the box to Show All.

5. Locate the home_page_static_content resource, select it and then select OK twice.

6. Select the Launch Editor button on the left.

7. Again we add a comment for those that follow. Place it outside the resource so that it will not be in the rendered pages.
locate the line

<@dynamichtml home_page_static_content@>

and replace it with

<!-- ==========================================================================

   Name:        home_page_static_content

   Description: include is modified to change the logo image and add the

                InstanceDescription variable to the headerDescription

   ----------

   Change History

   Rev  Date        Responsible      Comments

   ---  ----------  ---------------- --------------------------------------

    1   2012-07-05  Steve Hamilton   Original version

=========================================================================== -->

<@dynamichtml home_page_static_content@>

8. Next, locate these lines

<img style="margin-bottom:-5px;" src="<$HttpImagesRoot$>stellent/mailheadinglogo.gif" alt="<$stripXml(lc("wwTopBannerLogo"))$>">&nbsp;

              <$lc("wwWelcomeTo", ProductID)$></h1>

And change them to

<img style="margin-bottom:-5px;" src="<$HttpImagesRoot$>sena/sena.gif" width="72" height="36" alt="<$stripXml(lc("wwTopBannerLogo"))$>">&nbsp;

              <$lc("wwWelcomeTo", ProductID)$> - <$InstanceDescription$></h1>

Using steps 1 – 6 above, add the std_navigation_header_top_row resource to our component.

Add the comment above the resource

<!-- ==========================================================================

   Name:        std_navigation_header_top_row

   Description: include is modified to adjust the height and width

                of the logo image

   ----------

   Change History

   Rev  Date        Responsible      Comments

   ---  ----------  ---------------- --------------------------------------

    1   2012-07-05  Steve Hamilton   Original version

=========================================================================== -->

Locate the lines

html[html.length] = '<img src="' + logoImage + '" width="119" height="25" border="0" alt="' + lc("wwLogoAltText") + ' ' + lc("wwContentMgmt") + ' ' + lc("wwHome") + '" />';

And change to

html[html.length] = '<img src="' + logoImage + '" width="72" height="36" border="0" alt="' + lc("wwLogoAltText") + ' ' + lc("wwContentMgmt") + ' ' + lc("wwHome") + '" />';

Repeat for the resource std_javascript_header_functions

Add the comment above the resource

<!-- ==========================================================================

   Name:        std_javascript_header_functions

   Description: include is modified to add the InstanceDescription

                variable to the headerDescription

   ----------

   Change History

   Rev  Date        Responsible      Comments

   ---  ----------  ---------------- --------------------------------------

    1   2012-07-05  Steve Hamilton   Original version

=========================================================================== -->

Locate the lines

var headerDescription = "<$ProductLabel ? js(ProductLabel) : lc('wwHeaderProductName')$>";

And change to

var headerDescription = "<$ProductLabel ? js(ProductLabel) : lc('wwHeaderProductName') $>" + " - <$InstanceDescription$>";

Publish

Now we need to set up the image files to be published. In the Component Wizard,

1. Select the resources/wcc_interface_branding_static_tables.htm resource

2. Select the Add button

3. Ensure that

a. The resource type selected is Resource – Static Table (HTML Format)

b. The file name is the resources/wcc_interface_branding_static_tables.htm file

4. Select Next

5. Check the Merge To check box

6. Select to merge to the PublishedStaticFiles

7. Make sure theTable Name is set to WCC_Interface_Branding_PublishedStaticFiles

8. Select OK to create it

9. Select OK to open the editor

10. Add the comment

<!-- ==========================================================================

   Name:        WCC_Interface_Branding_PublishedStaticFiles

   Description: Merge table to the PublishedStaticFiles table

                to control the publish of the SENA resources

                to the Weblayout static directories

   ----------

   Change History

   Rev  Date        Responsible      Comments

   ---  ----------  ---------------- --------------------------------------

    1   2012-07-05  Steve Hamilton   Original version

=========================================================================== -->

11. Then change the table be be

<table border=1><caption><strong>

<tr>

<td>srcPath</td><td>path</td><td>class</td><td>loadOrder</td><td>doPublishScript</td><td>canDeleteDir</td>

</tr>

<tr>

       <td>publish/images/sena</td>

       <td>images/sena</td>

       <td>images:logo</td>

       <td>50</td>

       <td><$doPublish = 1$></td>

       <td>0</td>

</tr><tr>

       <td>publish/resources/layouts/Trays/Oracle</td>

       <td>resources/layouts/Trays/Oracle</td>

       <td>resources:layout:Trays</td>

       <td>50</td>

       <td><$doPublish = 1$></td>

       <td>0</td>

</tr>

<tr>

       <td>publish/resources/layouts/Trays/Oracle 2</td>

       <td>resources/layouts/Trays/Oracle 2</td>

       <td>resources:layout:Trays</td>

       <td>50</td>

       <td><$doPublish = 1$></td>

       <td>0</td>

</tr>

<tr>

       <td>publish/resources/layouts/Top Menus/Oracle</td>

       <td>resources/layouts/Top Menus/Oracle</td>

       <td>resources:layout:TopMenus</td>

       <td>50</td>

       <td><$doPublish = 1$></td>

       <td>0</td>

</tr>

<tr>

       <td>publish/resources/layouts/Top Menus/Oracle 2</td>

       <td>resources/layouts/Top Menus/Oracle 2</td>

       <td>resources:layout:TopMenus</td>

       <td>50</td>

       <td><$doPublish = 1$></td>

       <td>0</td>

</tr>

</table>

12. Save and close the editor

Next we have to set up the publish source for the component. This involves file system work as well as component wizard work. First the file system: open your file browser or terminal. Browse to the custom directory of your instance. For me, that is

/u01/app/oracle/Middleware/user_projects/domains/dev_domain/ucm/cs/custom

Here you will find the directory for your component - WCC_Interface_Branding

Change into this directory.

Now create a directory structure that mimics the srcPath of the WCC_Interface_Branding_PublishedWeblayoutFiles table we created above. Into each bottom level directory, place our sena.gif file. When you are done it should look like the following

Next, in the Component Wizard,

1. Select the Build, Build Settings menu

2. Here, select Add

3. For Entry Type, select Component Extra

4. For the Sub Directory or File, enter “WCC_Interface_Branding/publish/”

5. Select OK

6. Enter a version if not already there: such as “2012_10_12-dev(build 1)”

7. Select Advanced

a. Enter Interface, Branding as the component tags

b. Enter WCC_Interface_Branding as the Feature Extension.

c. Select OK

8. Select OK again

Enable

In Component Wizard, select Options, Enable to make the component available to the content server

Restart and Test

Restart your instance.

Once restarted log out so that you can get to the static home page and log in page for verify them

Static Home Page

This looks ok

Login page

This looks ok

Dynamic Pages

This looks ok

Conclusion

You have successfully created a component to rebrand your instance of WebCenter Content.

By the way, it also works on WebCenter Content: Records.

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

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

Monday, December 24, 2012

WebCenter Content Interface Branding for 11g - Part 2

Continuing from part 1 (here) ...

Building the component

Strings

Templates

Resources

Publish

Enable

Restart and Test

Static Home Page

Login page

Dynamic Pages

Conclusion

Monday, December 17, 2012

WebCenter Content Interface Branding for 11g - Part 1

Requirements

Analysis of the requirements

Pages to change

Location of the images

Instance Description

System changes needed

stellent/mailheadinglogo.gif

oracle_logo.png

What about the admin server?

New image considerations

Design of the component

Testing Considerations

To be Continued in part 2...