Monday, December 24, 2012

WebCenter Content Interface Branding for 11g - Part 2


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

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.

23 comments:

  1. Congrats for your amazing work. I wonder, it is possible to change the default color of UCM instance (the blue one, at the header) ?

    ReplyDelete
  2. The new "branding a company" will not merely want to be one of the best branding agencies, just branding a product.cannabis social media

    ReplyDelete
  3. Wonderful work can you please upload this component I need to learn this component.

    ReplyDelete
  4. Thank you for your sharing. Thanks to this article I can learn more things. Expand your knowledge and abilities. Actually the article is very practical. Thank you!
    subway surfers online

    ReplyDelete
  5. For some info on how to get MBA degree you will find if you visit this blog. I think that you should check it out

    ReplyDelete
  6. Online Custom Essay Services are affordable, with rates that are relatively lower in comparison with other Legitimate Custom Essay Writing Services since they allow learners to estimate charges when placing Legitimate Custom Writing Service Orders.

    ReplyDelete
  7. Everyone has a website these days. So, if you are a business looking to build and online reputation, you need to ensure that your Website Design is top notch. This means that you need to consult with web design professionals and have them design it according to modern standards.

    ReplyDelete
  8. Online religion research paper writing services are very difficult to complete and many students are always searching for Religion Research Paper Services companies to help them complete their custom religion essay writing services.

    ReplyDelete
  9. Finding the best Help with Medical Assignment is not easy unless one is keen to establish a professional medical assignment help & medical homework help online.

    ReplyDelete
  10. Online religion research paper writing services are very difficult to complete and many students are always searching for Religion Research Paper Services companies to help them complete their custom religion essay writing services.

    ReplyDelete
  11. Crypto-currency as a modern form of the digital asset has received a worldwide acclaim for easy and faster financial transactions and its awareness among people have allowed them to take more interest in the field thus opening up new and advanced ways of making payments. Crypto.com Referral Code with the growing demand of this global phenomenon more,new traders and business owners are now willing to invest in this currency platform despite its fluctuating prices however it is quite difficult to choose the best one when the market is full. In the list of crypto-currencies bit-coins is one of the oldest and more popular Crypto.com Referral Code for the last few years. It is basically used for trading goods and services and has become the part of the so-called computerized block-chain system allowing anyone to use it thus increasing the craze among the public, Crypto.com Referral Code.

    Common people who are willing to purchase BTC can use an online wallet system for buying them safely in exchange of cash or credit cards and in a comfortable way from the thousands of BTC foundations around the world and keep them as assets for the future. Due to its popularity, many corporate investors are now accepting them as cross-border payments and the rise is unstoppable. With the advent of the internet and mobile devices,information gathering has become quite easy as a result the BTC financial transactions are accessible and its price is set in accordance with people’s choice and preferences thus leading to a profitable investment with Crypto.com Referral Code Code. Recent surveys have also proved that instability is good for BTC exchange as if there is instability and political unrest in the country due to which banks suffer then investing in BTC can surely be a better option. Again bit-coin transaction fees are pretty cheaper and a more convenient technology for making contracts thus attracting the crowd. The BTC can also be converted into different fiat currencies and is used for trading of securities, for land titles, document stamping, public rewards and vice versa.

    Another advanced block-chain project is Ethereumor the ETH which has served much more than just a digital form of crypto-currency Crypto.com Referral Code and its popularity in the last few decades have allowed billions of people to hold wallets for them. With the ease of the online world,the ETH have allowed the retailers and business organizations to accept them for trading purposes, therefore, can serve as the future of the financial system.

    ReplyDelete
  12. Our full Lace Front Wigs are all hand made with a lace cap. They are manufactured with thin lace sewn on top of the cap. Individual hairs are then sewn onto the thin lace. Each lace wig has lace all around the unit which will need to be cut prior to securing the wig to your head. You will need to cut along the hairline around your entire head. By doing so, you will be able to wear your hair anyway you like. You can even style ponytails, up-dos, etc. Once the Lace Wigs is successfully applied, it will appear that all the hair is growing directly from your head!

    Lace front wigs are hand-made with lace front cap & machine weft at back. Lace front wigs are manufactured with a thin lace that extends from ear to ear across the hairline. When you receive the wig, the lace will be quite long in the front. Cut and style according to your preference, as you will need to apply adhesive along the front of the wig. Once the wig is applied, you will still have Lace Wigs with a very natural appearance.
    TeamWigz Provide the Best Lace Front Wigs and Lace Wigs in Johannesburg and South Africa.

    ReplyDelete
  13. We also enjoy providing b2b email lists to get other countries.The data is authorized by acquiring company information database not only from the united states but All other countries such as Canada, United Kingdom, Australia, Middle East, Singapore, New Zealand, Asia,Europe, Russia and a lot more Nations. The list is strategically segmented into the form of industry, the name of the organization, name of contact person, job title, purchase email lists contact info, the quantity of workers, and sales of their enterprise to mention a couple.
    Our searchable email listing provides you a more specific, yet relevant information to use.Not all email providers have access to each country's database. Using an global email list, you can advertise your business globally without needing to spend lots of money going from 1 nation to another. With true b2b sales leads, it is possible to build your global relationships and could mean expansion of one's business .

    ReplyDelete
  14. Internet Download Manager 6.38 Build 9 IDM Crack Patch with Serial Key download is a kind of shareware download manager owned by an American company called Tonec Inc. IDM Patch Free Download captures any type of download in an impressive time limit and then completes the download in a very short time and at a faster speed as compared to any other download manager at the moment.

    ReplyDelete
  15. Music Sustain is a music blog dedicated to sharing stories and news, exploring the past, present and future of music’s most legendary and enduring artists. rock music We cover major and emerging artists from all genres of music including rock, blues, jazz, hip-hop, punk, indie, country, metal, hardcore, pop, classic and electronic.

    ReplyDelete
  16. long term rentals in Dubai ae is one-stop destination where you can find fully furnished serviced apartments and book luxury serviced accommodation for long, mid-term and short corporate and non-corporate stays.

    ReplyDelete
  17. We are the most trusted online loan search and loan advice site in South Africa. www.friendlyfinance.co.za Find a lender in just a few minutes. Apply today!

    ReplyDelete
  18. We are the most trusted online loan search and loan advice site in South Africa. www.friendlyfinance.co.za Find a lender in just a few minutes. Apply today!

    ReplyDelete
  19. "Archie 420 Dispensary welcome anyone 21+ to stop by and have a one of a kind Marijuana experience with us.
    No trip to the Evergreen state is complete without a visit to archie 420 Marijuana dispensary.
    Also, you can Check out Midweek specials: Marijuana for beginners $2 off ANY pre-roll Tuesday and $2 off ANY 1 gram Wednesday! We accept variety forms of payments.
    The Archie's do strive to provide a broad range of quality Marijuana products to fit any budget!
    Archie's are conveniently located at our main office: 380 Quivas St, Denver CO, 80223, USA and 45 Lisbon st San Francisco California 94112 USA and.. Branch Unit in 2300 Windy Ridge Pkwy SE - Atlanta GA ,USA
    Archie 420 menu include all taxes, menu is subject to change and Items do sell very quickly.
    Finally, no Medical card is required. As a result, come to Archie's online shop and experience modern age of truly legalized marijuana and we offer a variety of strains to satisfy the most discerning of consumers. We are open 24/7 and you are always welcome."

    ReplyDelete
  20. "Archie 420 Dispensary welcome anyone 21+ to stop by and have a one of a kind Marijuana experience with us.
    No trip to the Evergreen state is complete without a visit to archie 420 Marijuana dispensary.
    Also, you can Check out Midweek specials: Legal dispensary $2 off ANY pre-roll Tuesday and $2 off ANY 1 gram Wednesday! We accept variety forms of payments.
    The Archie's do strive to provide a broad range of quality Marijuana products to fit any budget!
    Archie's are conveniently located at our main office: 380 Quivas St, Denver CO, 80223, USA and 45 Lisbon st San Francisco California 94112 USA and.. Branch Unit in 2300 Windy Ridge Pkwy SE - Atlanta GA ,USA
    Archie 420 menu include all taxes, menu is subject to change and Items do sell very quickly.
    Finally, no Medical card is required. As a result, come to Archie's online shop and experience modern age of truly legalized marijuana and we offer a variety of strains to satisfy the most discerning of consumers. We are open 24/7 and you are always welcome."

    ReplyDelete
  21. Crystal online pharmacy is a trusted online drug store with a wide range of products to suit the needs of ther clients. Crystal Pharmacy do strive to offer the best service and ship products world wide. All the products listed on their website are Available in stock. Buy Glutamine Online Expect your order to be processed Immediately when you send your request. They deal with varieties of drugs for customers satisfaction. They also cross barriers with their products and struggle hard to meet human satisfaction. When shopping with them, Be safe and secured and you will realize how swift they are with our services.

    ReplyDelete
  22. Crystal online pharmacy is a trusted online drug store with a wide range of products to suit the needs of ther clients. Crystal Pharmacy do strive to offer the best service and ship products world wide. All the products listed on their website are Available in stock. Buy Electrolytes online Expect your order to be processed Immediately when you send your request. They deal with varieties of drugs for customers satisfaction. They also cross barriers with their products and struggle hard to meet human satisfaction. When shopping with them, Be safe and secured and you will realize how swift they are with our services.

    ReplyDelete
  23. Testimonial Review of Taskade, Taskade Reviews the all-in-one collaboration platform for remote teams. Unleash your team productivity with task lists, mindmaps, and video chat.

    ReplyDelete